From a95b3e27222729d202b90ba69bc7cb33b8d21602 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 17:18:27 +0300 Subject: [PATCH 01/12] make sure inputs get blurred when validating magic code using link --- src/languages/en.js | 1 + src/languages/es.js | 1 + .../signin/ValidateCodeForm/BaseValidateCodeForm.js | 9 ++++++++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index 17653692828e..a22b5380733f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -701,6 +701,7 @@ export default { }, validateCodeForm: { magicCodeNotReceived: "Didn't receive a magic code?", + requestNewCodeAfterErrorOccured: "Request a new code", enterAuthenticatorCode: 'Please enter your authenticator code', requiredWhen2FAEnabled: 'Required when 2FA is enabled', requestNewCode: 'Request a new code in ', diff --git a/src/languages/es.js b/src/languages/es.js index 2a8af5628045..9e72d605b73a 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -703,6 +703,7 @@ export default { }, validateCodeForm: { magicCodeNotReceived: '¿No recibiste un código mágico?', + requestNewCodeAfterErrorOccured: "Solicitar un nuevo código", enterAuthenticatorCode: 'Por favor, introduce el código de autenticador', requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado', requestNewCode: 'Pedir un código nuevo en ', diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index abee3ce0f25b..695200c0d3a1 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -79,6 +79,12 @@ function BaseValidateCodeForm(props) { const input2FARef = useRef(); const timerRef = useRef(); + useEffect(() => { + if(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading)) { + inputValidateCodeRef.current.blur(); + } + }, [props.account.isLoading, props.session.autoAuthState]) + useEffect(() => { if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) { return; @@ -273,7 +279,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {props.translate('validateCodeForm.magicCodeNotReceived')} + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccured') : props.translate('validateCodeForm.magicCodeNotReceived')} )} @@ -309,6 +315,7 @@ export default compose( account: {key: ONYXKEYS.ACCOUNT}, credentials: {key: ONYXKEYS.CREDENTIALS}, preferredLocale: {key: ONYXKEYS.NVP_PREFERRED_LOCALE}, + session: {key: ONYXKEYS.SESSION}, }), withToggleVisibilityView, withNetwork(), From c1edca5234b2a817cb5a89e69e14e78b0815407c Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 17:24:27 +0300 Subject: [PATCH 02/12] Added PropTypes --- .../signin/ValidateCodeForm/BaseValidateCodeForm.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 695200c0d3a1..f3528f0ee3c1 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, }; From ec8565728ebf91285232e0a092c086396b78637c Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 17:46:48 +0300 Subject: [PATCH 03/12] consistency issue fixed --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index 9e72d605b73a..3a02d096e5ec 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -703,7 +703,7 @@ export default { }, validateCodeForm: { magicCodeNotReceived: '¿No recibiste un código mágico?', - requestNewCodeAfterErrorOccured: "Solicitar un nuevo código", + requestNewCodeAfterErrorOccured: 'Solicitar un nuevo código', enterAuthenticatorCode: 'Por favor, introduce el código de autenticador', requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado', requestNewCode: 'Pedir un código nuevo en ', From d4a9daec6b358cc9708d6b8d0de545f259fad197 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 17:48:01 +0300 Subject: [PATCH 04/12] fix --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index a22b5380733f..117e45c1961d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -701,10 +701,10 @@ export default { }, validateCodeForm: { magicCodeNotReceived: "Didn't receive a magic code?", - requestNewCodeAfterErrorOccured: "Request a new code", enterAuthenticatorCode: 'Please enter your authenticator code', requiredWhen2FAEnabled: 'Required when 2FA is enabled', requestNewCode: 'Request a new code in ', + requestNewCodeAfterErrorOccured: "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 3a02d096e5ec..8b68cf794594 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -703,10 +703,10 @@ export default { }, validateCodeForm: { magicCodeNotReceived: '¿No recibiste un código mágico?', - requestNewCodeAfterErrorOccured: 'Solicitar un nuevo código', enterAuthenticatorCode: 'Por favor, introduce el código de autenticador', requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado', requestNewCode: 'Pedir un código nuevo en ', + requestNewCodeAfterErrorOccured: 'Solicitar un nuevo código', error: { pleaseFillMagicCode: 'Por favor, introduce el código mágico', incorrectMagicCode: 'Código mágico incorrecto.', From 1dd4349180bdaf8bd889f9566f839284cf27e904 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 18:09:56 +0300 Subject: [PATCH 05/12] added Boolean --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index f3528f0ee3c1..38c3b8347a1b 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -288,7 +288,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccured') : props.translate('validateCodeForm.magicCodeNotReceived')} + {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccured') : props.translate('validateCodeForm.magicCodeNotReceived')} )} From c2c229c758e12c9c3127a94644f75757cb7b5f2a Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 21:22:37 +0300 Subject: [PATCH 06/12] typo fixed --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 117e45c1961d..7fc56a90ec3e 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -704,7 +704,7 @@ export default { enterAuthenticatorCode: 'Please enter your authenticator code', requiredWhen2FAEnabled: 'Required when 2FA is enabled', requestNewCode: 'Request a new code in ', - requestNewCodeAfterErrorOccured: "Request a new code", + 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 8b68cf794594..b578c6479567 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -706,7 +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 ', - requestNewCodeAfterErrorOccured: 'Solicitar un nuevo código', + 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 38c3b8347a1b..01751cc6968b 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -288,7 +288,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccured') : props.translate('validateCodeForm.magicCodeNotReceived')} + {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} )} From bb33473fe3516358b85dd5afe259cee75e8e44ab Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 21:43:13 +0300 Subject: [PATCH 07/12] single quote --- src/languages/en.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index 7fc56a90ec3e..950bd7e134e3 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -704,7 +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", + requestNewCodeAfterErrorOccurred: 'Request a new code', error: { pleaseFillMagicCode: 'Please enter your magic code', incorrectMagicCode: 'Incorrect magic code.', From 0fa37e12df881546f9847819087ed20b58038ecc Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 21:46:09 +0300 Subject: [PATCH 08/12] fix lint error --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 01751cc6968b..2286a5fb4ba6 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -88,6 +88,8 @@ 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)) { inputValidateCodeRef.current.blur(); @@ -234,8 +236,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 */} From a2a780f5a5004f84c4465cccdd71a3c49f1609a0 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 21:51:19 +0300 Subject: [PATCH 09/12] fix lint error --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 2286a5fb4ba6..4203a541f2b3 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -94,7 +94,7 @@ function BaseValidateCodeForm(props) { if(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading)) { inputValidateCodeRef.current.blur(); } - }, [props.account.isLoading, props.session.autoAuthState]) + }, [props.account.isLoading, props.session.autoAuthState, hasError]) useEffect(() => { if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) { @@ -288,7 +288,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} )} From 8426a5eb780b2cfe3fdfea5fe0a0694d12f8934b Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 21:57:53 +0300 Subject: [PATCH 10/12] fix lint error --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 4203a541f2b3..46b8db6b9869 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -91,9 +91,10 @@ function BaseValidateCodeForm(props) { 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)) { - inputValidateCodeRef.current.blur(); + 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(() => { @@ -288,7 +289,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} )} From 2f1d2fe0ee879916d9fd8896b378667d120eeeb8 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 22:13:43 +0300 Subject: [PATCH 11/12] removed boolean --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 46b8db6b9869..7721585d7bd4 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -289,7 +289,7 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {Boolean(hasError) ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} )} From 06c7156b0ce43270147aa2a9b13cc08a3ce954cd Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 27 Jun 2023 22:20:32 +0300 Subject: [PATCH 12/12] fixed prettier issue --- .../signin/ValidateCodeForm/BaseValidateCodeForm.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 7721585d7bd4..83a4d0afbaa5 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -91,11 +91,11 @@ function BaseValidateCodeForm(props) { 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 + 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]) + }, [props.account.isLoading, props.session.autoAuthState, hasError]); useEffect(() => { if (!inputValidateCodeRef.current || prevIsVisible || !props.isVisible || !canFocusInputOnScreenFocus()) { @@ -289,7 +289,9 @@ function BaseValidateCodeForm(props) { accessibilityRole="button" accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} + )}