From 2c52f090711fa525389b221fb541e2a0e39fce05 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Tue, 10 Dec 2024 08:06:05 -0700
Subject: [PATCH] update text, add tests (#29485)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../setup/__snapshots__/setup.test.tsx.snap   | 90 +++++++++++++++++++
 .../src/components/mfa/setup/setup.test.tsx   | 74 +++++++++++++++
 .../src/components/mfa/setup/setup.tsx        | 32 +------
 webapp/channels/src/i18n/en.json              |  6 +-
 4 files changed, 171 insertions(+), 31 deletions(-)
 create mode 100644 webapp/channels/src/components/mfa/setup/__snapshots__/setup.test.tsx.snap
 create mode 100644 webapp/channels/src/components/mfa/setup/setup.test.tsx

diff --git a/webapp/channels/src/components/mfa/setup/__snapshots__/setup.test.tsx.snap b/webapp/channels/src/components/mfa/setup/__snapshots__/setup.test.tsx.snap
new file mode 100644
index 0000000000..8082324a6b
--- /dev/null
+++ b/webapp/channels/src/components/mfa/setup/__snapshots__/setup.test.tsx.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/mfa/setup should match snapshot without required text 1`] = `
+<div>
+  <form
+    className="form-group"
+    onSubmit={[Function]}
+  >
+    <p>
+      <MemoizedFormattedMessage
+        defaultMessage="1. Scan the QR code below using an authenticator app of your choice, such as Google Authenticator, Microsoft Authenticator app, or 1Password."
+        id="mfa.setup.step1"
+      />
+    </p>
+    <p>
+      <MemoizedFormattedMessage
+        defaultMessage="Alternatively, enter the secret key displayed below into the authenticator app manually."
+        id="mfa.setup.step2_secret"
+      />
+    </p>
+    <div
+      className="form-group"
+    >
+      <div
+        className="col-sm-12"
+      >
+        <img
+          alt="qr code image"
+          src="data:image/png;base64,"
+          style={
+            Object {
+              "maxHeight": 170,
+            }
+          }
+        />
+      </div>
+    </div>
+    <br />
+    <div
+      className="form-group"
+    >
+      <p
+        className="col-sm-12"
+      >
+        <MemoizedFormattedMessage
+          defaultMessage="Secret: {secret}"
+          id="mfa.setup.secret"
+          values={
+            Object {
+              "secret": "",
+            }
+          }
+        />
+      </p>
+    </div>
+    <p>
+      <MemoizedFormattedMessage
+        defaultMessage="2. Enter the code generated by the authenticator app in the field below."
+        id="mfa.setup.step3_code"
+        values={
+          Object {
+            "strong": [Function],
+          }
+        }
+      />
+    </p>
+    <p>
+      <LocalizedPlaceholderInput
+        autoFocus={true}
+        className="form-control"
+        placeholder={
+          Object {
+            "defaultMessage": "MFA Code",
+            "id": "mfa.setup.code",
+          }
+        }
+      />
+    </p>
+    <button
+      className="btn btn-primary"
+      type="submit"
+    >
+      <MemoizedFormattedMessage
+        defaultMessage="Save"
+        id="mfa.setup.save"
+      />
+    </button>
+  </form>
+</div>
+`;
diff --git a/webapp/channels/src/components/mfa/setup/setup.test.tsx b/webapp/channels/src/components/mfa/setup/setup.test.tsx
new file mode 100644
index 0000000000..629429ad8a
--- /dev/null
+++ b/webapp/channels/src/components/mfa/setup/setup.test.tsx
@@ -0,0 +1,74 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {shallow} from 'enzyme';
+import React from 'react';
+
+import Setup from 'components/mfa/setup/setup';
+
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+import {TestHelper} from 'utils/test_helper';
+
+jest.mock('actions/global_actions', () => ({
+    redirectUserToDefaultTeam: jest.fn(),
+}));
+
+describe('components/mfa/setup', () => {
+    const user = TestHelper.getUserMock();
+    const generateMfaSecret = jest.fn().mockImplementation(() => Promise.resolve({data: {secret: 'generated secret', qr_code: 'qrcode'}}));
+    const activateMfa = jest.fn().mockImplementation(() => Promise.resolve({data: {}}));
+    const baseProps = {
+        state: {enforceMultifactorAuthentication: false},
+        updateParent: jest.fn(),
+        currentUser: user,
+        siteName: 'test',
+        enforceMultifactorAuthentication: false,
+        actions: {
+            activateMfa,
+            generateMfaSecret,
+        },
+        history: {push: jest.fn()},
+    };
+
+    test('should match snapshot without required text', async () => {
+        const wrapper = shallow<Setup>(
+            <Setup {...baseProps}/>,
+        );
+        expect(wrapper).toMatchSnapshot();
+        const requiredText = wrapper.find('#mfa.setup.required_mfa');
+        expect(requiredText).not.toBeFalsy();
+    });
+
+    test('should match snapshot with required text', async () => {
+        const props = {
+            ...baseProps,
+            enforceMultifactorAuthentication: true,
+        };
+
+        const wrapper = shallow<Setup>(
+            <Setup {...props}/>,
+        );
+        const requiredText = wrapper.find('#mfa.setup.required_mfa');
+        expect(requiredText).toBeDefined();
+    });
+
+    test('should set state after calling component did mount', async () => {
+        const wrapper = shallow<Setup>(
+            <Setup {...baseProps}/>,
+        );
+        expect(generateMfaSecret).toBeCalled();
+        await wrapper.instance().componentDidMount();
+        expect(wrapper.state('secret')).toEqual('generated secret');
+        expect(wrapper.state('qrCode')).toEqual('qrcode');
+    });
+
+    test('should call activateMfa on submission', async () => {
+        const wrapper = mountWithIntl(
+            <Setup {...baseProps}/>,
+        );
+
+        (wrapper.instance() as Setup).input.current!.value = 'testcodeinput';
+        wrapper.find('form').simulate('submit', {preventDefault: () => {}});
+        expect(baseProps.actions.activateMfa).toBeCalledWith('testcodeinput');
+    });
+});
diff --git a/webapp/channels/src/components/mfa/setup/setup.tsx b/webapp/channels/src/components/mfa/setup/setup.tsx
index 5d209e8e91..3c2d068784 100644
--- a/webapp/channels/src/components/mfa/setup/setup.tsx
+++ b/webapp/channels/src/components/mfa/setup/setup.tsx
@@ -6,7 +6,6 @@ import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import ExternalLink from 'components/external_link';
 import LocalizedPlaceholderInput from 'components/localized_placeholder_input';
 
 type MFAControllerState = {
@@ -58,7 +57,7 @@ type State = {
 }
 
 export default class Setup extends React.PureComponent<Props, State> {
-    private input: React.RefObject<HTMLInputElement>;
+    input: React.RefObject<HTMLInputElement>;
 
     public constructor(props: Props) {
         super(props);
@@ -127,7 +126,6 @@ export default class Setup extends React.PureComponent<Props, State> {
                         error: error.message,
                     });
                 }
-
                 return;
             }
 
@@ -169,35 +167,13 @@ export default class Setup extends React.PureComponent<Props, State> {
                     <p>
                         <FormattedMessage
                             id='mfa.setup.step1'
-                            defaultMessage='<strong>Step 1: </strong>On your phone, download Google Authenticator from <linkiTunes>iTunes</linkiTunes> or <linkGooglePlay>Google Play</linkGooglePlay>'
-                            values={{
-                                strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
-                                linkiTunes: (msg: React.ReactNode) => (
-                                    <ExternalLink
-                                        href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'
-                                        location='mfa_setup'
-                                    >
-                                        {msg}
-                                    </ExternalLink>
-                                ),
-                                linkGooglePlay: (msg: React.ReactNode) => (
-                                    <ExternalLink
-                                        href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en'
-                                        location='mfa_setup'
-                                    >
-                                        {msg}
-                                    </ExternalLink>
-                                ),
-                            }}
+                            defaultMessage='1. Scan the QR code below using an authenticator app of your choice, such as Google Authenticator, Microsoft Authenticator app, or 1Password.'
                         />
                     </p>
                     <p>
                         <FormattedMessage
                             id='mfa.setup.step2_secret'
-                            defaultMessage='<strong>Step 2: </strong>Use Google Authenticator to scan this QR code, or manually type in the secret key.'
-                            values={{
-                                strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
-                            }}
+                            defaultMessage='Alternatively, enter the secret key displayed below into the authenticator app manually.'
                         />
                     </p>
                     <div className='form-group'>
@@ -224,7 +200,7 @@ export default class Setup extends React.PureComponent<Props, State> {
                     <p>
                         <FormattedMessage
                             id='mfa.setup.step3_code'
-                            defaultMessage='<strong>Step 3: </strong>Enter the code generated by Google Authenticator.'
+                            defaultMessage='2. Enter the code generated by the authenticator app in the field below.'
                             values={{
                                 strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
                             }}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 2638e4396c..cb5d551b46 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4322,9 +4322,9 @@
   "mfa.setup.required_mfa": "<strong>Multi-factor authentication is required on {siteName}.</strong>",
   "mfa.setup.save": "Save",
   "mfa.setup.secret": "Secret: {secret}",
-  "mfa.setup.step1": "<strong>Step 1: </strong>On your phone, download Google Authenticator from <linkiTunes>iTunes</linkiTunes> or <linkGooglePlay>Google Play</linkGooglePlay>",
-  "mfa.setup.step2_secret": "<strong>Step 2: </strong>Use Google Authenticator to scan this QR code, or manually type in the secret key.",
-  "mfa.setup.step3_code": "<strong>Step 3: </strong>Enter the code generated by Google Authenticator.",
+  "mfa.setup.step1": "1. Scan the QR code below using an authenticator app of your choice, such as Google Authenticator, Microsoft Authenticator app, or 1Password.",
+  "mfa.setup.step2_secret": "Alternatively, enter the secret key displayed below into the authenticator app manually.",
+  "mfa.setup.step3_code": "2. Enter the code generated by the authenticator app in the field below.",
   "mfa.setupTitle": "Multi-factor Authentication Setup",
   "mobile.set_status.away.icon": "Away Icon",
   "mobile.set_status.dnd.icon": "Do Not Disturb Icon",