Add account creation instructions to login page

CruGlobal · Sep 6, 2024 · 7c5f059 · 7c5f059
1 parent 5a639b1
commit 7c5f059
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/pages/login-apioauth.page.test.tsx b/pages/login-apioauth.page.test.tsx
@@ -70,6 +70,7 @@ describe('Login - API_OAUTH', () => {
       signInButtonText: 'Sign In with Third-party oAuth',
       signInAuthProviderId: 'apioauth',
       immediateSignIn: false,
+      isOkta: false,
     });
     expect(redirect).toBeUndefined();
   });
@@ -85,6 +86,7 @@ describe('Login - API_OAUTH', () => {
       signInButtonText: 'Sign In with Third-party oAuth',
       signInAuthProviderId: 'apioauth',
       immediateSignIn: true,
+      isOkta: false,
     });
     expect(redirect).toBeUndefined();
     expect(setHeaderMock).toHaveBeenCalledWith(
@@ -121,4 +123,19 @@ describe('Login - API_OAUTH', () => {
       expect(signIn).toHaveBeenCalledWith('apioauth');
     });
   });
+
+  it('does not render create account help text', () => {
+    const { queryByText } = render(
+      <Components
+        props={{
+          signInButtonText: 'Sign In with SSO',
+          signInAuthProviderId: 'apioauth',
+          immediateSignIn: false,
+          isOkta: false,
+        }}
+      />,
+    );
+
+    expect(queryByText(/Don't have an Okta account\?/)).not.toBeInTheDocument();
+  });
 });
diff --git a/pages/login.page.test.tsx b/pages/login.page.test.tsx
@@ -89,6 +89,7 @@ describe('Login - OKTA', () => {
         signInButtonText: 'Sign In',
         signInAuthProviderId: 'okta',
         immediateSignIn: false,
+        isOkta: true,
       });
       expect(redirect).toBeUndefined();
     });
@@ -108,6 +109,7 @@ describe('Login - OKTA', () => {
         signInButtonText: 'Sign In',
         signInAuthProviderId: 'okta',
         immediateSignIn: false,
+        isOkta: true,
       });
       expect(redirect).toBeUndefined();
     });
@@ -123,6 +125,7 @@ describe('Login - OKTA', () => {
         signInButtonText: 'Sign In',
         signInAuthProviderId: 'okta',
         immediateSignIn: true,
+        isOkta: true,
       });
       expect(redirect).toBeUndefined();
       expect(setHeaderMock).toHaveBeenCalledWith(
@@ -177,4 +180,19 @@ describe('Login - OKTA', () => {
       });
     });
   });
+
+  it('renders create account help text', () => {
+    const { getByText } = render(
+      <Components
+        props={{
+          signInButtonText: 'Sign In',
+          signInAuthProviderId: 'okta',
+          immediateSignIn: false,
+          isOkta: true,
+        }}
+      />,
+    );
+
+    expect(getByText(/Don't have an Okta account\?/)).toBeInTheDocument();
+  });
 });
diff --git a/pages/login.page.tsx b/pages/login.page.tsx
@@ -2,7 +2,8 @@ import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import React, { ReactElement, useEffect } from 'react';
 import SubjectIcon from '@mui/icons-material/Subject';
-import { Button } from '@mui/material';
+import { Button, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { getSession, signIn } from 'next-auth/react';
 import BaseLayout from 'src/components/Layouts/Basic';
 import Loading from 'src/components/Loading';
@@ -11,16 +12,22 @@ import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { extractCookie } from 'src/lib/extractCookie';
 import i18n from 'src/lib/i18n';
 
+const SignUpBox = styled('div')(({ theme }) => ({
+  marginBlock: theme.spacing(2),
+}));
+
 export interface LoginProps {
   signInButtonText: string;
   signInAuthProviderId: string;
   immediateSignIn: boolean;
+  isOkta: boolean;
 }
 
 const Login = ({
   signInButtonText,
   signInAuthProviderId,
   immediateSignIn,
+  isOkta,
 }: LoginProps): ReactElement => {
   const { appName } = useGetAppSettings();
 
@@ -67,6 +74,16 @@ const Login = ({
         >
           Find help
         </Button>
+        {isOkta && (
+          <SignUpBox>
+            <Typography>
+              Don&apos;t have an Okta account?
+              <br />
+              Click the <strong>Sign in</strong> button above, then{' '}
+              <strong>Sign up</strong>.
+            </Typography>
+          </SignUpBox>
+        )}
       </Welcome>
     </>
   );
@@ -116,6 +133,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       signInButtonText,
       signInAuthProviderId,
       immediateSignIn,
+      isOkta: authProvider === 'OKTA',
     },
   };
 };

diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx
@@ -26,13 +26,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
     minHeight: '100vh',
     minWidth: '100vw',
     backgroundColor: theme.palette.mpdxBlue.main,
+    '.MuiTypography-root': {
+      color: theme.palette.common.white,
+    },
   },
   subtitle: {
     maxWidth: '450px',
   },
-  whiteText: {
-    color: theme.palette.common.white,
-  },
 }));
 
 const variants = {
@@ -78,7 +78,6 @@ const Welcome = ({
                     data-testid="welcomeTitle"
                     variant="h4"
                     component="h1"
-                    className={classes.whiteText}
                   >
                     {title}
                   </Typography>
@@ -89,10 +88,7 @@ const Welcome = ({
               <motion.div variants={divVariants}>
                 {typeof subtitle === 'string' ? (
                   <Box my={3} className={classes.subtitle}>
-                    <Typography
-                      data-testid="welcomeSubtitle"
-                      className={classes.whiteText}
-                    >
+                    <Typography data-testid="welcomeSubtitle">
                       {subtitle}
                     </Typography>
                   </Box>