diff --git a/pages/login-apioauth.page.test.tsx b/pages/login-apioauth.page.test.tsx index 454ce9f1c..553ffcf7d 100644 --- 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( + , + ); + + expect(queryByText(/Don't have an Okta account\?/)).not.toBeInTheDocument(); + }); }); diff --git a/pages/login.page.test.tsx b/pages/login.page.test.tsx index 74e25ff4b..b66a9ec1b 100644 --- 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( + , + ); + + expect(getByText(/Don't have an Okta account\?/)).toBeInTheDocument(); + }); }); diff --git a/pages/login.page.tsx b/pages/login.page.tsx index 0146d2d25..2bb3274d4 100644 --- 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 + {isOkta && ( + + + Don't have an Okta account? +
+ Click the Sign in button above, then{' '} + Sign up. +
+
+ )} ); @@ -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 index 2872481cb..a0a7ae502 100644 --- 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} @@ -89,10 +88,7 @@ const Welcome = ({ {typeof subtitle === 'string' ? ( - + {subtitle}