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

5 files changed, 67 insertions, 9 deletions

diff --git a/webapp/actions/user_actions.jsx b/webapp/actions/user_actions.jsx
index 900353701..304d36a62 100644
--- a/webapp/actions/user_actions.jsx
+++ b/webapp/actions/user_actions.jsx
@@ -316,3 +316,20 @@ export function autocompleteUsersInTeam(username, success, error) {
         }
     );
 }
+
+export function generateMfaSecret(success, error) {
+    Client.generateMfaSecret(
+        (data) => {
+            if (success) {
+                success(data);
+            }
+        },
+        (err) => {
+            AsyncClient.dispatchError(err, 'generateMfaSecret');
+
+            if (error) {
+                error(err);
+            }
+        }
+    );
+}
diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx
index fd091fd69..a615bd501 100644
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -990,6 +990,15 @@ export default class Client {
         this.track('api', 'api_users_oauth_to_email');
     }
 
+    generateMfaSecret(success, error) {
+        request.
+            get(`${this.getUsersRoute()}/generate_mfa_secret`).
+            set(this.defaultHeaders).
+            type('application/json').
+            accept('application/json').
+            end(this.handleResponse.bind(this, 'generateMfaSecret', success, error));
+    }
+
     revokeSession(altId, success, error) {
         request.
             post(`${this.getUsersRoute()}/revoke_session`).
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'
                 />
             );
         }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 20f771608..83dccd4a5 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1914,12 +1914,13 @@
   "user.settings.languages.change": "Change interface language",
   "user.settings.languages.promote": "Select which language Mattermost displays in the user interface.<br /><br />Would like to help with translations? Join the <a href='http://translate.mattermost.com/' target='_blank'>Mattermost Translation Server</a> to contribute.",
   "user.settings.mfa.add": "Add MFA to your account",
-  "user.settings.mfa.addHelp": "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.",
-  "user.settings.mfa.addHelpQr": "Please scan the bar code with the Google Authenticator app on your smartphone and fill in the token with one provided by the app.",
+  "user.settings.mfa.addHelp": "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.",
+  "user.settings.mfa.addHelpQr": "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.",
   "user.settings.mfa.enterToken": "Token (numbers only)",
   "user.settings.mfa.qrCode": "Bar Code",
   "user.settings.mfa.remove": "Remove MFA from your account",
   "user.settings.mfa.removeHelp": "Removing multi-factor authentication means you will no longer require a phone-based passcode to sign-in to your account.",
+  "user.settings.mfa.secret": "Secret",
   "user.settings.mfa.title": "Multi-factor Authentication",
   "user.settings.modal.advanced": "Advanced",
   "user.settings.modal.confirmBtns": "Yes, Discard",
diff --git a/webapp/tests/client_user.test.jsx b/webapp/tests/client_user.test.jsx
index 8c6f0f970..5e70c5c3e 100644
--- a/webapp/tests/client_user.test.jsx
+++ b/webapp/tests/client_user.test.jsx
@@ -391,6 +391,19 @@ describe('Client.User', function() {
         });
     });
 
+    it('generateMfaSecret', function(done) {
+        TestHelper.initBasic(() => {
+            TestHelper.basicClient().generateMfaSecret(
+                function() {
+                    done(new Error('not enabled'));
+                },
+                function() {
+                    done();
+                }
+            );
+        });
+    });
+
     it('getSessions', function(done) {
         TestHelper.initBasic(() => {
             TestHelper.basicClient().getSessions(