feat(login): integrated login form component

app/front-end/.gitignore

@@ -39,3 +39,7 @@ next-env.d.ts
 
 # Logs
 *.log
+
+# preserve front end images
+!./**/*.png
+!./**/*.jpg

app/front-end/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,37 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Home homepage is unchanged from snapshot 1`] = `
+exports[`Home Page homepage is unchanged from snapshot 1`] = `
 <div>
   <main
     class="column"
   >
-    <div
-      class="masthead"
-    >
-      <h1
-        class="heading"
-      >
-        PrivacyPal
-      </h1>
-      <h2
-        class="subheading"
-      >
-        COSC 499 Capstone Team 1
-      </h2>
-    </div>
-    <p>
-      Here is a patternfly example component:
-    </p>
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-primary example-button"
-      data-ouia-component-id="PatternflyExampleComponentPrimaryButton"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      type="button"
-    >
-      Patternfly Button
-    </button>
     <h2
       class="subheading"
     >

app/front-end/__tests__/base64.lib.test.ts

@@ -0,0 +1,22 @@
+/*
+ * Created on Mon Oct 30 2023
+ * Author: Connor Doman
+ */
+
+import { base64ToUtf8, utf8ToBase64 } from "@lib/base64";
+
+describe("base64ToUtf8", () => {
+    it("should convert base64 to utf8", () => {
+        const base64 = "SGVsbG8gV29ybGQ=";
+        const utf8 = "Hello World";
+        expect(base64ToUtf8(base64)).toBe(utf8);
+    });
+});
+
+describe("utf8ToBase64", () => {
+    it("should convert utf8 to base64", () => {
+        const base64 = "SGVsbG8gV29ybGQ=";
+        const utf8 = "Hello World";
+        expect(utf8ToBase64(utf8)).toBe(base64);
+    });
+});

app/front-end/__tests__/dummy-authenticator.test.ts

@@ -3,14 +3,13 @@
  * Author: Connor Doman
  */
 
-import { extractConfigFile } from "@lib/config";
+import { utf8ToBase64 } from "@lib/base64";
 import { DummyAuthenticator } from "@lib/dummy-authenticator";
 
 describe("Dummy Authenticator", () => {
     it("works for valid credentials", async () => {
         const dummyAuthenticator = new DummyAuthenticator();
         const credentials = { email: "johnny@example.com", password: "password" };
-        DummyAuthenticator.configDirectory = "./conf/";
         const user = await dummyAuthenticator.authorize(credentials, {} as any);
         expect(user).toEqual({
             id: "1",
@@ -21,7 +20,6 @@ describe("Dummy Authenticator", () => {
     it("fails for invalid credentials", async () => {
         const dummyAuthenticator = new DummyAuthenticator();
         const credentials = { email: "johnny@example.com", password: "wrongpassword" };
-        DummyAuthenticator.configDirectory = "./conf/";
         const user = await dummyAuthenticator.authorize(credentials, {} as any);
         expect(user).toEqual(null);
     });
@@ -38,4 +36,18 @@ describe("Dummy Authenticator", () => {
             password: { label: "Password", type: "password" },
         });
     });
+
+    it("authentication fails if hashedPassword is empty", async () => {
+        const dummyAuthenticator = new DummyAuthenticator();
+        const credentials = { email: "badatpasswords@example.com", password: "password" };
+        const user = await dummyAuthenticator.authorize(credentials, {} as any);
+        expect(user).toEqual(null);
+    });
+
+    it("authentication fails if empty password is provided", async () => {
+        const dummyAuthenticator = new DummyAuthenticator();
+        const credentials = { email: "johnny@example.com", password: "" };
+        const user = await dummyAuthenticator.authorize(credentials, {} as any);
+        expect(user).toEqual(null);
+    });
 });

app/front-end/__tests__/index.test.tsx

@@ -8,14 +8,14 @@ import Home from "../src/app/page";
 import "@testing-library/jest-dom";
 
 /* Example Test: Does the page at `/` render a header? (Should FAIL) */
-describe("Home", () => {
-    it("page has 'PrivacyPal' semantic heading", () => {
-        render(<Home useAuth={false} />);
-        expect(screen.getByRole("heading", { name: "PrivacyPal" })).toBeInTheDocument();
+describe("Home Page", () => {
+    it("page has 'Test Login' render properly semantic heading", () => {
+        render(<Home />);
+        expect(screen.getByRole("heading", { name: "Test Login" })).toBeInTheDocument();
     });
 
     it("homepage is unchanged from snapshot", () => {
-        const { container } = render(<Home useAuth={false} />);
+        const { container } = render(<Home />);
         expect(container).toMatchSnapshot();
     });
 });

app/front-end/conf/README.md

@@ -19,7 +19,15 @@ interface PrivacyPalUserProperties {
 Where `password` is a base64 encoded `bcrypt` hash of the user's password:
 
 ```typescript
-const password = btoa(await bcrypt.hash(userPassword, 10));
+const password: string = utf8ToBase64(await bcrypt.hash(userPassword, 10));
 ```
 
-The sample file features a user with the email `johnny@example.com` and password `password`.
+In this case, `10` is the number of salt rounds used by `bcrypt`. When comparing passwords for authentication, `bcrypt` will use the salt stored in the hash to generate a new hash and compare the two hashes. If the hashes match, the passwords match.
+
+This means it is necessary to use `bcrypt.compare()` as such:
+
+```typescript
+const passwordMatches: boolean = await bcrypt.compare(userPassword, base64ToUtf8(storedPassword));
+```
+
+The sample file features a user with the email `johnny@example.com` and password `password` and another user whose email is `badatpasswords@example.com` and has no password.

app/front-end/conf/user.properties.json

@@ -3,7 +3,12 @@
         {
             "id": "1",
             "email": "johnny@example.com",
-            "hashedPassword": "JDJiJDEwJDQwR0psSWo3Q08zcEhTVkpTVTNhbU9QQmZlYWl1dk1SL2dTMlZCclAuOGIuMjdiZFJTYjVp"
+            "hashedPassword": "JDJhJDEwJFV2ZnpHekFrbEtvZlljenNYZHZHR2VjaGRVY29BdHM1SjhBWU51a1RUQzdTQXZOT0VDVHVT"
+        },
+        {
+            "id": "2",
+            "email": "badatpasswords@example.com",
+            "hashedPassword": ""
         }
     ]
 }

app/front-end/generate_dev_env.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Create `.env.local` file for development environment
+{
+    echo NEXTAUTH_SECRET="$(openssl rand -base64 32)"
+    echo NEXTAUTH_URL="http://localhost:${PORT:-8081}"
+    echo PRIVACYPAL_INPUT_VIDEO_DIR="../back-end/video-processing/input"
+    echo PRIVACYPAL_OUTPUT_VIDEO_DIR="../back-end/video-processing/output"
+    echo PRIVACYPAL_CONFIG_DIR="./conf"
+} > .env.local

app/front-end/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     // https://nextjs.org/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files
-    output: 'standalone',
-}
+    output: "standalone",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;