EE: PLT-4512 Show secret in addition to QR code when activating MFA (#4427)

* EE: Update MFA to display secret for manual entry

* Width adjustments for secret (#4423)

* Add unit test

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'
                 />
             );
         }