From e009acb9e99bded193ad4750f16efa07ed98cd8d Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 16 Jul 2024 15:17:20 +0700 Subject: [PATCH 1/4] Update the magic code expired page --- .../ValidateCode/ExpiredValidateCodeModal.tsx | 19 ++++++++++++++++++- src/languages/en.ts | 3 ++- src/languages/es.ts | 3 ++- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx index e99c481c044b..c17840f924b9 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx @@ -1,17 +1,23 @@ import React from 'react'; import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; +import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; +import * as Session from '@userActions/Session'; +import ONYXKEYS from '@src/ONYXKEYS'; function ExpiredValidateCodeModal() { const theme = useTheme(); const styles = useThemeStyles(); + const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS); const {translate} = useLocalize(); return ( @@ -25,7 +31,18 @@ function ExpiredValidateCodeModal() { {translate('validateCodeModal.expiredCodeTitle')} - {translate('validateCodeModal.expiredCodeDescription')} + + {translate('validateCodeModal.expiredCodeDescription')} + {translate('validateCodeModal.or')}{' '} + { + Session.beginSignIn(credentials?.login ?? ''); + Navigation.goBack(); + }} + > + {translate('validateCodeModal.requestOneHere')} + + diff --git a/src/languages/en.ts b/src/languages/en.ts index d32e228dbb28..0c52b557ce01 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -435,10 +435,11 @@ export default { or: ', or', signInHere: 'just sign in here', expiredCodeTitle: 'Magic code expired', - expiredCodeDescription: 'Go back to the original device and request a new code.', + expiredCodeDescription: 'Go back to the original device and request a new code', successfulNewCodeRequest: 'Code requested. Please check your device.', tfaRequiredTitle: 'Two-factor authentication\nrequired', tfaRequiredDescription: "Please enter the two-factor authentication code\nwhere you're trying to sign in.", + requestOneHere: 'request one here.', }, moneyRequestConfirmationList: { paidBy: 'Paid by', diff --git a/src/languages/es.ts b/src/languages/es.ts index 0f6fa177ef82..f9856dd13fce 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -426,10 +426,11 @@ export default { description: 'Por favor, introduce el código utilizando el dispositivo\nen el que se solicitó originalmente', signInHere: 'simplemente inicia sesión aquí', expiredCodeTitle: 'Código mágico caducado', - expiredCodeDescription: 'Vuelve al dispositivo original y solicita un código nuevo.', + expiredCodeDescription: 'Vuelve al dispositivo original y solicita un código nuevo', successfulNewCodeRequest: 'Código solicitado. Por favor, comprueba tu dispositivo.', tfaRequiredTitle: 'Se requiere autenticación\nde dos factores', tfaRequiredDescription: 'Por favor, introduce el código de autenticación de dos factores\ndonde estás intentando iniciar sesión.', + requestOneHere: 'solicite uno aquí.', }, moneyRequestConfirmationList: { paidBy: 'Pagado por', From 71e5c086a69b5380362588f46bd00714d84c4412 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 23 Jul 2024 23:18:21 +0700 Subject: [PATCH 2/4] set time remaining --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx index 9a3584de7779..97b961b8cff8 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -91,6 +91,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !isVisible || !isFocused) { return; } + setTimeRemaining(30); inputValidateCodeRef.current.focus(); }, [isVisible, isFocused]); From 766a8986dd8f186ba093f4020742715b59b6ab60 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 24 Jul 2024 10:25:41 +0700 Subject: [PATCH 3/4] add new const --- src/CONST.ts | 2 ++ src/components/ValidateCode/ExpiredValidateCodeModal.tsx | 4 +++- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx | 6 +++--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 2eafe3a55d68..23dcb1a591e0 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -626,6 +626,8 @@ const CONST = { SIGN_IN_FORM_WIDTH: 300, + REQUEST_CODE_DELAY: 30, + DEEPLINK_PROMPT_DENYLIST: [SCREENS.HOME, SCREENS.SIGN_IN_WITH_APPLE_DESKTOP, SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP], SIGN_IN_METHOD: { diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx index c17840f924b9..63e1fceb4e03 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx @@ -36,7 +36,9 @@ function ExpiredValidateCodeModal() { {translate('validateCodeModal.or')}{' '} { - Session.beginSignIn(credentials?.login ?? ''); + requestAnimationFrame(() => { + Session.beginSignIn(credentials?.login ?? ''); + }); Navigation.goBack(); }} > diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx index 97b961b8cff8..bf0be21adb97 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -64,7 +64,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs const [formError, setFormError] = useState({}); const [validateCode, setValidateCode] = useState(credentials?.validateCode ?? ''); const [twoFactorAuthCode, setTwoFactorAuthCode] = useState(''); - const [timeRemaining, setTimeRemaining] = useState(30); + const [timeRemaining, setTimeRemaining] = useState(CONST.REQUEST_CODE_DELAY as number); const [recoveryCode, setRecoveryCode] = useState(''); const [needToClearError, setNeedToClearError] = useState(!!account?.errors); @@ -91,7 +91,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !isVisible || !isFocused) { return; } - setTimeRemaining(30); + setTimeRemaining(CONST.REQUEST_CODE_DELAY); inputValidateCodeRef.current.focus(); }, [isVisible, isFocused]); @@ -162,7 +162,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs User.resendValidateCode(credentials?.login ?? ''); inputValidateCodeRef.current?.clear(); // Give feedback to the user to let them know the email was sent so that they don't spam the button. - setTimeRemaining(30); + setTimeRemaining(CONST.REQUEST_CODE_DELAY); }; /** From b543401babac9b7de8519912e29b90c5b7c5dd45 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 25 Jul 2024 09:58:22 +0700 Subject: [PATCH 4/4] fix: remove useless code --- src/components/ValidateCode/ExpiredValidateCodeModal.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx index 63e1fceb4e03..3dd6a639a956 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx @@ -36,10 +36,8 @@ function ExpiredValidateCodeModal() { {translate('validateCodeModal.or')}{' '} { - requestAnimationFrame(() => { - Session.beginSignIn(credentials?.login ?? ''); - }); - Navigation.goBack(); + Session.beginSignIn(credentials?.login ?? ''); + Navigation.setNavigationActionToMicrotaskQueue(Navigation.goBack); }} > {translate('validateCodeModal.requestOneHere')}