diff --git a/app/soapbox/features/ui/components/login_modal.js b/app/soapbox/features/ui/components/login_modal.js new file mode 100644 index 000000000..3f3e7a1fa --- /dev/null +++ b/app/soapbox/features/ui/components/login_modal.js @@ -0,0 +1,66 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; +import { Link } from 'react-router-dom'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import Button from '../../../components/button'; +import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms'; + +const messages = defineMessages({ + username: { id: 'login.fields.username_placeholder', defaultMessage: 'Username' }, + password: { id: 'login.fields.password_placeholder', defaultMessage: 'Password' }, +}); + +export default @connect() +@injectIntl +class LoginModal extends ImmutablePureComponent { + + render() { + const { intl, isLoading, handleSubmit } = this.props; + + return ( +
+
+
+
+
+ +
+
+ +
+

+ + + +

+
+
+
+ +
+
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index b6cfa5737..4f27024c1 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/app/soapbox/features/ui/components/modal_root.js @@ -13,6 +13,7 @@ import FocalPointModal from './focal_point_modal'; import HotkeysModal from './hotkeys_modal'; import ComposeModal from './compose_modal'; import UnauthorizedModal from './unauthorized_modal'; +import LoginModal from './login_modal'; import { MuteModal, @@ -37,6 +38,7 @@ const MODAL_COMPONENTS = { 'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }), 'COMPOSE': () => Promise.resolve({ default: ComposeModal }), 'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }), + 'LOGIN': () => Promise.resolve({ default: LoginModal }), }; export default class ModalRoot extends React.PureComponent { diff --git a/app/soapbox/features/ui/components/profile_dropdown.js b/app/soapbox/features/ui/components/profile_dropdown.js index abb257852..c53533d7f 100644 --- a/app/soapbox/features/ui/components/profile_dropdown.js +++ b/app/soapbox/features/ui/components/profile_dropdown.js @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -// import { openModal } from '../../../actions/modal'; +import { openModal } from '../../../actions/modal'; import { fetchOwnAccounts } from 'soapbox/actions/auth'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -11,6 +11,7 @@ import { logOut, switchAccount } from 'soapbox/actions/auth'; import { List as ImmutableList } from 'immutable'; const messages = defineMessages({ + add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' }, switch: { id: 'profile_dropdown.switch_account', defaultMessage: 'Switch to @{acct}' }, logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' }, }); @@ -62,6 +63,11 @@ class ProfileDropdown extends React.PureComponent { }; } + handleAddAccount = e => { + this.props.dispatch(openModal('LOGIN')); + e.preventDefault(); + } + componentDidMount() { this.props.dispatch(fetchOwnAccounts()); } @@ -84,6 +90,7 @@ class ProfileDropdown extends React.PureComponent { menu.push(null); } + menu.push({ text: intl.formatMessage(messages.add), action: this.handleAddAccount }); menu.push({ text: intl.formatMessage(messages.logout, { acct: account.get('acct') }), to: '/auth/sign_out', action: this.handleLogOut }); return ( diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index e64965da4..a4c82d516 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -193,7 +193,8 @@ .onboarding-modal, .error-modal, -.embed-modal { +.embed-modal, +.login-modal { background: var(--background-color); color: var(--primary-text-color); border-radius: 8px;