feat: setup auth ui components (#598)

* feat: setup auth ui components

* Render avatar in TopNav

* Render sign out button at top of mega menu

---------

Co-authored-by: Christian Martin <christian@christianmartin.co.uk>
Co-authored-by: A-Ashiq <afaan.ashiq2@gmail.com>

Author: 3 people

config/i18n/i18nForTests.ts

@@ -1,6 +1,7 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 
+import auth from '../../public/locales/en/auth.json'
 import common from '../../public/locales/en/common.json'
 import errors from '../../public/locales/en/errors.json'
 import metrics from '../../public/locales/en/metrics.json'
@@ -11,6 +12,7 @@ import formatters from './formatters'
 export const defaultNS = 'common'
 export const resources = {
   en: {
+    auth,
     common,
     whatsNew,
     weatherHealthAlerts,
@@ -21,7 +23,7 @@ export const resources = {
 
 i18n.use(initReactI18next).init({
   lng: 'en',
-  ns: ['common', 'topic', 'weatherHealthAlerts', 'whatsNew', 'metrics', 'errors'],
+  ns: ['auth', 'common', 'topic', 'weatherHealthAlerts', 'whatsNew', 'metrics', 'errors'],
   resources,
   defaultNS,
   interpolation: {

jest.config.js

@@ -16,6 +16,7 @@ const customJestConfig = {
     '^@/config/(.*)$': '<rootDir>/src/config/$1',
     '^@/lib/(.*)$': '<rootDir>/src/lib/$1',
     '^@/app/(.*)$': '<rootDir>/src/app/$1',
+    '^@/auth': '<rootDir>/src/auth',
     // Needed to get react markdown & dependencies to work with react-raw, see:
     // https://stackoverflow.com/questions/70916761/next-js-and-jest-syntaxerror-cannot-use-import-statement-outside-a-module
     'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',

package-lock.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
     "@neshca/cache-handler": "^1.9.0",
+    "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.4",

package.json

@@ -0,0 +1,17 @@
+{
+  "signOutButton": "Sign out",
+  "signInButton": "Start now",
+  "startPage": {
+    "heading": "Sign in to the UKHSA data dashboard",
+    "intro": "The UKHSA Data Dashboard provides secure access to critical public health data and insights.",
+    "accessInfo": "To view restricted datasets and reports, you need to sign in with an approved account.",
+    "howToAccess": "How to Access:",
+    "steps": {
+      "signIn": "Click the button below to sign in using your credentials.",
+      "contactAdmin": "If you don't have access but believe you should, please contact your administrator."
+    },
+    "signOutBannerTitle": "Success",
+    "signOutBannerHeading": "You've been signed out",
+    "signOutBannerDescription": "You have successfully signed out of the UKHSA Data Dashboard. If you need to access the data again, please sign in."
+  }
+}

public/locales/en/auth.json

@@ -0,0 +1,21 @@
+import { notFound } from 'next/navigation'
+import { ReactNode } from 'react'
+
+import { BackToTop } from '@/app/components/ui/ukhsa'
+import LayoutBlackBanner from '@/app/components/ui/ukhsa/Layout/LayoutBlackBanner'
+import { authEnabled } from '@/config/constants'
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  if (!authEnabled) return notFound()
+
+  return (
+    <LayoutBlackBanner>
+      <div className="govuk-!-padding-top-4 flex flex-col gap-0 xl:gap-7">
+        <main className="govuk-main-wrapper govuk-!-padding-top-0" id="main-content">
+          {children}
+        </main>
+      </div>
+      <BackToTop className="govuk-!-margin-bottom-4" />
+    </LayoutBlackBanner>
+  )
+}

src/app/(auth)/start/layout.tsx

@@ -0,0 +1,8 @@
+import StartPage from '@/app/components/cms/pages/Start'
+import { PageParams, SearchParams } from '@/app/types'
+
+export default async function Page({ params, searchParams }: { params: PageParams; searchParams: SearchParams }) {
+  const { slug = [] } = params
+
+  return <StartPage slug={slug} searchParams={searchParams} />
+}

src/app/(auth)/start/page.tsx

@@ -8,9 +8,11 @@ import HeroBanner from '@/app/components/ui/ukhsa/HeroBanner/HeroBanner'
 import { MegaMenu } from '@/app/components/ui/ukhsa/MegaMenu/MegaMenu'
 import { PhaseBanner } from '@/app/components/ui/ukhsa/PhaseBanner/PhaseBanner'
 import { TopNav } from '@/app/components/ui/ukhsa/TopNav/TopNav'
+import UserAvatar from '@/app/components/ui/ukhsa/UserAvatar/UserAvatar'
 import { getGlobalBanner } from '@/app/hooks/getGlobalBanner'
 import { getServerTranslation } from '@/app/i18n'
 import { getLandingPage } from '@/app/utils/cms'
+import { authEnabled } from '@/config/constants'
 
 interface LayoutProps {
   children: ReactNode
@@ -57,7 +59,7 @@ export default async function Layout({ children, params }: LayoutProps) {
         </div>
       </header>
 
-      <TopNav>
+      <TopNav avatar={authEnabled ? <UserAvatar /> : null}>
         <MegaMenu />
       </TopNav>
 

src/app/(cms)/[[...slug]]/layout.tsx

@@ -0,0 +1,53 @@
+import { redirect } from 'next/navigation'
+
+import { View } from '@/app/components/ui/ukhsa'
+import UserSignIn from '@/app/components/ui/ukhsa/UserSignIn/UserSignIn'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
+import { getServerTranslation } from '@/app/i18n'
+import { PageComponentBaseProps } from '@/app/types'
+import { auth } from '@/auth'
+
+export default async function StartPage({ searchParams: { logout } }: PageComponentBaseProps<{ logout?: 'success' }>) {
+  const session = await auth()
+
+  if (session) redirect('/')
+
+  const { t } = await getServerTranslation('auth')
+
+  return (
+    <View>
+      <div className="govuk-grid-row">
+        <div className="govuk-grid-column-three-quarters-from-desktop">
+          {logout === 'success' ? (
+            <div
+              className="govuk-notification-banner govuk-notification-banner--success"
+              role="alert"
+              aria-labelledby="govuk-notification-banner-title"
+            >
+              <div className="govuk-notification-banner__header">
+                <h2 className="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                  {t('startPage.signOutBannerTitle')}
+                </h2>
+              </div>
+              <div className="govuk-notification-banner__content">
+                <h3 className="govuk-notification-banner__heading">{t('startPage.signOutBannerHeading')}</h3>
+                <p className="govuk-body">{t('startPage.signOutBannerDescription')}</p>
+              </div>
+            </div>
+          ) : null}
+          <Heading heading={t('startPage.heading')} />
+          <p>{t('startPage.intro')}</p>
+          <p>{t('startPage.accessInfo')}</p>
+          <p>
+            <strong>{t('startPage.howToAccess')}</strong>
+          </p>
+          <ul className="govuk-list govuk-list--bullet">
+            <li>{t('startPage.steps.signIn')}</li>
+            <li>{t('startPage.steps.contactAdmin')}</li>
+          </ul>
+          <UserSignIn />
+        </div>
+      </div>
+    </View>
+  )
+}

src/app/components/cms/pages/Start.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import cn from 'clsx'
+import * as React from 'react'
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarFallback, AvatarImage }