feat(web): S-3 TOTP entry in the account popover
Account popover (cookie sessions) gets a "二次验证" item showing the current state; the dialog wires GET/POST /auth/totp: begin shows the one-time base32 secret (grouped) and otpauth URI for manual entry, enable confirms with a 6-digit code, disable takes current password + code. No QR image (would need a new dependency); session query is invalidated so the state label updates. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
17cf3cbf97
commit
ba1361a9b6
1 file changed
+168
-4
@@ -1,9 +1,9 @@
|
||||
import { PasswordChangeRequest, type SessionInfo } from "@umt/contracts";
|
||||
import { KeyRound, LoaderCircle, LogOut, UserRound } from "lucide-react";
|
||||
import { PasswordChangeRequest, type SessionInfo, TotpCode } from "@umt/contracts";
|
||||
import { KeyRound, LoaderCircle, LogOut, ShieldCheck, UserRound } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { useChangePassword, useLogout } from "~/api/auth.ts";
|
||||
import { useChangePassword, useLogout, useTotpAction, useTotpStatus } from "~/api/auth.ts";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -105,10 +105,157 @@ function ChangePasswordDialog({ open, onOpenChange }: { open: boolean; onOpenCha
|
||||
);
|
||||
}
|
||||
|
||||
/** 右上角账户弹层:当前身份、会话到期、改密、登出 */
|
||||
/** 二次验证(TOTP):未开启 → 生成密钥 → 在验证器里添加 → 输入 6 位码确认;已开启 → 当前密码 + 验证码关闭 */
|
||||
function TotpDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
|
||||
const status = useTotpStatus(open);
|
||||
const action = useTotpAction();
|
||||
const [setup, setSetup] = useState<{ secret: string; uri: string } | null>(null);
|
||||
const [code, setCode] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const enabled = status.data?.enabled === true;
|
||||
|
||||
const reset = () => {
|
||||
setSetup(null);
|
||||
setCode("");
|
||||
setPassword("");
|
||||
setError(null);
|
||||
};
|
||||
const close = (o: boolean) => {
|
||||
if (action.isPending) return;
|
||||
if (!o) reset();
|
||||
onOpenChange(o);
|
||||
};
|
||||
|
||||
const begin = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
const r = await action.mutateAsync({ action: "begin" });
|
||||
if (r.secret && r.otpauthUri) setSetup({ secret: r.secret, uri: r.otpauthUri });
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!TotpCode.safeParse(code).success) {
|
||||
setError("验证码为 6 位数字");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
if (enabled) {
|
||||
if (!password) {
|
||||
setError("请输入当前密码");
|
||||
return;
|
||||
}
|
||||
await action.mutateAsync({ action: "disable", password, code });
|
||||
toast.success("已关闭二次验证");
|
||||
} else {
|
||||
await action.mutateAsync({ action: "enable", code });
|
||||
toast.success("已开启二次验证,下次登录需要输入验证码");
|
||||
}
|
||||
reset();
|
||||
onOpenChange(false);
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const grouped = setup?.secret.replace(/(.{4})/g, "$1 ").trim();
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={close}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>二次验证(TOTP)</DialogTitle>
|
||||
<DialogDescription>
|
||||
{status.isLoading
|
||||
? "读取状态…"
|
||||
: enabled
|
||||
? "已开启:登录时需要验证器里的 6 位验证码。关闭需要当前密码和验证码。"
|
||||
: "未开启:开启后登录除密码外还需要验证器(如 1Password、Google Authenticator)里的 6 位验证码。"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{!enabled && !setup ? (
|
||||
<div className="grid gap-2">
|
||||
{status.data?.pending ? (
|
||||
<p className="text-meta text-muted-foreground">有一个未确认的密钥;重新生成会作废它。</p>
|
||||
) : null}
|
||||
{error ? <p className="text-meta text-destructive">{error}</p> : null}
|
||||
</div>
|
||||
) : (
|
||||
<form id="totp-form" onSubmit={submit} className="grid gap-1" noValidate>
|
||||
{setup ? (
|
||||
<div className="mb-2 grid gap-1.5">
|
||||
<p className="text-meta text-muted-foreground">
|
||||
在验证器里选“手动输入密钥”,填入下面的密钥(基于时间,6 位);或把 otpauth
|
||||
链接粘贴到支持的验证器。密钥只显示这一次。
|
||||
</p>
|
||||
<code className="rounded-md bg-muted px-2 py-1.5 font-mono text-sm break-all select-all">
|
||||
{grouped}
|
||||
</code>
|
||||
<code className="rounded-md bg-muted px-2 py-1.5 font-mono text-meta break-all text-muted-foreground select-all">
|
||||
{setup.uri}
|
||||
</code>
|
||||
</div>
|
||||
) : null}
|
||||
{enabled ? (
|
||||
<FormField label="当前密码" htmlFor="totp-pwd">
|
||||
<Input
|
||||
id="totp-pwd"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
) : null}
|
||||
<FormField label="验证码" htmlFor="totp-code" error={error ?? undefined}>
|
||||
<Input
|
||||
id="totp-code"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
maxLength={6}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
|
||||
aria-invalid={!!error}
|
||||
/>
|
||||
</FormField>
|
||||
</form>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => close(false)} disabled={action.isPending}>
|
||||
取消
|
||||
</Button>
|
||||
{!enabled && !setup ? (
|
||||
<Button onClick={begin} disabled={action.isPending || status.isLoading}>
|
||||
{action.isPending ? <LoaderCircle className="animate-spin" /> : null}
|
||||
生成密钥
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
form="totp-form"
|
||||
variant={enabled ? "destructive" : "default"}
|
||||
disabled={action.isPending}
|
||||
>
|
||||
{action.isPending ? <LoaderCircle className="animate-spin" /> : null}
|
||||
{enabled ? "关闭二次验证" : "确认开启"}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/** 右上角账户弹层:当前身份、会话到期、改密、二次验证、登出 */
|
||||
export function AccountMenu({ session }: { session: SessionInfo }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [pwdOpen, setPwdOpen] = useState(false);
|
||||
const [totpOpen, setTotpOpen] = useState(false);
|
||||
const logout = useLogout();
|
||||
const actor = session.actor;
|
||||
const isCookie = !!session.expiresAt;
|
||||
@@ -154,6 +301,22 @@ export function AccountMenu({ session }: { session: SessionInfo }) {
|
||||
修改密码
|
||||
</button>
|
||||
) : null}
|
||||
{isCookie ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setTotpOpen(true);
|
||||
}}
|
||||
className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06]"
|
||||
>
|
||||
<ShieldCheck className="h-4 w-4 text-muted-foreground" />
|
||||
二次验证
|
||||
<span className="ml-auto text-meta text-muted-foreground">
|
||||
{session.totpEnabled ? "已开启" : "未开启"}
|
||||
</span>
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={doLogout}
|
||||
@@ -167,6 +330,7 @@ export function AccountMenu({ session }: { session: SessionInfo }) {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<ChangePasswordDialog open={pwdOpen} onOpenChange={setPwdOpen} />
|
||||
<TotpDialog open={totpOpen} onOpenChange={setTotpOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user