fix: 2FA bug fixes

src/languages/en.js

@@ -26,7 +26,7 @@ export default {
         zoom: 'Zoom',
         password: 'Password',
         magicCode: 'Magic code',
-        twoFactorCode: 'Two factor code',
+        twoFactorCode: 'Two-factor code',
         workspaces: 'Workspaces',
         profile: 'Profile',
         payments: 'Payments',
@@ -186,7 +186,7 @@ export default {
         requestNewCode: 'You can also',
         requestNewCodeLink: 'request a new code here',
         successfulNewCodeRequest: 'Code requested. Please check your device.',
-        tfaRequiredTitle: 'Two factor authentication\nrequired',
+        tfaRequiredTitle: 'Two-factor authentication\nrequired',
         tfaRequiredDescription: 'Please enter the two-factor authentication code\nwhere you are trying to sign in.',
     },
     moneyRequestConfirmationList: {
@@ -514,7 +514,7 @@ export default {
         stepCodes: 'Recovery codes',
         keepCodesSafe: 'Keep these recovery codes safe!',
         codesLoseAccess:
-            'If you lose access to your authenticator app and don’t have these codes, you will lose access to your account. \n\nNote: Setting up two factor authentication will log you out of all other active sessions.',
+            'If you lose access to your authenticator app and don’t have these codes, you will lose access to your account. \n\nNote: Setting up two-factor authentication will log you out of all other active sessions.',
         stepVerify: 'Verify',
         scanCode: 'Scan the QR code using your',
         authenticatorApp: 'authenticator app',
@@ -529,8 +529,8 @@ export default {
     },
     twoFactorAuthForm: {
         error: {
-            pleaseFillTwoFactorAuth: 'Please enter your two factor code',
-            incorrect2fa: 'Incorrect two factor authentication code. Please try again.',
+            pleaseFillTwoFactorAuth: 'Please enter your two-factor code',
+            incorrect2fa: 'Incorrect two-factor authentication code. Please try again.',
         },
     },
     passwordConfirmationScreen: {
@@ -667,20 +667,20 @@ export default {
         error: {
             pleaseFillMagicCode: 'Please enter your magic code',
             incorrectMagicCode: 'Incorrect magic code.',
-            pleaseFillTwoFactorAuth: 'Please enter your two factor code',
+            pleaseFillTwoFactorAuth: 'Please enter your two-factor code',
         },
     },
     passwordForm: {
         pleaseFillOutAllFields: 'Please fill out all fields',
         pleaseFillPassword: 'Please enter your password',
-        pleaseFillTwoFactorAuth: 'Please enter your two factor code',
-        enterYourTwoFactorAuthenticationCodeToContinue: 'Enter your two factor authentication code to continue',
+        pleaseFillTwoFactorAuth: 'Please enter your two-factor code',
+        enterYourTwoFactorAuthenticationCodeToContinue: 'Enter your two-factor authentication code to continue',
         forgot: 'Forgot?',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         error: {
             incorrectPassword: 'Incorrect password. Please try again.',
             incorrectLoginOrPassword: 'Incorrect login or password. Please try again.',
-            incorrect2fa: 'Incorrect two factor authentication code. Please try again.',
+            incorrect2fa: 'Incorrect two-factor authentication code. Please try again.',
             twoFactorAuthenticationEnabled: 'You have 2FA enabled on this account. Please sign in using your email or phone number.',
             invalidLoginOrPassword: 'Invalid login or password. Please try again or reset your password.',
             unableToResetPassword:

src/pages/ReimbursementAccount/ValidationStep.js

@@ -41,7 +41,7 @@ const propTypes = {
 
     /** User's account who is setting up bank account */
     account: PropTypes.shape({
-        /** If user has Two factor authentication enabled */
+        /** If user has two-factor authentication enabled */
         requiresTwoFactorAuth: PropTypes.bool,
     }),
 };

src/pages/ValidateLoginPage/index.website.js

@@ -117,20 +117,21 @@ class ValidateLoginPage extends Component {
     }
 
     render() {
-        const isTfaRequired = lodashGet(this.props, 'account.requiresTwoFactorAuth', false);
+        const is2FARequired = lodashGet(this.props, 'account.requiresTwoFactorAuth', false);
         const isSignedIn = Boolean(lodashGet(this.props, 'session.authToken', null));
+        const currentAuthState = this.getAutoAuthState();
         return (
             <>
-                {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
-                {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && (!isTfaRequired || isSignedIn) && <AbracadabraModal />}
-                {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isTfaRequired && !isSignedIn && <TfaRequiredModal />}
-                {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.NOT_STARTED && (
+                {currentAuthState === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && <TfaRequiredModal />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && isSignedIn && <AbracadabraModal />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isSignedIn && (
                     <ValidateCodeModal
                         accountID={this.getAccountID()}
                         code={this.getValidateCode()}
                     />
                 )}
-                {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.SIGNING_IN && <FullScreenLoadingIndicator />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.SIGNING_IN && <FullScreenLoadingIndicator />}
             </>
         );
     }

src/pages/settings/Security/TwoFactorAuth/CodesPage.js

@@ -11,6 +11,7 @@ import compose from '../../../../libs/compose';
 import ROUTES from '../../../../ROUTES';
 import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
 import * as Illustrations from '../../../../components/Icon/Illustrations';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 import styles from '../../../../styles/styles';
 import FixedFooter from '../../../../components/FixedFooter';
 import Button from '../../../../components/Button';
@@ -24,6 +25,7 @@ import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthAct
 
 const propTypes = {
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
     account: PropTypes.shape({
         /** User recovery codes for setting up 2-FA */
         recoveryCodes: PropTypes.string,
@@ -73,7 +75,7 @@ function CodesPage(props) {
                     <View style={styles.mv3}>
                         <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox}>
+                    <View style={[styles.twoFactorAuthCodesBox, {paddingHorizontal: props.isSmallScreenWidth ? styles.ph40 : styles.ph60}]}>
                         {props.account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={themeColors.spinner} />
@@ -102,7 +104,7 @@ function CodesPage(props) {
                                         style={styles.twoFactorAuthCodesButton}
                                     />
                                     <Button
-                                        text="Download"
+                                        text={props.translate('common.download')}
                                         medium
                                         onPress={() => {
                                             localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
@@ -133,6 +135,7 @@ CodesPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withWindowDimensions,
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
     }),

src/pages/settings/Security/TwoFactorAuth/VerifyPage.js

@@ -7,6 +7,7 @@ import Navigation from '../../../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
+import * as Session from '../../../../libs/actions/Session';
 import ROUTES from '../../../../ROUTES';
 import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
 import styles from '../../../../styles/styles';
@@ -51,6 +52,10 @@ const defaultProps = {
 };
 
 function VerifyPage(props) {
+    useEffect(() => {
+        Session.clearAccountMessages();
+    }, []);
+
     useEffect(() => {
         if (!props.account.requiresTwoFactorAuth) {
             return;

src/pages/signin/PasswordForm.js

@@ -29,7 +29,7 @@ const propTypes = {
 
     /** The details about the account that the user is signing in with */
     account: PropTypes.shape({
-        /** Whether or not two factor authentication is required */
+        /** Whether or not two-factor authentication is required */
         requiresTwoFactorAuth: PropTypes.bool,
 
         /** Whether or not a sign on form is loading (being submitted) */

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -31,7 +31,7 @@ const propTypes = {
 
     /** The details about the account that the user is signing in with */
     account: PropTypes.shape({
-        /** Whether or not two factor authentication is required */
+        /** Whether or not two-factor authentication is required */
         requiresTwoFactorAuth: PropTypes.bool,
 
         /** Whether or not a sign on form is loading (being submitted) */

src/styles/styles.js

@@ -2137,7 +2137,6 @@ const styles = {
         justifyContent: 'center',
         backgroundColor: themeColors.highlightBG,
         paddingVertical: 28,
-        paddingHorizontal: 60,
         borderRadius: 16,
         marginTop: 32,
     },

src/styles/utilities/spacing.js

@@ -334,6 +334,14 @@ export default {
         paddingHorizontal: 100,
     },
 
+    ph40: {
+        paddingHorizontal: 40,
+    },
+
+    ph60: {
+        paddingHorizontal: 60,
+    },
+
     pr0: {
         paddingRight: 0,
     },

tests/unit/ValidationUtilsTest.js

@@ -2,23 +2,23 @@ const ValidationUtils = require('../../src/libs/ValidationUtils');
 
 describe('ValidationUtils', () => {
     describe('isValidTwoFactorCode', () => {
-        test('numeric two factor code', () => {
+        test('numeric two-factor code', () => {
             expect(ValidationUtils.isValidTwoFactorCode('123456')).toBe(true);
         });
 
-        test('numeric two factor code with leading zeroes', () => {
+        test('numeric two-factor code with leading zeroes', () => {
             expect(ValidationUtils.isValidTwoFactorCode('000001')).toBe(true);
         });
 
-        test('alphanumeric two factor code', () => {
+        test('alphanumeric two-factor code', () => {
             expect(ValidationUtils.isValidTwoFactorCode('abc123')).toBe(false);
         });
 
-        test('special characters two factor code', () => {
+        test('special characters two-factor code', () => {
             expect(ValidationUtils.isValidTwoFactorCode('!@#$%^')).toBe(false);
         });
 
-        test('partial special characters two factor code', () => {
+        test('partial special characters two-factor code', () => {
             expect(ValidationUtils.isValidTwoFactorCode('123$%^')).toBe(false);
         });
     });