fix(passkey): 删除 passkey 先确认并显示名称与注册时间，邮箱未验证时后端拒删最后一把，错误内联显示
This commit is contained in:
16 files changed
+355
-59
No files matched your search
@@ -44,6 +44,11 @@
|
||||
"created_at": "Registered at: ",
|
||||
"last_used": "Last used: ",
|
||||
"never": "Never",
|
||||
"passkey_delete_aria": "Delete passkey “{{name}}”",
|
||||
"passkey_delete_title": "Delete this passkey?",
|
||||
"passkey_delete_desc": "“{{name}}” (registered {{created}}) will no longer sign you in. You can register it again later.",
|
||||
"passkey_delete_confirm": "Delete",
|
||||
"passkey_last_hint": "This is your only passkey and your email is not verified, so deleting it would lock you out. Verify an email or add another passkey first.",
|
||||
"migration": "Account migration",
|
||||
"migration_desc": "Move everything a retired account owns onto this one. Migration starts in-game and finishes here.",
|
||||
"account_id": "Account ID",
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
"invalid_attestation": "Could not verify this Passkey, please try again.",
|
||||
"passkey_already_bound": "This Passkey is already bound to another account.",
|
||||
"passkey_unavailable": "Passkey subsystem is not available right now.",
|
||||
"last_passkey": "This is your only passkey and your email is not verified, so it can't be removed. Verify an email or add another passkey first.",
|
||||
"passkey_not_allowed": "The operation was cancelled by the user or browser.",
|
||||
"passkey_aborted": "Passkey registration was aborted.",
|
||||
"bad_name": "That server name is invalid — use 3–32 lowercase letters, digits or dashes, and avoid reserved names.",
|
||||
|
||||
@@ -44,6 +44,11 @@
|
||||
"created_at": "注册时间：",
|
||||
"last_used": "上次使用：",
|
||||
"never": "从未",
|
||||
"passkey_delete_aria": "删除 Passkey「{{name}}」",
|
||||
"passkey_delete_title": "删除这个 Passkey？",
|
||||
"passkey_delete_desc": "「{{name}}」（注册于 {{created}}）删除后无法再用它登录，需要时可以重新注册。",
|
||||
"passkey_delete_confirm": "删除",
|
||||
"passkey_last_hint": "这是你唯一的 Passkey，邮箱也还没验证，删掉就没法登录了。先验证邮箱或再注册一个 Passkey，才能删除它。",
|
||||
"migration": "账户迁移",
|
||||
"migration_desc": "将被弃用账户名下的所有服务器转移到本账户。迁移在游戏内发起，在此完成。",
|
||||
"account_id": "账户 ID",
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
"invalid_attestation": "无法验证此 Passkey，请重试。",
|
||||
"passkey_already_bound": "此 Passkey 已被其他账户绑定。",
|
||||
"passkey_unavailable": "Passkey 功能当前不可用。",
|
||||
"last_passkey": "这是你唯一的 Passkey，邮箱也还没验证，不能删除。先验证邮箱或再注册一个 Passkey。",
|
||||
"passkey_not_allowed": "操作已被用户或浏览器取消。",
|
||||
"passkey_aborted": "Passkey 注册已被取消。",
|
||||
"bad_name": "服务器名称不合法：需为 3–32 位小写字母、数字或连字符，且不能使用保留名。",
|
||||
|
||||
@@ -13,6 +13,7 @@ import type {
|
||||
LinkResult,
|
||||
LinkStatus,
|
||||
BindResult,
|
||||
PasskeyCredential,
|
||||
PatchUserRequest,
|
||||
PlayersResult,
|
||||
QuotaInput,
|
||||
@@ -560,7 +561,7 @@ export const api = rejectingSync({
|
||||
request<any>("POST", "/account/passkey/register/finish", { name, attestation }),
|
||||
|
||||
passkeyList: () =>
|
||||
request<{ credentials: any[] }>("GET", "/account/passkey/credentials"),
|
||||
request<{ credentials: PasskeyCredential[] }>("GET", "/account/passkey/credentials"),
|
||||
|
||||
passkeyDelete: (id: string) =>
|
||||
request<void>("DELETE", urlPath`/account/passkey/credentials/${id}`),
|
||||
@@ -800,6 +801,8 @@ export function humanizeError(e: unknown): string {
|
||||
return t("passkey_already_bound");
|
||||
case "passkey_unavailable":
|
||||
return t("passkey_unavailable");
|
||||
case "last_passkey":
|
||||
return t("last_passkey");
|
||||
case "quota_exceeded":
|
||||
return t("quota_exceeded");
|
||||
case "already_claimed":
|
||||
|
||||
@@ -392,6 +392,15 @@ export interface QuotaInput {
|
||||
max_storage_gb?: number | null;
|
||||
}
|
||||
|
||||
// One registered passkey as GET /account/passkey/credentials lists it.
|
||||
export interface PasskeyCredential {
|
||||
id: string;
|
||||
name: string;
|
||||
aaguid?: string;
|
||||
created_at: string;
|
||||
last_used_at?: string | null;
|
||||
}
|
||||
|
||||
export interface SessionView {
|
||||
token_hash: string;
|
||||
created_at: string;
|
||||
|
||||
+101
-40
@@ -6,8 +6,12 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Loading, ErrorState } from "@/components/States";
|
||||
import { ConfirmFooter } from "@/components/ConfirmFooter";
|
||||
import { MessageLine } from "@/components/MessageLine";
|
||||
import { PageHeader } from "@/components/PageHeader";
|
||||
import { api, humanizeError } from "@/lib/api";
|
||||
import { formatAbsolute } from "@/lib/format";
|
||||
import type { PasskeyCredential } from "@/lib/types";
|
||||
import { useAsync } from "@/lib/hooks";
|
||||
import { useTier } from "@/lib/tier";
|
||||
import { base64urlToBytes, bytesToBase64url } from "@/lib/utils";
|
||||
@@ -30,7 +34,7 @@ import {
|
||||
export function Account() {
|
||||
const status = useAsync(() => api.linkStatus(), []);
|
||||
const { identity, refresh } = useTier();
|
||||
const { t } = useTranslation("account");
|
||||
const { t, i18n } = useTranslation("account");
|
||||
|
||||
// Email verification state
|
||||
const [emailInput, setEmailInput] = useState("");
|
||||
@@ -93,7 +97,15 @@ export function Account() {
|
||||
const [registeringPasskey, setRegisteringPasskey] = useState(false);
|
||||
const [passkeyError, setPasskeyError] = useState<string | null>(null);
|
||||
const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
|
||||
const [deletingMap, setDeletingMap] = useState<Record<string, boolean>>({});
|
||||
// Deleting a passkey goes through a confirm dialog that names it. The API
|
||||
// refuses to remove the only passkey of an account whose email is unverified
|
||||
// (it would be left with no way back in); the button mirrors that rule so the
|
||||
// refusal is explained up front instead of after a round trip.
|
||||
const [pendingDelete, setPendingDelete] = useState<PasskeyCredential | null>(null);
|
||||
const [deletingPasskey, setDeletingPasskey] = useState(false);
|
||||
const [deleteError, setDeleteError] = useState<string | null>(null);
|
||||
const credentials = passkeys.data?.credentials ?? [];
|
||||
const keepLastPasskey = credentials.length === 1 && !identity?.email_verified;
|
||||
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
@@ -165,16 +177,30 @@ export function Account() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeletePasskey(id: string) {
|
||||
if (deletingMap[id]) return;
|
||||
setDeletingMap((prev) => ({ ...prev, [id]: true }));
|
||||
function askDeletePasskey(cred: PasskeyCredential) {
|
||||
setDeleteError(null);
|
||||
setPendingDelete(cred);
|
||||
}
|
||||
|
||||
async function confirmDeletePasskey() {
|
||||
if (!pendingDelete || deletingPasskey) return;
|
||||
setDeletingPasskey(true);
|
||||
setDeleteError(null);
|
||||
try {
|
||||
await api.passkeyDelete(id);
|
||||
await api.passkeyDelete(pendingDelete.id);
|
||||
setPendingDelete(null);
|
||||
await passkeys.reload();
|
||||
} catch (err) {
|
||||
alert(humanizeError(err));
|
||||
// Another device may have changed the list meanwhile: refresh it. A 404
|
||||
// means the passkey is already gone, which is what was asked for.
|
||||
void passkeys.reload();
|
||||
if ((err as { code?: string }).code === "not_found") {
|
||||
setPendingDelete(null);
|
||||
} else {
|
||||
setDeleteError(humanizeError(err));
|
||||
}
|
||||
} finally {
|
||||
setDeletingMap((prev) => ({ ...prev, [id]: false }));
|
||||
setDeletingPasskey(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -404,47 +430,82 @@ export function Account() {
|
||||
<Loading label={t("loading_passkeys")} />
|
||||
) : passkeys.error ? (
|
||||
<ErrorState error={passkeys.error} onRetry={passkeys.reload} />
|
||||
) : !passkeys.data?.credentials || passkeys.data.credentials.length === 0 ? (
|
||||
) : credentials.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-2 italic">{t("no_passkeys")}</p>
|
||||
) : (
|
||||
<div className="border rounded-md divide-y bg-background/50">
|
||||
{passkeys.data.credentials.map((cred: any) => (
|
||||
<div key={cred.id} className="flex items-center justify-between p-3">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-foreground flex items-center gap-1.5">
|
||||
<KeyRound className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{cred.name}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{t("created_at")}
|
||||
{new Date(cred.created_at).toLocaleString()}
|
||||
</span>
|
||||
<span>
|
||||
{t("last_used")}
|
||||
{cred.last_used_at ? new Date(cred.last_used_at).toLocaleString() : t("never")}
|
||||
</span>
|
||||
<>
|
||||
<ul className="border rounded-md divide-y bg-background/50">
|
||||
{credentials.map((cred) => (
|
||||
<li key={cred.id} className="flex items-center justify-between gap-3 p-3">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<p className="font-medium text-foreground flex items-center gap-1.5">
|
||||
<KeyRound className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate">{cred.name}</span>
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{t("created_at")}
|
||||
{formatAbsolute(cred.created_at, i18n.language)}
|
||||
</span>
|
||||
<span>
|
||||
{t("last_used")}
|
||||
{cred.last_used_at ? formatAbsolute(cred.last_used_at, i18n.language) : t("never")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeletePasskey(cred.id)}
|
||||
disabled={deletingMap[cred.id]}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => askDeletePasskey(cred)}
|
||||
disabled={keepLastPasskey}
|
||||
aria-label={t("passkey_delete_aria", { name: cred.name })}
|
||||
title={keepLastPasskey ? t("passkey_last_hint") : t("passkey_delete_aria", { name: cred.name })}
|
||||
className="shrink-0 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{keepLastPasskey && (
|
||||
<p className="text-xs text-muted-foreground">{t("passkey_last_hint")}</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Dialog
|
||||
open={pendingDelete !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !deletingPasskey) setPendingDelete(null);
|
||||
}}
|
||||
>
|
||||
<DialogContent hideClose={deletingPasskey}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("passkey_delete_title")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{pendingDelete &&
|
||||
t("passkey_delete_desc", {
|
||||
name: pendingDelete.name,
|
||||
created: formatAbsolute(pendingDelete.created_at, i18n.language),
|
||||
})}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{deleteError && <MessageLine kind="error" message={deleteError} />}
|
||||
<ConfirmFooter
|
||||
onCancel={() => setPendingDelete(null)}
|
||||
onConfirm={() => void confirmDeletePasskey()}
|
||||
loading={deletingPasskey}
|
||||
disabled={deletingPasskey || keepLastPasskey}
|
||||
cancelLabel={t("common:cancel")}
|
||||
confirmLabel={t("passkey_delete_confirm")}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<MigrationCard
|
||||
userId={identity?.user_id}
|
||||
hasPasskey={(passkeys.data?.credentials?.length ?? 0) > 0}
|
||||
hasPasskey={credentials.length > 0}
|
||||
/>
|
||||
|
||||
<Card>
|
||||
|
||||
Reference in new issue
Block a user