218 lines
9.6 KiB
TypeScript
218 lines
9.6 KiB
TypeScript
"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";
|
||
import { getInviteHref, OrganizationInviteDialog } from "@/modules/settings/components/OrganizationInviteDialog";
|
||
|
||
type OrganizationDetailClientProps = {
|
||
invitations: OrganizationInvitation[];
|
||
organization: Organization;
|
||
roles: RoleDefinition[];
|
||
};
|
||
|
||
export function OrganizationDetailClient({
|
||
invitations,
|
||
organization,
|
||
roles,
|
||
}: OrganizationDetailClientProps): React.ReactElement {
|
||
const router = useRouter();
|
||
const [isInviteOpen, setIsInviteOpen] = useState(false);
|
||
const [settingsMessage, setSettingsMessage] = useState("");
|
||
const [isPending, setIsPending] = useState(false);
|
||
|
||
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") ?? ""),
|
||
oidcAvatarClaim: String(formData.get("oidcAvatarClaim") ?? ""),
|
||
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();
|
||
}
|
||
|
||
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="grid gap-2 text-sm">
|
||
<span className="font-medium">Avatar Claim</span>
|
||
<Input defaultValue={organization.oidcAvatarClaim} name="oidcAvatarClaim" placeholder="picture" />
|
||
</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.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 className="gap-4 md:flex-row md:items-start md:justify-between">
|
||
<div>
|
||
<CardTitle>机构邀请</CardTitle>
|
||
<CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
|
||
</div>
|
||
<Button onClick={() => setIsInviteOpen(true)} type="button">
|
||
<Send className="size-4" aria-hidden="true" />
|
||
发起邀请
|
||
</Button>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4">
|
||
<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>
|
||
<OrganizationInviteDialog
|
||
onClose={() => setIsInviteOpen(false)}
|
||
open={isInviteOpen}
|
||
organization={organization}
|
||
roles={roles}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|