Update MFA help text and fix some minor bugs (#2903)

4 files changed, 38 insertions, 34 deletions

diff --git a/webapp/components/login/components/login_mfa.jsx b/webapp/components/login/components/login_mfa.jsx
index f8d42012c..ce77c9fa9 100644
--- a/webapp/components/login/components/login_mfa.jsx
+++ b/webapp/components/login/components/login_mfa.jsx
@@ -21,7 +21,7 @@ export default class LoginMfa extends React.Component {
         e.preventDefault();
         const state = {};
 
-        const token = this.refs.token.value.trim();
+        const token = this.refs.token.value.trim().replace(/\s/g, '');
         if (!token) {
             state.serverError = Utils.localizeMessage('login_mfa.tokenReq', 'Please enter an MFA token');
             this.setState(state);
diff --git a/webapp/components/login/login.jsx b/webapp/components/login/login.jsx
index ce200ad75..d2ee1be81 100644
--- a/webapp/components/login/login.jsx
+++ b/webapp/components/login/login.jsx
@@ -105,13 +105,12 @@ export default class Login extends React.Component {
     }
 
     submit(loginId, password, token) {
-        this.setState({showMfa: false, serverError: null});
-
         Client.webLogin(
             loginId,
             password,
             token,
             () => {
+                this.setState({serverError: null});
                 this.finishSignin();
             },
             (err) => {
@@ -122,6 +121,7 @@ export default class Login extends React.Component {
                     err.id === 'ent.ldap.do_login.user_not_registered.app_error' ||
                     err.id === 'ent.ldap.do_login.user_filtered.app_error') {
                     this.setState({
+                        showMfa: false,
                         serverError: (
                             <FormattedMessage
                                 id='login.userNotFound'
@@ -130,7 +130,7 @@ export default class Login extends React.Component {
                         )
                     });
                 } else {
-                    this.setState({serverError: err.message});
+                    this.setState({showMfa: false, serverError: err.message});
                 }
             }
         );
diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx
index 55a0a0e9a..700aa295a 100644
--- a/webapp/components/user_settings/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security.jsx
@@ -15,7 +15,7 @@ import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
-import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
+import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage, FormattedTime, FormattedDate} from 'react-intl';
 import {Link} from 'react-router';
 
 const holders = defineMessages({
@@ -210,32 +210,36 @@ class SecurityTab extends React.Component {
             } else if (this.state.mfaShowQr) {
                 content = (
                     <div key='mfaButton'>
-                        <label className='col-sm-5 control-label'>
-                            <FormattedMessage
-                                id='user.settings.mfa.qrCode'
-                                defaultMessage='QR Code'
-                            />
-                        </label>
-                        <div className='col-sm-7'>
-                            <img
-                                className='qr-code-img'
-                                src={Client.getUsersRoute() + '/generate_mfa_qr?time=' + this.props.user.update_at}
-                            />
+                        <div className='form-group'>
+                            <label className='col-sm-5 control-label'>
+                                <FormattedMessage
+                                    id='user.settings.mfa.qrCode'
+                                    defaultMessage='Bar Code'
+                                />
+                            </label>
+                            <div className='col-sm-7'>
+                                <img
+                                    className='qr-code-img'
+                                    src={Client.getUsersRoute() + '/generate_mfa_qr?time=' + this.props.user.update_at}
+                                />
+                            </div>
                         </div>
-                        <br/>
-                        <label className='col-sm-5 control-label'>
-                            <FormattedMessage
-                                id='user.settings.mfa.enterToken'
-                                defaultMessage='Token'
-                            />
-                        </label>
-                        <div className='col-sm-7'>
-                            <input
-                                className='form-control'
-                                type='text'
-                                onChange={this.updateMfaToken}
-                                value={this.state.mfaToken}
-                            />
+                        <div className='form-group'>
+                            <label className='col-sm-5 control-label'>
+                                <FormattedMessage
+                                    id='user.settings.mfa.enterToken'
+                                    defaultMessage='Token (numbers only)'
+                                />
+                            </label>
+                            <div className='col-sm-7'>
+                                <input
+                                    className='form-control'
+                                    type='number'
+                                    autoFocus={true}
+                                    onChange={this.updateMfaToken}
+                                    value={this.state.mfaToken}
+                                />
+                            </div>
                         </div>
                     </div>
                 );
@@ -269,9 +273,9 @@ class SecurityTab extends React.Component {
 
                 extraInfo = (
                     <span>
-                        <FormattedMessage
+                        <FormattedHTMLMessage
                             id='user.settings.mfa.addHelp'
-                            defaultMessage='To add multi-factor authentication to your account you must have a smartphone with Google Authenticator installed.'
+                            defaultMessage="You can require a smartphone-based token, in addition to your password, to sign into Mattermost.<br/><br/>To enable, download Google Authenticator from <a target='_blank' href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'>iTunes</a> or <a target='_blank' href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en'>Google Play</a> for your phone, then<br/><br/>1. Click the <strong>Add MFA to your account</strong> button above.<br/>2. Use Google Authenticator to scan the QR code that appears.<br/>3. Type in the Token generated by Google Authenticator and click <strong>Save</strong>.<br/><br/>When logging in, you will be asked to enter a token from Google Authenticator in addition to your regular credentials."
                         />
                     </span>
                 );
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 63669d546..e3c1aac0f 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1352,9 +1352,9 @@
   "user.settings.import_theme.submitError": "Invalid format, please try copying and pasting in again.",
   "user.settings.languages.change": "Change interface language",
   "user.settings.mfa.add": "Add MFA to your account",
-  "user.settings.mfa.addHelp": "You can require a phone-based passcode, in addition to your password, to sign into Mattermost. To enable, download Google Authenticator to your iOS or Android phone, then click the Add MFA to your account button above and use Google Authenticator to scan the bar code that appears. Type in the Token generated by Google Authenticator and click Save. In future, you will be asked to enter a passcode from Google Authenticator in addition to your password on login.",
+  "user.settings.mfa.addHelp": "You can require a smartphone-based token, in addition to your password, to sign into Mattermost.<br/><br/>To enable, download Google Authenticator from <a target='_blank' href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'>iTunes</a> or <a target='_blank' href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en'>Google Play</a> for your phone, then<br/><br/>1. Click the <strong>Add MFA to your account</strong> button above.<br/>2. Use Google Authenticator to scan the QR code that appears.<br/>3. Type in the Token generated by Google Authenticator and click <strong>Save</strong>.<br/><br/>When logging in, you will be asked to enter a token from Google Authenticator in addition to your regular credentials.",
   "user.settings.mfa.addHelpQr": "Please scan the bar code with the Google Authenticator app on your smartphone and fill in the token with one provided by the app.",
-  "user.settings.mfa.enterToken": "Token",
+  "user.settings.mfa.enterToken": "Token (numbers only)",
   "user.settings.mfa.qrCode": "Bar Code",
   "user.settings.mfa.remove": "Remove MFA from your account",
   "user.settings.mfa.removeHelp": "Removing multi-factor authentication means you will no longer require a phone-based passcode to sign-in to your account.",