@johnnyboy11234/esg-idea-contest 0.2.2 → 0.2.4

package/frontend/src/app/index.css

@@ -6,58 +6,58 @@
    Frontend.md §8.1 (4.5:1 text, 3:1 components). */
 :root {
   --radius: 0.5rem;
-  --background: oklch(0.9751 0.0127 244.2507);
-  --foreground: oklch(0.3729 0.0306 259.7328);
-  --card: oklch(1.0000 0 0);
-  --card-foreground: oklch(0.3729 0.0306 259.7328);
-  --popover: oklch(1.0000 0 0);
-  --popover-foreground: oklch(0.3729 0.0306 259.7328);
-  --primary: oklch(0.7227 0.1920 149.5793);
-  --primary-foreground: oklch(1.0000 0 0);
-  --secondary: oklch(0.9514 0.0250 236.8242);
-  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
-  --muted: oklch(0.9670 0.0029 264.5419);
-  --muted-foreground: oklch(0.5510 0.0234 264.3637);
-  --accent: oklch(0.9505 0.0507 163.0508);
-  --accent-foreground: oklch(0.3729 0.0306 259.7328);
-  --destructive: oklch(0.6368 0.2078 25.3313);
-  --border: oklch(0.9276 0.0058 264.5313);
-  --input: oklch(0.9276 0.0058 264.5313);
-  --ring: oklch(0.7227 0.1920 149.5793);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --chart-1: oklch(0.7227 0.1920 149.5793);
-  --chart-2: oklch(0.6959 0.1491 162.4796);
-  --chart-3: oklch(0.5960 0.1274 163.2254);
-  --chart-4: oklch(0.5081 0.1049 165.6121);
-  --chart-5: oklch(0.4318 0.0865 166.9128);
-  --sidebar: oklch(0.9514 0.0250 236.8242);
-  --sidebar-foreground: oklch(0.3729 0.0306 259.7328);
-  --sidebar-primary: oklch(0.7227 0.1920 149.5793);
-  --sidebar-primary-foreground: oklch(1.0000 0 0);
-  --sidebar-accent: oklch(0.9505 0.0507 163.0508);
-  --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
-  --sidebar-border: oklch(0.9276 0.0058 264.5313);
-  --sidebar-ring: oklch(0.7227 0.1920 149.5793);
-  --font-sans: DM Sans, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: IBM Plex Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.1;
-  --shadow-blur: 8px;
-  --shadow-spread: -1px;
+  --background: oklch(0.9911 0 0);
+  --foreground: oklch(0.2046 0 0);
+  --card: oklch(0.9911 0 0);
+  --card-foreground: oklch(0.2046 0 0);
+  --popover: oklch(0.9911 0 0);
+  --popover-foreground: oklch(0.4386 0 0);
+  --primary: oklch(0.8348 0.1302 160.9080);
+  --primary-foreground: oklch(0.2626 0.0147 166.4589);
+  --secondary: oklch(0.9940 0 0);
+  --secondary-foreground: oklch(0.2046 0 0);
+  --muted: oklch(0.9461 0 0);
+  --muted-foreground: oklch(0.2435 0 0);
+  --accent: oklch(0.9461 0 0);
+  --accent-foreground: oklch(0.2435 0 0);
+  --destructive: oklch(0.5523 0.1927 32.7272);
+  --border: oklch(0.9037 0 0);
+  --input: oklch(0.9731 0 0);
+  --ring: oklch(0.8348 0.1302 160.9080);
+  --destructive-foreground: oklch(0.9934 0.0032 17.2118);
+  --chart-1: oklch(0.8348 0.1302 160.9080);
+  --chart-2: oklch(0.6231 0.1880 259.8145);
+  --chart-3: oklch(0.6056 0.2189 292.7172);
+  --chart-4: oklch(0.7686 0.1647 70.0804);
+  --chart-5: oklch(0.6959 0.1491 162.4796);
+  --sidebar: oklch(0.9911 0 0);
+  --sidebar-foreground: oklch(0.5452 0 0);
+  --sidebar-primary: oklch(0.8348 0.1302 160.9080);
+  --sidebar-primary-foreground: oklch(0.2626 0.0147 166.4589);
+  --sidebar-accent: oklch(0.9461 0 0);
+  --sidebar-accent-foreground: oklch(0.2435 0 0);
+  --sidebar-border: oklch(0.9037 0 0);
+  --sidebar-ring: oklch(0.8348 0.1302 160.9080);
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --shadow-color: #000000;
+  --shadow-opacity: 0.17;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
   --shadow-offset-x: 0px;
-  --shadow-offset-y: 4px;
-  --letter-spacing: 0em;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0.025em;
   --spacing: 0.25rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-  --tracking-normal: 0em;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  --tracking-normal: 0.025em;
 }
 
 @theme inline {
@@ -83,9 +83,9 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --font-sans: DM Sans, sans-serif;
-  --font-mono: IBM Plex Mono, monospace;
-  --font-serif: Lora, serif;
+  --font-sans: Outfit, sans-serif;
+  --font-mono: monospace;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --radius: 0.5rem;
   --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
   --tracking-tight: calc(var(--tracking-normal) - 0.025em);
@@ -139,56 +139,56 @@
 }
 
 .dark {
-  --background: oklch(0.2077 0.0398 265.7549);
-  --foreground: oklch(0.8717 0.0093 258.3382);
-  --card: oklch(0.2795 0.0368 260.0310);
-  --card-foreground: oklch(0.8717 0.0093 258.3382);
-  --popover: oklch(0.2795 0.0368 260.0310);
-  --popover-foreground: oklch(0.8717 0.0093 258.3382);
-  --primary: oklch(0.7729 0.1535 163.2231);
-  --primary-foreground: oklch(0.2077 0.0398 265.7549);
-  --secondary: oklch(0.3351 0.0331 260.9120);
-  --secondary-foreground: oklch(0.7118 0.0129 286.0665);
-  --muted: oklch(0.2463 0.0275 259.9628);
-  --muted-foreground: oklch(0.5510 0.0234 264.3637);
-  --accent: oklch(0.3729 0.0306 259.7328);
-  --accent-foreground: oklch(0.7118 0.0129 286.0665);
-  --destructive: oklch(0.6368 0.2078 25.3313);
-  --destructive-foreground: oklch(0.2077 0.0398 265.7549);
-  --border: oklch(0.4461 0.0263 256.8018);
-  --input: oklch(0.4461 0.0263 256.8018);
-  --ring: oklch(0.7729 0.1535 163.2231);
-  --chart-1: oklch(0.7729 0.1535 163.2231);
-  --chart-2: oklch(0.7845 0.1325 181.9120);
-  --chart-3: oklch(0.7227 0.1920 149.5793);
-  --chart-4: oklch(0.6959 0.1491 162.4796);
-  --chart-5: oklch(0.5960 0.1274 163.2254);
+  --background: oklch(0.1822 0 0);
+  --foreground: oklch(0.9288 0.0126 255.5078);
+  --card: oklch(0.2046 0 0);
+  --card-foreground: oklch(0.9288 0.0126 255.5078);
+  --popover: oklch(0.2603 0 0);
+  --popover-foreground: oklch(0.7348 0 0);
+  --primary: oklch(0.4365 0.1044 156.7556);
+  --primary-foreground: oklch(0.9213 0.0135 167.1556);
+  --secondary: oklch(0.2603 0 0);
+  --secondary-foreground: oklch(0.9851 0 0);
+  --muted: oklch(0.2393 0 0);
+  --muted-foreground: oklch(0.7122 0 0);
+  --accent: oklch(0.3132 0 0);
+  --accent-foreground: oklch(0.9851 0 0);
+  --destructive: oklch(0.3123 0.0852 29.7877);
+  --destructive-foreground: oklch(0.9368 0.0045 34.3092);
+  --border: oklch(0.2809 0 0);
+  --input: oklch(0.2603 0 0);
+  --ring: oklch(0.8003 0.1821 151.7110);
+  --chart-1: oklch(0.8003 0.1821 151.7110);
+  --chart-2: oklch(0.7137 0.1434 254.6240);
+  --chart-3: oklch(0.7090 0.1592 293.5412);
+  --chart-4: oklch(0.8369 0.1644 84.4286);
+  --chart-5: oklch(0.7845 0.1325 181.9120);
   --radius: 0.5rem;
-  --sidebar: oklch(0.2795 0.0368 260.0310);
-  --sidebar-foreground: oklch(0.8717 0.0093 258.3382);
-  --sidebar-primary: oklch(0.7729 0.1535 163.2231);
-  --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
-  --sidebar-accent: oklch(0.3729 0.0306 259.7328);
-  --sidebar-accent-foreground: oklch(0.7118 0.0129 286.0665);
-  --sidebar-border: oklch(0.4461 0.0263 256.8018);
-  --sidebar-ring: oklch(0.7729 0.1535 163.2231);
-  --font-sans: DM Sans, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: IBM Plex Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.1;
-  --shadow-blur: 8px;
-  --shadow-spread: -1px;
+  --sidebar: oklch(0.1822 0 0);
+  --sidebar-foreground: oklch(0.6301 0 0);
+  --sidebar-primary: oklch(0.4365 0.1044 156.7556);
+  --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
+  --sidebar-accent: oklch(0.3132 0 0);
+  --sidebar-accent-foreground: oklch(0.9851 0 0);
+  --sidebar-border: oklch(0.2809 0 0);
+  --sidebar-ring: oklch(0.8003 0.1821 151.7110);
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --shadow-color: #000000;
+  --shadow-opacity: 0.17;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
   --shadow-offset-x: 0px;
-  --shadow-offset-y: 4px;
-  --letter-spacing: 0em;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0.025em;
   --spacing: 0.25rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
 }

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>