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

1 files changed, 32 insertions, 28 deletions

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>
                 );