Merge pull request #19260 from BeeMargarida/fix/19187-2fa_fixes

fix: 2FA bug fixes

ios/Podfile.lock

@@ -1135,4 +1135,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.12.0

src/components/withWindowDimensions.js

@@ -14,6 +14,9 @@ const windowDimensionsPropTypes = {
     // Height of the window
     windowHeight: PropTypes.number.isRequired,
 
+    // Is the window width extra narrow, like on a Fold mobile device?
+    isExtraSmallScreenWidth: PropTypes.bool.isRequired,
+
     // Is the window width narrow, like on a mobile device?
     isSmallScreenWidth: PropTypes.bool.isRequired,
 
@@ -75,6 +78,7 @@ class WindowDimensionsProvider extends React.Component {
         return (
             <SafeAreaInsetsContext.Consumer>
                 {(insets) => {
+                    const isExtraSmallScreenWidth = this.state.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
                     const isSmallScreenWidth = this.state.windowWidth <= variables.mobileResponsiveWidthBreakpoint;
                     const isMediumScreenWidth = !isSmallScreenWidth && this.state.windowWidth <= variables.tabletResponsiveWidthBreakpoint;
                     const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth;
@@ -83,6 +87,7 @@ class WindowDimensionsProvider extends React.Component {
                             value={{
                                 windowHeight: this.state.windowHeight + getWindowHeightAdjustment(insets),
                                 windowWidth: this.state.windowWidth,
+                                isExtraSmallScreenWidth,
                                 isSmallScreenWidth,
                                 isMediumScreenWidth,
                                 isLargeScreenWidth,

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',
@@ -195,7 +195,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: {
@@ -534,7 +534,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',
@@ -549,8 +549,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: {
@@ -693,20 +693,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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {ActivityIndicator, View} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
@@ -11,6 +12,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 +26,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,
@@ -64,65 +67,67 @@ function CodesPage(props) {
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
             <FullPageOfflineBlockingView>
-                <Section
-                    title={props.translate('twoFactorAuth.keepCodesSafe')}
-                    icon={Illustrations.ShieldYellow}
-                    containerStyles={[styles.twoFactorAuthSection]}
-                    iconContainerStyles={[styles.ml6]}
-                >
-                    <View style={styles.mv3}>
-                        <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
-                    </View>
-                    <View style={styles.twoFactorAuthCodesBox}>
-                        {props.account.isLoading ? (
-                            <View style={styles.twoFactorLoadingContainer}>
-                                <ActivityIndicator color={themeColors.spinner} />
-                            </View>
-                        ) : (
-                            <>
-                                <View style={styles.twoFactorAuthCodesContainer}>
-                                    {Boolean(props.account.recoveryCodes) &&
-                                        _.map(props.account.recoveryCodes.split(', '), (code) => (
-                                            <Text
-                                                style={styles.twoFactorAuthCode}
-                                                key={code}
-                                            >
-                                                {code}
-                                            </Text>
-                                        ))}
+                <ScrollView contentContainerStyle={styles.flex1}>
+                    <Section
+                        title={props.translate('twoFactorAuth.keepCodesSafe')}
+                        icon={Illustrations.ShieldYellow}
+                        containerStyles={[styles.twoFactorAuthSection]}
+                        iconContainerStyles={[styles.ml6]}
+                    >
+                        <View style={styles.mv3}>
+                            <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
+                        </View>
+                        <View style={[styles.twoFactorAuthCodesBox(props)]}>
+                            {props.account.isLoading ? (
+                                <View style={styles.twoFactorLoadingContainer}>
+                                    <ActivityIndicator color={themeColors.spinner} />
                                 </View>
-                                <View style={styles.twoFactorAuthCodesButtonsContainer}>
-                                    <Button
-                                        text={props.translate('twoFactorAuth.copyCodes')}
-                                        medium
-                                        onPress={() => {
-                                            Clipboard.setString(props.account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
-                                        }}
-                                        style={styles.twoFactorAuthCodesButton}
-                                    />
-                                    <Button
-                                        text="Download"
-                                        medium
-                                        onPress={() => {
-                                            localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
-                                        }}
-                                        style={styles.twoFactorAuthCodesButton}
-                                    />
-                                </View>
-                            </>
-                        )}
-                    </View>
-                </Section>
-                <FixedFooter style={[styles.twoFactorAuthFooter]}>
-                    <Button
-                        success
-                        text={props.translate('common.next')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                        isDisabled={isNextButtonDisabled}
-                    />
-                </FixedFooter>
+                            ) : (
+                                <>
+                                    <View style={styles.twoFactorAuthCodesContainer}>
+                                        {Boolean(props.account.recoveryCodes) &&
+                                            _.map(props.account.recoveryCodes.split(', '), (code) => (
+                                                <Text
+                                                    style={styles.twoFactorAuthCode}
+                                                    key={code}
+                                                >
+                                                    {code}
+                                                </Text>
+                                            ))}
+                                    </View>
+                                    <View style={styles.twoFactorAuthCodesButtonsContainer}>
+                                        <Button
+                                            text={props.translate('twoFactorAuth.copyCodes')}
+                                            medium
+                                            onPress={() => {
+                                                Clipboard.setString(props.account.recoveryCodes);
+                                                setIsNextButtonDisabled(false);
+                                            }}
+                                            style={styles.twoFactorAuthCodesButton}
+                                        />
+                                        <Button
+                                            text={props.translate('common.download')}
+                                            medium
+                                            onPress={() => {
+                                                localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
+                                                setIsNextButtonDisabled(false);
+                                            }}
+                                            style={styles.twoFactorAuthCodesButton}
+                                        />
+                                    </View>
+                                </>
+                            )}
+                        </View>
+                    </Section>
+                    <FixedFooter style={[styles.twoFactorAuthFooter]}>
+                        <Button
+                            success
+                            text={props.translate('common.next')}
+                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
+                            isDisabled={isNextButtonDisabled}
+                        />
+                    </FixedFooter>
+                </ScrollView>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
@@ -133,6 +138,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

@@ -30,7 +30,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

@@ -2142,14 +2142,26 @@ const styles = {
         padding: 0,
     },
 
-    twoFactorAuthCodesBox: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: themeColors.highlightBG,
-        paddingVertical: 28,
-        paddingHorizontal: 60,
-        borderRadius: 16,
-        marginTop: 32,
+    twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, isSmallScreenWidth}) => {
+        let paddingHorizontal = styles.ph15;
+
+        if (isSmallScreenWidth) {
+            paddingHorizontal = styles.ph10;
+        }
+
+        if (isExtraSmallScreenWidth) {
+            paddingHorizontal = styles.ph4;
+        }
+
+        return {
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: themeColors.highlightBG,
+            paddingVertical: 28,
+            borderRadius: 16,
+            marginTop: 32,
+            ...paddingHorizontal,
+        };
     },
 
     twoFactorLoadingContainer: {

src/styles/utilities/spacing.js

@@ -330,6 +330,10 @@ export default {
         paddingHorizontal: 40,
     },
 
+    ph15: {
+        paddingHorizontal: 60,
+    },
+
     ph25: {
         paddingHorizontal: 100,
     },

src/styles/variables.js

@@ -72,6 +72,7 @@ export default {
     emojiSize: 20,
     emojiLineHeight: 28,
     iouAmountTextSize: 40,
+    extraSmallMobileResponsiveWidthBreakpoint: 320,
     mobileResponsiveWidthBreakpoint: 800,
     modalFullscreenBackdropOpacity: 0.5,
     tabletResponsiveWidthBreakpoint: 1024,