Make navigation bar application aware

src/features/about/aboutPage.test.tsx

@@ -1,19 +1,26 @@
 import { describe, expect, test } from "bun:test";
 import type { AppVariables } from "@shared/appVariables.ts";
+import { pageRoutes } from "@shared/pageRoutes.ts";
 import { Hono } from "hono";
 import { aboutPage } from "./aboutPage.tsx";
 
 describe("aboutPage", () => {
   test("renders the about page HTML", async () => {
-    const app = new Hono<{ Variables: AppVariables }>().route("/", aboutPage);
+    const app = new Hono<{ Variables: AppVariables }>().route(
+      pageRoutes.ABOUT,
+      aboutPage,
+    );
 
-    const response = await app.fetch(new Request("http://localhost/"));
+    const response = await app.fetch(
+      new Request(`http://localhost${pageRoutes.ABOUT}`),
+    );
     const html = await response.text();
 
     expect(response.status).toBe(200);
     expect(html).toContain("<title>ToDo</title>");
     expect(html).toContain("<h1>About</h1>");
-    expect(html).toContain('<a href="/">Home</a>');
+    expect(html).toContain('<a href="/login">Login</a>');
+    expect(html).not.toContain('<a href="/about">About</a>');
     expect(html).toContain("<h2>Powered By</h2>");
     expect(html).toContain("<th>Name</th>");
     expect(html).toContain("<th>Link</th>");

src/features/about/aboutPage.tsx

@@ -6,7 +6,7 @@ export const aboutPage = new Hono<{ Variables: AppVariables }>().get(
   "/",
   (c) => {
     return c.html(
-      <Page>
+      <Page type="unauthenticated" currentPath={c.req.path}>
         <h1>About</h1>
         <h2>Powered By</h2>
         <table>

src/features/add-todo/addToDoPage.test.tsx

@@ -14,9 +14,11 @@ describe("addToDoPage", () => {
     });
     const app = new Hono<{ Variables: AppVariables }>()
       .use("*", createAppConfigMiddleware(appConfig))
-      .route("/", addToDoPage);
+      .route(pageRoutes.ADD_TODO, addToDoPage);
 
-    const response = await app.fetch(new Request("http://localhost/"));
+    const response = await app.fetch(
+      new Request(`http://localhost${pageRoutes.ADD_TODO}`),
+    );
 
     expect(response.status).toBe(302);
     expect(response.headers.get("Location")).toBe(pageRoutes.LOGIN);
@@ -26,13 +28,17 @@ describe("addToDoPage", () => {
     const appConfig = createAppConfig({
       JWT_SECRET: "12345678901234567890123456789012",
     });
-    const token = await sign({ sub: "admin" }, appConfig.jwt.secret, "HS256");
+    const token = await sign(
+      { sub: "1234", preferred_username: "admin" },
+      appConfig.jwt.secret,
+      "HS256",
+    );
     const app = new Hono<{ Variables: AppVariables }>()
       .use("*", createAppConfigMiddleware(appConfig))
-      .route("/", addToDoPage);
+      .route(pageRoutes.ADD_TODO, addToDoPage);
 
     const response = await app.fetch(
-      new Request("http://localhost/", {
+      new Request(`http://localhost${pageRoutes.ADD_TODO}`, {
         headers: {
           Cookie: `${appConfig.jwt.cookieName}=${token}`,
         },
@@ -41,6 +47,12 @@ describe("addToDoPage", () => {
     const html = await response.text();
 
     expect(response.status).toBe(200);
-    expect(html).toContain("Add ToDo");
+    expect(html).toContain("<title>ToDo</title>");
+    expect(html).toContain("<h1>Add ToDo</h1>");
+    expect(html).toContain('<a href="/">Home</a>');
+    expect(html).not.toContain('<a href="/add-todo">Add</a>');
+    expect(html).toContain('<a href="/about">About</a>');
+    expect(html).toContain("<li>admin</li>");
+    expect(html).toContain('<form action="/api/logout" method="post">');
   });
 });

src/features/add-todo/addToDoPage.tsx

@@ -1,13 +1,16 @@
 import type { AppVariables } from "@shared/appVariables.ts";
 import { Page } from "@shared/page.tsx";
 import { pageJwtMiddleware } from "@shared/pageJwtMiddleware.ts";
+import { getUsernameFromJwtPayload } from "@shared/utility.ts";
 import { Hono } from "hono";
 
 export const addToDoPage = new Hono<{ Variables: AppVariables }>()
   .use("/", pageJwtMiddleware)
   .get("/", (c) => {
+    const username = getUsernameFromJwtPayload(c.var.jwtPayload);
+
     return c.html(
-      <Page>
+      <Page type="authenticated" currentPath={c.req.path} username={username}>
         <h1>Add ToDo</h1>
       </Page>,
     );

src/features/home/homePage.test.tsx

@@ -26,7 +26,11 @@ describe("homePage", () => {
     const appConfig = createAppConfig({
       JWT_SECRET: "12345678901234567890123456789012",
     });
-    const token = await sign({ sub: "admin" }, appConfig.jwt.secret, "HS256");
+    const token = await sign(
+      { sub: "1234", preferred_username: "admin" },
+      appConfig.jwt.secret,
+      "HS256",
+    );
     const app = new Hono<{ Variables: AppVariables }>()
       .use("*", createAppConfigMiddleware(appConfig))
       .route("/", homePage);
@@ -43,6 +47,10 @@ describe("homePage", () => {
     expect(response.status).toBe(200);
     expect(html).toContain("<title>ToDo</title>");
     expect(html).toContain("<h1>Home</h1>");
+    expect(html).not.toContain('<a href="/">Home</a>');
+    expect(html).toContain('<a href="/add-todo">Add</a>');
     expect(html).toContain('<a href="/about">About</a>');
+    expect(html).toContain("<li>admin</li>");
+    expect(html).toContain('<form action="/api/logout" method="post">');
   });
 });

src/features/home/homePage.tsx

@@ -1,13 +1,15 @@
 import type { AppVariables } from "@shared/appVariables.ts";
 import { Page } from "@shared/page.tsx";
 import { pageJwtMiddleware } from "@shared/pageJwtMiddleware.ts";
+import { getUsernameFromJwtPayload } from "@shared/utility.ts";
 import { Hono } from "hono";
 
 export const homePage = new Hono<{ Variables: AppVariables }>()
   .use("/", pageJwtMiddleware)
   .get("/", (c) => {
+    const username = getUsernameFromJwtPayload(c.var.jwtPayload);
     return c.html(
-      <Page>
+      <Page type="authenticated" currentPath={c.req.path} username={username}>
         <h1>Home</h1>
       </Page>,
     );

src/features/login/loginPage.test.tsx

@@ -1,14 +1,20 @@
 import { describe, expect, test } from "bun:test";
 import { apiRoutes } from "@shared/apiRoutes.ts";
 import type { AppVariables } from "@shared/appVariables.ts";
+import { pageRoutes } from "@shared/pageRoutes.ts";
 import { Hono } from "hono";
 import { loginPage } from "./loginPage.tsx";
 
 describe("loginPage", () => {
   test("renders the login page HTML", async () => {
-    const app = new Hono<{ Variables: AppVariables }>().route("/", loginPage);
+    const app = new Hono<{ Variables: AppVariables }>().route(
+      pageRoutes.LOGIN,
+      loginPage,
+    );
 
-    const response = await app.fetch(new Request("http://localhost/"));
+    const response = await app.fetch(
+      new Request(`http://localhost${pageRoutes.LOGIN}`),
+    );
     const html = await response.text();
 
     expect(response.status).toBe(200);
@@ -25,6 +31,8 @@ describe("loginPage", () => {
     );
     expect(html).toContain('autocomplete="current-password"');
     expect(html).toContain('<button type="submit">Login</button>');
+    expect(html).not.toContain('<a href="/login">Login</a>');
+    expect(html).toContain('<a href="/about">About</a>');
     expect(html).toContain(apiRoutes.LOGIN);
     expect(html).toContain("contentType: &#39;form&#39;");
   });

src/features/login/loginPage.tsx

@@ -7,7 +7,7 @@ export const loginPage = new Hono<{ Variables: AppVariables }>().get(
   "/",
   (c) => {
     return c.html(
-      <Page>
+      <Page type="unauthenticated" currentPath={c.req.path}>
         <h1>Login</h1>
         <form
           id="login"

src/shared/appVariables.ts

@@ -1,3 +1,4 @@
+import type { JwtVariables } from "hono/jwt";
 import type { Logger } from "winston";
 import type { AppConfig } from "./appConfig.ts";
 import type { Clock } from "./clock.ts";
@@ -6,4 +7,4 @@ export type AppVariables = {
   clock: Clock;
   appConfig: AppConfig;
   logger: Logger;
-};
+} & JwtVariables;

src/shared/navigationBar.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, test } from "bun:test";
+import { NavigationBar } from "./navigationBar.tsx";
+
+describe("NavigationBar", () => {
+  test("renders authenticated navigation links, username, and logout action", () => {
+    const html = NavigationBar({
+      type: "authenticated",
+      currentPath: "/add-todo",
+      username: "test-user",
+    });
+    const htmlString = String(html);
+
+    expect(htmlString).toContain("<nav>");
+    expect(htmlString).toContain('<a href="/">Home</a>');
+    expect(htmlString).not.toContain('<a href="/add-todo">Add</a>');
+    expect(htmlString).toContain('<a href="/about">About</a>');
+    expect(htmlString).toContain("<li>test-user</li>");
+    expect(htmlString).toContain('<form action="/api/logout" method="post">');
+    expect(htmlString).toContain(
+      '<button class="nav-link-button" type="submit">',
+    );
+  });
+
+  test("hides the authenticated current route link", () => {
+    const html = NavigationBar({
+      type: "authenticated",
+      currentPath: "/",
+      username: "test-user",
+    });
+    const htmlString = String(html);
+
+    expect(htmlString).not.toContain('<a href="/">Home</a>');
+    expect(htmlString).toContain('<a href="/add-todo">Add</a>');
+    expect(htmlString).toContain('<a href="/about">About</a>');
+    expect(htmlString).toContain("<li>test-user</li>");
+    expect(htmlString).toContain('<form action="/api/logout" method="post">');
+  });
+
+  test("renders unauthenticated links", () => {
+    const html = NavigationBar({ type: "unauthenticated", currentPath: "/" });
+    const htmlString = String(html);
+
+    expect(htmlString).toContain('<a href="/login">Login</a>');
+    expect(htmlString).toContain('<a href="/about">About</a>');
+    expect(htmlString).not.toContain("Logout");
+  });
+
+  test("hides the unauthenticated current route link", () => {
+    const html = NavigationBar({
+      type: "unauthenticated",
+      currentPath: "/login",
+    });
+    const htmlString = String(html);
+
+    expect(htmlString).not.toContain('<a href="/login">Login</a>');
+    expect(htmlString).toContain('<a href="/about">About</a>');
+  });
+});

src/shared/navigationBar.tsx

@@ -1,27 +1,85 @@
 import { apiRoutes } from "./apiRoutes.ts";
+import { NavigationBarItem } from "./navigationBarItem.tsx";
 import { pageRoutes } from "./pageRoutes.ts";
 
-export function navigationBar() {
-  return (
-    <nav>
-      <ul>
-        <li>
-          <a href={pageRoutes.HOME}>Home</a>
-        </li>
-        <li>
-          <a href={pageRoutes.ABOUT}>About</a>
-        </li>
-        <li>
-          <a href={pageRoutes.LOGIN}>Login</a>
-        </li>
-        <li>
-          <form action={apiRoutes.LOGOUT} method="post">
-            <button class="nav-link-button" type="submit">
-              Logout
-            </button>
-          </form>
-        </li>
-      </ul>
-    </nav>
-  );
+export type SharedNavigationBarProps = Readonly<{
+  currentPath: string;
+}>;
+
+export type AuthenticatedNavigationBarProps = SharedNavigationBarProps &
+  Readonly<{
+    type: "authenticated";
+    username: string;
+  }>;
+
+export type UnauthenticatedNavigationBarProps = SharedNavigationBarProps &
+  Readonly<{
+    type: "unauthenticated";
+  }>;
+
+export type NavigationBarProps =
+  | AuthenticatedNavigationBarProps
+  | UnauthenticatedNavigationBarProps;
+
+export function NavigationBar(props: NavigationBarProps) {
+  switch (props.type) {
+    case "authenticated":
+      return (
+        <nav>
+          <ul>
+            <NavigationBarItem
+              type="link"
+              label="Home"
+              url={pageRoutes.HOME}
+              currentPath={props.currentPath}
+            />
+            <NavigationBarItem
+              type="link"
+              label="Add"
+              url={pageRoutes.ADD_TODO}
+              currentPath={props.currentPath}
+            />
+            <NavigationBarItem
+              type="link"
+              label="About"
+              url={pageRoutes.ABOUT}
+              currentPath={props.currentPath}
+            />
+            <NavigationBarItem type="generic">
+              {props.username}
+            </NavigationBarItem>
+            <NavigationBarItem type="generic">
+              <form action={apiRoutes.LOGOUT} method="post">
+                <button class="nav-link-button" type="submit">
+                  Logout
+                </button>
+              </form>
+            </NavigationBarItem>
+          </ul>
+        </nav>
+      );
+    case "unauthenticated":
+      return (
+        <nav>
+          <ul>
+            <NavigationBarItem
+              type="link"
+              label="Login"
+              url={pageRoutes.LOGIN}
+              currentPath={props.currentPath}
+            />
+            <NavigationBarItem
+              type="link"
+              label="About"
+              url={pageRoutes.ABOUT}
+              currentPath={props.currentPath}
+            />
+          </ul>
+        </nav>
+      );
+    default: {
+      const _unknownType: never = props;
+      return _unknownType;
+    }
+  }
 }