Start building LoginModal

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 (
+      <div className='modal-root__modal login-modal'>
+        <form className='simple_form new_user' method='post' onSubmit={handleSubmit}>
+          <fieldset disabled={isLoading}>
+            <div className='fields-group'>
+              <div className='input email user_email'>
+                <input
+                  aria-label={intl.formatMessage(messages.username)}
+                  className='string email'
+                  placeholder={intl.formatMessage(messages.username)}
+                  type='text'
+                  name='username'
+                  autoComplete='off'
+                  required
+                />
+              </div>
+              <div className='input password user_password'>
+                <input
+                  aria-label={intl.formatMessage(messages.password)}
+                  className='password'
+                  placeholder={intl.formatMessage(messages.password)}
+                  type='password'
+                  name='password'
+                  autoComplete='off'
+                  required
+                />
+              </div>
+              <p className='hint subtle-hint'>
+                <Link to='/auth/reset_password'>
+                  <FormattedMessage id='login.reset_password_hint' defaultMessage='Trouble logging in?' />
+                </Link>
+              </p>
+            </div>
+          </fieldset>
+          <div className='actions'>
+            <button name='button' type='submit' className='btn button button-primary'>
+              <FormattedMessage id='login.log_in' defaultMessage='Log in' />
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+}

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 {

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 (

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;