qianqian/beige
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add password visibility controls to change password

Browse Source
This commit is contained in:
yangqianqian
2026-07-01 10:43:07 +08:00
parent 232fd35c90
commit da137f099f
1 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/app/change-password/page.tsx
View File

@@ -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}