@johnnyboy11234/esg-idea-contest 0.2.1 → 0.2.3

package/frontend/src/app/layouts.tsx

@@ -1,16 +1,18 @@
-import { useEffect, useRef, type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NavLink, Link } from 'react-router';
-import { DeadlineBanner } from '@/features/deadline/DeadlineBanner';
-import { LOCALES, setLocale, type Locale } from '@/shared/i18n';
-import { navFor } from './routes';
-import type { Me } from './session';
+import { useEffect, useRef, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { NavLink, Link, useNavigate } from "react-router";
+import { logout } from "@/features/auth/login";
+import { DeadlineBanner } from "@/features/deadline/DeadlineBanner";
+import { LOCALES, setLocale, type Locale } from "@/shared/i18n";
+import { navFor } from "./routes";
+import { replaceIdentity, type Me } from "./session";
 
 function LanguageSwitch() {
   const { t, i18n } = useTranslation();
   return (
     <label className="flex items-center gap-2 text-sm">
-      <span>{t('common.language')}</span>
+      <span>{t("common.language")}</span>
       <select
         className="rounded-md border bg-background px-2 py-1"
         value={i18n.language}
@@ -18,7 +20,7 @@ function LanguageSwitch() {
       >
         {LOCALES.map((l) => (
           <option key={l} value={l}>
-            {l === 'zh-TW' ? '繁體中文' : 'English'}
+            {l === "zh-TW" ? "繁體中文" : "English"}
           </option>
         ))}
       </select>
@@ -31,22 +33,35 @@ export function PageHeading({ title }: { title: string }) {
   const { t } = useTranslation();
   const ref = useRef<HTMLHeadingElement>(null);
   useEffect(() => {
-    document.title = `${title} · ${t('app.name')}`;
+    document.title = `${title} · ${t("app.name")}`;
     ref.current?.focus();
   }, [title, t]);
   return (
-    <h1 ref={ref} tabIndex={-1} className="mb-4 text-2xl font-semibold outline-none">
+    <h1
+      ref={ref}
+      tabIndex={-1}
+      className="mb-4 text-2xl font-semibold outline-none"
+    >
       {title}
     </h1>
   );
 }
 
-function Frame({ header, children }: { header: ReactNode; children: ReactNode }) {
+function Frame({
+  header,
+  children,
+}: {
+  header: ReactNode;
+  children: ReactNode;
+}) {
   const { t } = useTranslation();
   return (
     <div className="min-h-screen">
-      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:z-10 focus:bg-background focus:p-2">
-        {t('nav.skip')}
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:absolute focus:z-10 focus:bg-background focus:p-2"
+      >
+        {t("nav.skip")}
       </a>
       <header className="border-b">{header}</header>
       <DeadlineBanner />
@@ -64,7 +79,7 @@ export function PublicLayout({ children }: { children: ReactNode }) {
       header={
         <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 p-4">
           <Link to="/login" className="font-semibold">
-            {t('app.name')}
+            {t("app.name")}
           </Link>
           <LanguageSwitch />
         </div>
@@ -75,6 +90,40 @@ export function PublicLayout({ children }: { children: ReactNode }) {
   );
 }
 
+/**
+ * Ends the session. Whatever the answer, the browser must stop acting as this user: logout is
+ * idempotent on the server, and on a network failure the user is told instead of being left unsure.
+ */
+function SignOutButton() {
+  const { t } = useTranslation();
+  const client = useQueryClient();
+  const navigate = useNavigate();
+  const out = useMutation({
+    mutationFn: logout,
+    onSuccess: () => {
+      replaceIdentity(client, null);
+      void navigate("/login", { replace: true });
+    },
+  });
+  return (
+    <>
+      <button
+        type="button"
+        className="rounded-md border px-2 py-1 text-sm disabled:opacity-50"
+        disabled={out.isPending}
+        onClick={() => out.mutate()}
+      >
+        {t("nav.signOut")}
+      </button>
+      {out.isError && (
+        <span role="alert" className="text-sm text-destructive">
+          {t("errors.UNKNOWN")}
+        </span>
+      )}
+    </>
+  );
+}
+
 /** Logged-in layout; navigation comes from the route table and the role. */
 export function AppShell({ me, children }: { me: Me; children: ReactNode }) {
   const { t } = useTranslation();
@@ -82,11 +131,14 @@ export function AppShell({ me, children }: { me: Me; children: ReactNode }) {
     <Frame
       header={
         <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-4 p-4">
-          <nav aria-label={t('nav.main')}>
+          <nav aria-label={t("nav.main")}>
             <ul className="flex flex-wrap items-center gap-4">
               {navFor(me.role).map((r) => (
                 <li key={r.path}>
-                  <NavLink to={r.path} className="underline-offset-4 hover:underline aria-[current=page]:font-semibold">
+                  <NavLink
+                    to={r.path}
+                    className="underline-offset-4 hover:underline aria-[current=page]:font-semibold"
+                  >
                     {t(`nav.${r.navKey!}`)}
                   </NavLink>
                 </li>
@@ -94,9 +146,14 @@ export function AppShell({ me, children }: { me: Me; children: ReactNode }) {
             </ul>
           </nav>
           <div className="flex items-center gap-4">
-            {me.role === 'ADMIN' && <span className="rounded-md border px-2 py-0.5 text-sm">{t('nav.administrator')}</span>}
+            {me.role === "ADMIN" && (
+              <span className="rounded-md border px-2 py-0.5 text-sm">
+                {t("nav.administrator")}
+              </span>
+            )}
             <span className="text-sm">{me.name}</span>
             <LanguageSwitch />
+            <SignOutButton />
           </div>
         </div>
       }

package/frontend/src/app/pages/auth.tsx

@@ -1,20 +1,29 @@
-import { useEffect, useRef, type FormEvent } from 'react';
-import { Leaf } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { Button } from '@/shared/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/ui/card';
-import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/shared/ui/field';
-import { Input } from '@/shared/ui/input';
-
-const noSubmit = (e: FormEvent) => e.preventDefault();
+import { useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Leaf } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router";
+import { LoginForm } from "@/features/auth/LoginForm";
+import { RegisterForm } from "@/features/auth/RegisterForm";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/ui/card";
+import {
+  replaceIdentity,
+  type RegisteredState,
+  type SessionEndedState,
+} from "../session";
 
 /** One h1 per page; focus moves to it after a route change and the title updates (Frontend.md §8). */
 function useAuthHeading(title: string) {
   const { t } = useTranslation();
   const ref = useRef<HTMLHeadingElement>(null);
   useEffect(() => {
-    document.title = `${title} · ${t('app.name')}`;
+    document.title = `${title} · ${t("app.name")}`;
     ref.current?.focus();
   }, [title, t]);
   return ref;
@@ -23,37 +32,27 @@ function useAuthHeading(title: string) {
 /** shadcn `login-02`: two columns, form on the left, brand panel on the right (hidden below lg). */
 export function Login() {
   const { t } = useTranslation();
-  const heading = useAuthHeading(t('nav.signIn'));
+  const heading = useAuthHeading(t("nav.signIn"));
+  const client = useQueryClient();
+  const state = useLocation().state as Partial<
+    RegisteredState | SessionEndedState
+  > | null;
+  const notice =
+    state?.notice === "registered"
+      ? t("pages.register.success")
+      : state?.notice === "sessionEnded"
+        ? t("pages.login.sessionEnded")
+        : undefined;
   return (
     <div className="grid overflow-hidden rounded-xl border lg:grid-cols-2">
       <div className="flex items-center justify-center p-6 md:p-10">
-        <form className="flex w-full max-w-xs flex-col gap-6" onSubmit={noSubmit}>
-          <FieldGroup>
-            <div className="flex flex-col items-center gap-1 text-center">
-              <h1 ref={heading} tabIndex={-1} className="text-2xl font-bold outline-none">
-                {t('pages.login.title')}
-              </h1>
-              <p className="text-sm text-balance text-muted-foreground">{t('pages.login.description')}</p>
-            </div>
-            <Field>
-              <FieldLabel htmlFor="empNo">{t('fields.empNo')}</FieldLabel>
-              <Input id="empNo" name="empNo" autoComplete="username" required />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="password">{t('fields.password')}</FieldLabel>
-              <Input id="password" name="password" type="password" autoComplete="current-password" required />
-            </Field>
-            <Field>
-              <Button type="submit">{t('nav.signIn')}</Button>
-              <FieldDescription className="text-center">
-                {t('pages.login.noAccount')}{' '}
-                <Link to="/register" className="underline underline-offset-4">
-                  {t('nav.register')}
-                </Link>
-              </FieldDescription>
-            </Field>
-          </FieldGroup>
-        </form>
+        {/* A new session means a new identity: nothing cached for the previous one may survive. The gate then
+            sees `me` and redirects to the validated `next` (Frontend.md §6.4). */}
+        <LoginForm
+          heading={heading}
+          notice={notice}
+          onLoggedIn={(me) => replaceIdentity(client, me)}
+        />
       </div>
       <div
         aria-hidden="true"
@@ -62,8 +61,10 @@ export function Login() {
         <div className="flex size-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
           <Leaf className="size-6" />
         </div>
-        <p className="text-xl font-semibold">{t('pages.login.panelTitle')}</p>
-        <p className="max-w-xs text-sm text-balance text-muted-foreground">{t('pages.login.panelBody')}</p>
+        <p className="text-xl font-semibold">{t("pages.login.panelTitle")}</p>
+        <p className="max-w-xs text-sm text-balance text-muted-foreground">
+          {t("pages.login.panelBody")}
+        </p>
       </div>
     </div>
   );
@@ -72,53 +73,26 @@ export function Login() {
 /** shadcn `signup-01`: a single centred card. */
 export function Register() {
   const { t } = useTranslation();
-  const heading = useAuthHeading(t('nav.register'));
+  const navigate = useNavigate();
+  const heading = useAuthHeading(t("nav.register"));
   return (
     <div className="mx-auto w-full max-w-sm">
       <Card>
         <CardHeader>
           <CardTitle>
             <h1 ref={heading} tabIndex={-1} className="outline-none">
-              {t('pages.register.title')}
+              {t("pages.register.title")}
             </h1>
           </CardTitle>
-          <CardDescription>{t('pages.register.description')}</CardDescription>
+          <CardDescription>{t("pages.register.description")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <form onSubmit={noSubmit}>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="empNo">{t('fields.empNo')}</FieldLabel>
-                <Input id="empNo" name="empNo" autoComplete="username" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="name">{t('fields.name')}</FieldLabel>
-                <Input id="name" name="name" autoComplete="name" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="email">{t('fields.email')}</FieldLabel>
-                <Input id="email" name="email" type="email" autoComplete="email" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="password">{t('fields.password')}</FieldLabel>
-                <Input id="password" name="password" type="password" autoComplete="new-password" required />
-                <FieldDescription>{t('pages.register.passwordHint')}</FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="confirmPassword">{t('fields.confirmPassword')}</FieldLabel>
-                <Input id="confirmPassword" name="confirmPassword" type="password" autoComplete="new-password" required />
-              </Field>
-              <Field>
-                <Button type="submit">{t('nav.register')}</Button>
-                <FieldDescription className="text-center">
-                  {t('pages.register.haveAccount')}{' '}
-                  <Link to="/login" className="underline underline-offset-4">
-                    {t('nav.signIn')}
-                  </Link>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
+          <RegisterForm
+            onRegistered={() => {
+              const state: RegisteredState = { notice: "registered" };
+              void navigate("/login", { replace: true, state });
+            }}
+          />
         </CardContent>
       </Card>
     </div>

package/frontend/src/app/pages/login.test.tsx

@@ -0,0 +1,218 @@
+import { QueryClient } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { createMemoryRouter } from "react-router";
+import { axe } from "vitest-axe";
+import { clearCsrfToken } from "@/shared/api";
+import { problem } from "@/shared/api/mocks/problem";
+import { server } from "@/shared/api/mocks/server";
+import { initI18n } from "@/shared/i18n";
+import { App } from "../App";
+import { routes } from "../router";
+
+const API = "http://localhost:3000/api/v1";
+const USER = { empNo: "089290", name: "Wang", email: "w@x.io", role: "USER" };
+const ADMIN = { empNo: "000001", name: "Root", email: null, role: "ADMIN" };
+
+/** A visitor on `path`; `account` is who a successful login returns. `GET /auth/me` follows the session. */
+async function open(path: string, account: typeof USER | typeof ADMIN = USER) {
+  clearCsrfToken();
+  let session: typeof USER | typeof ADMIN | null = null;
+  const calls: { login: unknown[]; logoutCsrf: (string | null)[] } = {
+    login: [],
+    logoutCsrf: [],
+  };
+  server.use(
+    http.get(`${API}/auth/me`, () =>
+      session ? HttpResponse.json(session) : problem(401, "UNAUTHENTICATED"),
+    ),
+    http.get(`${API}/deadline`, () =>
+      HttpResponse.json({
+        deadline: null,
+        state: "OPEN",
+        serverTime: "2026-11-08T00:00:00.000Z",
+      }),
+    ),
+    http.get(`${API}/auth/csrf`, () =>
+      HttpResponse.json({ token: session ? "tok-session" : "tok-anon" }),
+    ),
+    http.post(`${API}/auth/login`, async ({ request }) => {
+      calls.login.push(await request.json());
+      session = account;
+      return HttpResponse.json(account);
+    }),
+    http.post(`${API}/auth/logout`, ({ request }) => {
+      calls.logoutCsrf.push(request.headers.get("X-CSRF-Token"));
+      session = null;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  await initI18n("en");
+  const router = createMemoryRouter(routes, { initialEntries: [path] });
+  const view = render(<App router={router} client={new QueryClient()} />);
+  await screen.findByRole("heading", {
+    level: 1,
+    name: "Sign in to your account",
+  });
+  return { router, calls, user: userEvent.setup(), ...view };
+}
+
+async function signIn(
+  user: ReturnType<typeof userEvent.setup>,
+  empNo = "089290",
+  password = "secret",
+) {
+  await user.type(screen.getByLabelText("Employee ID"), empNo);
+  await user.type(screen.getByLabelText("Password"), password);
+  await user.click(screen.getByRole("button", { name: "Sign in" }));
+}
+
+describe("Login page", () => {
+  it("has labelled, autocompleted fields and no axe violations", async () => {
+    const { container } = await open("/login");
+    expect(screen.getByLabelText("Employee ID")).toHaveAttribute(
+      "autocomplete",
+      "username",
+    );
+    expect(screen.getByLabelText("Password")).toHaveAttribute(
+      "autocomplete",
+      "current-password",
+    );
+    expect((await axe(container)).violations).toEqual([]);
+  });
+
+  it("signs a User in and lands on /ideas", async () => {
+    const { router, calls, user } = await open("/login");
+    await signIn(user, " 089290 ", "secret");
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(calls.login).toEqual([{ empNo: "089290", password: "secret" }]);
+    expect(await screen.findByText("Wang")).toBeInTheDocument();
+    expect(screen.queryByText("Administrator")).not.toBeInTheDocument();
+  });
+
+  it("signs an Admin in, to the same page, with the Administrator badge", async () => {
+    const { router, user } = await open("/login", ADMIN);
+    await signIn(user, "000001");
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(await screen.findByText("Administrator")).toBeInTheDocument();
+  });
+
+  it("follows a role-allowed next", async () => {
+    const { router, user } = await open("/login?next=%2Fjoin-requests");
+    await signIn(user);
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe("/join-requests"),
+    );
+  });
+
+  it.each([
+    "//evil.example",
+    "https://evil.example/x",
+    "/admin/deadline",
+    "/nope",
+    "\\\\evil.example",
+  ])("ignores next=%s", async (next) => {
+    const { router, user } = await open(
+      `/login?next=${encodeURIComponent(next)}`,
+    );
+    await signIn(user);
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(router.state.location.search).toBe("");
+  });
+
+  it("shows one message for a wrong password, clears the password and focuses the message", async () => {
+    const { user, container } = await open("/login");
+    server.use(
+      http.post(`${API}/auth/login`, () => problem(401, "INVALID_CREDENTIALS")),
+    );
+    await signIn(user, "089290", "wrong");
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent(
+      "The employee ID or password is incorrect.",
+    );
+    expect(alert).toHaveFocus();
+    expect(screen.getByLabelText("Password")).toHaveValue("");
+    expect(screen.getByLabelText("Employee ID")).toHaveValue("089290");
+    expect((await axe(container)).violations).toEqual([]);
+  });
+
+  it("shows the throttle message", async () => {
+    const { user } = await open("/login");
+    server.use(
+      http.post(`${API}/auth/login`, () =>
+        problem(429, "LOGIN_THROTTLED", {}, { "Retry-After": "60" }),
+      ),
+    );
+    await signIn(user);
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Too many sign-in attempts",
+    );
+  });
+
+  it("shows the registered and session-ended notices", async () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [
+        { pathname: "/login", state: { notice: "sessionEnded" } },
+      ],
+    });
+    server.use(
+      http.get(`${API}/auth/me`, () => problem(401, "UNAUTHENTICATED")),
+      http.get(`${API}/deadline`, () =>
+        HttpResponse.json({
+          deadline: null,
+          state: "OPEN",
+          serverTime: "2026-11-08T00:00:00.000Z",
+        }),
+      ),
+    );
+    await initI18n("en");
+    render(<App router={router} client={new QueryClient()} />);
+    expect(await screen.findByRole("status", { name: "" })).toBeInTheDocument();
+    expect(
+      await screen.findByText("Your session has ended. Please sign in again."),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Sign out", () => {
+  it("ends the session with the session-bound CSRF token and returns to a clean /login", async () => {
+    const { router, calls, user } = await open("/login");
+    await signIn(user);
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    await screen.findByRole("heading", {
+      level: 1,
+      name: "Sign in to your account",
+    });
+    expect(calls.logoutCsrf).toEqual(["tok-session"]);
+    expect(router.state.location.pathname).toBe("/login");
+    expect(router.state.location.search).toBe("");
+    expect(
+      screen.queryByText("Your session has ended. Please sign in again."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Wang")).not.toBeInTheDocument();
+  });
+
+  it("a second login after logout uses a fresh CSRF token", async () => {
+    const { router, user } = await open("/login");
+    await signIn(user);
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    await screen.findByRole("heading", {
+      level: 1,
+      name: "Sign in to your account",
+    });
+    await signIn(user);
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+  });
+
+  it("tells the user when sign-out fails and keeps them signed in", async () => {
+    const { router, user } = await open("/login");
+    await signIn(user);
+    server.use(
+      http.post(`${API}/auth/logout`, () => problem(500, "INTERNAL_ERROR")),
+    );
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+    expect(router.state.location.pathname).toBe("/ideas");
+  });
+});