diff options
author | Joram Wilander <jwawilander@gmail.com> | 2016-05-05 23:07:59 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-05-05 20:07:59 -0700 |
commit | 3789a4613acd78df162601bda040075b20e92785 (patch) | |
tree | a51a15f257b1bf5fe0d219890bd9bb864910862f /webapp/components/user_settings | |
parent | e89868630128499dfaa68a9cb132d1814da7ea8d (diff) | |
download | chat-3789a4613acd78df162601bda040075b20e92785.tar.gz chat-3789a4613acd78df162601bda040075b20e92785.tar.bz2 chat-3789a4613acd78df162601bda040075b20e92785.zip |
Update MFA help text and fix some minor bugs (#2903)
Diffstat (limited to 'webapp/components/user_settings')
-rw-r--r-- | webapp/components/user_settings/user_settings_security.jsx | 60 |
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> ); |