Add username field to auth entry component

chatbot-ui/.env.example

@@ -1,3 +1,4 @@
 CHAT_URL_API=http://localhost:8010/api/chat
 NEXT_PUBLIC_BUILD_NUMBER=20240101.1
-AUTH_PASSWORD=fb1a3bb9-7b35-47e2-8a45-44db18215912
+NEXT_PUBLIC_AUTH_PASSWORD=localpassword
+NEXT_PUBLIC_AUTH_USERNAME=localuser

chatbot-ui/__tests__/index.test.tsx

@@ -4,7 +4,7 @@ import Home from '../pages/index';
 
 describe('Home Page', () => {
   it('Renders', () => {
-    render(<Home apiUrl="https://localhost" authPassword="testPassword" />);
+    render(<Home apiUrl="https://localhost" />);
 
     expect(screen.getByText('Support bot')).toBeInTheDocument();
   });

chatbot-ui/components/UserCredentialEntry.tsx

@@ -1,20 +1,19 @@
+import authenticateCredentials, {
+  EESCredential,
+} from '@/services/auth-service';
 import classNames from 'classnames';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
-interface AuthData {
-  password: string;
-}
-
-const UserCredentialEntry = ({ onCorrectEntry, authPassword }: Props) => {
+const UserCredentialEntry = ({ onCorrectEntry }: Props) => {
   const {
     register,
     formState: { errors },
     setError,
     handleSubmit,
-  } = useForm<AuthData>();
+  } = useForm<EESCredential>();
 
-  const onSubmit: SubmitHandler<AuthData> = (data) => {
-    if (data.password === authPassword) {
+  const onSubmit: SubmitHandler<EESCredential> = (data) => {
+    if (authenticateCredentials(data)) {
       onCorrectEntry();
     } else {
       setError('password', { message: 'Incorrect password', type: 'wrong' });
@@ -30,33 +29,58 @@ const UserCredentialEntry = ({ onCorrectEntry, authPassword }: Props) => {
               className="govuk-label govuk-label--l"
               htmlFor="auth-password"
             >
-              Please enter the password
+              Please sign in
             </label>
           </h1>
           <div id="account-number-hint" className="govuk-hint">
             This service is still a prototype - access is restricted.
           </div>
-          {errors.password?.type === 'wrong' && (
-            <p id="passport-issued-error" className="govuk-error-message">
-              <span className="govuk-visually-hidden">Error:</span>The password
-              was incorrect
-            </p>
-          )}
-          {errors.password?.type === 'required' && (
-            <p id="passport-issued-error" className="govuk-error-message">
-              <span className="govuk-visually-hidden">Error:</span>A password is
-              required
-            </p>
-          )}
-          <input
-            {...register('password', {
-              required: true,
-            })}
-            className="govuk-input"
-            id="auth-password"
-            name="password"
-            type="password"
-          />
+          <div className="govuk-form-group">
+            <label className="govuk-label" htmlFor="auth-username">
+              Username
+            </label>
+            {errors.username?.type === 'required' && (
+              <p id="passport-issued-error" className="govuk-error-message">
+                <span className="govuk-visually-hidden">Error:</span>A username
+                is required
+              </p>
+            )}
+            <input
+              {...register('username', {
+                required: true,
+              })}
+              className="govuk-input"
+              id="auth-username"
+              name="username"
+              type="text"
+            />
+          </div>
+          <div className="govuk-form-group">
+            <label className="govuk-label" htmlFor="auth-password">
+              Password
+            </label>
+            {errors.password?.type === 'wrong' && (
+              <p id="passport-issued-error" className="govuk-error-message">
+                <span className="govuk-visually-hidden">Error:</span>The
+                password was incorrect
+              </p>
+            )}
+            {errors.password?.type === 'required' && (
+              <p id="passport-issued-error" className="govuk-error-message">
+                <span className="govuk-visually-hidden">Error:</span>A password
+                is required
+              </p>
+            )}
+            <input
+              {...register('password', {
+                required: true,
+              })}
+              className="govuk-input"
+              id="auth-password"
+              name="password"
+              type="password"
+            />
+          </div>
         </div>
         <br />
         <button className="govuk-button" data-module="govuk-button">
@@ -69,7 +93,6 @@ const UserCredentialEntry = ({ onCorrectEntry, authPassword }: Props) => {
 
 interface Props {
   onCorrectEntry: () => void;
-  authPassword?: string;
 }
 
 export default UserCredentialEntry;

chatbot-ui/pages/index.tsx

@@ -10,7 +10,6 @@ import UserCredentialEntry from '@/components/UserCredentialEntry';
 
 export default function Home({
   apiUrl,
-  authPassword,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   initChatbotService(apiUrl);
   const { messages, sendMessage, fetching, error } = useChatbot();
@@ -20,7 +19,6 @@ export default function Home({
     <Page title="Support bot">
       {!hasAuth && (
         <UserCredentialEntry
-          authPassword={authPassword}
           onCorrectEntry={() => {
             setHasAuth(true);
           }}
@@ -43,7 +41,6 @@ export const getServerSideProps = (async () => {
   return {
     props: {
       apiUrl: process.env.CHAT_URL_API ?? 'http://localhost:8010/api/chat',
-      authPassword: process.env.AUTH_PASSWORD,
     },
   };
 }) satisfies GetServerSideProps<{ apiUrl: string }>;

chatbot-ui/services/auth-service.ts

@@ -0,0 +1,17 @@
+export interface EESCredential {
+  username: string;
+  password: string;
+}
+
+const authenticateCredentials = (credential: EESCredential) => {
+  if (
+    credential.username === process.env.NEXT_PUBLIC_AUTH_USERNAME &&
+    credential.password === process.env.NEXT_PUBLIC_AUTH_PASSWORD
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export default authenticateCredentials;

infra/main.parameters.json

@@ -60,7 +60,10 @@
     },
     "webAppDefinition": {
       "value": {
-        "settings": [{ "name": "AUTH_PASSWORD", "value": "${AUTH_PASSWORD}" }]
+        "settings": [
+          { "name": "NEXT_PUBLIC_AUTH_PASSWORD", "value": "${AUTH_PASSWORD}" },
+          { "name": "NEXT_PUBLIC_AUTH_USERNAME", "value": "${AUTH_USERNAME}" }
+        ]
       }
     }
   }