feat(settings): enhance user profile and password management with improved error handling and UI updates

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

@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Alert, Button, CloseButton, Input, Label, Spinner, TextField } from "@heroui/react";
-import { Fingerprint, Pencil, TrashBin, Xmark, Check } from "@gravity-ui/icons";
+import { Fingerprint, Lock, Pencil, Person, TrashBin, Xmark, Check } from "@gravity-ui/icons";
-import { authClient } from "@/lib/auth-client";
+import { authClient, useSession } from "@/lib/auth-client";
 
 type Passkey = {
   id: string;
@@ -13,6 +13,80 @@ type Passkey = {
 };
 
 export default function SettingsPage() {
+  const { data: session, refetch: refetchSession } = useSession();
+
+  // ── Profile ──────────────────────────────────────────────────────────────
+  const [profileName, setProfileName] = useState("");
+  const [savingProfile, setSavingProfile] = useState(false);
+  const [profileError, setProfileError] = useState("");
+  const [profileSuccess, setProfileSuccess] = useState("");
+
+  // sync name from session once loaded
+  useEffect(() => {
+    if (session?.user.name) setProfileName(session.user.name);
+  }, [session?.user.name]);
+
+  const handleSaveProfile = async () => {
+    setProfileError("");
+    setProfileSuccess("");
+    setSavingProfile(true);
+    try {
+      const res = await authClient.updateUser({ name: profileName.trim() });
+      if (res?.error) {
+        setProfileError(res.error.message ?? "保存失败");
+      } else {
+        setProfileSuccess("显示名称已更新");
+        await refetchSession();
+      }
+    } catch {
+      setProfileError("保存失败，请重试");
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  // ── Password ─────────────────────────────────────────────────────────────
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [savingPw, setSavingPw] = useState(false);
+  const [pwError, setPwError] = useState("");
+  const [pwSuccess, setPwSuccess] = useState("");
+
+  const handleChangePassword = async () => {
+    setPwError("");
+    setPwSuccess("");
+    if (newPassword !== confirmPassword) {
+      setPwError("两次输入的新密码不一致");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setPwError("新密码至少需要 8 位");
+      return;
+    }
+    setSavingPw(true);
+    try {
+      const res = await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions: false,
+      });
+      if (res?.error) {
+        setPwError(res.error.message ?? "修改密码失败");
+      } else {
+        setPwSuccess("密码已修改成功");
+        setCurrentPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+      }
+    } catch {
+      setPwError("修改密码失败，请重试");
+    } finally {
+      setSavingPw(false);
+    }
+  };
+
+  // ── Passkey ───────────────────────────────────────────────────────────────
   const [passkeys, setPasskeys] = useState<Passkey[]>([]);
   const [loading, setLoading] = useState(true);
   const [addingName, setAddingName] = useState<string | null>(null); // null = collapsed
@@ -128,29 +202,126 @@ export default function SettingsPage() {
     <div className="mx-auto max-w-2xl space-y-6">
       <div>
         <h1 className="text-xl font-semibold text-foreground">账号设置</h1>
-        <p className="mt-0.5 text-sm text-muted">管理您的安全凭据</p>
+        <p className="mt-0.5 text-sm text-muted">管理您的个人信息和安全凭据</p>
       </div>
 
-      {error && (
+      {/* ── Profile section ─────────────────────────────────────────────── */}
-        <Alert status="danger">
+      <div className="rounded-xl border border-border bg-surface-secondary">
-          <Alert.Indicator />
+        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
-          <Alert.Content>
+          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
-            <Alert.Description>{error}</Alert.Description>
+            <Person className="size-5 text-accent" />
-          </Alert.Content>
+          </div>
-          <CloseButton onPress={() => setError("")} />
+          <div>
-        </Alert>
+            <p className="text-sm font-semibold text-foreground">个人信息</p>
-      )}
+            <p className="text-xs text-muted">修改您的显示名称</p>
-      {success && (
+          </div>
-        <Alert status="success">
+        </div>
-          <Alert.Indicator />
+        <div className="space-y-4 px-5 py-4">
-          <Alert.Content>
+          <TextField fullWidth>
-            <Alert.Description>{success}</Alert.Description>
+            <Label className="text-sm font-medium">显示名称</Label>
-          </Alert.Content>
+            <Input
-          <CloseButton onPress={() => setSuccess("")} />
+              placeholder="对外显示的名称"
-        </Alert>
+              value={profileName}
-      )}
+              onChange={(e) => setProfileName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") void handleSaveProfile(); }}
+            />
+          </TextField>
+          {profileError && (
+            <Alert status="danger">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{profileError}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setProfileError("")} />
+            </Alert>
+          )}
+          {profileSuccess && (
+            <Alert status="success">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{profileSuccess}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setProfileSuccess("")} />
+            </Alert>
+          )}
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              isDisabled={savingProfile || !profileName.trim() || profileName === session?.user.name}
+              onPress={handleSaveProfile}
+            >
+              {savingProfile ? <Spinner size="sm" color="current" /> : "保存"}
+            </Button>
+          </div>
+        </div>
+      </div>
 
-      {/* Passkey section */}
+      {/* ── Password section ─────────────────────────────────────────────── */}
+      <div className="rounded-xl border border-border bg-surface-secondary">
+        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
+          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
+            <Lock className="size-5 text-accent" />
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-foreground">修改密码</p>
+            <p className="text-xs text-muted">建议定期更换密码以保护账号安全</p>
+          </div>
+        </div>
+        <div className="space-y-4 px-5 py-4">
+          <TextField fullWidth>
+            <Label className="text-sm font-medium">当前密码</Label>
+            <Input
+              type="password"
+              autoComplete="current-password"
+              placeholder="输入当前密码"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+            />
+          </TextField>
+          <TextField fullWidth>
+            <Label className="text-sm font-medium">新密码</Label>
+            <Input
+              type="password"
+              autoComplete="new-password"
+              placeholder="至少 8 位"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+          </TextField>
+          <TextField fullWidth>
+            <Label className="text-sm font-medium">确认新密码</Label>
+            <Input
+              type="password"
+              autoComplete="new-password"
+              placeholder="再次输入新密码"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") void handleChangePassword(); }}
+            />
+          </TextField>
+          {pwError && (
+            <Alert status="danger">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{pwError}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setPwError("")} />
+            </Alert>
+          )}
+          {pwSuccess && (
+            <Alert status="success">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{pwSuccess}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setPwSuccess("")} />
+            </Alert>
+          )}
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              isDisabled={savingPw || !currentPassword || !newPassword || !confirmPassword}
+              onPress={handleChangePassword}
+            >
+              {savingPw ? <Spinner size="sm" color="current" /> : "确认修改"}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Passkey section ──────────────────────────────────────────────── */}
       <div className="rounded-xl border border-border bg-surface-secondary">
         <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-3">
@@ -194,6 +365,25 @@ export default function SettingsPage() {
           </div>
         )}
 
+        {error && (
+          <div className="border-b border-border px-5 py-3">
+            <Alert status="danger">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{error}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setError("")} />
+            </Alert>
+          </div>
+        )}
+        {success && (
+          <div className="border-b border-border px-5 py-3">
+            <Alert status="success">
+              <Alert.Indicator />
+              <Alert.Content><Alert.Description>{success}</Alert.Description></Alert.Content>
+              <CloseButton onPress={() => setSuccess("")} />
+            </Alert>
+          </div>
+        )}
+
         {loading ? (
           <div className="flex justify-center py-8">
             <Spinner />