oa-login-password-recovery-ux 改进登录找回密码体验

client/src/pages/ChangePasswordPage.tsx

@@ -4,8 +4,8 @@ import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { useAuth } from "../auth/AuthContext";
 import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
+import { PasswordInput } from "../components/ui/password-input";
 import { markOnboardingEntryReady } from "../lib/onboardingGuide";
 
 const PASSWORD_REQUIREMENTS = [
@@ -62,26 +62,24 @@ export function ChangePasswordPage() {
       <form className="space-y-4" onSubmit={handleSubmit}>
         <div className="space-y-1">
           <Label htmlFor="oldPassword">旧密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="current-password"
             data-testid="change-password-old"
             id="oldPassword"
             onChange={(event) => setOldPassword(event.target.value)}
             placeholder="请输入旧密码"
-            type="password"
             value={oldPassword}
           />
         </div>
 
         <div className="space-y-1">
           <Label htmlFor="newPassword">新密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="new-password"
             data-testid="change-password-new"
             id="newPassword"
             onChange={(event) => setNewPassword(event.target.value)}
             placeholder="至少 12 位，建议包含大小写/数字"
-            type="password"
             value={newPassword}
           />
           <p className="text-xs text-zinc-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
@@ -98,12 +96,11 @@ export function ChangePasswordPage() {
 
         <div className="space-y-1">
           <Label htmlFor="confirmPassword">确认新密码</Label>
-          <Input
+          <PasswordInput
             autoComplete="new-password"
             id="confirmPassword"
             onChange={(event) => setConfirmPassword(event.target.value)}
             placeholder="再次输入新密码"
-            type="password"
             value={confirmPassword}
           />
         </div>