Fixed animation image increasing the content height when SAML is enabled

Expensify · Apr 2, 2024 · 05a0e88 · 05a0e88
1 parent 7841b30
commit 05a0e88
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/src/pages/signin/SignInPage.tsx b/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. */}

diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/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}>

diff --git a/src/pages/signin/SignInPageLayout/types.ts b/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 = {

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -148,6 +148,7 @@ export default {
     signInContentMaxWidth: 1360,
     signInHeroContextMaxWidth: 680,
     signInContentMinHeight: 800,
+    signInSAMLContentMinHeight: 1000,
     signInLogoHeightSmallScreen: 28,
     signInLogoHeight: 34,
     signInLogoWidth: 120,