173 lines
11 KiB
TypeScript
173 lines
11 KiB
TypeScript
import { useEffect, useState, type ReactNode } from "react";
|
||
import { App, Button, Form, Input, Select, Switch } from "antd";
|
||
import { ChevronDown, KeyRound, LockKeyhole, ShieldCheck, UserPlus } from "lucide-react";
|
||
|
||
import {
|
||
getAdminLinuxDOSetting,
|
||
getAdminRegistrationSetting,
|
||
updateAdminLinuxDOSetting,
|
||
updateAdminRegistrationSetting,
|
||
type LinuxDOSetting,
|
||
type RegistrationSetting,
|
||
} from "@/services/api/wallet";
|
||
import { configuredSecretText, SettingsSectionCard } from "./admin-ui";
|
||
|
||
type LinuxDOFormValues = Omit<LinuxDOSetting, "hasClientSecret" | "updatedAt">;
|
||
|
||
export default function AccessSettingsPanel() {
|
||
const { message } = App.useApp();
|
||
const [linuxdo, setLinuxdo] = useState<LinuxDOSetting | null>(null);
|
||
const [registration, setRegistration] = useState<RegistrationSetting | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [savingLinuxDO, setSavingLinuxDO] = useState(false);
|
||
const [savingRegistration, setSavingRegistration] = useState(false);
|
||
const [form] = Form.useForm<LinuxDOFormValues>();
|
||
|
||
useEffect(() => {
|
||
void Promise.all([getAdminLinuxDOSetting(), getAdminRegistrationSetting()])
|
||
.then(([linuxdoData, registrationData]) => {
|
||
setLinuxdo(linuxdoData.setting);
|
||
setRegistration(registrationData.setting);
|
||
form.setFieldsValue({ ...linuxdoData.setting, clientSecret: "" });
|
||
})
|
||
.catch((error) => message.error(error instanceof Error ? error.message : "读取登录配置失败"))
|
||
.finally(() => setLoading(false));
|
||
}, [form, message]);
|
||
|
||
const toggleRegistration = async (enabled: boolean) => {
|
||
setSavingRegistration(true);
|
||
try {
|
||
const data = await updateAdminRegistrationSetting(enabled);
|
||
setRegistration(data.setting);
|
||
message.success(enabled ? "用户注册已开启" : "用户注册已关闭");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "更新注册设置失败");
|
||
} finally {
|
||
setSavingRegistration(false);
|
||
}
|
||
};
|
||
|
||
const saveLinuxDO = async () => {
|
||
const values = await form.validateFields();
|
||
if (values.enabled && !values.clientSecret?.trim() && !linuxdo?.hasClientSecret) {
|
||
message.error("启用 Linux.do 登录前请填写 Client Secret");
|
||
return;
|
||
}
|
||
setSavingLinuxDO(true);
|
||
try {
|
||
const data = await updateAdminLinuxDOSetting({ ...values, clientSecret: values.clientSecret?.trim() || "" });
|
||
setLinuxdo(data.setting);
|
||
form.setFieldsValue({ ...data.setting, clientSecret: "" });
|
||
message.success("Linux.do 登录配置已保存");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "保存 Linux.do 配置失败");
|
||
} finally {
|
||
setSavingLinuxDO(false);
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="mx-auto max-w-5xl space-y-5">
|
||
<SettingsSectionCard
|
||
icon={<UserPlus className="size-4" />}
|
||
title="用户注册"
|
||
description="控制新用户能否创建账号，不影响已有账号登录。"
|
||
status={{ label: registration?.enabled ? "已开放" : "已关闭", color: registration?.enabled ? "success" : "default" }}
|
||
>
|
||
<div className="flex min-h-20 items-center justify-between gap-5 px-5 py-4">
|
||
<div className="min-w-0">
|
||
<h3 className="text-sm font-medium">开放新用户注册</h3>
|
||
<p className="mt-1 text-xs leading-5 text-foreground/55">关闭后，本地注册和未绑定账号的 Linux.do 首次登录都会被拒绝。</p>
|
||
</div>
|
||
<Switch checked={registration?.enabled === true} loading={loading || savingRegistration} onChange={(checked) => void toggleRegistration(checked)} aria-label="开放新用户注册" />
|
||
</div>
|
||
</SettingsSectionCard>
|
||
|
||
<SettingsSectionCard
|
||
icon={<KeyRound className="size-4" />}
|
||
title="Linux.do 单点登录"
|
||
description="连接 Linux.do OAuth，让用户使用社区账号登录。"
|
||
status={{ label: linuxdo?.enabled ? "运行中" : "未启用", color: linuxdo?.enabled ? "success" : "default" }}
|
||
footer={<><span className="text-xs text-foreground/45">Client Secret 加密保存，接口不会回显明文。</span><Button type="primary" loading={savingLinuxDO} onClick={() => void saveLinuxDO()}>保存登录配置</Button></>}
|
||
>
|
||
<Form form={form} layout="vertical" requiredMark={false} disabled={loading}>
|
||
<div>
|
||
<div className="grid gap-x-5 gap-y-1 border-b border-border p-5 md:grid-cols-2">
|
||
<div className="md:col-span-2">
|
||
<FormSectionTitle icon={<ShieldCheck className="size-4" />} title="登录状态与应用凭据" />
|
||
</div>
|
||
<Form.Item name="enabled" label="启用 Linux.do 登录" valuePropName="checked" extra="启用后，登录与注册页面会显示 Linux.do 入口。">
|
||
<Switch />
|
||
</Form.Item>
|
||
<Form.Item name="clientAuthMethod" label="Token 请求鉴权方式" rules={[{ required: true, message: "请选择鉴权方式" }]} extra="Linux.do 应用未特别要求时使用 Client Secret Post。">
|
||
<Select options={[{ label: "Client Secret Post（推荐）", value: "client_secret_post" }, { label: "Client Secret Basic", value: "client_secret_basic" }]} />
|
||
</Form.Item>
|
||
<Form.Item name="clientId" label="Client ID">
|
||
<Input autoComplete="off" placeholder="Linux.do OAuth 应用的 Client ID" />
|
||
</Form.Item>
|
||
<Form.Item name="clientSecret" label={linuxdo?.hasClientSecret ? `Client Secret（${configuredSecretText}）` : "Client Secret"}>
|
||
<Input.Password autoComplete="new-password" placeholder={linuxdo?.hasClientSecret ? "留空保留原密钥" : "Linux.do OAuth 应用的 Client Secret"} />
|
||
</Form.Item>
|
||
</div>
|
||
|
||
<div className="grid gap-x-5 gap-y-1 border-b border-border p-5 md:grid-cols-2">
|
||
<div className="md:col-span-2">
|
||
<FormSectionTitle icon={<LockKeyhole className="size-4" />} title="OAuth 地址" />
|
||
</div>
|
||
<Form.Item name="authorizationUrl" label="授权地址">
|
||
<Input inputMode="url" placeholder="https://connect.linux.do/oauth2/authorize" />
|
||
</Form.Item>
|
||
<Form.Item name="tokenUrl" label="Token 地址">
|
||
<Input inputMode="url" placeholder="https://connect.linux.do/oauth2/token" />
|
||
</Form.Item>
|
||
<Form.Item name="userInfoUrl" label="用户资料地址">
|
||
<Input inputMode="url" placeholder="https://connect.linux.do/api/user" />
|
||
</Form.Item>
|
||
<Form.Item name="redirectUrl" label="本站回调地址" extra="此地址必须与 Linux.do OAuth 应用中登记的回调地址完全一致；推荐使用 /oauth/linuxdo/callback。">
|
||
<Input inputMode="url" placeholder="https://你的域名/oauth/linuxdo/callback" />
|
||
</Form.Item>
|
||
<Form.Item name="scopes" label="授权范围（Scopes）" className="md:col-span-2" extra="通常使用 openid、profile、email；按 Linux.do 应用实际授权范围填写。">
|
||
<Select mode="tags" tokenSeparators={[",", " "]} placeholder="输入后按回车添加" />
|
||
</Form.Item>
|
||
</div>
|
||
|
||
<details className="group">
|
||
<summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
|
||
<div>
|
||
<div className="text-sm font-medium">高级：Linux.do 返回字段对应关系</div>
|
||
<p className="mt-1 text-xs leading-5 text-foreground/55">告诉系统从 Linux.do 用户资料响应的哪些字段读取本地账号信息，支持 `data.user.id` 这类嵌套路径。</p>
|
||
</div>
|
||
<ChevronDown className="size-4 shrink-0 transition-transform group-open:rotate-180" />
|
||
</summary>
|
||
<div className="grid gap-x-5 gap-y-1 border-t border-border bg-muted/15 p-5 md:grid-cols-2">
|
||
<Form.Item name="subjectField" label="唯一用户 ID 字段" extra="账号绑定的唯一依据，必须长期稳定。Linux.do 常见值为 id。">
|
||
<Input placeholder="id" />
|
||
</Form.Item>
|
||
<Form.Item name="usernameField" label="用户名字段" extra="用于生成本站用户名。Linux.do 常见值为 username。">
|
||
<Input placeholder="username" />
|
||
</Form.Item>
|
||
<Form.Item name="displayNameField" label="显示名称字段" extra="显示在用户菜单中的名称，常见值为 name。">
|
||
<Input placeholder="name" />
|
||
</Form.Item>
|
||
<Form.Item name="emailField" label="邮箱字段" extra="没有或无效时允许留空，常见值为 email。">
|
||
<Input placeholder="email" />
|
||
</Form.Item>
|
||
<Form.Item name="avatarField" label="头像地址字段" extra="用户头像 URL，常见值为 avatar_url。">
|
||
<Input placeholder="avatar_url" />
|
||
</Form.Item>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
</Form>
|
||
</SettingsSectionCard>
|
||
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FormSectionTitle({ icon, title }: { icon: ReactNode; title: string }) {
|
||
return <div className="mb-4 flex items-center gap-2 text-sm font-semibold text-foreground/85">{icon}{title}</div>;
|
||
}
|