diff --git a/src/languages/en.js b/src/languages/en.js index 17653692828e..950bd7e134e3 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -704,6 +704,7 @@ export default { enterAuthenticatorCode: 'Please enter your authenticator code', requiredWhen2FAEnabled: 'Required when 2FA is enabled', requestNewCode: 'Request a new code in ', + requestNewCodeAfterErrorOccurred: 'Request a new code', error: { pleaseFillMagicCode: 'Please enter your magic code', incorrectMagicCode: 'Incorrect magic code.', diff --git a/src/languages/es.js b/src/languages/es.js index 2a8af5628045..b578c6479567 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -706,6 +706,7 @@ export default { enterAuthenticatorCode: 'Por favor, introduce el código de autenticador', requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado', requestNewCode: 'Pedir un código nuevo en ', + requestNewCodeAfterErrorOccurred: 'Solicitar un nuevo código', error: { pleaseFillMagicCode: 'Por favor, introduce el código mágico', incorrectMagicCode: 'Código mágico incorrecto.', diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index abee3ce0f25b..83a4d0afbaa5 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -46,6 +46,12 @@ const propTypes = { login: PropTypes.string, }), + /** Session of currently logged in user */ + session: PropTypes.shape({ + /** Currently logged in user authToken */ + authToken: PropTypes.string, + }), + /** Indicates which locale the user currently has selected */ preferredLocale: PropTypes.string, @@ -62,6 +68,9 @@ const propTypes = { const defaultProps = { account: {}, credentials: {}, + session: { + authToken: null, + }, preferredLocale: CONST.LOCALES.DEFAULT, }; @@ -79,6 +88,15 @@ function BaseValidateCodeForm(props) { const input2FARef = useRef(); const timerRef = useRef(); + const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors); + + useEffect(() => { + if (!(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading))) { + return; + } + inputValidateCodeRef.current.blur(); + }, [props.account.isLoading, props.session.autoAuthState, hasError]); + useEffect(() => { if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) { return; @@ -219,8 +237,6 @@ function BaseValidateCodeForm(props) { } }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]); - const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors); - return ( <> {/* At this point, if we know the account requires 2FA we already successfully authenticated */} @@ -273,7 +289,9 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {props.translate('validateCodeForm.magicCodeNotReceived')} + + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + )} @@ -309,6 +327,7 @@ export default compose( account: {key: ONYXKEYS.ACCOUNT}, credentials: {key: ONYXKEYS.CREDENTIALS}, preferredLocale: {key: ONYXKEYS.NVP_PREFERRED_LOCALE}, + session: {key: ONYXKEYS.SESSION}, }), withToggleVisibilityView, withNetwork(),