Create hasty user-entry screen and gate with password (#76)

* Create hasty user-entry screen and gate with password

* Add hint text and format validation errors properly

* Add password to env.example and main parameters json

* Remove comment

* rename chatbot password to authpassword

chatbot-ui/.env.example

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

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" />);
+    render(<Home apiUrl="https://localhost" authPassword="testPassword" />);
 
     expect(screen.getByText('Support bot')).toBeInTheDocument();
   });

chatbot-ui/components/UserCredentialEntry.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+interface AuthData {
+  password: string;
+}
+
+const UserCredentialEntry = ({ onCorrectEntry, authPassword }: Props) => {
+  const {
+    register,
+    formState: { errors },
+    setError,
+    handleSubmit,
+  } = useForm<AuthData>();
+
+  const onSubmit: SubmitHandler<AuthData> = (data) => {
+    if (data.password === authPassword) {
+      onCorrectEntry();
+    } else {
+      setError('password', { message: 'Incorrect password', type: 'wrong' });
+    }
+  };
+
+  return (
+    <form id="user-input-form" onSubmit={handleSubmit(onSubmit)}>
+      <div className={classNames('govuk-form-group')}>
+        <div className="govuk-form-group">
+          <h1 className="govuk-label-wrapper">
+            <label
+              className="govuk-label govuk-label--l"
+              htmlFor="auth-password"
+            >
+              Please enter the password
+            </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>
+        <br />
+        <button className="govuk-button" data-module="govuk-button">
+          Enter
+        </button>
+      </div>
+    </form>
+  );
+};
+
+interface Props {
+  onCorrectEntry: () => void;
+  authPassword?: string;
+}
+
+export default UserCredentialEntry;