@johnnyboy11234/esg-idea-contest 0.3.1 → 0.3.2

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);
+  });
+});

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

@@ -0,0 +1,168 @@
+/**
+ * Password policy of PRD §6.4, ported rule for rule from the backend
+ * (backend/internal/account/password.go, keyboard.go, sequence.go) and checked
+ * against the same cases (testdata/password.json). The server stays the
+ * authority; this drives the live checklist on the register page.
+ */
+
+/** Rule ids in PRD §6.4 table order; they are the wire contract (`errors[].rule`). */
+export const PASSWORD_RULES = [
+  "LENGTH",
+  "CHARSET",
+  "COMPLEXITY",
+  "COMMON_PASSWORD",
+  "KEYBOARD_RUN",
+  "SEQUENCE",
+  "REPEAT",
+  "CONTAINS_EMP_NO",
+] as const;
+export type PasswordRule = (typeof PASSWORD_RULES)[number];
+
+/** Whole-password blocklist lookup (case-insensitive); see `common-passwords.ts`. */
+export type CommonCheck = (password: string) => boolean;
+
+const MIN_LEN = 12;
+const MAX_LEN = 64; // code points
+const MIN_CLASSES = 3;
+const MAX_REPEAT = 2; // 3+ identical characters in a row is a violation
+const MIN_KEYBOARD_RUN = 4;
+const MIN_SEQUENCE = 4;
+
+/** The password as code points (a JS string is UTF-16; the server counts code points). */
+const codePoints = (s: string): number[] => Array.from(s, (c) => c.codePointAt(0)!);
+
+/**
+ * Lower-cases one code point exactly as Go's `strings.ToLower` does for every
+ * result that matters here (ASCII): A–Z, plus the only two non-ASCII code
+ * points whose lower case is ASCII, U+0130 → `i` and U+212A (Kelvin) → `k`.
+ * `String.prototype.toLowerCase` differs (U+0130 becomes two code points).
+ */
+const foldCp = (cp: number): number =>
+  cp >= 0x41 && cp <= 0x5a ? cp + 0x20 : cp === 0x130 ? 0x69 : cp === 0x212a ? 0x6b : cp;
+
+/** Case-folds a string with {@link foldCp}; used for the blocklist lookup. */
+export const foldCase = (s: string): string =>
+  String.fromCodePoint(...codePoints(s).map(foldCp));
+
+const violatesLength = (cps: number[]) => cps.length < MIN_LEN || cps.length > MAX_LEN;
+
+const violatesCharset = (cps: number[]) => cps.some((cp) => cp < 0x20 || cp > 0x7e);
+
+/** Upper, lower, digit, symbol (printable non-alphanumeric ASCII, space included). Non-ASCII is no class. */
+function violatesComplexity(cps: number[]): boolean {
+  let upper = false, lower = false, digit = false, symbol = false;
+  for (const cp of cps) {
+    if (cp >= 0x41 && cp <= 0x5a) upper = true;
+    else if (cp >= 0x61 && cp <= 0x7a) lower = true;
+    else if (cp >= 0x30 && cp <= 0x39) digit = true;
+    else if (cp >= 0x20 && cp <= 0x7e) symbol = true;
+  }
+  return [upper, lower, digit, symbol].filter(Boolean).length < MIN_CLASSES;
+}
+
+/** The four rows of US QWERTY; rows do not join and do not wrap. */
+const KEYBOARD_ROWS = ["1234567890-=", "qwertyuiop[]", "asdfghjkl;'", "zxcvbnm,./"];
+/** The shifted glyph of each key, position for position (letters are folded by case instead). */
+const SHIFTED_ROWS = ["!@#$%^&*()_+", "QWERTYUIOP{}", "ASDFGHJKL:\"", "ZXCVBNM<>?"];
+
+/** Glyph → [row, column]. Glyphs on no row (` ~ \ | and anything non-ASCII) break a run. */
+const KEY_OF = new Map<number, [number, number]>();
+[KEYBOARD_ROWS, SHIFTED_ROWS].forEach((rows) =>
+  rows.forEach((row, r) =>
+    Array.from(row).forEach((g, c) => KEY_OF.set(g.codePointAt(0)!, [r, c])),
+  ),
+);
+
+/**
+ * Longest run of positions that step by exactly ±1 in one direction within one
+ * group reaches `min`. `pos` maps a code point to [group, position] or undefined
+ * (which breaks the run). Same position twice is not a step (that is REPEAT).
+ * Shared by KEYBOARD_RUN (group = row) and SEQUENCE (group = alphabet).
+ */
+function hasRun(
+  cps: number[],
+  pos: (cp: number) => readonly [number, number] | undefined,
+  min: number,
+): boolean {
+  let prev: readonly [number, number] | undefined;
+  let run = 0, dir = 0;
+  for (const cp of cps) {
+    const k = pos(cp);
+    if (!k) {
+      prev = undefined;
+      run = 0;
+      dir = 0;
+      continue;
+    }
+    const step = prev && k[0] === prev[0] ? k[1] - prev[1] : 0;
+    if (step === 1 || step === -1) {
+      if (run >= 2 && step === dir) run++;
+      else {
+        run = 2;
+        dir = step;
+      }
+    } else {
+      run = 1;
+      dir = 0;
+    }
+    prev = k;
+    if (run >= min) return true;
+  }
+  return false;
+}
+
+/** 4+ adjacent keys on one row, either direction, case-insensitive, shifted glyph = its key. */
+const violatesKeyboardRun = (cps: number[]) =>
+  hasRun(cps.map(foldCp), (cp) => KEY_OF.get(cp), MIN_KEYBOARD_RUN);
+
+/** Letters a–z (case folded) are group 0, digits 0–9 group 1; anything else breaks a sequence. */
+function seqKey(cp: number): [number, number] | undefined {
+  if (cp >= 0x61 && cp <= 0x7a) return [0, cp - 0x61];
+  if (cp >= 0x41 && cp <= 0x5a) return [0, cp - 0x41];
+  if (cp >= 0x30 && cp <= 0x39) return [1, cp - 0x30];
+  return undefined;
+}
+
+/** 4+ consecutive letters or digits, ascending or descending; no wrap; letters and digits never join. */
+const violatesSequence = (cps: number[]) => hasRun(cps, seqKey, MIN_SEQUENCE);
+
+/** The same code point 3+ times in a row, compared exactly ("aAa" is fine). */
+function violatesRepeat(cps: number[]): boolean {
+  let run = 0, prev = -1;
+  for (const cp of cps) {
+    if (cp === prev) run++;
+    else {
+      run = 1;
+      prev = cp;
+    }
+    if (run > MAX_REPEAT) return true;
+  }
+  return false;
+}
+
+/**
+ * Every violated rule in table order. `empNo` is "" when the employee ID is
+ * malformed (CONTAINS_EMP_NO is then skipped, as on the server). Without
+ * `isCommon` (blocklist not loaded) COMMON_PASSWORD is never reported.
+ */
+export function checkPassword(
+  password: string,
+  empNo: string,
+  isCommon?: CommonCheck,
+): PasswordRule[] {
+  const cps = codePoints(password);
+  const violated: Record<PasswordRule, boolean> = {
+    LENGTH: violatesLength(cps),
+    CHARSET: violatesCharset(cps),
+    COMPLEXITY: violatesComplexity(cps),
+    COMMON_PASSWORD: isCommon?.(password) ?? false,
+    KEYBOARD_RUN: violatesKeyboardRun(cps),
+    SEQUENCE: violatesSequence(cps),
+    REPEAT: violatesRepeat(cps),
+    CONTAINS_EMP_NO: empNo !== "" && password.includes(empNo),
+  };
+  return PASSWORD_RULES.filter((r) => violated[r]);
+}
+
+/** The employee ID as the server sees it for CONTAINS_EMP_NO: "" unless it is well-formed. */
+export const empNoForPolicy = (empNo: string): string => (/^[0-9]{6}$/.test(empNo) ? empNo : "");

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

@@ -0,0 +1,33 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCountdown } from "./useCountdown";
+
+describe("useCountdown", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("counts down in whole seconds and stops at zero", () => {
+    const { result } = renderHook(() => useCountdown());
+    expect(result.current.remaining).toBe(0);
+    act(() => result.current.start(3));
+    expect(result.current.remaining).toBe(3);
+    act(() => void vi.advanceTimersByTime(1000));
+    expect(result.current.remaining).toBe(2);
+    act(() => void vi.advanceTimersByTime(2000));
+    expect(result.current.remaining).toBe(0);
+  });
+
+  it("treats 0 as at least one second", () => {
+    const { result } = renderHook(() => useCountdown());
+    act(() => result.current.start(0));
+    expect(result.current.remaining).toBe(1);
+  });
+
+  it("restarts from a new value", () => {
+    const { result } = renderHook(() => useCountdown());
+    act(() => result.current.start(10));
+    act(() => void vi.advanceTimersByTime(4000));
+    act(() => result.current.start(30));
+    expect(result.current.remaining).toBe(30);
+  });
+});

package/frontend/src/features/auth/useCountdown.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Whole seconds left of a countdown started with `start(seconds)`. It advances with
+ * `performance.now()`, so changing the system clock does not affect it (Frontend.md §5.3).
+ */
+export function useCountdown() {
+  const [endsAt, setEndsAt] = useState<number | null>(null);
+  const [remaining, setRemaining] = useState(0);
+
+  useEffect(() => {
+    if (endsAt === null) return;
+    const tick = () => {
+      const left = Math.max(0, Math.ceil((endsAt - performance.now()) / 1000));
+      setRemaining(left);
+      if (left === 0) setEndsAt(null);
+    };
+    tick();
+    const id = setInterval(tick, 250);
+    return () => clearInterval(id);
+  }, [endsAt]);
+
+  const start = useCallback((seconds: number) => {
+    setEndsAt(performance.now() + Math.max(1, seconds) * 1000);
+  }, []);
+
+  return { remaining, start };
+}