From dd2db41fbff66c00458664707818c2a31dcf4aee Mon Sep 17 00:00:00 2001
From: TheInvincible <139259364+TheInvincibleRalph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:36:48 +0100
Subject: [PATCH] [MM-60825] Replace FormattedMarkdownMessage in
 'webapp/channels/src/components/mfa/setup/setup.tsx' with FormattedMessage
 (#28628)

---
 .../src/components/mfa/setup/setup.tsx        | 26 ++++++++++++-------
 webapp/channels/src/i18n/en.json              |  6 ++---
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/mfa/setup/setup.tsx b/webapp/channels/src/components/mfa/setup/setup.tsx
index d59c11e6d6..d448d5807a 100644
--- a/webapp/channels/src/components/mfa/setup/setup.tsx
+++ b/webapp/channels/src/components/mfa/setup/setup.tsx
@@ -7,7 +7,6 @@ import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
 import type {UserProfile} from '@mattermost/types/users';
 
 import ExternalLink from 'components/external_link';
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
 import * as Utils from 'utils/utils';
 
@@ -134,11 +133,12 @@ class Setup extends React.PureComponent<Props, State> {
         if (this.props.enforceMultifactorAuthentication) {
             mfaRequired = (
                 <p>
-                    <FormattedMarkdownMessage
-                        id='mfa.setup.required'
-                        defaultMessage='**Multi-factor authentication is required on {siteName}.**'
+                    <FormattedMessage
+                        id='mfa.setup.required_mfa'
+                        defaultMessage='<strong>Multi-factor authentication is required on {siteName}.</strong>'
                         values={{
                             siteName: this.props.siteName,
+                            strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
                         }}
                     />
                 </p>
@@ -178,9 +178,12 @@ class Setup extends React.PureComponent<Props, State> {
                         />
                     </p>
                     <p>
-                        <FormattedMarkdownMessage
-                            id='mfa.setup.step2'
-                            defaultMessage='**Step 2: **Use Google Authenticator to scan this QR code, or manually type in the secret key'
+                        <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>,
+                            }}
                         />
                     </p>
                     <div className='form-group'>
@@ -205,9 +208,12 @@ class Setup extends React.PureComponent<Props, State> {
                         </p>
                     </div>
                     <p>
-                        <FormattedMarkdownMessage
-                            id='mfa.setup.step3'
-                            defaultMessage='**Step 3: **Enter the code generated by Google Authenticator'
+                        <FormattedMessage
+                            id='mfa.setup.step3_code'
+                            defaultMessage='<strong>Step 3: </strong>Enter the code generated by Google Authenticator.'
+                            values={{
+                                strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+                            }}
                         />
                     </p>
                     <p>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 06eaf41d91..2522f567b9 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4252,12 +4252,12 @@
   "mfa.setup.badCode": "Invalid code. If this issue persists, contact your System Administrator.",
   "mfa.setup.code": "MFA Code",
   "mfa.setup.codeError": "Please enter the code from Google Authenticator.",
-  "mfa.setup.required": "**Multi-factor authentication is required on {siteName}.**",
+  "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": "**Step 2: **Use Google Authenticator to scan this QR code, or manually type in the secret key",
-  "mfa.setup.step3": "**Step 3: **Enter the code generated by Google Authenticator",
+  "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.setupTitle": "Multi-factor Authentication Setup",
   "mobile.set_status.away.icon": "Away Icon",
   "mobile.set_status.dnd.icon": "Do Not Disturb Icon",