From da137f099f6b967917e3c9cf72587d4c038db6b1 Mon Sep 17 00:00:00 2001
From: yangqianqian <5845211314@qq.com>
Date: Wed, 1 Jul 2026 10:43:07 +0800
Subject: [PATCH] fix: add password visibility controls to change password

---
 frontend/src/app/change-password/page.tsx | 36 +++++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/change-password/page.tsx b/frontend/src/app/change-password/page.tsx
index 69ea7a3..19bd9f1 100644
--- a/frontend/src/app/change-password/page.tsx
+++ b/frontend/src/app/change-password/page.tsx
@@ -17,6 +17,9 @@ export default function ChangePasswordPage() {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState('');
   const [saving, setSaving] = useState(false);
+  const [showCurrentPwd, setShowCurrentPwd] = useState(false);
+  const [showNewPwd, setShowNewPwd] = useState(false);
+  const [showConfirmPwd, setShowConfirmPwd] = useState(false);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -63,18 +66,39 @@ export default function ChangePasswordPage() {
         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <div>
             <label htmlFor="current-password" className="block text-sm font-medium text-text-primary mb-1">当前密码</label>
-            <input id="current-password" type="password" autoComplete="current-password" value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)} className={INPUT_CLS} />
+            <div className="relative">
+              <input id="current-password" type={showCurrentPwd ? 'text' : 'password'} autoComplete="current-password" value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)} className={INPUT_CLS + ' pr-10'} />
+              <button type="button" onClick={() => setShowCurrentPwd((v) => !v)}
+                aria-label={showCurrentPwd ? '隐藏当前密码' : '显示当前密码'}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary text-base p-1">
+                {showCurrentPwd ? '👁️' : '🙈'}
+              </button>
+            </div>
           </div>
           <div>
             <label htmlFor="new-password" className="block text-sm font-medium text-text-primary mb-1">新密码</label>
-            <input id="new-password" type="password" autoComplete="new-password" value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)} className={INPUT_CLS} />
+            <div className="relative">
+              <input id="new-password" type={showNewPwd ? 'text' : 'password'} autoComplete="new-password" value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)} className={INPUT_CLS + ' pr-10'} />
+              <button type="button" onClick={() => setShowNewPwd((v) => !v)}
+                aria-label={showNewPwd ? '隐藏新密码' : '显示新密码'}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary text-base p-1">
+                {showNewPwd ? '👁️' : '🙈'}
+              </button>
+            </div>
           </div>
           <div>
             <label htmlFor="confirm-password" className="block text-sm font-medium text-text-primary mb-1">确认新密码</label>
-            <input id="confirm-password" type="password" autoComplete="new-password" value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)} className={INPUT_CLS} />
+            <div className="relative">
+              <input id="confirm-password" type={showConfirmPwd ? 'text' : 'password'} autoComplete="new-password" value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)} className={INPUT_CLS + ' pr-10'} />
+              <button type="button" onClick={() => setShowConfirmPwd((v) => !v)}
+                aria-label={showConfirmPwd ? '隐藏确认密码' : '显示确认密码'}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary text-base p-1">
+                {showConfirmPwd ? '👁️' : '🙈'}
+              </button>
+            </div>
           </div>
           {error && <div role="alert" className="text-status-error text-sm bg-red-50 px-3 py-2 rounded-lg">{error}</div>}
           <button type="submit" disabled={saving}