From f44f4edd17e9478a75c9a1f7712d7eed68da76a2 Mon Sep 17 00:00:00 2001
From: Dipan Dhali <121673023+dipandhali2021@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:26:47 +0530
Subject: [PATCH] [MM-54834] Convert LocalizedInput of mfa/setup/setup.tsx to
 regular input component (#24931)

---
 webapp/channels/src/components/mfa/setup/setup.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/components/mfa/setup/setup.tsx b/webapp/channels/src/components/mfa/setup/setup.tsx
index bd61e10e09..a619148614 100644
--- a/webapp/channels/src/components/mfa/setup/setup.tsx
+++ b/webapp/channels/src/components/mfa/setup/setup.tsx
@@ -2,15 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+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 LocalizedInput from 'components/localized_input/localized_input';
 
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
 type MFAControllerState = {
@@ -23,6 +21,7 @@ type Props = {
      * Object containing enforceMultifactorAuthentication
      */
     state: MFAControllerState;
+    intl: IntlShape;
 
     /*
      * Function that updates parent component with state props
@@ -61,7 +60,7 @@ type State = {
     serverError?: string;
 }
 
-export default class Setup extends React.PureComponent<Props, State> {
+class Setup extends React.PureComponent<Props, State> {
     private input: React.RefObject<HTMLInputElement>;
 
     public constructor(props: Props) {
@@ -212,10 +211,10 @@ export default class Setup extends React.PureComponent<Props, State> {
                         />
                     </p>
                     <p>
-                        <LocalizedInput
+                        <input
                             ref={this.input}
                             className='form-control'
-                            placeholder={{id: t('mfa.setup.code'), defaultMessage: 'MFA Code'}}
+                            placeholder={this.props.intl.formatMessage({id: 'mfa.setup.code', defaultMessage: 'MFA Code'})}
                             autoFocus={true}
                         />
                     </p>
@@ -238,3 +237,5 @@ export default class Setup extends React.PureComponent<Props, State> {
 const style = {
     qrCode: {maxHeight: 170},
 };
+
+export default injectIntl(Setup);