Fixed getting two magic codes upon signing in once

src/pages/signin/ChooseSSOOrMagicCode.tsx

@@ -1,100 +1,67 @@
-import React, {useEffect} from 'react';
-import {Keyboard, View} from 'react-native';
+import React from 'react';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
-import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
-import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as Session from '@userActions/Session';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Account, Credentials} from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
-import Terms from './Terms';
+import type {Account} from '@src/types/onyx';
+import ValidateCodeForm from './ValidateCodeForm';
 
 type ChooseSSOOrMagicCodeOnyxProps = {
-    /** The credentials of the logged in person */
-    credentials: OnyxEntry<Credentials>;
-
     /** The details about the account that the user is signing in with */
     account: OnyxEntry<Account>;
 };
 
 type ChooseSSOOrMagicCodeProps = ChooseSSOOrMagicCodeOnyxProps & {
-    /** Function that returns whether the user is using SAML or magic codes to log in */
-    setIsUsingMagicCode: (value: boolean) => void;
+    /** Determines if user is switched to using recovery code instead of 2fa code */
+    isUsingRecoveryCode: boolean;
+
+    /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
+    setIsUsingRecoveryCode: (value: boolean) => void;
 };
 
-function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) {
+function ChooseSSOOrMagicCode({account, isUsingRecoveryCode, setIsUsingRecoveryCode}: ChooseSSOOrMagicCodeProps) {
     const styles = useThemeStyles();
-    const {isKeyboardShown} = useKeyboardState();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
-
-    // This view doesn't have a field for user input, so dismiss the device keyboard if shown
-    useEffect(() => {
-        if (!isKeyboardShown) {
-            return;
-        }
-        Keyboard.dismiss();
-    }, [isKeyboardShown]);
+    const loginTextAfterMagicCode = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
+    const loginText = account?.requiresTwoFactorAuth ? loginTextAfterMagicCode : translate('samlSignIn.orContinueWithMagicCode');
 
     return (
-        <>
-            <View>
-                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
-                <Button
-                    isDisabled={isOffline}
-                    success
-                    large
-                    style={[styles.mv3]}
-                    text={translate('samlSignIn.useSingleSignOn')}
-                    isLoading={account?.isLoading}
-                    onPress={() => {
-                        Navigation.navigate(ROUTES.SAML_SIGN_IN);
-                    }}
-                />
+        <View>
+            <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
+            <Button
+                isDisabled={isOffline}
+                success
+                large
+                style={[styles.mv3]}
+                text={translate('samlSignIn.useSingleSignOn')}
+                onPress={() => {
+                    Navigation.navigate(ROUTES.SAML_SIGN_IN);
+                }}
+            />
 
-                <View style={[styles.mt5]}>
-                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>
-                        {translate('samlSignIn.orContinueWithMagicCode')}
-                    </Text>
-                </View>
-
-                <Button
-                    isDisabled={isOffline}
-                    style={[styles.mv3]}
-                    large
-                    text={translate('samlSignIn.useMagicCode')}
-                    isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)}
-                    onPress={() => {
-                        Session.resendValidateCode(credentials?.login);
-                        setIsUsingMagicCode(true);
-                    }}
-                />
-                {!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />}
-                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
-            </View>
-            <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
-                <Terms />
+            <View style={[styles.mt5]}>
+                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{loginText}</Text>
             </View>
-        </>
+
+            <ValidateCodeForm
+                isVisible
+                isUsingRecoveryCode={isUsingRecoveryCode}
+                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+            />
+        </View>
     );
 }
 
 ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode';
 
-export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    account: {key: ONYXKEYS.ACCOUNT},
-})(ChooseSSOOrMagicCode);
+export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({account: {key: ONYXKEYS.ACCOUNT}})(ChooseSSOOrMagicCode);

src/pages/signin/SignInPage.tsx

@@ -61,6 +61,7 @@ type RenderOption = {
     shouldInitiateSAMLLogin: boolean;
     shouldShowWelcomeHeader: boolean;
     shouldShowWelcomeText: boolean;
+    isSAMLEnabled: boolean;
 };
 
 type GetRenderOptionsParams = {
@@ -123,6 +124,7 @@ function getRenderOptions({
         shouldInitiateSAMLLogin,
         shouldShowWelcomeHeader,
         shouldShowWelcomeText,
+        isSAMLEnabled,
     };
 }
 
@@ -181,6 +183,7 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
         shouldInitiateSAMLLogin,
         shouldShowWelcomeHeader,
         shouldShowWelcomeText,
+        isSAMLEnabled,
     } = getRenderOptions({
         hasLogin: !!credentials?.login,
         hasValidateCode: !!credentials?.validateCode,
@@ -260,6 +263,7 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 ref={signInPageLayoutRef}
                 navigateFocus={navigateFocus}
+                isSAMLEnabled={isSAMLEnabled}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
              so that password managers can access the values. Conditionally rendering this component will break this feature. */}
@@ -279,7 +283,12 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
                 {!shouldShowAnotherLoginPageOpenedMessage && (
                     <>
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
-                        {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
+                        {shouldShowChooseSSOOrMagicCode && (
+                            <ChooseSSOOrMagicCode
+                                isUsingRecoveryCode={isUsingRecoveryCode}
+                                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                            />
+                        )}
                         {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
                     </>
                 )}

src/pages/signin/SignInPageLayout/index.tsx

@@ -33,6 +33,7 @@ function SignInPageLayout(
         shouldShowWelcomeText = false,
         navigateFocus = () => {},
         children,
+        isSAMLEnabled = false,
     }: SignInPageLayoutProps,
     ref: ForwardedRef<SignInPageLayoutRef>,
 ) {
@@ -78,7 +79,7 @@ function SignInPageLayout(
 
     const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
 
-    const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight);
+    const backgroundImageHeight = Math.max(isSAMLEnabled ? variables.signInSAMLContentMinHeight : variables.signInContentMinHeight, containerHeight);
 
     return (
         <View style={containerStyles}>

src/pages/signin/SignInPageLayout/types.ts

@@ -25,6 +25,10 @@ type SignInPageLayoutProps = {
     customHeroBody?: string;
 
     navigateFocus?: () => void;
+
+    /** Whether to use the default minimun content height or the recommened one
+     *  for login with SAML at the login page */
+    isSAMLEnabled?: boolean;
 };
 
 type SignInPageLayoutRef = {

src/styles/variables.ts

@@ -148,6 +148,7 @@ export default {
     signInContentMaxWidth: 1360,
     signInHeroContextMaxWidth: 680,
     signInContentMinHeight: 800,
+    signInSAMLContentMinHeight: 1000,
     signInLogoHeightSmallScreen: 28,
     signInLogoHeight: 34,
     signInLogoWidth: 120,