diff options
Diffstat (limited to 'webapp/components')
| -rw-r--r-- | webapp/components/user_settings/user_settings_security.jsx | 32 |
1 files changed, 25 insertions, 7 deletions
diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx index 3cff93a0f..617acb7f5 100644 --- a/webapp/components/user_settings/user_settings_security.jsx +++ b/webapp/components/user_settings/user_settings_security.jsx @@ -9,6 +9,8 @@ import ToggleModalButton from '../toggle_modal_button.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import {generateMfaSecret} from 'actions/user_actions.jsx'; + import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -179,7 +181,10 @@ export default class SecurityTab extends React.Component { showQrCode(e) { e.preventDefault(); - this.setState({mfaShowQr: true}); + generateMfaSecret( + (data) => this.setState({mfaShowQr: true, secret: data.secret, qrCode: data.qr_code}), + (err) => this.setState({serverError: err.message}) + ); } deauthorizeApp(e) { @@ -235,19 +240,31 @@ export default class SecurityTab extends React.Component { content = ( <div key='mfaButton'> <div className='form-group'> - <label className='col-sm-5 control-label'> + <label className='col-sm-3 control-label'> <FormattedMessage id='user.settings.mfa.qrCode' defaultMessage='Bar Code' /> </label> - <div className='col-sm-7'> + <div className='col-sm-5'> <img className='qr-code-img' - src={Client.getUsersRoute() + '/generate_mfa_qr?time=' + this.props.user.update_at} + src={'data:image/png;base64,' + this.state.qrCode} + /> + </div> + </div> + <div className='form-group'> + <label className='col-sm-3 control-label'> + <FormattedMessage + id='user.settings.mfa.secret' + defaultMessage='Secret' /> + </label> + <div className='col-sm-9 padding-top'> + {this.state.secret} </div> </div> + <hr/> <div className='form-group'> <label className='col-sm-5 control-label'> <FormattedMessage @@ -272,7 +289,7 @@ export default class SecurityTab extends React.Component { <span> <FormattedMessage id='user.settings.mfa.addHelpQr' - defaultMessage='Please scan the QR code with the Google Authenticator app on your smartphone and fill in the token with one provided by the app.' + defaultMessage='Please scan the QR code with the Google Authenticator app on your smartphone and fill in the token with one provided by the app. If you are unable to scan the code, you can maunally enter the secret provided.' /> </span> ); @@ -299,7 +316,7 @@ export default class SecurityTab extends React.Component { <span> <FormattedHTMLMessage id='user.settings.mfa.addHelp' - 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." + 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 or type in the secret manually.<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> ); @@ -309,7 +326,7 @@ export default class SecurityTab extends React.Component { inputs.push( <div key='mfaSetting' - className='form-group' + className='padding-top' > {content} </div> @@ -330,6 +347,7 @@ export default class SecurityTab extends React.Component { server_error={this.state.serverError} client_error={this.state.mfaError} updateSection={updateSectionStatus} + width='medium' /> ); } |