feat: add organization settings and invitations

modules/settings/components/OrganizationDetailClient.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { Copy, LinkIcon, Save, Send } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import type { ApiResult } from "@/modules/core/server/api";
+import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
+
+type OrganizationDetailClientProps = {
+  invitations: OrganizationInvitation[];
+  organization: Organization;
+  roles: RoleDefinition[];
+};
+
+function getInviteHref(token: string): string {
+  return `/register?invite=${encodeURIComponent(token)}`;
+}
+
+export function OrganizationDetailClient({
+  invitations,
+  organization,
+  roles,
+}: OrganizationDetailClientProps): React.ReactElement {
+  const router = useRouter();
+  const [settingsMessage, setSettingsMessage] = useState("");
+  const [inviteMessage, setInviteMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const organizationRoles = roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled);
+  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";
+
+  async function handleSettingsSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setSettingsMessage("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch(`/api/organizations/${organization.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        registrationEnabled: formData.get("registrationEnabled") === "on",
+        oidcEnabled: formData.get("oidcEnabled") === "on",
+        oidcIssuerUrl: String(formData.get("oidcIssuerUrl") ?? ""),
+        oidcClientId: String(formData.get("oidcClientId") ?? ""),
+        oidcClientSecret: String(formData.get("oidcClientSecret") ?? ""),
+        oidcScopes: String(formData.get("oidcScopes") ?? ""),
+        oidcRedirectUri: String(formData.get("oidcRedirectUri") ?? ""),
+        oidcAutoProvision: formData.get("oidcAutoProvision") === "on",
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setSettingsMessage(result.reason);
+      return;
+    }
+
+    setSettingsMessage(result.reason);
+    router.refresh();
+  }
+
+  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setInviteMessage("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        email: String(formData.get("email") ?? ""),
+        roleId: String(formData.get("roleId") ?? ""),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setInviteMessage(result.reason);
+      return;
+    }
+
+    setInviteMessage(`${result.reason}：${getInviteHref(result.invitation.token)}`);
+    event.currentTarget.reset();
+    router.refresh();
+  }
+
+  return (
+    <div className="grid gap-5 xl:grid-cols-[0.95fr_1.05fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle>机构访问配置</CardTitle>
+          <CardDescription>控制公开注册、OIDC 登录入口和自动开户策略。</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="grid gap-4" onSubmit={handleSettingsSubmit}>
+            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
+              <span>
+                <span className="block font-medium">开放公开注册</span>
+                <span className="block text-xs text-muted-foreground">关闭后，注册页不再展示该机构；邀请链接仍可使用。</span>
+              </span>
+              <input defaultChecked={organization.registrationEnabled} name="registrationEnabled" type="checkbox" />
+            </label>
+
+            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
+              <span>
+                <span className="block font-medium">启用 OIDC 登录</span>
+                <span className="block text-xs text-muted-foreground">保存标准 OIDC 配置，后续登录入口按该开关展示。</span>
+              </span>
+              <input defaultChecked={organization.oidcEnabled} name="oidcEnabled" type="checkbox" />
+            </label>
+
+            <div className="grid gap-3 md:grid-cols-2">
+              <label className="grid gap-2 text-sm">
+                <span className="font-medium">Issuer URL</span>
+                <Input defaultValue={organization.oidcIssuerUrl} name="oidcIssuerUrl" placeholder="https://idp.example.com" />
+              </label>
+              <label className="grid gap-2 text-sm">
+                <span className="font-medium">Client ID</span>
+                <Input defaultValue={organization.oidcClientId} name="oidcClientId" />
+              </label>
+            </div>
+
+            <label className="grid gap-2 text-sm">
+              <span className="font-medium">Client Secret</span>
+              <Input
+                name="oidcClientSecret"
+                placeholder={organization.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
+                type="password"
+              />
+            </label>
+
+            <div className="grid gap-3 md:grid-cols-2">
+              <label className="grid gap-2 text-sm">
+                <span className="font-medium">Scopes</span>
+                <Input defaultValue={organization.oidcScopes} name="oidcScopes" placeholder="openid profile email" />
+              </label>
+              <label className="grid gap-2 text-sm">
+                <span className="font-medium">Redirect URI</span>
+                <Input defaultValue={organization.oidcRedirectUri} name="oidcRedirectUri" placeholder="/api/auth/oidc/callback" />
+              </label>
+            </div>
+
+            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
+              <span>
+                <span className="block font-medium">OIDC 自动开户</span>
+                <span className="block text-xs text-muted-foreground">首次 OIDC 登录时自动创建账号并进入本机构。</span>
+              </span>
+              <input defaultChecked={organization.oidcAutoProvision} name="oidcAutoProvision" type="checkbox" />
+            </label>
+
+            {settingsMessage ? (
+              <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+                {settingsMessage}
+              </p>
+            ) : null}
+
+            <Button className="w-fit" disabled={isPending} type="submit">
+              <Save className="size-4" aria-hidden="true" />
+              保存配置
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>机构邀请</CardTitle>
+          <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleInviteSubmit}>
+            <Input name="email" placeholder="邮箱，可留空" type="email" />
+            <select
+              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              defaultValue={defaultRoleId}
+              name="roleId"
+              required
+            >
+              {organizationRoles.map((role) => (
+                <option key={role.id} value={role.id}>
+                  {role.label}
+                </option>
+              ))}
+            </select>
+            <Button disabled={isPending || !defaultRoleId} type="submit">
+              <Send className="size-4" aria-hidden="true" />
+              生成邀请
+            </Button>
+          </form>
+          {inviteMessage ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {inviteMessage}
+            </p>
+          ) : null}
+
+          <div className="overflow-x-auto rounded-md border">
+            <table className="w-full min-w-[720px] text-sm">
+              <thead className="bg-secondary text-left text-xs text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 font-medium">对象</th>
+                  <th className="px-4 py-3 font-medium">角色</th>
+                  <th className="px-4 py-3 font-medium">状态</th>
+                  <th className="px-4 py-3 font-medium">有效期</th>
+                  <th className="px-4 py-3 text-right font-medium">链接</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y bg-card">
+                {invitations.map((invitation) => (
+                  <tr className="hover:bg-secondary/45" key={invitation.id}>
+                    <td className="px-4 py-3">{invitation.email || "通用邀请"}</td>
+                    <td className="px-4 py-3">{invitation.roleLabel}</td>
+                    <td className="px-4 py-3">
+                      <Badge variant={invitation.status === "active" ? "success" : "secondary"}>{invitation.status}</Badge>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {new Date(invitation.expiresAt).toLocaleString("zh-CN")}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <Button
+                        onClick={() => void navigator.clipboard.writeText(getInviteHref(invitation.token))}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                      >
+                        <Copy className="size-4" aria-hidden="true" />
+                        复制
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+                {invitations.length === 0 ? (
+                  <tr>
+                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
+                      暂无邀请
+                    </td>
+                  </tr>
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <LinkIcon className="size-4" aria-hidden="true" />
+            邀请链接使用 `/register?invite=...`，注册后自动加入机构。
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}