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

3 files changed, 36 insertions, 32 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>
                 );