feat: wire auth and CRUD UI to APIs

modules/auth/components/AuthGate.tsx

@@ -0,0 +1,7 @@
+type AuthGateProps = {
+  children: React.ReactNode;
+};
+
+export function AuthGate({ children }: AuthGateProps): React.ReactElement {
+  return <>{children}</>;
+}

modules/auth/components/AuthPanel.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { FormEvent, Suspense, useEffect, useMemo, useState } from "react";
+import { ArrowRight, Building2, ShieldCheck, Stethoscope } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import type { ApiResult } from "@/modules/core/server/api";
+
+type AuthMode = "login" | "register" | "setup";
+
+type AuthPanelProps = {
+  mode: AuthMode;
+};
+
+const modeCopy: Record<AuthMode, { title: string; badge: string; submit: string }> = {
+  login: { title: "登录", badge: "Welcome back", submit: "进入系统" },
+  register: { title: "注册账号", badge: "Staff account", submit: "创建账号" },
+  setup: { title: "初始化机构", badge: "First run", submit: "完成初始化" },
+};
+
+function AuthPanelContent({ mode }: AuthPanelProps): React.ReactElement {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo") ?? "/app/dashboard";
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const [hasAccounts, setHasAccounts] = useState<boolean | null>(null);
+
+  const copy = modeCopy[mode];
+  const isSetup = mode === "setup";
+  const isLogin = mode === "login";
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadState(): Promise<void> {
+      const [bootstrapResponse, sessionResponse] = await Promise.all([
+        fetch("/api/auth/bootstrap"),
+        fetch("/api/auth/session"),
+      ]);
+      const bootstrap = (await bootstrapResponse.json()) as ApiResult<{ setupRequired: boolean }>;
+      const session = (await sessionResponse.json()) as ApiResult<{ account: unknown | null }>;
+
+      if (!isMounted || !bootstrap.success || !session.success) {
+        return;
+      }
+
+      const initialized = !bootstrap.setupRequired;
+      setHasAccounts(initialized);
+
+      if (mode !== "setup" && !initialized) {
+        router.replace("/setup");
+        return;
+      }
+
+      if (mode === "setup" && initialized) {
+        router.replace("/login");
+        return;
+      }
+
+      if (session.account) {
+        router.replace("/app/dashboard");
+      }
+    }
+
+    void loadState();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [mode, router]);
+
+  const secondaryAction = useMemo(() => {
+    if (isSetup) {
+      return null;
+    }
+
+    if (isLogin) {
+      return { href: "/register", label: "注册" };
+    }
+
+    return { href: "/login", label: "登录" };
+  }, [isLogin, isSetup]);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setIsPending(true);
+
+    const formData = new FormData(event.currentTarget);
+    const name = String(formData.get("name") ?? "");
+    const email = String(formData.get("email") ?? "");
+    const password = String(formData.get("password") ?? "");
+    const organization = String(formData.get("organization") ?? "");
+
+    const endpoint = isLogin ? "/api/auth/login" : isSetup ? "/api/auth/setup" : "/api/auth/register";
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        name,
+        email,
+        password,
+        organization,
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ account: unknown }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    router.refresh();
+    router.replace(isLogin ? redirectTo : "/app/dashboard");
+  }
+
+  if (hasAccounts === null) {
+    return <div className="h-96" />;
+  }
+
+  return (
+    <main className="grid min-h-svh bg-background lg:grid-cols-[0.95fr_1.05fr]">
+      <section className="hidden border-r bg-primary text-primary-foreground lg:flex lg:flex-col lg:justify-between lg:p-10">
+        <Link href="/login" className="inline-flex items-center gap-3 text-sm font-medium">
+          <span className="inline-flex size-10 items-center justify-center rounded-md bg-white/12">
+            <Stethoscope className="size-5" aria-hidden="true" />
+          </span>
+          TeaTea 康护
+        </Link>
+
+        <div className="max-w-md">
+          <Badge className="bg-white/12 text-primary-foreground">{copy.badge}</Badge>
+          <h1 className="mt-5 text-5xl font-semibold tracking-normal">{copy.title}</h1>
+          <p className="mt-5 text-sm leading-6 text-primary-foreground/72">
+            简洁、稳定、面向机构照护。
+          </p>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3 text-xs text-primary-foreground/72">
+          <span>档案</span>
+          <span>护理</span>
+          <span>预警</span>
+        </div>
+      </section>
+
+      <section className="flex min-h-svh items-center justify-center px-5 py-10">
+        <div className="w-full max-w-sm">
+          <div className="mb-8 flex items-center justify-between lg:hidden">
+            <Link href="/login" className="inline-flex items-center gap-2 text-sm font-semibold">
+              <Stethoscope className="size-5 text-primary" aria-hidden="true" />
+              TeaTea 康护
+            </Link>
+            <Badge variant="secondary">{copy.badge}</Badge>
+          </div>
+
+          <Card className="border bg-white/82 p-6 shadow-none backdrop-blur">
+            <div className="mb-6">
+              <div className="inline-flex size-11 items-center justify-center rounded-md bg-secondary text-primary">
+                {isSetup ? (
+                  <Building2 className="size-5" aria-hidden="true" />
+                ) : (
+                  <ShieldCheck className="size-5" aria-hidden="true" />
+                )}
+              </div>
+              <h2 className="mt-5 text-2xl font-semibold">{copy.title}</h2>
+            </div>
+
+            <form className="space-y-4" onSubmit={handleSubmit}>
+              {isSetup ? (
+                <label className="block space-y-2">
+                  <span className="text-sm font-medium">机构名称</span>
+                  <Input name="organization" autoComplete="organization" required />
+                </label>
+              ) : null}
+
+              {!isLogin ? (
+                <label className="block space-y-2">
+                  <span className="text-sm font-medium">姓名</span>
+                  <Input name="name" autoComplete="name" required />
+                </label>
+              ) : null}
+
+              <label className="block space-y-2">
+                <span className="text-sm font-medium">邮箱</span>
+                <Input name="email" type="email" autoComplete="email" required />
+              </label>
+
+              <label className="block space-y-2">
+                <span className="text-sm font-medium">密码</span>
+                <Input name="password" type="password" autoComplete="current-password" required />
+              </label>
+
+              {message ? (
+                <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive" role="alert">
+                  {message}
+                </p>
+              ) : null}
+
+              <Button className="w-full" type="submit" disabled={isPending}>
+                {copy.submit}
+                <ArrowRight className="size-4" aria-hidden="true" />
+              </Button>
+            </form>
+
+            {secondaryAction ? (
+              <div className="mt-5 text-center text-sm text-muted-foreground">
+                <Link className="font-medium text-primary hover:underline" href={secondaryAction.href}>
+                  {secondaryAction.label}
+                </Link>
+              </div>
+            ) : null}
+          </Card>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export function AuthPanel({ mode }: AuthPanelProps): React.ReactElement {
+  return (
+    <Suspense fallback={<main className="min-h-svh bg-background" />}>
+      <AuthPanelContent mode={mode} />
+    </Suspense>
+  );
+}

modules/auth/components/SignOutButton.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+export function SignOutButton(): React.ReactElement {
+  const router = useRouter();
+  const [isPending, setIsPending] = useState(false);
+
+  async function handleSignOut(): Promise<void> {
+    setIsPending(true);
+    await fetch("/api/auth/logout", { method: "POST" });
+    router.refresh();
+    router.replace("/login");
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      onClick={handleSignOut}
+      disabled={isPending}
+      aria-label="退出登录"
+    >
+      <LogOut className="size-4" aria-hidden="true" />
+      <span className="hidden sm:inline">退出</span>
+    </Button>
+  );
+}