@johnnyboy11234/esg-idea-contest 0.2.4 → 0.3.0

package/backend/test/matrix/file_test.go

@@ -0,0 +1,52 @@
+package matrix
+
+import (
+	"encoding/json"
+	"os"
+	"path/filepath"
+	"slices"
+	"testing"
+)
+
+// The data file itself is checked without Docker: ids are unique, actors are
+// known, and every expected code exists in the shared error catalogue with the
+// status the catalogue gives it.
+func TestMatrixFileIsConsistent(t *testing.T) {
+	raw, err := os.ReadFile(filepath.Join(testdata, "error-codes.json"))
+	if err != nil {
+		t.Fatal(err)
+	}
+	var cat []struct {
+		Code   string
+		Status int
+	}
+	if err := json.Unmarshal(raw, &cat); err != nil {
+		t.Fatal(err)
+	}
+	status := map[string]int{}
+	for _, c := range cat {
+		status[c.Code] = c.Status
+	}
+
+	seen := map[string]bool{}
+	for _, r := range load(t) {
+		if seen[r.ID] {
+			t.Errorf("duplicate row id %q", r.ID)
+		}
+		seen[r.ID] = true
+		for actor, c := range r.Expect {
+			if !slices.Contains(Actors, actor) {
+				t.Errorf("%s: unknown actor %q", r.ID, actor)
+			}
+			if c.Code == "" {
+				if c.Status >= 400 {
+					t.Errorf("%s/%s: %d needs a code", r.ID, actor, c.Status)
+				}
+				continue
+			}
+			if want, ok := status[c.Code]; !ok || want != c.Status {
+				t.Errorf("%s/%s: %s is %d in the catalogue, row says %d", r.ID, actor, c.Code, want, c.Status)
+			}
+		}
+	}
+}

package/backend/test/matrix/load_test.go

@@ -0,0 +1,50 @@
+// Package matrix runs the permission matrix (PRD §7) from
+// testdata/permission-matrix.json: every cell is one test case.
+package matrix
+
+import (
+	"bytes"
+	"encoding/json"
+	"os"
+	"path/filepath"
+	"testing"
+)
+
+const testdata = "../../../testdata"
+
+// Cell is the expected outcome of one (row, actor) pair.
+type Cell struct {
+	Status int    `json:"status"`
+	Code   string `json:"code"`
+}
+
+// Row is one operation or check-order case.
+type Row struct {
+	ID          string          `json:"id"`
+	Operation   string          `json:"operation"`
+	Method      string          `json:"method"`
+	Path        string          `json:"path"`
+	Body        json.RawMessage `json:"body"`
+	CSRF        string          `json:"csrf"`
+	OutsideSpec bool            `json:"outsideSpec"`
+	Expect      map[string]Cell `json:"expect"`
+}
+
+// Actors in PRD §7 order. The harness has a fixture for each one it lists in
+// fixtures; a row naming any other actor fails loudly instead of passing.
+var Actors = []string{"visitor", "user", "member", "leader", "admin"}
+
+func load(tb testing.TB) []Row {
+	tb.Helper()
+	raw, err := os.ReadFile(filepath.Join(testdata, "permission-matrix.json"))
+	if err != nil {
+		tb.Fatal(err)
+	}
+	var m struct{ Rows []Row }
+	dec := json.NewDecoder(bytes.NewReader(raw))
+	dec.DisallowUnknownFields()
+	if err := dec.Decode(&m); err != nil {
+		tb.Fatalf("permission-matrix.json: %v", err)
+	}
+	return m.Rows
+}

package/backend/test/matrix/matrix_integration_test.go

@@ -0,0 +1,210 @@
+//go:build integration
+
+package matrix
+
+import (
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"log/slog"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"sync/atomic"
+	"testing"
+
+	"github.com/google/uuid"
+	"golang.org/x/crypto/bcrypt"
+
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/account"
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/audit"
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/auth"
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/deadline"
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/server"
+	"github.com/brian-huanggg/AwardRegistration/backend/internal/shared/dbtest"
+	"github.com/brian-huanggg/AwardRegistration/backend/test/apispec"
+)
+
+const password = "Correct-Horse-1"
+
+type env struct {
+	db      *sql.DB
+	plain   http.Handler // production chain
+	checked http.Handler // same chain, every response validated against openapi.yaml
+	seq     atomic.Int64
+}
+
+// newEnv wires the same chain as cmd/esg: this harness must fail if the
+// middleware order in production changes, so it must not build its own.
+func newEnv(t *testing.T) *env {
+	t.Helper()
+	db := dbtest.New(t)
+	log := slog.New(slog.DiscardHandler)
+	auditSvc := audit.New(db, log)
+	errs := server.ErrorAdapter{Audit: auditSvc, Log: log}
+	csrf, err := auth.NewCSRF(strings.Repeat("k", 32))
+	if err != nil {
+		t.Fatal(err)
+	}
+	sessions := auth.New(db)
+	logins, err := auth.NewLogins(sessions, auditSvc, auth.NoThrottle{})
+	if err != nil {
+		t.Fatal(err)
+	}
+	si := server.API{
+		Auth:    auth.Handler{CSRF: csrf, Log: log},
+		Logins:  auth.LoginHandler{Logins: logins, Fail: errs.Write},
+		Logouts: auth.LogoutHandler{Logouts: &auth.Logouts{Sessions: sessions, Audit: auditSvc}, Fail: errs.Write},
+		Me:      auth.MeHandler{Sessions: sessions, Fail: errs.Write},
+		Account: account.Handler{
+			Service: &account.Service{DB: db, Audit: auditSvc, Policy: account.StubPolicy{}},
+			Fail:    errs.Write,
+		},
+		Deadline: deadline.Handler{Store: deadline.SQLStore{DB: db}},
+	}
+	chain := server.NewPublic(log, server.Mount(si),
+		auth.Middleware(sessions, server.IsPublic, log),
+		csrf.Middleware(errs.Write, server.ActionFor))
+	return &env{db: db, plain: chain, checked: apispec.Load(t).Validate(t, chain)}
+}
+
+func (e *env) do(h http.Handler, req *http.Request) *httptest.ResponseRecorder {
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	return rec
+}
+
+func (e *env) addUser(t *testing.T, empNo, role string) {
+	t.Helper()
+	hash, err := bcrypt.GenerateFromPassword([]byte(password), 10)
+	if err != nil {
+		t.Fatal(err)
+	}
+	var email any = empNo + "@example.com"
+	if role == "ADMIN" {
+		email = nil
+	}
+	if _, err := e.db.Exec(`INSERT INTO app_user (id, emp_no, name, email, password_hash, role, enabled) VALUES (?,?,?,?,?,?,?)`,
+		uuid.NewString(), empNo, "N "+empNo, email, string(hash), role, true); err != nil {
+		t.Fatal(err)
+	}
+}
+
+// actor is one caller of the matrix: its employee number and, when logged in,
+// its session cookie.
+type actor struct {
+	empNo   string
+	session *http.Cookie
+}
+
+// fixtures lists the actors the harness can build. Idea-related actors (member,
+// leader) arrive with the PRs that create Ideas.
+var fixtures = map[string]string{"visitor": "", "user": "USER", "admin": "ADMIN"}
+
+// newActor creates a fresh account (logout and login change session state, so
+// no two cells share one) and logs in through the API.
+func (e *env) newActor(t *testing.T, name string) actor {
+	t.Helper()
+	role, ok := fixtures[name]
+	if !ok {
+		t.Fatalf("matrix actor %q has no fixture; add one before adding cells for it", name)
+	}
+	if role == "" {
+		return actor{empNo: "000000"}
+	}
+	empNo := fmt.Sprintf("%06d", 100000+e.seq.Add(1))
+	e.addUser(t, empNo, role)
+	tok, ck := e.csrf(t, nil)
+	body := fmt.Sprintf(`{"empNo":%q,"password":%q}`, empNo, password)
+	req := httptest.NewRequest("POST", "/api/v1/auth/login", strings.NewReader(body))
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set(auth.CSRFHeader, tok)
+	req.AddCookie(ck)
+	rec := e.do(e.plain, req)
+	if rec.Code != 200 {
+		t.Fatalf("login %s: %d %s", name, rec.Code, rec.Body)
+	}
+	return actor{empNo: empNo, session: cookie(rec, auth.SessionCookie)}
+}
+
+func cookie(rec *httptest.ResponseRecorder, name string) *http.Cookie {
+	for _, c := range rec.Result().Cookies() {
+		if c.Name == name {
+			return c
+		}
+	}
+	return nil
+}
+
+func (e *env) csrf(t *testing.T, session *http.Cookie) (string, *http.Cookie) {
+	t.Helper()
+	req := httptest.NewRequest("GET", "/api/v1/auth/csrf", nil)
+	if session != nil {
+		req.AddCookie(session)
+	}
+	rec := e.do(e.plain, req)
+	var b struct{ Token string }
+	if err := json.Unmarshal(rec.Body.Bytes(), &b); err != nil || rec.Code != 200 {
+		t.Fatalf("csrf: %d %s", rec.Code, rec.Body)
+	}
+	return b.Token, cookie(rec, auth.CSRFCookie)
+}
+
+func (e *env) request(t *testing.T, r Row, a actor) *http.Request {
+	t.Helper()
+	var body *strings.Reader
+	if r.Body != nil {
+		s := string(r.Body)
+		s = strings.ReplaceAll(s, "${password}", password)
+		s = strings.ReplaceAll(s, "${actorEmpNo}", a.empNo)
+		s = strings.ReplaceAll(s, "${newEmpNo}", fmt.Sprintf("%06d", 500000+e.seq.Add(1)))
+		body = strings.NewReader(s)
+	}
+	var req *http.Request
+	if body != nil {
+		req = httptest.NewRequest(r.Method, r.Path, body)
+		req.Header.Set("Content-Type", "application/json")
+	} else {
+		req = httptest.NewRequest(r.Method, r.Path, nil)
+	}
+	req.RemoteAddr = "192.0.2.9:4000"
+	req.Header.Set("User-Agent", "matrix/1")
+	if a.session != nil {
+		req.AddCookie(a.session)
+	}
+	if r.Method != http.MethodGet && r.CSRF != "none" {
+		tok, ck := e.csrf(t, a.session)
+		req.Header.Set(auth.CSRFHeader, tok)
+		req.AddCookie(ck)
+	}
+	return req
+}
+
+func TestPermissionMatrix(t *testing.T) {
+	e := newEnv(t)
+	for _, r := range load(t) {
+		for _, name := range Actors {
+			want, ok := r.Expect[name]
+			if !ok {
+				continue
+			}
+			t.Run(r.ID+"/"+name, func(t *testing.T) {
+				a := e.newActor(t, name)
+				h := e.checked
+				if r.OutsideSpec {
+					h = e.plain
+				}
+				rec := e.do(h, e.request(t, r, a))
+				if rec.Code != want.Status {
+					t.Fatalf("%s %s as %s: status %d, want %d (%s)", r.Method, r.Path, name, rec.Code, want.Status, rec.Body)
+				}
+				if want.Code != "" {
+					var p struct{ Code string }
+					if err := json.Unmarshal(rec.Body.Bytes(), &p); err != nil || p.Code != want.Code {
+						t.Fatalf("%s %s as %s: code %q, want %q (%s)", r.Method, r.Path, name, p.Code, want.Code, rec.Body)
+					}
+				}
+			})
+		}
+	}
+}

package/frontend/src/app/App.test.tsx

@@ -1,5 +1,5 @@
 import { QueryClient } from '@tanstack/react-query';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { http, HttpResponse } from 'msw';
 import { createMemoryRouter } from 'react-router';
 import { axe } from 'vitest-axe';
@@ -9,7 +9,7 @@ import { initI18n } from '@/shared/i18n';
 import { App } from './App';
 import { safeNext } from './access';
 import { PAGES, routes } from './router';
-import { ROUTES, navFor, type Role } from './routes';
+import { ROUTES, type Role } from './routes';
 
 const API = 'http://localhost:3000/api/v1';
 const me = (role: Role | null) =>
@@ -32,31 +32,6 @@ async function open(path: string, role: Role | null, state: 'NOT_OPEN' | 'OPEN'
 /** A concrete URL for a route pattern. */
 const concrete = (p: string) => p.replace(':id', '11111111-1111-4111-8111-111111111111');
 
-describe('deadline banner (3 states)', () => {
-  it.each([
-    ['NOT_OPEN', 'Submissions are not open yet.'],
-    ['OPEN', 'Submissions are open.'],
-    ['CLOSED', 'Submissions are closed.'],
-  ] as const)('%s', async (state, text) => {
-    await open('/login', null, state);
-    const region = await screen.findByRole('region', { name: 'Submission status' });
-    expect(await within(region).findByText(new RegExp(text))).toBeInTheDocument();
-    expect(region).toHaveAttribute('data-state', state);
-  });
-
-  it('shows an error state when the deadline cannot be loaded', async () => {
-    server.use(me(null), http.get(`${API}/deadline`, () => problem(503, 'SERVICE_UNAVAILABLE')));
-    await initI18n('en');
-    render(<App router={createMemoryRouter(routes, { initialEntries: ['/login'] })} client={new QueryClient()} />);
-    expect(await screen.findByText('The submission status could not be loaded.')).toBeInTheDocument();
-  });
-
-  it('is present in AppShell too', async () => {
-    await open('/ideas', 'USER', 'CLOSED');
-    expect(await screen.findByRole('region', { name: 'Submission status' })).toBeInTheDocument();
-  });
-});
-
 describe('route access (Frontend.md §6.3)', () => {
   const nonPublic = ROUTES.filter((r) => r.access !== 'public');
 
@@ -98,19 +73,6 @@ describe('route access (Frontend.md §6.3)', () => {
   });
 });
 
-describe('navigation matches the route table', () => {
-  it.each([
-    ['USER', ['Ideas', 'Join requests']],
-    ['ADMIN', ['Ideas', 'Deadline', 'Statistics']],
-  ] as const)('%s', async (role, labels) => {
-    await open('/ideas', role);
-    const nav = await screen.findByRole('navigation', { name: 'Main navigation' });
-    expect(within(nav).getAllByRole('link').map((a) => a.textContent)).toEqual(labels);
-    expect(within(nav).getAllByRole('link').map((a) => a.getAttribute('href'))).toEqual(navFor(role).map((r) => r.path));
-    expect(!!screen.queryByText('Administrator')).toBe(role === 'ADMIN');
-  });
-});
-
 describe('safeNext (§6.4)', () => {
   it.each([
     ['/ideas?page=2', 'USER', '/ideas?page=2'],
@@ -137,7 +99,6 @@ describe('every route has a page', () => {
     async (path, role) => {
       const { container } = await open(concrete(path), role);
       expect(await screen.findAllByRole('heading', { level: 1 })).toHaveLength(1);
-      await screen.findByRole('region', { name: 'Submission status' });
       expect((await axe(container)).violations).toEqual([]);
     },
   );
@@ -157,7 +118,6 @@ describe('accessibility', () => {
   ] as const)('%s as %s has no axe violations', async (path, role) => {
     const { container } = await open(path, role);
     await screen.findByRole('heading', { level: 1 });
-    await screen.findByRole('region', { name: 'Submission status' });
     expect((await axe(container)).violations).toEqual([]);
   });
 });

package/frontend/src/app/index.css

@@ -12,18 +12,18 @@
   --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);
+  --primary: oklch(0.5203 0.1364 144.2);
+  --primary-foreground: oklch(0.9911 0 0);
   --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);
+  --muted-foreground: oklch(0.4386 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);
+  --ring: oklch(0.6 0.15 144.2);
   --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);

package/frontend/src/app/layouts.tsx

@@ -1,32 +1,5 @@
 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>
-      <select
-        className="rounded-md border bg-background px-2 py-1"
-        value={i18n.language}
-        onChange={(e) => void setLocale(e.target.value as Locale)}
-      >
-        {LOCALES.map((l) => (
-          <option key={l} value={l}>
-            {l === "zh-TW" ? "繁體中文" : "English"}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}
 
 /** One h1 per page; after a route change focus moves to it and the title updates (Frontend.md §8). */
 export function PageHeading({ title }: { title: string }) {
@@ -40,125 +13,24 @@ export function PageHeading({ title }: { title: string }) {
     <h1
       ref={ref}
       tabIndex={-1}
-      className="mb-4 text-2xl font-semibold outline-none"
+      className="mb-6 text-2xl font-semibold outline-none"
     >
       {title}
     </h1>
   );
 }
 
-function Frame({
-  header,
+/** Every page fills the viewport; there is no header, navigation or footer around it. */
+export function Screen({
   children,
+  padded = true,
 }: {
-  header: ReactNode;
   children: ReactNode;
+  padded?: boolean;
 }) {
-  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>
-      <header className="border-b">{header}</header>
-      <DeadlineBanner />
-      <main id="main" className="mx-auto max-w-5xl p-4">
-        {children}
-      </main>
-    </div>
-  );
-}
-
-export function PublicLayout({ children }: { children: ReactNode }) {
-  const { t } = useTranslation();
   return (
-    <Frame
-      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")}
-          </Link>
-          <LanguageSwitch />
-        </div>
-      }
-    >
-      {children}
-    </Frame>
-  );
-}
-
-/**
- * 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();
-  return (
-    <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")}>
-            <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"
-                  >
-                    {t(`nav.${r.navKey!}`)}
-                  </NavLink>
-                </li>
-              ))}
-            </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>
-            )}
-            <span className="text-sm">{me.name}</span>
-            <LanguageSwitch />
-            <SignOutButton />
-          </div>
-        </div>
-      }
-    >
+    <main id="main" className={padded ? "min-h-screen p-6 md:p-10" : "min-h-screen"}>
       {children}
-    </Frame>
+    </main>
   );
 }

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

@@ -9,7 +9,7 @@ export function JoinRequests() {
   return (
     <>
       <PageHeading title={t('nav.joinRequests')} />
-      <section className="mb-8 max-w-md">
+      <section className="mb-6 max-w-md rounded-xl border bg-card p-6">
         <h2 className="mb-2 text-lg font-semibold">{t('pages.joinRequests.apply')}</h2>
         <form onSubmit={(e: FormEvent) => e.preventDefault()}>
           <Field label={t('fields.leaderEmpNo')}>{(p) => <input {...p} name="leaderEmpNo" required />}</Field>
@@ -17,7 +17,7 @@ export function JoinRequests() {
           <Button type="submit">{t('pages.joinRequests.submit')}</Button>
         </form>
       </section>
-      <section>
+      <section className="rounded-xl border bg-card p-6">
         <h2 className="mb-2 text-lg font-semibold">{t('pages.joinRequests.mine')}</h2>
         <p className="text-sm">{t('pages.joinRequests.empty')}</p>
       </section>

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

@@ -9,7 +9,7 @@ export function NotFound() {
     <>
       <PageHeading title={t('notFound.title')} />
       <p className="mb-4">{t('notFound.body')}</p>
-      <Link to="/" className="underline">
+      <Link to="/" className="font-medium text-primary underline underline-offset-4">
         {t('notFound.home')}
       </Link>
     </>

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

@@ -10,7 +10,7 @@ export function AdminDeadline() {
   return (
     <>
       <PageHeading title={t('nav.deadline')} />
-      <form onSubmit={(e: FormEvent) => e.preventDefault()} className="max-w-md">
+      <form onSubmit={(e: FormEvent) => e.preventDefault()} className="max-w-md rounded-xl border bg-card p-6">
         <Field label={t('pages.adminDeadline.label')} hint={t('pages.adminDeadline.hint')}>
           {(p) => <input {...p} name="deadline" type="datetime-local" required />}
         </Field>

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

@@ -29,7 +29,34 @@ function useAuthHeading(title: string) {
   return ref;
 }
 
-/** shadcn `login-02`: two columns, form on the left, brand panel on the right (hidden below lg). */
+/** Brand mark shared by both hero layouts and the form header. */
+function LogoMark({ className = "size-16" }: { className?: string }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={`flex items-center justify-center rounded-2xl bg-primary text-primary-foreground ${className}`}
+    >
+      <Leaf className="size-1/2" />
+    </div>
+  );
+}
+
+function HeroCopy({ title, body }: { title: string; body: string }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="flex flex-col items-center gap-4 text-center"
+    >
+      <LogoMark />
+      <p className="max-w-sm text-3xl font-semibold text-balance whitespace-pre-line text-primary">
+        {title}
+      </p>
+      <p className="max-w-xs text-sm text-balance text-foreground/80">{body}</p>
+    </div>
+  );
+}
+
+/** Design `Login - Employee`: 500px photo panel on the left (lg and up), form centred on the right. */
 export function Login() {
   const { t } = useTranslation();
   const heading = useAuthHeading(t("nav.signIn"));
@@ -44,8 +71,17 @@ export function Login() {
         ? 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">
+    <div className="grid min-h-screen bg-card lg:grid-cols-[500px_1fr]">
+      <div
+        className="relative hidden items-center justify-center bg-cover bg-center p-10 lg:flex"
+        style={{ backgroundImage: "url(/auth-hero-login.jpg)" }}
+      >
+        <HeroCopy
+          title={t("pages.login.panelTitle")}
+          body={t("pages.login.panelBody")}
+        />
+      </div>
+      <div className="flex items-center justify-center p-6 md:p-12">
         {/* 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
@@ -54,32 +90,24 @@ export function Login() {
           onLoggedIn={(me) => replaceIdentity(client, me)}
         />
       </div>
-      <div
-        aria-hidden="true"
-        className="hidden flex-col items-center justify-center gap-3 bg-muted p-10 text-center lg:flex"
-      >
-        <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>
-      </div>
     </div>
   );
 }
 
-/** shadcn `signup-01`: a single centred card. */
+/** Design `Sign Up - Employee`: a full-bleed photo with the form card centred on it. */
 export function Register() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const heading = useAuthHeading(t("nav.register"));
   return (
-    <div className="mx-auto w-full max-w-sm">
-      <Card>
-        <CardHeader>
-          <CardTitle>
+    <div
+      className="flex min-h-screen items-center justify-center bg-cover bg-center px-4 py-10"
+      style={{ backgroundImage: "url(/auth-hero-register.jpg)" }}
+    >
+      <Card className="w-full max-w-md shadow-lg">
+        <CardHeader className="items-center text-center">
+          <LogoMark className="size-14" />
+          <CardTitle className="pt-2 text-2xl">
             <h1 ref={heading} tabIndex={-1} className="outline-none">
               {t("pages.register.title")}
             </h1>
@@ -88,11 +116,11 @@ export function Register() {
         </CardHeader>
         <CardContent>
           <RegisterForm
-            onRegistered={() => {
-              const state: RegisteredState = { notice: "registered" };
-              void navigate("/login", { replace: true, state });
-            }}
-          />
+              onRegistered={() => {
+                const state: RegisteredState = { notice: "registered" };
+                void navigate("/login", { replace: true, state });
+              }}
+            />
         </CardContent>
       </Card>
     </div>

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

@@ -62,12 +62,12 @@ export function IdeaList() {
           </Button>
         )}
       </form>
-      <table className="w-full text-left text-sm">
+      <table className="w-full rounded-xl border bg-card text-left text-sm">
         <caption className="sr-only">{t('nav.ideas')}</caption>
         <thead>
           <tr>
             {(['ideaName', 'category', 'org', 'direction', 'leader', 'members'] as const).map((c) => (
-              <th key={c} scope="col" className="border-b p-2">
+              <th key={c} scope="col" className="border-b p-3 font-medium text-muted-foreground">
                 {t(`fields.${c}`)}
               </th>
             ))}
@@ -86,7 +86,7 @@ export function IdeaCreate() {
   return (
     <>
       <PageHeading title={t('pages.ideaCreate.title')} />
-      <form onSubmit={noSubmit} className="max-w-2xl">
+      <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')}
@@ -98,8 +98,8 @@ export function IdeaCreate() {
 
 function Section({ title, children }: { title: string; children?: ReactNode }) {
   return (
-    <section className="mb-6">
-      <h2 className="mb-2 text-lg font-semibold">{title}</h2>
+    <section className="mb-4 rounded-xl border bg-card p-6">
+      <h2 className="mb-3 text-lg font-semibold">{title}</h2>
       {children}
     </section>
   );
@@ -133,7 +133,7 @@ export function IdeaDetail() {
           <Button variant="destructive">{t('pages.ideaDetail.delete')}</Button>
         </div>
       </Section>
-      <Link to="/ideas" className="underline">
+      <Link to="/ideas" className="font-medium text-primary underline underline-offset-4">
         {t('pages.ideaDetail.back')}
       </Link>
     </>
@@ -145,7 +145,7 @@ export function IdeaEdit() {
   return (
     <>
       <PageHeading title={t('pages.ideaEdit.title')} />
-      <form onSubmit={noSubmit} className="max-w-2xl">
+      <form onSubmit={noSubmit} className="max-w-2xl rounded-xl border bg-card p-6">
         <IdeaFields withSlides={false} />
         <div className="flex gap-2">
           <Button type="submit">{t('common.save')}</Button>

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

@@ -13,12 +13,12 @@ import { routes } from "../router";
 
 const API = "http://localhost:3000/api/v1";
 const USER = { empNo: "089290", name: "Wang", email: "w@x.io", role: "USER" };
-const ADMIN = { empNo: "000001", name: "Root", email: null, role: "ADMIN" };
+type Account = typeof USER | { empNo: string; name: string; email: null; role: "ADMIN" };
 
 /** A visitor on `path`; `account` is who a successful login returns. `GET /auth/me` follows the session. */
-async function open(path: string, account: typeof USER | typeof ADMIN = USER) {
+async function open(path: string, account: Account = USER) {
   clearCsrfToken();
-  let session: typeof USER | typeof ADMIN | null = null;
+  let session: Account | null = null;
   const calls: { login: unknown[]; logoutCsrf: (string | null)[] } = {
     login: [],
     logoutCsrf: [],
@@ -87,15 +87,6 @@ describe("Login page", () => {
     await signIn(user, " 089290 ", "secret");
     await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
     expect(calls.login).toEqual([{ empNo: "089290", password: "secret" }]);
-    expect(await screen.findByText("Wang")).toBeInTheDocument();
-    expect(screen.queryByText("Administrator")).not.toBeInTheDocument();
-  });
-
-  it("signs an Admin in, to the same page, with the Administrator badge", async () => {
-    const { router, user } = await open("/login", ADMIN);
-    await signIn(user, "000001");
-    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
-    expect(await screen.findByText("Administrator")).toBeInTheDocument();
   });
 
   it("follows a role-allowed next", async () => {
@@ -174,45 +165,3 @@ describe("Login page", () => {
     ).toBeInTheDocument();
   });
 });
-
-describe("Sign out", () => {
-  it("ends the session with the session-bound CSRF token and returns to a clean /login", async () => {
-    const { router, calls, user } = await open("/login");
-    await signIn(user);
-    await user.click(await screen.findByRole("button", { name: "Sign out" }));
-    await screen.findByRole("heading", {
-      level: 1,
-      name: "Sign in to your account",
-    });
-    expect(calls.logoutCsrf).toEqual(["tok-session"]);
-    expect(router.state.location.pathname).toBe("/login");
-    expect(router.state.location.search).toBe("");
-    expect(
-      screen.queryByText("Your session has ended. Please sign in again."),
-    ).not.toBeInTheDocument();
-    expect(screen.queryByText("Wang")).not.toBeInTheDocument();
-  });
-
-  it("a second login after logout uses a fresh CSRF token", async () => {
-    const { router, user } = await open("/login");
-    await signIn(user);
-    await user.click(await screen.findByRole("button", { name: "Sign out" }));
-    await screen.findByRole("heading", {
-      level: 1,
-      name: "Sign in to your account",
-    });
-    await signIn(user);
-    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
-  });
-
-  it("tells the user when sign-out fails and keeps them signed in", async () => {
-    const { router, user } = await open("/login");
-    await signIn(user);
-    server.use(
-      http.post(`${API}/auth/logout`, () => problem(500, "INTERNAL_ERROR")),
-    );
-    await user.click(await screen.findByRole("button", { name: "Sign out" }));
-    expect(await screen.findByRole("alert")).toBeInTheDocument();
-    expect(router.state.location.pathname).toBe("/ideas");
-  });
-});

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

@@ -71,7 +71,7 @@ describe('Register page: markup', () => {
 
   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' : /.+/ });
+    await screen.findByRole('heading', { level: 1 });
     expect((await axe(container)).violations).toEqual([]);
     await user.click(screen.getByRole('button', { name: locale === 'en' ? 'Create account' : '建立帳號' }));
     expect(await screen.findByRole('alert')).toBeInTheDocument();

package/frontend/src/app/router.tsx

@@ -7,7 +7,7 @@ import {
   type RouteObject,
 } from "react-router";
 import { decide, safeNext } from "./access";
-import { AppShell, PublicLayout } from "./layouts";
+import { Screen } from "./layouts";
 import { NotFound } from "./pages/NotFound";
 import { Login, Register } from "./pages/auth";
 import { IdeaCreate, IdeaDetail, IdeaEdit, IdeaList } from "./pages/ideas";
@@ -94,11 +94,7 @@ function Gate({ route }: { route?: (typeof ROUTES)[number] }) {
   ) : (
     <NotFound />
   );
-  return me ? (
-    <AppShell me={me}>{page}</AppShell>
-  ) : (
-    <PublicLayout>{page}</PublicLayout>
-  );
+  return <Screen padded={route?.access !== "public"}>{page}</Screen>;
 }
 
 function RootRedirect() {

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type FormEvent, type Ref } from "react";
+import { Leaf } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { ApiError } from "@/shared/api";
@@ -65,11 +66,17 @@ export function LoginForm({
 
   return (
     <form
-      className="flex w-full max-w-xs flex-col gap-6"
+      className="flex w-full max-w-sm flex-col gap-6"
       onSubmit={(e) => void onSubmit(e)}
     >
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
+          <div
+            aria-hidden="true"
+            className="mb-2 flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground"
+          >
+            <Leaf className="size-7" />
+          </div>
           <h1
             ref={heading}
             tabIndex={-1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnnyboy11234/esg-idea-contest",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "ESG Idea Contest registration system: Go backend, React frontend and design documents (source distribution).",
   "license": "MIT",
   "author": "Brian Huang",

package/testdata/permission-matrix.json

@@ -0,0 +1,109 @@
+{
+  "rows": [
+    {
+      "id": "csrf",
+      "operation": "csrf",
+      "method": "GET",
+      "path": "/api/v1/auth/csrf",
+      "expect": {
+        "visitor": { "status": 200 },
+        "user": { "status": 200 },
+        "admin": { "status": 200 }
+      }
+    },
+    {
+      "id": "deadline",
+      "operation": "deadline",
+      "method": "GET",
+      "path": "/api/v1/deadline",
+      "expect": {
+        "visitor": { "status": 200 },
+        "user": { "status": 200 },
+        "admin": { "status": 200 }
+      }
+    },
+    {
+      "id": "register",
+      "operation": "register",
+      "method": "POST",
+      "path": "/api/v1/auth/register",
+      "body": { "empNo": "${newEmpNo}", "name": "Matrix Person", "email": "${newEmpNo}@example.com", "password": "${password}" },
+      "expect": {
+        "visitor": { "status": 201 },
+        "user": { "status": 201 },
+        "admin": { "status": 201 }
+      }
+    },
+    {
+      "id": "login",
+      "operation": "login",
+      "method": "POST",
+      "path": "/api/v1/auth/login",
+      "body": { "empNo": "${actorEmpNo}", "password": "${password}" },
+      "expect": {
+        "visitor": { "status": 401, "code": "INVALID_CREDENTIALS" },
+        "user": { "status": 200 },
+        "admin": { "status": 200 }
+      }
+    },
+    {
+      "id": "logout",
+      "operation": "logout",
+      "method": "POST",
+      "path": "/api/v1/auth/logout",
+      "expect": {
+        "visitor": { "status": 204 },
+        "user": { "status": 204 },
+        "admin": { "status": 204 }
+      }
+    },
+    {
+      "id": "me",
+      "operation": "me",
+      "method": "GET",
+      "path": "/api/v1/auth/me",
+      "expect": {
+        "visitor": { "status": 401, "code": "UNAUTHENTICATED" },
+        "user": { "status": 200 },
+        "admin": { "status": 200 }
+      }
+    },
+    {
+      "id": "order-logout-no-csrf",
+      "operation": "check order: a write without a CSRF token",
+      "method": "POST",
+      "path": "/api/v1/auth/logout",
+      "csrf": "none",
+      "expect": {
+        "visitor": { "status": 403, "code": "CSRF_INVALID" },
+        "user": { "status": 403, "code": "CSRF_INVALID" },
+        "admin": { "status": 403, "code": "CSRF_INVALID" }
+      }
+    },
+    {
+      "id": "order-unknown-write-no-csrf",
+      "operation": "check order: 401 before CSRF on a path outside the contract",
+      "method": "POST",
+      "path": "/api/v1/matrix-unknown",
+      "csrf": "none",
+      "outsideSpec": true,
+      "expect": {
+        "visitor": { "status": 401, "code": "UNAUTHENTICATED" },
+        "user": { "status": 403, "code": "CSRF_INVALID" },
+        "admin": { "status": 403, "code": "CSRF_INVALID" }
+      }
+    },
+    {
+      "id": "order-unknown-write-csrf",
+      "operation": "check order: CSRF before 404 on a path outside the contract",
+      "method": "POST",
+      "path": "/api/v1/matrix-unknown",
+      "outsideSpec": true,
+      "expect": {
+        "visitor": { "status": 401, "code": "UNAUTHENTICATED" },
+        "user": { "status": 404, "code": "NOT_FOUND" },
+        "admin": { "status": 404, "code": "NOT_FOUND" }
+      }
+    }
+  ]
+}

package/testdata/schema/permission-matrix.schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "permission-matrix.schema.json",
+  "title": "Permission matrix",
+  "description": "PRD §7 as data: one row per operation (or check-order case), one expected cell per actor. Read by backend/test/matrix. Later PRs add their rows and actors.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["rows"],
+  "properties": {
+    "rows": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["id", "operation", "method", "path", "expect"],
+        "properties": {
+          "id": { "type": "string", "pattern": "^[a-z0-9]+(-[a-z0-9]+)*$" },
+          "operation": { "type": "string", "minLength": 1 },
+          "method": { "enum": ["GET", "POST", "PUT", "PATCH", "DELETE"] },
+          "path": { "type": "string", "pattern": "^/api/v1/" },
+          "body": { "type": "object" },
+          "csrf": { "enum": ["valid", "none"], "default": "valid" },
+          "outsideSpec": { "type": "boolean", "default": false },
+          "expect": {
+            "type": "object",
+            "additionalProperties": false,
+            "minProperties": 1,
+            "properties": {
+              "visitor": { "$ref": "#/$defs/cell" },
+              "user": { "$ref": "#/$defs/cell" },
+              "member": { "$ref": "#/$defs/cell" },
+              "leader": { "$ref": "#/$defs/cell" },
+              "admin": { "$ref": "#/$defs/cell" }
+            }
+          }
+        }
+      }
+    }
+  },
+  "$defs": {
+    "cell": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["status"],
+      "properties": {
+        "status": { "type": "integer", "minimum": 200, "maximum": 599 },
+        "code": { "type": "string", "pattern": "^[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$" }
+      }
+    }
+  }
+}