@johnnyboy11234/esg-idea-contest 0.2.1 → 0.2.3

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

@@ -0,0 +1,231 @@
+import { QueryClient } from '@tanstack/react-query';
+import { render, screen, waitFor, within } 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, type Locale } from '@/shared/i18n';
+import { App } from '../App';
+import { routes } from '../router';
+
+const API = 'http://localhost:3000/api/v1';
+
+interface Seen {
+  body: unknown;
+  csrf: string | null;
+  cookieSet: boolean;
+}
+
+/** Visitor on /register; returns what POST /auth/register received. */
+async function open(locale: Locale = 'en') {
+  clearCsrfToken();
+  const seen: Seen[] = [];
+  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' })),
+    http.get(`${API}/auth/csrf`, () => HttpResponse.json({ token: 'tok' })),
+  );
+  await initI18n(locale);
+  const router = createMemoryRouter(routes, { initialEntries: ['/register'] });
+  const view = render(<App router={router} client={new QueryClient()} />);
+  await screen.findByRole('heading', { level: 1, name: locale === 'en' ? 'Create an account' : '建立帳號' });
+  return { router, seen, user: userEvent.setup(), ...view };
+}
+
+function registerReturns(seen: Seen[], respond: () => Response | Promise<Response>) {
+  server.use(
+    http.post(`${API}/auth/register`, async ({ request }) => {
+      seen.push({ body: await request.json(), csrf: request.headers.get('X-CSRF-Token'), cookieSet: false });
+      return respond();
+    }),
+  );
+}
+
+async function fill(user: ReturnType<typeof userEvent.setup>, v: Partial<Record<'Employee ID' | 'Name' | 'Email' | 'Password' | 'Confirm password', string>>) {
+  for (const [label, value] of Object.entries(v)) await user.type(screen.getByLabelText(label), value);
+}
+
+const VALID = { 'Employee ID': '089290', Name: '  Wang   Xiao Ming ', Email: ' Wang@Example.COM ', Password: 'Correct-Horse-9', 'Confirm password': 'Correct-Horse-9' };
+
+describe('Register page: markup', () => {
+  it('labels every field and sets autocomplete (WCAG 1.3.1, 1.3.5)', async () => {
+    await open();
+    const expected: [string, string][] = [
+      ['Employee ID', 'username'],
+      ['Name', 'name'],
+      ['Email', 'email'],
+      ['Password', 'new-password'],
+      ['Confirm password', 'new-password'],
+    ];
+    for (const [label, ac] of expected) {
+      const input = screen.getByLabelText(label);
+      expect(input).toHaveAttribute('autocomplete', ac);
+      expect(input).toBeRequired();
+    }
+    expect(screen.getByLabelText('Password')).toHaveAttribute('type', 'password');
+    expect(screen.getByLabelText('Email')).toHaveAttribute('type', 'email');
+  });
+
+  it.each(['en', 'zh-TW'] as const)('has no axe violations (%s), also with errors shown', async (locale) => {
+    const { container, user } = await open(locale);
+    await screen.findByRole('region', { name: locale === 'en' ? 'Submission status' : /.+/ });
+    expect((await axe(container)).violations).toEqual([]);
+    await user.click(screen.getByRole('button', { name: locale === 'en' ? 'Create account' : '建立帳號' }));
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+    expect((await axe(container)).violations).toEqual([]);
+  });
+});
+
+describe('Register page: pre-check and error summary', () => {
+  it('blocks an empty submit, focuses the summary and sends no request', async () => {
+    const { user } = await open();
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    await waitFor(() => expect(summary).toHaveFocus());
+    const links = within(summary).getAllByRole('link');
+    expect(links.map((l) => l.textContent)).toEqual([
+      'Employee ID: This field is required.',
+      'Name: This field is required.',
+      'Email: This field is required.',
+      'Password: This field is required.',
+    ]);
+    // each field points at its error text and is marked invalid
+    const empNo = screen.getByLabelText('Employee ID');
+    expect(empNo).toHaveAttribute('aria-invalid', 'true');
+    expect(empNo.getAttribute('aria-describedby')).toContain('empNo-error');
+    expect(document.getElementById('empNo-error')).toHaveTextContent('This field is required.');
+  });
+
+  it('a summary link moves focus to its field (keyboard: Enter)', async () => {
+    const { user } = await open();
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    await waitFor(() => expect(summary).toHaveFocus());
+    await user.tab();
+    expect(within(summary).getAllByRole('link')[0]).toHaveFocus();
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(screen.getByLabelText('Name')).toHaveFocus();
+  });
+
+  it.each([
+    ['12345', 'The format is not valid.'],
+    ['12345a', 'The format is not valid.'],
+    ['１２３４５６', 'The format is not valid.'],
+  ])('employee ID %j', async (empNo, msg) => {
+    const { user } = await open();
+    await fill(user, { ...VALID, 'Employee ID': empNo });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText(`Employee ID: ${msg}`)).toBeInTheDocument();
+  });
+
+  it('email with a space is rejected before any request (PRD §6.3)', async () => {
+    const { user } = await open();
+    await fill(user, { ...VALID, Email: 'a b@x.com' });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText('Email: The format is not valid.')).toBeInTheDocument();
+  });
+
+  it('name with a forbidden character and a mismatching confirmation', async () => {
+    const { user } = await open();
+    await fill(user, { ...VALID, Name: 'a/b', 'Confirm password': 'other' });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText('Name: The name contains characters that are not allowed.')).toBeInTheDocument();
+    expect(screen.getByText('Confirm password: The passwords do not match.')).toBeInTheDocument();
+  });
+});
+
+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();
+    registerReturns(seen, () => HttpResponse.json({ empNo: '089290', name: 'Wang Xiao Ming', email: 'wang@example.com' }, { status: 201 }));
+    let loginCalls = 0;
+    server.use(http.post(`${API}/auth/login`, () => (loginCalls++, problem(500, 'INTERNAL_ERROR'))));
+    await fill(user, VALID);
+    await user.keyboard('{Enter}'); // submit from the keyboard
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(seen).toEqual([
+      { body: { empNo: '089290', name: 'Wang Xiao Ming', email: 'wang@example.com', password: 'Correct-Horse-9' }, csrf: 'tok', cookieSet: false },
+    ]);
+    expect(router.state.location.search).toBe('');
+    expect(router.state.location.state).toEqual({ notice: 'registered' });
+    expect(await screen.findByRole('status', { name: '' })).toBeDefined();
+    expect(screen.getByText('Your account was created. Sign in to continue.')).toBeInTheDocument();
+    expect(loginCalls).toBe(0);
+  });
+
+  it('disables the button while the request is pending (no double submit)', async () => {
+    const { user, seen, router } = await open();
+    let release!: () => void;
+    const gate = new Promise<void>((r) => (release = r));
+    registerReturns(seen, async () => {
+      await gate;
+      return HttpResponse.json({ empNo: '089290', name: 'W', email: 'w@x.io' }, { status: 201 });
+    });
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const busy = await screen.findByRole('button', { name: 'Creating account…' });
+    expect(busy).toBeDisabled();
+    release();
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(seen).toHaveLength(1);
+  });
+
+  it.each([
+    ['EMP_NO_TAKEN', 'Employee ID', 'Employee ID: This employee ID is already registered.'],
+    ['EMAIL_TAKEN', 'Email', 'Email: This email address is already registered.'],
+  ] as const)('409 %s is shown on its field and the user stays on the form', async (code, label, summaryText) => {
+    const { user, seen, router } = await open();
+    registerReturns(seen, () => problem(409, code));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByRole('link', { name: summaryText })).toBeInTheDocument();
+    expect(screen.getByLabelText(label)).toHaveAttribute('aria-invalid', 'true');
+    expect(router.state.location.pathname).toBe('/register');
+    expect(screen.getByLabelText('Password')).toHaveValue('Correct-Horse-9'); // nothing the user typed is lost
+  });
+
+  it('422 field errors map to their fields; PASSWORD_POLICY shows the policy message', async () => {
+    const { user, seen } = await open();
+    registerReturns(seen, () =>
+      problem(422, 'PASSWORD_POLICY', {
+        errors: [
+          { field: 'name', code: 'OUT_OF_RANGE' },
+          { field: 'password', code: 'LENGTH' },
+          { field: 'password', code: 'COMPLEXITY' },
+        ],
+      }),
+    );
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByRole('link', { name: 'Name: The value is out of range.' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Password: The password does not meet the requirements.' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('a failure without a field (503) is a form-level message with the request ID', async () => {
+    const { user, seen, router } = await open();
+    registerReturns(seen, () => problem(503, 'SERVICE_UNAVAILABLE'));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    expect(summary).toHaveTextContent('The service is temporarily unavailable. Please try again later.');
+    expect(summary).toHaveTextContent('Request ID: 6f1c2c1e-0000-4000-8000-000000000000');
+    expect(within(summary).queryAllByRole('link')).toHaveLength(0);
+    expect(router.state.location.pathname).toBe('/register');
+    expect(screen.getByRole('button', { name: 'Create account' })).toBeEnabled();
+  });
+
+  it('retries once after CSRF_INVALID (shared client behaviour) and still succeeds', async () => {
+    const { user, router } = await open();
+    let n = 0;
+    server.use(http.post(`${API}/auth/register`, () => (n++ === 0 ? problem(403, 'CSRF_INVALID') : HttpResponse.json({ empNo: '089290', name: 'W', email: 'w@x.io' }, { status: 201 }))));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(n).toBe(2);
+  });
+});

package/frontend/src/app/router.tsx

@@ -1,29 +1,39 @@
-import { lazy, Suspense, type ComponentType } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Navigate, useLocation, useSearchParams, type RouteObject } from 'react-router';
-import { decide, safeNext } from './access';
-import { AppShell, PublicLayout } from './layouts';
-import { NotFound } from './pages/NotFound';
-import { Login, Register } from './pages/auth';
-import { IdeaCreate, IdeaDetail, IdeaEdit, IdeaList } from './pages/ideas';
-import { JoinRequests } from './pages/JoinRequests';
-import { ROUTES } from './routes';
-import { useMe } from './session';
+import { lazy, Suspense, useEffect, type ComponentType } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Navigate,
+  useLocation,
+  useSearchParams,
+  type RouteObject,
+} from "react-router";
+import { decide, safeNext } from "./access";
+import { AppShell, PublicLayout } from "./layouts";
+import { NotFound } from "./pages/NotFound";
+import { Login, Register } from "./pages/auth";
+import { IdeaCreate, IdeaDetail, IdeaEdit, IdeaList } from "./pages/ideas";
+import { JoinRequests } from "./pages/JoinRequests";
+import { ROUTES } from "./routes";
+import { ApiError } from "@/shared/api";
+import { leavingReason, useMe, type SessionEndedState } from "./session";
 
-const AdminDeadline = lazy(() => import('./pages/admin').then((m) => ({ default: m.AdminDeadline })));
-const AdminStats = lazy(() => import('./pages/admin').then((m) => ({ default: m.AdminStats })));
+const AdminDeadline = lazy(() =>
+  import("./pages/admin").then((m) => ({ default: m.AdminDeadline })),
+);
+const AdminStats = lazy(() =>
+  import("./pages/admin").then((m) => ({ default: m.AdminStats })),
+);
 
 /** Page per route path; keys must match `ROUTES` (checked by a test). */
 export const PAGES: Record<string, ComponentType> = {
-  '/login': Login,
-  '/register': Register,
-  '/ideas': IdeaList,
-  '/ideas/new': IdeaCreate,
-  '/ideas/:id': IdeaDetail,
-  '/ideas/:id/edit': IdeaEdit,
-  '/join-requests': JoinRequests,
-  '/admin/deadline': AdminDeadline,
-  '/admin/stats': AdminStats,
+  "/login": Login,
+  "/register": Register,
+  "/ideas": IdeaList,
+  "/ideas/new": IdeaCreate,
+  "/ideas/:id": IdeaDetail,
+  "/ideas/:id/edit": IdeaEdit,
+  "/join-requests": JoinRequests,
+  "/admin/deadline": AdminDeadline,
+  "/admin/stats": AdminStats,
 };
 
 /** Wraps a page with identity, the access decision (§6.3) and the right layout. `route` undefined = 404. */
@@ -31,35 +41,74 @@ function Gate({ route }: { route?: (typeof ROUTES)[number] }) {
   const { t } = useTranslation();
   const location = useLocation();
   const [params] = useSearchParams();
-  const { data: me, isPending, isError } = useMe();
+  const { data: me, isPending, isError, error } = useMe();
+  useEffect(() => {
+    if (!isError) return;
+    if (error instanceof ApiError)
+      console.error(
+        "GET /auth/me failed",
+        error.status,
+        error.code,
+        error.requestId,
+      );
+    else
+      console.error(
+        "GET /auth/me failed (network error or non-JSON response; is the backend / dev proxy up?)",
+        error,
+      );
+  }, [isError, error]);
 
-  if (isPending) return <p role="status">{t('common.loading')}</p>;
-  if (isError) return <p role="alert">{t('errors.UNKNOWN')}</p>;
+  if (isPending) return <p role="status">{t("common.loading")}</p>;
+  if (isError) return <p role="alert">{t("errors.UNKNOWN")}</p>;
 
   const role = me?.role ?? null;
-  const d = route ? decide(route.access, role, location) : ({ kind: 'notFound' } as const);
-  if (d.kind === 'login') return <Navigate to={`/login?next=${encodeURIComponent(d.next)}`} replace />;
-  if (d.kind === 'home') return <Navigate to={role ? safeNext(params.get('next'), role) : '/login'} replace />;
+  const d = route
+    ? decide(route.access, role, location)
+    : ({ kind: "notFound" } as const);
+  if (d.kind === "login") {
+    const why = leavingReason();
+    if (why === "signedOut") return <Navigate to="/login" replace />;
+    const state: SessionEndedState | undefined =
+      why === "sessionEnded" ? { notice: "sessionEnded" } : undefined;
+    return (
+      <Navigate
+        to={`/login?next=${encodeURIComponent(d.next)}`}
+        replace
+        state={state}
+      />
+    );
+  }
+  if (d.kind === "home")
+    return (
+      <Navigate
+        to={role ? safeNext(params.get("next"), role) : "/login"}
+        replace
+      />
+    );
 
-  const Page = d.kind === 'allow' && route ? PAGES[route.path] : undefined;
+  const Page = d.kind === "allow" && route ? PAGES[route.path] : undefined;
   const page = Page ? (
-    <Suspense fallback={<p role="status">{t('common.loading')}</p>}>
+    <Suspense fallback={<p role="status">{t("common.loading")}</p>}>
       <Page />
     </Suspense>
   ) : (
     <NotFound />
   );
-  return me ? <AppShell me={me}>{page}</AppShell> : <PublicLayout>{page}</PublicLayout>;
+  return me ? (
+    <AppShell me={me}>{page}</AppShell>
+  ) : (
+    <PublicLayout>{page}</PublicLayout>
+  );
 }
 
 function RootRedirect() {
   const { data: me, isPending } = useMe();
   if (isPending) return null;
-  return <Navigate to={me ? '/ideas' : '/login'} replace />;
+  return <Navigate to={me ? "/ideas" : "/login"} replace />;
 }
 
 export const routes: RouteObject[] = [
-  { path: '/', element: <RootRedirect /> },
+  { path: "/", element: <RootRedirect /> },
   ...ROUTES.map((r) => ({ path: r.path, element: <Gate route={r} /> })),
-  { path: '*', element: <Gate /> },
+  { path: "*", element: <Gate /> },
 ];

package/frontend/src/app/session.ts

@@ -1,26 +1,79 @@
-import { useQuery } from '@tanstack/react-query';
-import { parseApiError } from '@/shared/api';
-import type { Role } from './routes';
-
-/** GET /auth/me body (docs/API/response-bodies.md); `email` is null for Admins. */
-export interface Me {
-  empNo: string;
-  name: string;
-  email: string | null;
-  role: Role;
-}
+import { useQuery, type QueryClient } from "@tanstack/react-query";
+import type { DataRouter } from "react-router";
+import { ApiError, apiFetch } from "@/shared/api";
+import { findRoute } from "./access";
+import type { Me } from "@/features/auth/login";
+
+export type { Me };
 
-export const meKey = ['me'] as const;
+export const meKey = ["me"] as const;
 
 /** A 401 means visitor → null (Frontend.md §6.3 rule 1). */
 export async function fetchMe(signal?: AbortSignal): Promise<Me | null> {
-  const res = await fetch(`${location.origin}/api/v1/auth/me`, { headers: { Accept: 'application/json' }, signal });
-  if (res.status === 401) return null;
-  if (!res.ok) throw await parseApiError(res);
-  return (await res.json()) as Me;
+  try {
+    const res = await apiFetch("/auth/me", {
+      signal,
+      allowUnauthenticated: true,
+    });
+    return (await res.json()) as Me;
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 401) return null;
+    throw e;
+  }
 }
 
-export function useMe() {
-  return useQuery({ queryKey: meKey, queryFn: ({ signal }) => fetchMe(signal), retry: false, staleTime: 60_000 });
+/**
+ * Why `me` became null. The route gate redirects a visitor on a protected route to `/login?next=…`
+ * in the same render that clears `me`, racing the explicit navigation of the code that cleared it.
+ * Recording the reason lets the gate send the same destination, so the race has one outcome.
+ */
+let leaving: "signedOut" | "sessionEnded" | null = null;
+export const leavingReason = () => leaving;
+
+/**
+ * A new identity (login) or none (logout): nothing cached for the previous one may survive.
+ * `me` itself is kept as a query so the observers of the route gate see the new value.
+ */
+export function replaceIdentity(client: QueryClient, me: Me | null): void {
+  leaving = me === null ? "signedOut" : null;
+  client.removeQueries({ predicate: (q) => q.queryKey[0] !== meKey[0] });
+  client.setQueryData(meKey, me);
+}
+
+/** Router state a 401 redirect leaves for the login page to show "your session ended" (Frontend.md §5.2). */
+export interface SessionEndedState {
+  notice: "sessionEnded";
 }
 
+/** Router state `/register` leaves for the login page to confirm the account (not in the URL, Frontend.md §6). */
+export interface RegisteredState {
+  notice: "registered";
+}
+
+/**
+ * Global 401 (Frontend.md §5.2): forget the user and go to `/login?next=<current>`.
+ * Already on a public route (login, register) there is nothing to leave, so only `me` is cleared.
+ */
+export function handleSessionEnded(
+  client: QueryClient,
+  router: DataRouter,
+): void {
+  leaving = "sessionEnded";
+  client.setQueryData(meKey, null);
+  const { pathname, search } = router.state.location;
+  if (findRoute(pathname)?.access === "public") return;
+  const state: SessionEndedState = { notice: "sessionEnded" };
+  void router.navigate(`/login?next=${encodeURIComponent(pathname + search)}`, {
+    replace: true,
+    state,
+  });
+}
+
+export function useMe() {
+  return useQuery({
+    queryKey: meKey,
+    queryFn: ({ signal }) => fetchMe(signal),
+    retry: false,
+    staleTime: 60_000,
+  });
+}

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

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState, type FormEvent, type Ref } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { ApiError } from "@/shared/api";
+import { Button } from "@/shared/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/shared/ui/field";
+import { Input } from "@/shared/ui/input";
+import { login, type Me } from "./login";
+
+/**
+ * The login form. Every credential failure is the same 401 `INVALID_CREDENTIALS` (PRD §6.5), so
+ * it is one form-level message, never attached to a field. Focus moves to the message.
+ */
+export function LoginForm({
+  onLoggedIn,
+  notice,
+  heading,
+}: {
+  onLoggedIn: (me: Me) => void;
+  notice?: string;
+  heading?: Ref<HTMLHeadingElement>;
+}) {
+  const { t } = useTranslation();
+  const [empNo, setEmpNo] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [errorKey, setErrorKey] = useState(0);
+  const [pending, setPending] = useState(false);
+  const alert = useRef<HTMLParagraphElement>(null);
+
+  // after the message is in the DOM (WCAG 3.3.1)
+  useEffect(() => {
+    if (errorKey > 0) alert.current?.focus();
+  }, [errorKey]);
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pending) return;
+    setPending(true);
+    setError(null);
+    try {
+      onLoggedIn(await login({ empNo: empNo.trim(), password }));
+    } catch (err) {
+      const apiErr =
+        err instanceof ApiError
+          ? err
+          : new ApiError({ status: 0, code: "UNKNOWN" });
+      setError(
+        t(`errors.${apiErr.code}`) +
+          (apiErr.requestId
+            ? ` ${t("common.requestId", { id: apiErr.requestId })}`
+            : ""),
+      );
+      setErrorKey((k) => k + 1);
+      setPassword("");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex w-full max-w-xs flex-col gap-6"
+      onSubmit={(e) => void onSubmit(e)}
+    >
+      <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>
+        {notice && (
+          <p
+            role="status"
+            className="rounded-md border border-primary p-3 text-sm"
+          >
+            {notice}
+          </p>
+        )}
+        {error !== null && (
+          <p
+            key={errorKey}
+            ref={alert}
+            role="alert"
+            tabIndex={-1}
+            className="rounded-md border border-destructive p-3 text-sm text-destructive outline-none"
+          >
+            {error}
+          </p>
+        )}
+        <Field>
+          <FieldLabel htmlFor="empNo">{t("fields.empNo")}</FieldLabel>
+          <Input
+            id="empNo"
+            name="empNo"
+            autoComplete="username"
+            inputMode="numeric"
+            required
+            value={empNo}
+            onChange={(e) => setEmpNo(e.target.value)}
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="password">{t("fields.password")}</FieldLabel>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </Field>
+        <Field>
+          <Button
+            type="submit"
+            disabled={pending}
+            aria-busy={pending || undefined}
+          >
+            {pending ? t("pages.login.submitting") : 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>
+  );
+}