diff --git a/src/CONST.ts b/src/CONST.ts index 2eafe3a55d687..23dcb1a591e05 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 e99c481c044bf..3dd6a639a956f 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.setNavigationActionToMicrotaskQueue(Navigation.goBack); + }} + > + {translate('validateCodeModal.requestOneHere')} + + diff --git a/src/languages/en.ts b/src/languages/en.ts index 0275c90d551b4..9750d16fbdab7 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -438,10 +438,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 8a9c5f1e81d9c..64836b2de1715 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -429,10 +429,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', diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx index 9a3584de77797..bf0be21adb973 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,6 +91,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !isVisible || !isFocused) { return; } + setTimeRemaining(CONST.REQUEST_CODE_DELAY); inputValidateCodeRef.current.focus(); }, [isVisible, isFocused]); @@ -161,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); }; /**