@johnnyboy11234/esg-idea-contest 0.3.0 → 0.3.2

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

@@ -1,7 +1,9 @@
 import type { FormEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
-import { useDeadline } from '@/features/deadline/useDeadline';
+import { useQueryClient } from '@tanstack/react-query';
+import { Link, useNavigate } from 'react-router';
+import { deadlineKey, useDeadline } from '@/features/deadline/useDeadline';
+import { CreateIdeaForm } from '@/features/idea/CreateIdeaForm';
 import { Button } from '@/shared/ui/button';
 import { Field } from '@/shared/ui/form-field';
 import { PageHeading } from '../layouts';
@@ -81,17 +83,29 @@ export function IdeaList() {
 
 export function IdeaCreate() {
   const { t } = useTranslation();
+  const { data: me } = useMe();
   const { data: deadline } = useDeadline();
-  const open = deadline?.state === 'OPEN'; // Frontend.md §6.3 rule 6: a banner and disabled controls, not a guard
+  const client = useQueryClient();
+  const navigate = useNavigate();
+  const open = deadline?.state === 'OPEN'; // Frontend.md §6.3 rule 6: a hint and disabled controls, not a guard
   return (
     <>
       <PageHeading title={t('pages.ideaCreate.title')} />
-      <form onSubmit={noSubmit} className="max-w-2xl rounded-xl border bg-card p-6">
-        <IdeaFields withSlides />
-        <Button type="submit" disabled={!open}>
-          {t('pages.ideaCreate.submit')}
-        </Button>
-      </form>
+      <div className="max-w-2xl rounded-xl border bg-card p-6">
+        {me && (
+          <CreateIdeaForm
+            leader={{ name: me.name, empNo: me.empNo }}
+            canSubmit={open}
+            onSubmissionRejected={() => void client.invalidateQueries({ queryKey: deadlineKey })}
+            onCreated={(idea) => {
+              // the response is the detail: cache it, no follow-up GET (Frontend.md §6.7)
+              client.setQueryData(['idea', idea.id], idea);
+              void client.invalidateQueries({ queryKey: ['ideas'] });
+              void navigate(`/ideas/${idea.id}`);
+            }}
+          />
+        )}
+      </div>
     </>
   );
 }

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

@@ -1,5 +1,6 @@
 import { QueryClient } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
 import { createMemoryRouter } from "react-router";
@@ -141,6 +142,42 @@ describe("Login page", () => {
     );
   });
 
+  it("disables sign-in for Retry-After seconds, then re-enables it", async () => {
+    // only the interval and the monotonic clock are faked; userEvent and msw keep real timers
+    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });
+    let now = 1_000;
+    vi.spyOn(performance, "now").mockImplementation(() => now);
+    const advance = (ms: number) =>
+      act(() => {
+        now += ms;
+        vi.advanceTimersByTime(ms);
+      });
+    try {
+      const { user } = await open("/login");
+      server.use(
+        http.post(`${API}/auth/login`, () =>
+          problem(429, "LOGIN_THROTTLED", {}, { "Retry-After": "3" }),
+        ),
+      );
+      await signIn(user);
+      expect(
+        await screen.findByRole("button", { name: "Try again in 3 s" }),
+      ).toBeDisabled();
+      advance(1000);
+      expect(
+        screen.getByRole("button", { name: "Try again in 2 s" }),
+      ).toBeDisabled();
+      advance(2000);
+      expect(screen.getByRole("button", { name: "Sign in" })).toBeEnabled();
+      expect(screen.getByRole("status")).toHaveTextContent(
+        "You can sign in again.",
+      );
+    } finally {
+      vi.restoreAllMocks();
+      vi.useRealTimers();
+    }
+  });
+
   it("shows the registered and session-ended notices", async () => {
     const router = createMemoryRouter(routes, {
       initialEntries: [

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

@@ -138,6 +138,38 @@ describe('Register page: pre-check and error summary', () => {
   });
 });
 
+describe('Register page: live password checklist (F1b-01)', () => {
+  const status = (rule: string) => document.querySelector(`li[data-rule="${rule}"]`)?.getAttribute('data-status');
+
+  it('the password field is described by the checklist, which follows typing and the employee ID', async () => {
+    const { user } = await open();
+    const password = screen.getByLabelText('Password');
+    expect(password.getAttribute('aria-describedby')).toContain('password-rules');
+    expect(document.getElementById('password-rules')).toHaveTextContent('Your password must:');
+    expect(status('LENGTH')).toBe('idle');
+
+    await fill(user, { 'Employee ID': '089290', Password: 'Password089290' });
+    await waitFor(() => expect(status('COMMON_PASSWORD')).toBe('met'));
+    expect(status('LENGTH')).toBe('met');
+    expect(status('CONTAINS_EMP_NO')).toBe('unmet');
+  });
+
+  it('the Top-10k blocklist (lazy chunk) marks a common password', async () => {
+    const { user } = await open();
+    await fill(user, { Password: 'password' });
+    await waitFor(() => expect(status('COMMON_PASSWORD')).toBe('unmet'));
+  });
+
+  it('does not block submit: the server stays the authority (422 PASSWORD_POLICY)', async () => {
+    const { seen, user } = await open();
+    registerReturns(seen, () => problem(422, 'PASSWORD_POLICY', { errors: [{ field: 'password', code: 'PASSWORD_POLICY', rule: 'LENGTH' }] }));
+    await fill(user, { ...VALID, Password: 'short', 'Confirm password': 'short' });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText('Password: The password does not meet the requirements.')).toBeInTheDocument();
+    expect(seen).toHaveLength(1);
+  });
+});
+
 describe('Register page: submit', () => {
   it('sends the cleaned values with the CSRF token, then goes to /login with a notice and no login', async () => {
     const { user, seen, router } = await open();

package/frontend/src/features/auth/IdleWarning.test.tsx

@@ -0,0 +1,82 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { axe } from "vitest-axe";
+import { apiFetch, markActivity } from "@/shared/api";
+import { server } from "@/shared/api/mocks/server";
+import { initI18n } from "@/shared/i18n";
+import { IdleWarning } from "./IdleWarning";
+
+const API = "http://localhost:3000/api/v1";
+const MIN = 60_000;
+const DIALOG = { name: "Are you still there?" };
+
+beforeEach(async () => {
+  await initI18n("en");
+  vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "Date"], shouldAdvanceTime: true });
+  markActivity();
+});
+afterEach(() => vi.useRealTimers());
+
+const advance = (ms: number) => act(() => vi.advanceTimersByTimeAsync(ms));
+
+describe("IdleWarning", () => {
+  it("opens at 28 minutes and ends the session at 30", async () => {
+    const onExpire = vi.fn();
+    render(<IdleWarning signedIn onExpire={onExpire} />);
+    await advance(28 * MIN - 1);
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    await advance(1);
+    expect(screen.getByRole("alertdialog", DIALOG)).toBeInTheDocument();
+    expect(onExpire).not.toHaveBeenCalled();
+    await advance(2 * MIN);
+    expect(onExpire).toHaveBeenCalledTimes(1);
+  });
+
+  it("Continue calls GET /auth/me, closes the dialog and restarts the clock", async () => {
+    let calls = 0;
+    server.use(
+      http.get(`${API}/auth/me`, () => {
+        calls += 1;
+        return HttpResponse.json({ empNo: "089290" });
+      }),
+    );
+    const onExpire = vi.fn();
+    render(<IdleWarning signedIn onExpire={onExpire} />);
+    await advance(28 * MIN);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTimeAsync });
+    await user.click(screen.getByRole("button", { name: "Continue" }));
+    await vi.waitFor(() => expect(calls).toBe(1));
+    await vi.waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+    await advance(29 * MIN);
+    expect(onExpire).not.toHaveBeenCalled();
+    await advance(MIN);
+    expect(onExpire).toHaveBeenCalledTimes(1);
+  });
+
+  it("any answered request restarts the clock before the warning", async () => {
+    server.use(http.get(`${API}/deadline`, () => HttpResponse.json({})));
+    render(<IdleWarning signedIn onExpire={vi.fn()} />);
+    await advance(20 * MIN);
+    await apiFetch("/deadline");
+    await advance(20 * MIN);
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    await advance(8 * MIN);
+    expect(screen.getByRole("alertdialog", DIALOG)).toBeInTheDocument();
+  });
+
+  it("does nothing for a visitor", async () => {
+    const onExpire = vi.fn();
+    render(<IdleWarning signedIn={false} onExpire={onExpire} />);
+    await advance(40 * MIN);
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    expect(onExpire).not.toHaveBeenCalled();
+  });
+
+  it("has no axe violations", async () => {
+    render(<IdleWarning signedIn onExpire={vi.fn()} />);
+    await advance(28 * MIN);
+    vi.useRealTimers();
+    expect((await axe(document.body)).violations).toEqual([]);
+  });
+});

package/frontend/src/features/auth/IdleWarning.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { Dialog } from "radix-ui";
+import { useTranslation } from "react-i18next";
+import { apiFetch, lastActivity, subscribeActivity } from "@/shared/api";
+import { Button } from "@/shared/ui/button";
+
+/** Warn 2 min before the 30 min idle timeout: the 60 s refresh rule can put the server up to 1 min ahead (OI-11, OI-22). */
+export const WARN_AFTER_MS = 28 * 60_000;
+export const END_AFTER_MS = 30 * 60_000;
+
+/**
+ * Idle-timeout warning (WCAG 2.2.1, Frontend.md §8.1). 28 minutes after the last server request a dialog
+ * offers "Continue", which calls `GET /auth/me` (that refreshes the session and restarts both timers).
+ * With no answer the session ends at 30 minutes like any other 401 (`onExpire`).
+ */
+export function IdleWarning({
+  signedIn,
+  onExpire,
+}: {
+  signedIn: boolean;
+  onExpire: () => void;
+}) {
+  const { t } = useTranslation();
+  const last = useSyncExternalStore(subscribeActivity, lastActivity);
+  // The `last` the warning fired for: a newer request makes it stale, which closes the dialog without an effect.
+  const [warnedFor, setWarnedFor] = useState<number | null>(null);
+  const warning = signedIn && warnedFor === last;
+
+  useEffect(() => {
+    if (!signedIn) return;
+    const elapsed = Date.now() - last;
+    const warn = setTimeout(() => setWarnedFor(last), Math.max(0, WARN_AFTER_MS - elapsed));
+    const end = setTimeout(() => {
+      setWarnedFor(null);
+      onExpire();
+    }, Math.max(0, END_AFTER_MS - elapsed));
+    return () => {
+      clearTimeout(warn);
+      clearTimeout(end);
+    };
+  }, [signedIn, last, onExpire]);
+
+  // A failure needs no handling here: a 401 already ends the session through the global handler.
+  const keepAlive = () => void apiFetch("/auth/me").catch(() => undefined);
+
+  return (
+    <Dialog.Root open={warning} onOpenChange={(open) => !open && keepAlive()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+        <Dialog.Content
+          role="alertdialog"
+          className="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg"
+          onInteractOutside={(e) => e.preventDefault()}
+        >
+          <Dialog.Title className="text-lg font-semibold">{t("pages.idle.title")}</Dialog.Title>
+          <Dialog.Description className="mt-2 text-sm text-muted-foreground">
+            {t("pages.idle.body")}
+          </Dialog.Description>
+          <div className="mt-6 flex justify-end">
+            <Button onClick={keepAlive}>{t("pages.idle.continue")}</Button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/frontend/src/features/auth/LoginForm.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/shared/ui/field";
 import { Input } from "@/shared/ui/input";
 import { login, type Me } from "./login";
+import { useCountdown } from "./useCountdown";
 
 /**
  * The login form. Every credential failure is the same 401 `INVALID_CREDENTIALS` (PRD §6.5), so
@@ -33,6 +34,9 @@ export function LoginForm({
   const [errorKey, setErrorKey] = useState(0);
   const [pending, setPending] = useState(false);
   const alert = useRef<HTMLParagraphElement>(null);
+  const countdown = useCountdown();
+  const [wasThrottled, setWasThrottled] = useState(false);
+  const throttled = countdown.remaining > 0;
 
   // after the message is in the DOM (WCAG 3.3.1)
   useEffect(() => {
@@ -41,9 +45,10 @@ export function LoginForm({
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (pending) return;
+    if (pending || throttled) return;
     setPending(true);
     setError(null);
+    setWasThrottled(false);
     try {
       onLoggedIn(await login({ empNo: empNo.trim(), password }));
     } catch (err) {
@@ -51,6 +56,10 @@ export function LoginForm({
         err instanceof ApiError
           ? err
           : new ApiError({ status: 0, code: "UNKNOWN" });
+      if (apiErr.status === 429 && apiErr.retryAfterSeconds !== undefined) {
+        countdown.start(apiErr.retryAfterSeconds);
+        setWasThrottled(true);
+      }
       setError(
         t(`errors.${apiErr.code}`) +
           (apiErr.requestId
@@ -107,6 +116,11 @@ export function LoginForm({
             {error}
           </p>
         )}
+        {wasThrottled && !throttled && (
+          <p role="status" className="text-sm">
+            {t("pages.login.canRetry")}
+          </p>
+        )}
         <Field>
           <FieldLabel htmlFor="empNo">{t("fields.empNo")}</FieldLabel>
           <Input
@@ -134,10 +148,14 @@ export function LoginForm({
         <Field>
           <Button
             type="submit"
-            disabled={pending}
+            disabled={pending || throttled}
             aria-busy={pending || undefined}
           >
-            {pending ? t("pages.login.submitting") : t("nav.signIn")}
+            {pending
+              ? t("pages.login.submitting")
+              : throttled
+                ? t("pages.login.retryIn", { seconds: countdown.remaining })
+                : t("nav.signIn")}
           </Button>
           <FieldDescription className="text-center">
             {t("pages.login.noAccount")}{" "}

package/frontend/src/features/auth/PasswordChecklist.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { initI18n } from "@/shared/i18n";
+import { PasswordChecklist } from "./PasswordChecklist";
+
+const statuses = () =>
+  Object.fromEntries(
+    Array.from(document.querySelectorAll("li[data-rule]")).map((li) => [
+      li.getAttribute("data-rule"),
+      li.getAttribute("data-status"),
+    ]),
+  );
+
+/** Renders and waits until the blocklist chunk is in (COMMON_PASSWORD no longer "server"). */
+async function show(password: string, empNo = "") {
+  const view = render(<PasswordChecklist id="rules" password={password} empNo={empNo} />);
+  if (password !== "")
+    await waitFor(() => expect(statuses().COMMON_PASSWORD).not.toBe("server"));
+  return view;
+}
+
+beforeEach(async () => {
+  await initI18n("en");
+});
+
+describe("PasswordChecklist", () => {
+  it("lists the 8 rules in PRD §6.4 order, neutral while empty", async () => {
+    await show("");
+    expect(Object.keys(statuses())).toEqual([
+      "LENGTH",
+      "CHARSET",
+      "COMPLEXITY",
+      "COMMON_PASSWORD",
+      "KEYBOARD_RUN",
+      "SEQUENCE",
+      "REPEAT",
+      "CONTAINS_EMP_NO",
+    ]);
+    expect(new Set(Object.values(statuses()))).toEqual(new Set(["idle"]));
+  });
+
+  it("marks each rule met or not met as the password changes", async () => {
+    const { rerender } = await show("password");
+    expect(statuses()).toMatchObject({
+      LENGTH: "unmet",
+      CHARSET: "met",
+      COMPLEXITY: "unmet",
+      COMMON_PASSWORD: "unmet",
+      KEYBOARD_RUN: "met",
+    });
+    rerender(<PasswordChecklist id="rules" password="Correct-Horse-1" empNo="089290" />);
+    expect(new Set(Object.values(statuses()))).toEqual(new Set(["met"]));
+  });
+
+  it("checks the employee ID only when it is well-formed (as the server)", async () => {
+    const { rerender } = await show("Correct-089290-Ab", "089290");
+    expect(statuses().CONTAINS_EMP_NO).toBe("unmet");
+    rerender(<PasswordChecklist id="rules" password="Correct-089290-Ab" empNo="08929" />);
+    expect(statuses().CONTAINS_EMP_NO).toBe("met");
+  });
+
+  it("says the state in text, not colour alone (WCAG 1.4.1), and has no axe violations", async () => {
+    const { container } = await show("password");
+    expect(screen.getByText(/be 12–64 characters long/).textContent).toContain("(not met)");
+    expect(screen.getByText(/use only printable ASCII/).textContent).toContain("(met)");
+    expect((await axe(container)).violations).toEqual([]);
+  });
+
+  it("is not a live region (no announcement on every keystroke)", async () => {
+    const { container } = await show("x");
+    expect(container.querySelector("[aria-live],[role=status],[role=alert]")).toBeNull();
+  });
+});

package/frontend/src/features/auth/PasswordChecklist.tsx

@@ -0,0 +1,96 @@
+import { Check, Circle, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/shared/ui/utils";
+import { loadCommonPasswords } from "./common-passwords";
+import {
+  checkPassword,
+  empNoForPolicy,
+  PASSWORD_RULES,
+  type CommonCheck,
+  type PasswordRule,
+} from "./password-policy";
+
+/** `idle`: nothing typed yet; `server`: the blocklist is not (yet) loaded, the server checks this rule. */
+type Status = "met" | "unmet" | "idle" | "server";
+
+type ListState = { check: CommonCheck } | { failed: true } | null;
+
+/** Loads the blocklist chunk on mount; until it arrives (or if it fails) COMMON_PASSWORD is left to the server. */
+function useCommonList(): CommonCheck | undefined {
+  const [state, setState] = useState<ListState>(null);
+  useEffect(() => {
+    let live = true;
+    loadCommonPasswords().then(
+      (check) => live && setState({ check }),
+      () => live && setState({ failed: true }),
+    );
+    return () => {
+      live = false;
+    };
+  }, []);
+  return state && "check" in state ? state.check : undefined;
+}
+
+const ICON = { met: Check, unmet: X, idle: Circle, server: Circle } as const;
+
+/**
+ * Live checklist of the 8 password rules (PRD §6.4, Frontend.md §5.6), keyed by
+ * the rule ids of PASSWORD_POLICY. It is not a live region: the password field
+ * points at it with `aria-describedby`, so the current state is read on focus
+ * instead of after every keystroke. State is carried by text, not colour alone.
+ */
+export function PasswordChecklist({
+  id,
+  password,
+  empNo,
+}: {
+  id: string;
+  password: string;
+  empNo: string;
+}) {
+  const { t } = useTranslation();
+  const isCommon = useCommonList();
+  const violated = new Set<PasswordRule>(
+    checkPassword(password, empNoForPolicy(empNo), isCommon),
+  );
+  const status = (r: PasswordRule): Status => {
+    if (password === "") return "idle";
+    if (r === "COMMON_PASSWORD" && !isCommon) return "server";
+    return violated.has(r) ? "unmet" : "met";
+  };
+
+  return (
+    <div id={id} className="text-sm">
+      <p className="text-muted-foreground">{t("passwordRules.title")}</p>
+      <ul className="mt-1 space-y-0.5">
+        {PASSWORD_RULES.map((r) => {
+          const s = status(r);
+          const Icon = ICON[s];
+          return (
+            <li
+              key={r}
+              data-rule={r}
+              data-status={s}
+              className={cn(
+                "flex items-start gap-1.5",
+                s === "met" && "text-emerald-700 dark:text-emerald-400",
+                s === "unmet" && "text-destructive",
+                (s === "idle" || s === "server") && "text-muted-foreground",
+              )}
+            >
+              <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+              <span>
+                {t(`passwordRules.${r}`)}
+                <span className="sr-only">
+                  {" "}
+                  ({t(`passwordRules.status.${s}`)})
+                </span>
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/frontend/src/features/auth/RegisterForm.tsx

@@ -10,6 +10,7 @@ import {
   FieldLabel,
 } from "@/shared/ui/field";
 import { Input } from "@/shared/ui/input";
+import { PasswordChecklist } from "./PasswordChecklist";
 import {
   mapServerError,
   precheck,
@@ -48,7 +49,6 @@ const FIELD_ATTRS: Record<
 const HINTS: Partial<Record<RegisterField, string>> = {
   empNo: "pages.register.empNoHint",
   email: "pages.register.emailHint",
-  password: "pages.register.passwordHint",
 };
 
 /** The register form: format pre-check, error summary with focus, server errors mapped to fields (Frontend.md §5.6, §8). */
@@ -155,8 +155,10 @@ export function RegisterForm({
           const a = FIELD_ATTRS[f];
           const problem = problems[f];
           const hint = HINTS[f];
+          // the password's hint is the live rule checklist (F1b-01)
+          const hintId = f === "password" ? "password-rules" : hint && `${f}-hint`;
           const describedBy =
-            [hint && `${f}-hint`, problem && `${f}-error`]
+            [hintId, problem && `${f}-error`]
               .filter(Boolean)
               .join(" ") || undefined;
           return (
@@ -180,6 +182,13 @@ export function RegisterForm({
               {hint && (
                 <FieldDescription id={`${f}-hint`}>{t(hint)}</FieldDescription>
               )}
+              {f === "password" && (
+                <PasswordChecklist
+                  id="password-rules"
+                  password={values.password}
+                  empNo={values.empNo}
+                />
+              )}
               {problem && (
                 <FieldError id={`${f}-error`} role={undefined}>
                   {message(problem)}

package/frontend/src/features/auth/common-passwords.ts

@@ -0,0 +1,31 @@
+import { foldCase, type CommonCheck } from "./password-policy";
+
+/** Builds the lookup from the list file: one entry per line, folded, `\r` and empty lines dropped. */
+export function parseCommonList(text: string): CommonCheck {
+  const set = new Set<string>();
+  for (const line of text.split("\n")) {
+    const l = line.endsWith("\r") ? line.slice(0, -1) : line;
+    if (l !== "") set.add(foldCase(l));
+  }
+  // the whole password as typed: nothing trimmed, an entry inside a longer password does not match
+  return (pw) => set.has(foldCase(pw));
+}
+
+let loading: Promise<CommonCheck> | undefined;
+
+/**
+ * Loads the bundled Top-10,000 list (the backend's own file, NOTICE next to it)
+ * as a separate chunk, once. Only the register page calls this, so no other
+ * page downloads it (Frontend.md §5.6). A failed load is not cached, so a
+ * later mount may retry.
+ */
+export function loadCommonPasswords(): Promise<CommonCheck> {
+  loading ??= import("passwords/common-passwords.txt?raw").then(
+    (m) => parseCommonList(m.default),
+    (err: unknown) => {
+      loading = undefined;
+      throw err;
+    },
+  );
+  return loading;
+}

package/frontend/src/features/auth/password-policy.test.ts

@@ -0,0 +1,64 @@
+import cases from "testdata/password.json";
+import { loadCommonPasswords, parseCommonList } from "./common-passwords";
+import { checkPassword, empNoForPolicy, foldCase, PASSWORD_RULES } from "./password-policy";
+
+describe("checkPassword: testdata/password.json (same cases as the backend)", () => {
+  it.each(cases.cases.map((c) => [c.id, c] as const))("%s", async (_id, c) => {
+    const isCommon = await loadCommonPasswords();
+    expect(checkPassword(c.password, c.empNo, isCommon)).toEqual(c.wantRules);
+  });
+
+  it("covers every rule id at least once", () => {
+    const seen = new Set(cases.cases.flatMap((c) => c.wantRules));
+    expect(PASSWORD_RULES.filter((r) => !seen.has(r))).toEqual([]);
+  });
+});
+
+describe("checkPassword: client specifics", () => {
+  it("without the blocklist never reports COMMON_PASSWORD, the rest unchanged", () => {
+    for (const c of cases.cases) {
+      expect(checkPassword(c.password, c.empNo)).toEqual(
+        c.wantRules.filter((r) => r !== "COMMON_PASSWORD"),
+      );
+    }
+  });
+
+  it("counts a lone surrogate as one code point outside printable ASCII", () => {
+    expect(checkPassword("Correct-Hors\uD800", "")).toEqual(["CHARSET"]);
+  });
+
+  it("folds case like Go strings.ToLower, not toLowerCase (U+0130, U+212A)", () => {
+    expect(foldCase("PASSİK")).toBe("passik");
+    // U+212A (Kelvin) folds to k, so "jkl;" is a keyboard run on the server too
+    expect(checkPassword("Zq-JKL;-Mx81", "")).toEqual(["CHARSET", "KEYBOARD_RUN"]);
+  });
+});
+
+describe("empNoForPolicy", () => {
+  it.each([
+    ["089290", "089290"],
+    ["08929", ""],
+    ["0892901", ""],
+    ["08929a", ""],
+    ["０８９２９０", ""],
+  ])("%j → %j", (input, want) => expect(empNoForPolicy(input)).toBe(want));
+});
+
+describe("common-password list", () => {
+  it("loads once as a lazy chunk and matches whole passwords ignoring case", async () => {
+    const a = loadCommonPasswords();
+    expect(loadCommonPasswords()).toBe(a);
+    const isCommon = await a;
+    expect(isCommon("password")).toBe(true);
+    expect(isCommon("PassWord")).toBe(true);
+    expect(isCommon(" password")).toBe(false);
+    expect(isCommon("password1x")).toBe(false);
+  });
+
+  it("parses CRLF lines and skips empty ones", () => {
+    const isCommon = parseCommonList("Alpha\r\n\r\nbeta\n");
+    expect(isCommon("alpha")).toBe(true);
+    expect(isCommon("BETA")).toBe(true);
+    expect(isCommon("")).toBe(false);
+  });
+});