feat(settings): enhance Passkey management with inline add and rename functionality

apps/csms/src/lib/auth.ts

@@ -13,6 +13,7 @@ export const auth = betterAuth({
     },
   }),
   trustedOrigins: [process.env.WEB_ORIGIN ?? "http://localhost:3000"],
+  appName: "Helios EVCS",
   user: {
     additionalFields: {},
   },

apps/web/app/dashboard/settings/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import { Alert, Button, CloseButton, Spinner } from "@heroui/react";
+import { Alert, Button, CloseButton, Input, Label, Spinner, TextField } from "@heroui/react";
-import { Fingerprint, TrashBin } from "@gravity-ui/icons";
+import { Fingerprint, Pencil, TrashBin, Xmark, Check } from "@gravity-ui/icons";
 import { authClient } from "@/lib/auth-client";
 
 type Passkey = {
@@ -15,10 +15,15 @@ type Passkey = {
 export default function SettingsPage() {
   const [passkeys, setPasskeys] = useState<Passkey[]>([]);
   const [loading, setLoading] = useState(true);
-  const [adding, setAdding] = useState(false);
+  const [addingName, setAddingName] = useState<string | null>(null); // null = collapsed
+  const [registering, setRegistering] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [renameSaving, setRenameSaving] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
+  const renameInputRef = useRef<HTMLInputElement>(null);
 
   const loadPasskeys = useCallback(async () => {
     setLoading(true);
@@ -36,22 +41,33 @@ export default function SettingsPage() {
     void loadPasskeys();
   }, [loadPasskeys]);
 
-  const handleAdd = async () => {
+  const handleStartAdd = () => {
+    setAddingName("");
     setError("");
     setSuccess("");
-    setAdding(true);
+  };
+
+  const handleCancelAdd = () => setAddingName(null);
+
+  const handleRegister = async () => {
+    setError("");
+    setSuccess("");
+    setRegistering(true);
     try {
-      const res = await authClient.passkey.addPasskey();
+      const res = await authClient.passkey.addPasskey({
+        name: addingName?.trim() || undefined,
+      });
       if (res?.error) {
         setError(res.error.message ?? "注册 Passkey 失败");
       } else {
         setSuccess("Passkey 注册成功");
+        setAddingName(null);
         await loadPasskeys();
       }
     } catch {
       setError("注册 Passkey 失败，请重试");
     } finally {
-      setAdding(false);
+      setRegistering(false);
     }
   };
 
@@ -74,6 +90,40 @@ export default function SettingsPage() {
     }
   };
 
+  const startRename = (pk: Passkey) => {
+    setRenamingId(pk.id);
+    setRenameValue(pk.name ?? "");
+    setTimeout(() => renameInputRef.current?.focus(), 50);
+  };
+
+  const cancelRename = () => {
+    setRenamingId(null);
+    setRenameValue("");
+  };
+
+  const handleRename = async (id: string) => {
+    setError("");
+    setRenameSaving(true);
+    try {
+      const res = await (authClient.passkey as any).updatePasskey({
+        id,
+        name: renameValue.trim() || undefined,
+      });
+      if (res?.error) {
+        setError(res.error.message ?? "重命名失败");
+      } else {
+        setPasskeys((prev) =>
+          prev.map((p) => (p.id === id ? { ...p, name: renameValue.trim() || null } : p)),
+        );
+        setRenamingId(null);
+      }
+    } catch {
+      setError("重命名失败，请重试");
+    } finally {
+      setRenameSaving(false);
+    }
+  };
+
   return (
     <div className="mx-auto max-w-2xl space-y-6">
       <div>
@@ -112,11 +162,38 @@ export default function SettingsPage() {
               <p className="text-xs text-muted">使用设备生物识别或 PIN 免密登录</p>
             </div>
           </div>
-          <Button size="sm" variant="secondary" isDisabled={adding} onPress={handleAdd}>
+          {addingName === null && (
-            {adding ? <Spinner size="sm" /> : "添加 Passkey"}
+            <Button size="sm" variant="secondary" onPress={handleStartAdd}>
-          </Button>
+              添加 Passkey
+            </Button>
+          )}
         </div>
 
+        {/* Inline add form */}
+        {addingName !== null && (
+          <div className="flex items-end gap-2 border-b border-border px-5 py-4">
+            <TextField fullWidth>
+              <Label className="text-sm font-medium">Passkey 名称</Label>
+              <Input
+                autoFocus
+                placeholder="例如：MacBook Touch ID"
+                value={addingName}
+                onChange={(e) => setAddingName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void handleRegister();
+                  if (e.key === "Escape") handleCancelAdd();
+                }}
+              />
+            </TextField>
+            <Button isDisabled={registering} onPress={handleRegister}>
+              {registering ? <Spinner size="sm" color="current" /> : "注册"}
+            </Button>
+            <Button variant="ghost" isDisabled={registering} onPress={handleCancelAdd}>
+              取消
+            </Button>
+          </div>
+        )}
+
         {loading ? (
           <div className="flex justify-center py-8">
             <Spinner />
@@ -126,13 +203,58 @@ export default function SettingsPage() {
         ) : (
           <ul className="divide-y divide-border">
             {passkeys.map((pk) => (
-              <li key={pk.id} className="flex items-center justify-between px-5 py-3.5">
+              <li key={pk.id} className="group flex items-center justify-between px-5 py-3.5">
-                <div className="flex items-center gap-3">
+                <div className="flex min-w-0 flex-1 items-center gap-3">
                   <Fingerprint className="size-4 shrink-0 text-muted" />
-                  <div>
+                  <div className="min-w-0 flex-1">
-                    <p className="text-sm font-medium text-foreground">
+                    {/* Name row: text+pencil or inline input */}
-                      {pk.name ?? pk.deviceType ?? "Passkey"}
+                    <div className="flex items-center gap-1.5">
-                    </p>
+                      {renamingId === pk.id ? (
+                        <>
+                          <input
+                            ref={renameInputRef}
+                            className="min-w-0 max-w-48 rounded-md border border-border bg-transparent px-2 py-0.5 text-sm text-foreground outline-none focus:border-accent"
+                            value={renameValue}
+                            onChange={(e) => setRenameValue(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") void handleRename(pk.id);
+                              if (e.key === "Escape") cancelRename();
+                            }}
+                            placeholder="输入名称"
+                          />
+                          <button
+                            type="button"
+                            disabled={renameSaving}
+                            className="flex size-5 items-center justify-center rounded text-accent hover:bg-accent/10 disabled:opacity-50"
+                            onClick={() => void handleRename(pk.id)}
+                          >
+                            {renameSaving ? <Spinner size="sm" /> : <Check className="size-3" />}
+                          </button>
+                          <button
+                            type="button"
+                            disabled={renameSaving}
+                            className="flex size-5 items-center justify-center rounded text-muted hover:bg-surface-tertiary disabled:opacity-50"
+                            onClick={cancelRename}
+                          >
+                            <Xmark className="size-3" />
+                          </button>
+                        </>
+                      ) : (
+                        <>
+                          <p className="text-sm font-medium text-foreground">
+                            {pk.name ?? pk.deviceType ?? "Passkey"}
+                          </p>
+                          <button
+                            type="button"
+                            className="flex size-5 items-center justify-center rounded text-muted opacity-0 transition-opacity hover:bg-surface-tertiary hover:text-foreground group-hover:opacity-100"
+                            onClick={() => startRename(pk)}
+                          >
+                            <Pencil className="size-3" />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                    {/* Date row: always visible */}
                     <p className="text-xs text-muted">
                       添加于{" "}
                       {new Date(pk.createdAt).toLocaleString("zh-CN", {
@@ -147,7 +269,7 @@ export default function SettingsPage() {
                   isIconOnly
                   size="sm"
                   variant="danger-soft"
-                  isDisabled={deletingId === pk.id}
+                  isDisabled={deletingId === pk.id || renamingId === pk.id}
                   onPress={() => handleDelete(pk.id)}
                 >
                   {deletingId === pk.id ? <Spinner size="sm" /> : <TrashBin className="size-4" />}