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;