@johnnyboy11234/esg-idea-contest 0.2.4 → 0.3.1

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/IdleWarning.test.tsx

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

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

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

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

@@ -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}