CCM-8023: update styling on login page

src/__tests__/app/__snapshots__/page.test.tsx.snap

@@ -2,8 +2,33 @@
 
 exports[`SignInPage renders 1`] = `
 <DocumentFragment>
-  <div>
-    Placeholder Sign-in form
+  <div
+    class="nhsuk-grid-row"
+  >
+    <div
+      class="nhsuk-grid-column-two-thirds"
+    >
+      <h1
+        class="nhsuk-heading-xl"
+      >
+        Sign in
+      </h1>
+      <div
+        class="nhsuk-u-padding-6 notify-content"
+      >
+        <h2
+          class="nhsuk-heading-m"
+        >
+          Sign in using an NHS account
+        </h2>
+        <button
+          data-testid="mock-cis2-button"
+          type="button"
+        >
+          Mock CIS2 Login Button
+        </button>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

src/__tests__/app/page.test.tsx

@@ -1,28 +1,39 @@
 import { act, render, waitFor } from '@testing-library/react';
-import SignInPage from '@/src/app/page';
+import userEvent from '@testing-library/user-event';
 import { Hub } from 'aws-amplify/utils';
 import { redirect } from 'next/navigation';
+import { federatedSignIn } from '@/src/utils/federated-sign-in';
+import SignInPage from '@/src/app/page';
 
 jest.mock('aws-amplify/utils', () => ({
   Hub: {
     listen: jest.fn(),
   },
 }));
 
+const mockGetSearchParams = jest.fn();
+
 jest.mock('next/navigation', () => ({
   redirect: jest.fn(),
   RedirectType: { replace: 'replace' },
   useSearchParams: () => ({
-    get: () => '',
+    get: mockGetSearchParams,
   }),
 }));
 
-jest.mock('@aws-amplify/ui-react', () => ({
-  withAuthenticator: () => () => <div>Placeholder Sign-in form</div>,
+jest.mock('@/src/components/CIS2LoginButton/CIS2LoginButton', () => ({
+  CIS2LoginButton: ({ onClick }: { onClick: () => void }) => (
+    <button type='button' data-testid='mock-cis2-button' onClick={onClick}>
+      Mock CIS2 Login Button
+    </button>
+  ),
 }));
 
+jest.mock('@/src/utils/federated-sign-in');
+
 const mockedHub = jest.mocked(Hub);
 const mockedRedirect = jest.mocked(redirect);
+const mockFederatedSignIn = jest.mocked(federatedSignIn);
 
 function getEventListener() {
   const lastHubListenCall = mockedHub.listen.mock.lastCall;
@@ -39,26 +50,39 @@ describe('SignInPage', () => {
   it('renders', async () => {
     const container = render(<SignInPage />);
 
-    // Note: we do this because the Amplify UI for login takes a moment to load.
-    await waitFor(() =>
-      expect(
-        container.getByText('Placeholder Sign-in form')
-      ).toBeInTheDocument()
-    );
-
     expect(container.asFragment()).toMatchSnapshot();
   });
 
+  it('does federated sign in when clicking cis2 button', async () => {
+    const user = userEvent.setup();
+
+    const container = render(<SignInPage />);
+
+    const button = container.getByTestId('mock-cis2-button');
+
+    await user.click(button);
+
+    expect(mockFederatedSignIn).toHaveBeenCalledWith('/home');
+  });
+
+  it('sets redirect based on search params when clicking cis2 button', async () => {
+    const user = userEvent.setup();
+
+    mockGetSearchParams.mockReturnValueOnce('/example-redirect');
+
+    const container = render(<SignInPage />);
+
+    const button = container.getByTestId('mock-cis2-button');
+
+    await user.click(button);
+
+    expect(mockFederatedSignIn).toHaveBeenCalledWith('/example-redirect');
+  });
+
   it('listens for oauth state events', async () => {
     const page = <SignInPage />;
     const container = render(page);
 
-    await waitFor(() =>
-      expect(
-        container.getByText('Placeholder Sign-in form')
-      ).toBeInTheDocument()
-    );
-
     const eventListener = getEventListener();
 
     act(() => {
@@ -84,12 +108,6 @@ describe('SignInPage', () => {
     const page = <SignInPage />;
     const container = render(page);
 
-    await waitFor(() =>
-      expect(
-        container.getByText('Placeholder Sign-in form')
-      ).toBeInTheDocument()
-    );
-
     const eventListener = getEventListener();
 
     act(() => {
@@ -110,12 +128,6 @@ describe('SignInPage', () => {
     const page = <SignInPage />;
     const container = render(page);
 
-    await waitFor(() =>
-      expect(
-        container.getByText('Placeholder Sign-in form')
-      ).toBeInTheDocument()
-    );
-
     const eventListener = getEventListener();
 
     act(() => {

src/app/page.tsx

@@ -1,42 +1,16 @@
 'use client';
 
 import React, { Suspense, useEffect, useState } from 'react';
-import { withAuthenticator } from '@aws-amplify/ui-react';
-import { Redirect } from '@/src/components/molecules/Redirect/Redirect';
 import { redirect, RedirectType, useSearchParams } from 'next/navigation';
+import { Hub } from 'aws-amplify/utils';
 import { federatedSignIn, State } from '@/src/utils/federated-sign-in';
 import { CIS2LoginButton } from '@/src/components/CIS2LoginButton/CIS2LoginButton';
-import { Hub } from 'aws-amplify/utils';
-
-const AuthenticatorWrapper = () => {
-  const searchParams = useSearchParams();
-  const redirectPath = searchParams.get('redirect');
-
-  return withAuthenticator(Redirect, {
-    variation: 'default',
-    hideSignUp: true,
-    components: {
-      SignIn: {
-        Header: () => (
-          <h1
-            style={{
-              marginTop: '2.0rem',
-              marginBottom: 0,
-              marginLeft: '2.0rem',
-            }}
-          >
-            <CIS2LoginButton
-              onClick={() => federatedSignIn(redirectPath || '/home')}
-            />
-          </h1>
-        ),
-      },
-    },
-  })({});
-};
 
 export default function Page() {
   const [customState, setCustomState] = useState<State>();
+  const searchParams = useSearchParams();
+
+  const redirectPath = searchParams.get('redirect');
 
   if (customState) {
     redirect(
@@ -55,7 +29,17 @@ export default function Page() {
 
   return (
     <Suspense>
-      <AuthenticatorWrapper />
+      <div className='nhsuk-grid-row'>
+        <div className='nhsuk-grid-column-two-thirds'>
+          <h1 className='nhsuk-heading-xl'>Sign in</h1>
+          <div className='nhsuk-u-padding-6 notify-content'>
+            <h2 className='nhsuk-heading-m'>Sign in using an NHS account</h2>
+            <CIS2LoginButton
+              onClick={() => federatedSignIn(redirectPath || '/home')}
+            />
+          </div>
+        </div>
+      </div>
     </Suspense>
   );
 }

src/styles/app.scss

@@ -5,3 +5,8 @@ code {
   padding: 0.6rem;
   background-color: $nhsuk-border-color;
 }
+
+.notify-content {
+  background-color: $color_nhsuk-white;
+  border: 1px solid $nhsuk-border-color;
+}