Settings: Set recovery email text (#5582)

src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx

@@ -6,7 +6,7 @@ import { withGlobal } from '../../../../global';
 
 import type { ApiSticker } from '../../../../api/types';
 
-import { selectAnimatedEmoji } from '../../../../global/selectors';
+import { selectAnimatedEmoji, selectTabState } from '../../../../global/selectors';
 import { IS_TOUCH_ENV } from '../../../../util/windowEnvironment';
 
 import useAppLayout from '../../../../hooks/useAppLayout';
@@ -29,6 +29,7 @@ type OwnProps = {
 type StateProps = {
   animatedEmoji: ApiSticker;
   codeLength: number;
+  recoveryEmail: string;
 };
 
 const ICON_SIZE = 160;
@@ -42,6 +43,7 @@ const SettingsTwoFaEmailCode: FC<OwnProps & StateProps> = ({
   onSubmit,
   isActive,
   onReset,
+  recoveryEmail,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const inputRef = useRef<HTMLInputElement>(null);
@@ -84,6 +86,9 @@ const SettingsTwoFaEmailCode: FC<OwnProps & StateProps> = ({
     <div className="settings-content two-fa custom-scroll">
       <div className="settings-content-header no-border">
         <AnimatedIconFromSticker sticker={animatedEmoji} size={ICON_SIZE} className="settings-content-icon" />
+        <p className="settings-item-description mb-3" dir="auto">
+          {lang('TwoStepAuth.ConfirmEmailDescription', recoveryEmail)}
+        </p>
       </div>
 
       <div className="settings-item pt-0">
@@ -102,8 +107,12 @@ const SettingsTwoFaEmailCode: FC<OwnProps & StateProps> = ({
 };
 
 export default memo(withGlobal<OwnProps>((global) => {
+  const tabState = selectTabState(global);
+  const recoveryEmail = tabState.recoveryEmail;
+
   return {
     animatedEmoji: selectAnimatedEmoji(global, '💌'),
     codeLength: global.twoFaSettings.waitingEmailCodeLength,
+    recoveryEmail,
   };
 })(SettingsTwoFaEmailCode));

src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx

@@ -105,6 +105,9 @@ const SettingsTwoFaSkippableForm: FC<OwnProps & StateProps> = ({
     <div className="settings-content two-fa custom-scroll">
       <div className="settings-content-header no-border">
         <AnimatedIconFromSticker sticker={animatedEmoji} size={ICON_SIZE} className="settings-content-icon" />
+        <p className="settings-item-description mb-3" dir="auto">
+          {lang('RecoveryEmailSubtitle')}
+        </p>
       </div>
 
       <div className="settings-item pt-0">

src/global/actions/api/twoFaSettings.ts

@@ -1,8 +1,10 @@
 import type { ActionReturnType } from '../../types';
 
+import { getCurrentTabId } from '../../../util/establishMultitabRole';
 import { callApi } from '../../../api/gramjs';
 import { addActionHandler, getGlobal, setGlobal } from '../../index';
 import { replaceSettings, updateTwoFaSettings } from '../../reducers';
+import { updateTabState } from '../../reducers/tabs';
 
 addActionHandler('loadPasswordInfo', async (global): Promise<void> => {
   const result = await callApi('getPasswordInfo');
@@ -72,15 +74,22 @@ addActionHandler('updatePassword', async (global, actions, payload): Promise<voi
 addActionHandler('updateRecoveryEmail', async (global, actions, payload): Promise<void> => {
   const {
     currentPassword, email, onSuccess,
+    tabId = getCurrentTabId(),
   } = payload;
 
   global = updateTwoFaSettings(global, { isLoading: true, errorKey: undefined });
+  global = updateTabState(global, {
+    recoveryEmail: email,
+  }, tabId);
   setGlobal(global);
 
   const isSuccess = await callApi('updateRecoveryEmail', currentPassword, email);
 
   global = getGlobal();
   global = updateTwoFaSettings(global, { isLoading: false, waitingEmailCodeLength: undefined });
+  global = updateTabState(global, {
+    recoveryEmail: undefined,
+  }, tabId);
   setGlobal(global);
 
   if (isSuccess) {

src/global/types/actions.ts

@@ -190,7 +190,7 @@ export interface ActionPayloads {
     currentPassword: string;
     email: string;
     onSuccess: VoidFunction;
-  };
+  } & WithTabId;
   clearPassword: {
     currentPassword: string;
     onSuccess: VoidFunction;

src/global/types/tabState.ts

@@ -199,6 +199,8 @@ export type TabState = {
 
   shouldPlayEffectInComposer?: true;
 
+  recoveryEmail?: string;
+
   inlineBots: {
     isLoading: boolean;
     byUsername: Record<string, false | InlineBotSettings>;