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(),