Merge pull request #179 from NHSDigital/feature/CCM-7248_auth-pages

CCM-7248: update header to point and redirect to /auth

Author: bhansell1

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:20-alpine AS builder
+
+# Install necessary packages for Puppeteer
+# Installs latest Chromium (100) package.
+RUN apk add --no-cache \
+    chromium \
+    ttf-freefont \
+    udev
+
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN addgroup -S nonroot \
+    && adduser -S nonroot -G nonroot
+
+# Set permissions to add files/folders to /app
+RUN chown -R nonroot:nonroot /app
+
+# Switch to the non-root user
+USER nonroot
+
+RUN npm ci --ignore-scripts
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]

README.md

@@ -37,32 +37,36 @@
 
 ### Running the project locally
 
-1) Convert the email HTML template into a JSON file that can be packaged with the email sending lambda.
+1. Convert the email HTML template into a JSON file that can be packaged with the email sending lambda.
 
    ```shell
    npm run generate-dependencies
    ```
 
-2) (Optional) If you want to test sending emails then you will need to set the following environment variables locally.
+2. (Optional) If you want to test sending emails then you will need to set the following environment variables locally.
 
    ```shell
    export ACCOUNT_ID=<aws_account_id>
    export NOTIFY_DOMAIN_NAME=<ses_verified_domain>
    ```
 
-3) To run an Amplify sandbox. To do this, authenticate with an AWS account that has Amplify enabled, then run:
+3. To run an Amplify sandbox. To do this, authenticate with an AWS account that has Amplify enabled, then run:
 
    ```shell
    npx ampx sandbox --profile <the name of the AWS config profile for the account you are authenticated with>
    ```
 
-4) Then in a separate terminal, run the app locally:
+4. Then in a separate terminal, run the app locally:
 
    ```shell
    npm run dev
    ```
 
-5) Open your browser and go to `localhost:3000` to view the app.
+5. Open your browser and go to `localhost:3000` to view the app.
+
+### Running Team and IAM Web Auth projects locally
+
+Read more in the [README.md](./local/README.md).
 
 ### Other commands
 
@@ -91,3 +95,4 @@ module "amp_branch" {
   source = "git::https://github.com/NHSDigital/nhs-notify-shared-modules.git//infrastructure/modules/amp_branch?ref=v1.0.0"
   ...
 }
+```

local/.env.template

@@ -0,0 +1,2 @@
+TEMPLATE_MANAGEMENT_DIR='your directory path to nhs-notify-web-template-management'
+IAM_WEBAUTH_DIR='your directory path to nhs-notify-web-iam'

local/README.md

@@ -0,0 +1,57 @@
+# Experimental: Local setup for both templates-ui and iam-auth applications
+
+This has only been tried on a mac.
+
+If this local setup proves useful for others it would be great to move this `/local` directory to it's own GitHub repository.
+
+## Description
+
+A docker-compose setup to run multiple web applications locally and served to the same domain: `localhost`.
+
+Two web applications have been configured `nhs-notify-web-templates-management` and `nhs-notify-iam-webauth` are both served through `ngix` which acts as a gateway.
+
+- `nhs-notify-web-templates-management` is served to `http://localhost/templates`
+- `nhs-notify-iam-webauth` is served to `http://localhost/auth`
+
+The `docker-compose` file is hooked up to local volume of the projects so any changes you make in your webapps will be ported across, you will need to refresh the web page to see the changes.
+
+### Additional information
+
+At first the application may take a few seconds to warm up. After the app has warmed up it's usually just as fast as running the application natively.
+
+If you install a new `npm` package in either web application then you'll need to rebuild the docker images.
+
+## Requirements
+
+- local version of `nhs-notify-iam-webauth` project
+- docker-compose
+- If you're on windows you'll need to configure docker to work through WSL2 [here is a guide that might help](https://docs.docker.com/desktop/features/wsl/)
+
+## Setup
+
+### Setup Amplify sandboxes
+
+Setup the Amplify sandboxes in a new terminal as explained in each web-apps [README.md](../README.md#running-the-project-locally)
+
+### Configure project paths
+
+You'll need to set the directory path location for each web application in the `.env` file or as environment variables.
+
+For example:
+
+```bash
+TEMPLATE_MANAGEMENT_DIR='~/projects/nhs-notify-web-template-management'
+IAM_WEBAUTH_DIR='~/projects/nhs-notify-iam-webauth'
+```
+
+If you're using the `.env` file you might need to run `direnv allow`.
+
+### Run
+
+in the `/local/` directory run:
+
+```bash
+docker-compose up
+```
+
+First time running this it might take some time as `docker` downloads the base images and configures itself. After subsequent uses it will be much faster to start and stop.

local/docker-compose.yml

@@ -0,0 +1,32 @@
+services:
+  nginx:
+    image: nginx:latest
+    ports:
+      - 80:80
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    stdin_open: true
+    tty: true
+    depends_on:
+      - templates
+      - auth
+
+  templates:
+    build:
+      context: ${TEMPLATE_MANAGEMENT_DIR}
+      dockerfile: Dockerfile
+    ports:
+      - 3000
+    volumes:
+      - ${TEMPLATE_MANAGEMENT_DIR}:/app
+      - /app/node_modules
+
+  auth:
+    build:
+      context: ${IAM_WEBAUTH_DIR}
+      dockerfile: Dockerfile
+    ports:
+      - 3000
+    volumes:
+      - ${IAM_WEBAUTH_DIR}:/app
+      - /app/node_modules

local/nginx.conf

@@ -0,0 +1,31 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    client_header_buffer_size 16k;
+
+    upstream auth {
+        server auth:3000;
+    }
+
+    upstream templates {
+        server templates:3000;
+    }
+
+    server {
+        listen 80;
+
+        location /auth {
+            proxy_pass http://auth/auth;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+        }
+
+        location /templates {
+            proxy_pass http://templates/templates;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+        }
+    }
+}

src/components/molecules/Header/Header.tsx

@@ -57,9 +57,12 @@ export function NHSNotifyHeader({ className, dataTestId }: HeaderType) {
           {/* I am currently testing the link wrapper, this will change later when we implement auth as the link will change based on auth state */}
           {process.env.NEXT_PUBLIC_DISABLE_CONTENT === 'true' ? null : (
             <div className='nhsuk-account__login' data-testid='login-link'>
-              <Link className='nhsuk-account__login--link' href='/'>
-                {content.components.headerComponent.links.logIn}
-              </Link>
+              <a
+                className='nhsuk-account__login--link'
+                href={content.components.headerComponent.links.logIn.href}
+              >
+                {content.components.headerComponent.links.logIn.text}
+              </a>
             </div>
           )}
         </div>

src/content/content.ts

@@ -4,7 +4,12 @@ import { TemplateType } from '@utils/enum';
 const headerComponent = {
   serviceName: 'Notify',
   links: {
-    logIn: 'Log in',
+    logIn: {
+      text: 'Log in',
+      href: `/auth?redirect=${encodeURIComponent(
+        `${getBasePath()}/create-and-submit-templates`
+      )}`,
+    },
     logOut: 'Log out',
   },
 };

tests/test-team/template-mgmt-component-tests/template-mgmt-common.steps.ts

@@ -43,7 +43,9 @@ export function assertLoginLink({ page, id, baseURL }: CommonStepsProps) {
 
     await page.clickLoginLink();
 
-    await expect(page.page).toHaveURL(`${baseURL}/templates`);
+    await expect(page.page).toHaveURL(
+      `${baseURL}/auth?redirect=%2Ftemplates%2Fcreate-and-submit-templates`
+    );
   });
 }
 

tests/test-team/template-mgmt-component-tests/template-mgmt-start-page.component.ts

@@ -54,7 +54,9 @@ test.describe('Start Page', () => {
       await startPage.navigateToStartPage();
       await startPage.clickLoginLink();
 
-      await expect(page).toHaveURL(`${baseURL}/templates`);
+      await expect(page).toHaveURL(
+        `${baseURL}/auth?redirect=%2Ftemplates%2Fcreate-and-submit-templates`
+      );
 
       expect(await page.locator('h1').textContent()).toBe('404');
     }