diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/login/components/login_mfa.jsx | 2 | ||||
-rw-r--r-- | webapp/components/login/login.jsx | 6 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_security.jsx | 60 |
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> ); |