Merge branch 'mfa-messaging-fixes' into 'develop'

MFA improvements

See merge request soapbox-pub/soapbox-fe!985

app/soapbox/actions/auth.js

@@ -143,6 +143,7 @@ export function otpVerify(code, mfa_token) {
       code: code,
       challenge_type: 'totp',
       redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
+      scope: getScopes(getState()),
     }).then(({ data: token }) => dispatch(authLoggedIn(token)));
   };
 }

app/soapbox/actions/mfa.js

@@ -60,10 +60,12 @@ export function confirmMfa(method, code, password) {
   return (dispatch, getState) => {
     const params = { code, password };
     dispatch({ type: MFA_CONFIRM_REQUEST, method, code });
-    return api(getState).post(`/api/pleroma/accounts/mfa/confirm/${method}`, params).then(() => {
+    return api(getState).post(`/api/pleroma/accounts/mfa/confirm/${method}`, params).then(({ data }) => {
       dispatch({ type: MFA_CONFIRM_SUCCESS, method, code });
+      return data;
     }).catch(error => {
-      dispatch({ type: MFA_CONFIRM_FAIL, method, code, error });
+      dispatch({ type: MFA_CONFIRM_FAIL, method, code, error, skipAlert: true });
+      throw error;
     });
   };
 }
@@ -71,10 +73,12 @@ export function confirmMfa(method, code, password) {
 export function disableMfa(method, password) {
   return (dispatch, getState) => {
     dispatch({ type: MFA_DISABLE_REQUEST, method });
-    return api(getState).delete(`/api/pleroma/accounts/mfa/${method}`, { data: { password } }).then(response => {
+    return api(getState).delete(`/api/pleroma/accounts/mfa/${method}`, { data: { password } }).then(({ data }) => {
       dispatch({ type: MFA_DISABLE_SUCCESS, method });
+      return data;
     }).catch(error => {
-      dispatch({ type: MFA_DISABLE_FAIL, method });
+      dispatch({ type: MFA_DISABLE_FAIL, method, skipAlert: true });
+      throw error;
     });
   };
 }

app/soapbox/components/button.js

@@ -8,6 +8,7 @@ import Icon from './icon';
 export default class Button extends React.PureComponent {
 
   static propTypes = {
+    type: PropTypes.string,
     text: PropTypes.node,
     onClick: PropTypes.func,
     to: PropTypes.string,
@@ -54,6 +55,7 @@ export default class Button extends React.PureComponent {
 
     const btn = (
       <button
+        type={this.props.type}
         className={className}
         disabled={this.props.disabled}
         onClick={this.handleClick}

app/soapbox/features/auth_login/components/otp_auth_form.js

@@ -45,10 +45,7 @@ class OtpAuthForm extends ImmutablePureComponent {
       this.setState({ shouldRedirect: true });
       return dispatch(switchAccount(account.id));
     }).catch(error => {
-      this.setState({ isLoading: false });
+      this.setState({ isLoading: false, code_error: true });
-      if (error.response.data.error === 'Invalid code') {
-        this.setState({ code_error: true });
-      }
     });
     this.setState({ isLoading: true });
     event.preventDefault();
@@ -82,11 +79,11 @@ class OtpAuthForm extends ImmutablePureComponent {
             </div>
           </div>
         </fieldset>
-        { code_error &&
+        {code_error && (
           <div className='error-box'>
             <FormattedMessage id='login.otp_log_in.fail' defaultMessage='Invalid code, please try again.' />
           </div>
-        }
+        )}
         <div className='actions'>
           <button name='button' type='submit' className='btn button button-primary'>
             <FormattedMessage id='login.log_in' defaultMessage='Log in' />

app/soapbox/features/security/mfa_form.js

@@ -47,6 +47,8 @@ const messages = defineMessages({
   disableFail: { id: 'security.disable.fail', defaultMessage: 'Incorrect password. Try again.' },
   mfaDisableSuccess: { id: 'mfa.disable.success_message', defaultMessage: 'MFA disabled' },
   mfaConfirmSuccess: { id: 'mfa.confirm.success_message', defaultMessage: 'MFA confirmed' },
+  codePlaceholder: { id: 'mfa.mfa_setup.code_placeholder', defaultMessage: 'Code' },
+  passwordPlaceholder: { id: 'mfa.mfa_setup.password_placeholder', defaultMessage: 'Password' },
 });
 
 const mapStateToProps = state => ({
@@ -118,44 +120,62 @@ class DisableOtpForm extends ImmutablePureComponent {
 
   state = {
     password: '',
+    isLoading: false,
   }
 
   handleInputChange = e => {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  handleOtpDisableClick = e => {
+  handleSubmit = e => {
     const { password } = this.state;
     const { dispatch, intl } = this.props;
 
+    this.setState({ isLoading: true });
+
     dispatch(disableMfa('totp', password)).then(() => {
       dispatch(snackbar.success(intl.formatMessage(messages.mfaDisableSuccess)));
+      this.context.router.history.push('../auth/edit');
     }).catch(error => {
       dispatch(snackbar.error(intl.formatMessage(messages.disableFail)));
+      this.setState({ isLoading: false });
     });
 
-    this.context.router.history.push('../auth/edit');
     e.preventDefault();
   }
 
   render() {
     const { intl } = this.props;
+    const { isLoading, password } = this.state;
 
     return (
-      <SimpleForm>
       <div className='security-settings-panel'>
+        <SimpleForm onSubmit={this.handleSubmit} disabled={isLoading}>
           <h1 className='security-settings-panel__setup-otp'>
             <FormattedMessage id='mfa.otp_enabled_title' defaultMessage='OTP Enabled' />
           </h1>
-          <div><FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' /></div>
+          <h2 className='security-settings-panel__setup-otp'>
-          <div><FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth:' /></div>
+            <FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' />
+          </h2>
           <ShowablePassword
+            label={intl.formatMessage(messages.passwordPlaceholder)}
+            placeholder={intl.formatMessage(messages.passwordPlaceholder)}
+            hint={<FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth.' />}
+            disabled={isLoading}
             name='password'
             onChange={this.handleInputChange}
+            value={password}
+            required
+          />
+          <div className='security-settings-panel__setup-otp__buttons'>
+            <Button
+              disabled={isLoading}
+              className='button button-primary disable'
+              text={intl.formatMessage(messages.mfa_setup_disable_button)}
             />
-          <Button className='button button-primary disable' text={intl.formatMessage(messages.mfa_setup_disable_button)} onClick={this.handleOtpDisableClick} />
           </div>
         </SimpleForm>
+      </div>
     );
   }
 
@@ -191,6 +211,7 @@ class EnableOtpForm extends ImmutablePureComponent {
 
   handleCancelClick = e => {
     this.context.router.history.push('../auth/edit');
+    e.preventDefault();
   }
 
   render() {
@@ -198,8 +219,8 @@ class EnableOtpForm extends ImmutablePureComponent {
     const { backupCodes, displayOtpForm } = this.state;
 
     return (
-      <SimpleForm>
       <div className='security-settings-panel'>
+        <SimpleForm>
           <h1 className='security-settings-panel__setup-otp'>
             <FormattedMessage id='mfa.setup_otp_title' defaultMessage='OTP Disabled' />
           </h1>
@@ -233,8 +254,8 @@ class EnableOtpForm extends ImmutablePureComponent {
               )}
             </div>
           )}
-        </div>
         </SimpleForm>
+      </div>
     );
   }
 
@@ -255,7 +276,7 @@ class OtpConfirmForm extends ImmutablePureComponent {
 
   state = {
     password: '',
-    done: false,
+    isLoading: false,
     code: '',
     qrCodeURI: '',
     confirm_key: '',
@@ -275,66 +296,96 @@ class OtpConfirmForm extends ImmutablePureComponent {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  handleOtpConfirmClick = e => {
+  handleCancelClick = e => {
-    const { code, password } = this.state;
+    this.context.router.history.push('../auth/edit');
+    e.preventDefault();
+  }
+
+  handleSubmit = e => {
     const { dispatch, intl } = this.props;
+    const { code, password } = this.state;
+
+    this.setState({ isLoading: true });
 
     dispatch(confirmMfa('totp', code, password)).then(() => {
       dispatch(snackbar.success(intl.formatMessage(messages.mfaConfirmSuccess)));
+      this.context.router.history.push('../auth/edit');
     }).catch(error => {
       dispatch(snackbar.error(intl.formatMessage(messages.confirmFail)));
+      this.setState({ isLoading: false });
     });
 
-    this.context.router.history.push('../auth/edit');
     e.preventDefault();
   }
 
   render() {
     const { intl } = this.props;
-    const { qrCodeURI, confirm_key } = this.state;
+    const { isLoading, qrCodeURI, confirm_key, password, code } = this.state;
 
     return (
-      <SimpleForm>
       <div className='security-settings-panel'>
+        <SimpleForm onSubmit={this.handleSubmit} disabled={isLoading}>
 
           <fieldset disabled={false}>
             <FieldsGroup>
               <div className='security-settings-panel__section-container'>
                 <h2><FormattedMessage id='mfa.mfa_setup_scan_title' defaultMessage='Scan' /></h2>
 
-                <div><FormattedMessage id='mfa.mfa_setup_scan_description' defaultMessage='Using your two-factor app, scan this QR code or enter text key:' /></div>
+                <div><FormattedMessage id='mfa.mfa_setup_scan_description' defaultMessage='Using your two-factor app, scan this QR code or enter the text key.' /></div>
 
-                <span className='security-settings-panel qr-code'>
+                <div className='security-settings-panel__qr-code'>
                   <QRCode value={qrCodeURI} />
-                </span>
+                  <div className='security-settings-panel__confirm-key'>
+                    {confirm_key}
+                  </div>
+                </div>
 
-                <div className='security-settings-panel confirm-key'><FormattedMessage id='mfa.mfa_setup_scan_key' defaultMessage='Key:' /> {confirm_key}</div>
               </div>
 
               <div className='security-settings-panel__section-container'>
                 <h2><FormattedMessage id='mfa.mfa_setup_verify_title' defaultMessage='Verify' /></h2>
 
-                <div><FormattedMessage id='mfa.mfa_setup_verify_description' defaultMessage='To enable two-factor authentication, enter the code from your two-factor app:' /></div>
                 <TextInput
                   name='code'
+                  label={intl.formatMessage(messages.codePlaceholder)}
+                  hint={<FormattedMessage id='mfa.mfa_setup.code_hint' defaultMessage='Enter the code from your two-factor app.' />}
+                  placeholder={intl.formatMessage(messages.codePlaceholder)}
                   onChange={this.handleInputChange}
                   autoComplete='off'
+                  value={code}
+                  disabled={isLoading}
+                  required
                 />
-
-                <div><FormattedMessage id='mfa.mfa_setup_enter_password' defaultMessage='Enter your current password to confirm your identity:' /></div>
                 <ShowablePassword
                   name='password'
+                  label={intl.formatMessage(messages.passwordPlaceholder)}
+                  hint={<FormattedMessage id='mfa.mfa_setup.password_hint' defaultMessage='Enter your current password to confirm your identity.' />}
+                  placeholder={intl.formatMessage(messages.passwordPlaceholder)}
                   onChange={this.handleInputChange}
+                  value={password}
+                  disabled={isLoading}
+                  required
                 />
               </div>
             </FieldsGroup>
           </fieldset>
           <div className='security-settings-panel__setup-otp__buttons'>
-            <Button className='button button-secondary cancel' text={intl.formatMessage(messages.mfa_cancel_button)} onClick={this.handleCancelClick} />
+            <Button
-            <Button className='button button-primary setup' text={intl.formatMessage(messages.mfa_setup_confirm_button)} onClick={this.handleOtpConfirmClick} />
+              type='button'
-          </div>
+              className='button button-secondary cancel'
+              text={intl.formatMessage(messages.mfa_cancel_button)}
+              onClick={this.handleCancelClick}
+              disabled={isLoading}
+            />
+            <Button
+              type='submit'
+              className='button button-primary setup'
+              text={intl.formatMessage(messages.mfa_setup_confirm_button)}
+              disabled={isLoading}
+            />
           </div>
         </SimpleForm>
+      </div>
     );
   }
 

app/soapbox/locales/en.json

@@ -580,12 +580,12 @@
   "media_gallery.toggle_visible": "Toggle visibility",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
-  "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",
+  "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth.",
-  "mfa.mfa_setup_enter_password": "Enter your current password to confirm your identity:",
+  "mfa.mfa_setup_enter_password": "Enter your current password to confirm your identity",
-  "mfa.mfa_setup_scan_description": "Using your two-factor app, scan this QR code or enter text key:",
+  "mfa.mfa_setup_scan_description": "Using your two-factor app, scan this QR code or enter the text key.",
   "mfa.mfa_setup_scan_key": "Key:",
   "mfa.mfa_setup_scan_title": "Scan",
-  "mfa.mfa_setup_verify_description": "To enable two-factor authentication, enter the code from your two-factor app:",
+  "mfa.mfa_setup_verify_description": "To enable two-factor authentication, enter the code from your two-factor app",
   "mfa.mfa_setup_verify_title": "Verify",
   "mfa.otp_enabled_description": "You have enabled two-factor authentication via OTP.",
   "mfa.otp_enabled_title": "OTP Enabled",

app/soapbox/reducers/security.js

@@ -3,9 +3,7 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import {
   MFA_FETCH_SUCCESS,
   MFA_CONFIRM_SUCCESS,
-  MFA_DISABLE_REQUEST,
   MFA_DISABLE_SUCCESS,
-  MFA_DISABLE_FAIL,
 } from '../actions/mfa';
 import {
   FETCH_TOKENS_SUCCESS,
@@ -49,11 +47,8 @@ export default function security(state = initialState, action) {
     return importMfa(state, fromJS(action.data));
   case MFA_CONFIRM_SUCCESS:
     return enableMfa(state, action.method);
-  case MFA_DISABLE_REQUEST:
   case MFA_DISABLE_SUCCESS:
     return disableMfa(state, action.method);
-  case MFA_DISABLE_FAIL:
-    return enableMfa(state, action.method);
   default:
     return state;
   }

app/styles/components/mfa_form.scss

@@ -1,6 +1,10 @@
 .security-settings-panel {
   margin: 20px;
 
+  .simple_form {
+    padding: 0 !important;
+  }
+
   h1.security-settings-panel__setup-otp {
     font-size: 20px;
     line-height: 1.25;
@@ -26,7 +30,7 @@
   }
 
   .backup_codes {
-    margin: 20px;
+    margin: 10px 0;
     font-weight: bold;
     padding: 15px 20px;
     font-size: 14px;
@@ -35,6 +39,9 @@
     text-align: center;
     position: relative;
     min-height: 125px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .backup_code {
       margin: 5px auto;
@@ -42,22 +49,30 @@
   }
 
   .security-settings-panel__setup-otp__buttons {
-    margin: 20px;
+    margin: 15px 0;
     display: flex;
     justify-content: space-between;
 
     .button {
-      min-width: 182px;
+      flex: 1;
     }
   }
 
-  div.confirm-key {
+  &__qr-code {
+    margin: 20px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__confirm-key {
     display: block;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.5;
     color: var(--primary-text-color--faint);
     font-weight: 400;
-    margin: 0 0 20px 20px;
+    margin-top: 10px;
   }
 }
 

app/styles/forms.scss

@@ -643,20 +643,6 @@ code {
   font-size: 24px;
 }
 
-.qr-code {
-  flex: 0 0 auto;
-  background: var(--foreground-color);
-  padding: 4px;
-  margin: 0 10px 20px 0;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  display: inline-block;
-
-  svg {
-    display: block;
-    margin: 0;
-  }
-}
-
 .simple_form {
   .warning {
     box-sizing: border-box;