From 06acbcd4c0aabb6056df4c6c39bb446ef8c5fd04 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 27 Dec 2023 12:19:43 +0700
Subject: [PATCH 1/2] fix: timer in login page restarts

---
 src/pages/signin/SignInPage.js                      | 13 +++++++------
 .../signin/ValidateCodeForm/BaseValidateCodeForm.js |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 8cb0ef9907af..fc221d841036 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -262,14 +262,15 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}
                 />
+                {shouldShowValidateCodeForm && (
+                    <ValidateCodeForm
+                        isVisible={isClientTheLeader}
+                        isUsingRecoveryCode={isUsingRecoveryCode}
+                        setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                    />
+                )}
                 {isClientTheLeader && (
                     <>
-                        {shouldShowValidateCodeForm && (
-                            <ValidateCodeForm
-                                isUsingRecoveryCode={isUsingRecoveryCode}
-                                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-                            />
-                        )}
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
                         {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
                         {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 03db6d3436cf..3130965ecc99 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -13,6 +13,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -417,4 +418,5 @@ export default compose(
         session: {key: ONYXKEYS.SESSION},
     }),
     withNetwork(),
+    withToggleVisibilityView,
 )(BaseValidateCodeForm);

From cf1dd0f097411b4d9cf314a0268a72991d11febf Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 9 Jan 2024 20:11:54 +0700
Subject: [PATCH 2/2] focus text input on visible

---
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 3130965ecc99..30308821d1ff 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -86,6 +87,7 @@ function BaseValidateCodeForm(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const isFocused = useIsFocused();
     const [formError, setFormError] = useState({});
     const [validateCode, setValidateCode] = useState(props.credentials.validateCode || '');
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
@@ -113,11 +115,11 @@ function BaseValidateCodeForm(props) {
     }, [props.account.isLoading, props.session.autoAuthState, hasError]);
 
     useEffect(() => {
-        if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus()) {
+        if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !props.isVisible || !isFocused) {
             return;
         }
         inputValidateCodeRef.current.focus();
-    }, []);
+    }, [props.isVisible, isFocused]);
 
     useEffect(() => {
         if (prevValidateCode || !props.credentials.validateCode) {