254 lines
11 KiB
TypeScript
254 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import { FormEvent, useState } from "react";
|
||
import { Building2, Globe2, KeyRound, Save, ShieldCheck, UserPlus } from "lucide-react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button, LinkButton } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Input } from "@/components/ui/input";
|
||
import type { ApiResult } from "@/modules/core/server/api";
|
||
import type { SystemSettings } from "@/modules/core/types";
|
||
|
||
type GlobalSettingsClientProps = {
|
||
organizationSettingsHref: string;
|
||
settings: SystemSettings;
|
||
};
|
||
|
||
type SettingsTab = "registration" | "invitation" | "oidc";
|
||
|
||
const tabs: Array<{ label: string; value: SettingsTab }> = [
|
||
{ label: "注册入口", value: "registration" },
|
||
{ label: "邀请注册", value: "invitation" },
|
||
{ label: "OIDC 默认配置", value: "oidc" },
|
||
];
|
||
|
||
export function GlobalSettingsClient({
|
||
organizationSettingsHref,
|
||
settings,
|
||
}: GlobalSettingsClientProps): React.ReactElement {
|
||
const router = useRouter();
|
||
const [activeTab, setActiveTab] = useState<SettingsTab>("registration");
|
||
const [registrationEnabled, setRegistrationEnabled] = useState(settings.registrationEnabled);
|
||
const [oidcEnabled, setOidcEnabled] = useState(settings.oidcEnabled);
|
||
const [oidcAutoProvision, setOidcAutoProvision] = useState(settings.oidcAutoProvision);
|
||
const [message, setMessage] = useState("");
|
||
const [isPending, setIsPending] = useState(false);
|
||
|
||
async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||
event.preventDefault();
|
||
setMessage("");
|
||
setIsPending(true);
|
||
|
||
const formData = new FormData(event.currentTarget);
|
||
const response = await fetch("/api/settings/global", {
|
||
method: "PATCH",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify({
|
||
registrationEnabled,
|
||
oidcEnabled,
|
||
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") ?? ""),
|
||
oidcAvatarClaim: String(formData.get("oidcAvatarClaim") ?? ""),
|
||
oidcAutoProvision,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as ApiResult<{ settings: SystemSettings }>;
|
||
setIsPending(false);
|
||
|
||
if (!result.success) {
|
||
setMessage(result.reason);
|
||
return;
|
||
}
|
||
|
||
setMessage(result.reason);
|
||
router.refresh();
|
||
}
|
||
|
||
return (
|
||
<form className="grid gap-4" onSubmit={handleSubmit}>
|
||
<div className="flex flex-wrap gap-2" role="tablist" aria-label="全局配置">
|
||
{tabs.map((tab) => (
|
||
<Button
|
||
aria-selected={activeTab === tab.value}
|
||
key={tab.value}
|
||
onClick={() => setActiveTab(tab.value)}
|
||
role="tab"
|
||
type="button"
|
||
variant={activeTab === tab.value ? "default" : "outline"}
|
||
>
|
||
{tab.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
|
||
<Card>
|
||
<div hidden={activeTab !== "registration"} role="tabpanel">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-2">
|
||
<Globe2 className="size-5 text-primary" aria-hidden="true" />
|
||
<CardTitle>注册与入口</CardTitle>
|
||
</div>
|
||
<CardDescription>控制全站公开注册能力和 OIDC 登录入口总开关。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4">
|
||
<div className="rounded-md border p-3 text-sm">
|
||
<Checkbox
|
||
checked={registrationEnabled}
|
||
label={
|
||
<span className="min-w-0">
|
||
<span className="block font-medium">开放公开注册</span>
|
||
<span className="block text-xs text-muted-foreground">关闭后普通注册不可用；邀请链接仍可使用。</span>
|
||
</span>
|
||
}
|
||
name="registrationEnabled"
|
||
onCheckedChange={setRegistrationEnabled}
|
||
/>
|
||
</div>
|
||
|
||
<div className="rounded-md border p-3 text-sm">
|
||
<Checkbox
|
||
checked={oidcEnabled}
|
||
label={
|
||
<span className="min-w-0">
|
||
<span className="block font-medium">启用 OIDC 登录</span>
|
||
<span className="block text-xs text-muted-foreground">作为平台级总开关，机构级 OIDC 配置仍可单独管理。</span>
|
||
</span>
|
||
}
|
||
name="oidcEnabled"
|
||
onCheckedChange={setOidcEnabled}
|
||
/>
|
||
</div>
|
||
|
||
<div className="rounded-md border p-3 text-sm">
|
||
<Checkbox
|
||
checked={oidcAutoProvision}
|
||
label={
|
||
<span className="min-w-0">
|
||
<span className="block font-medium">OIDC 自动开户</span>
|
||
<span className="block text-xs text-muted-foreground">首次 OIDC 登录时按声明信息创建账号，默认进入等待分配。</span>
|
||
</span>
|
||
}
|
||
name="oidcAutoProvision"
|
||
onCheckedChange={setOidcAutoProvision}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</div>
|
||
<div hidden={activeTab !== "invitation"} role="tabpanel">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-2">
|
||
<KeyRound className="size-5 text-primary" aria-hidden="true" />
|
||
<CardTitle>邀请码与加入方式</CardTitle>
|
||
</div>
|
||
<CardDescription>集中说明公开注册、机构邀请和加入申请的关系，邀请码在机构管理中生成。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4">
|
||
<div className="grid gap-3 lg:grid-cols-3">
|
||
<section className="rounded-md border p-3">
|
||
<div className="flex items-center gap-2">
|
||
<Globe2 className="size-4 text-primary" aria-hidden="true" />
|
||
<h3 className="text-sm font-semibold">公开注册</h3>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
{registrationEnabled
|
||
? "访客可以从注册页创建账号，并选择申请加入开放注册的机构。"
|
||
: "普通注册入口关闭；用户需要通过邀请链接或管理员创建账号。"}
|
||
</p>
|
||
</section>
|
||
<section className="rounded-md border p-3">
|
||
<div className="flex items-center gap-2">
|
||
<UserPlus className="size-4 text-primary" aria-hidden="true" />
|
||
<h3 className="text-sm font-semibold">机构邀请</h3>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
邀请链接格式为 `/register?invite=...`，可限定邮箱、角色、有效期和使用次数，适合定向开通账号。
|
||
</p>
|
||
</section>
|
||
<section className="rounded-md border p-3">
|
||
<div className="flex items-center gap-2">
|
||
<Building2 className="size-4 text-primary" aria-hidden="true" />
|
||
<h3 className="text-sm font-semibold">加入审批</h3>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
未持邀请码的用户申请加入机构后，需要管理员在用户管理中审批并分配角色。
|
||
</p>
|
||
</section>
|
||
</div>
|
||
<div className="flex flex-col gap-3 rounded-md border bg-secondary/25 p-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<div className="min-w-0 text-sm">
|
||
<p className="font-medium">前往机构管理生成邀请码</p>
|
||
<p className="mt-1 text-muted-foreground">选择机构行内的“邀请”，生成有有效期和使用次数限制的注册链接。</p>
|
||
</div>
|
||
<LinkButton href={organizationSettingsHref} variant="outline">
|
||
<UserPlus className="size-4" aria-hidden="true" />
|
||
管理机构邀请
|
||
</LinkButton>
|
||
</div>
|
||
</CardContent>
|
||
</div>
|
||
<div hidden={activeTab !== "oidc"} role="tabpanel">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-2">
|
||
<ShieldCheck className="size-5 text-primary" aria-hidden="true" />
|
||
<CardTitle>OIDC 默认配置</CardTitle>
|
||
</div>
|
||
<CardDescription>保存标准 OIDC issuer、client、scope 和头像 claim。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4">
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
<Input
|
||
defaultValue={settings.oidcIssuerUrl}
|
||
label="Issuer URL"
|
||
name="oidcIssuerUrl"
|
||
placeholder="https://idp.example.com"
|
||
/>
|
||
<Input defaultValue={settings.oidcClientId} label="Client ID" name="oidcClientId" />
|
||
</div>
|
||
|
||
<Input
|
||
label="Client Secret"
|
||
name="oidcClientSecret"
|
||
placeholder={settings.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
|
||
type="password"
|
||
/>
|
||
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
<Input defaultValue={settings.oidcScopes} label="Scopes" name="oidcScopes" placeholder="openid profile email" />
|
||
<Input
|
||
defaultValue={settings.oidcRedirectUri}
|
||
label="Redirect URI"
|
||
name="oidcRedirectUri"
|
||
placeholder="/api/auth/oidc/callback"
|
||
/>
|
||
</div>
|
||
|
||
<Input defaultValue={settings.oidcAvatarClaim} label="Avatar Claim" name="oidcAvatarClaim" placeholder="picture" />
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
|
||
{message ? (
|
||
<p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
|
||
{message}
|
||
</p>
|
||
) : null}
|
||
|
||
<div className="flex items-center justify-between gap-3">
|
||
<Badge variant={oidcEnabled ? "success" : "secondary"}>
|
||
{oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
|
||
</Badge>
|
||
<Button disabled={isPending} type="submit">
|
||
<Save className="size-4" aria-hidden="true" />
|
||
保存配置
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
);
|
||
}
|