fix: add password visibility controls to change password

This commit is contained in:
yangqianqian
2026-07-01 10:43:07 +08:00
parent 232fd35c90
commit da137f099f

View File

@@ -17,6 +17,9 @@ export default function ChangePasswordPage() {
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const [saving, setSaving] = useState(false); 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) { async function handleSubmit(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
@@ -63,18 +66,39 @@ export default function ChangePasswordPage() {
<form onSubmit={handleSubmit} className="flex flex-col gap-4"> <form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div> <div>
<label htmlFor="current-password" className="block text-sm font-medium text-text-primary mb-1"></label> <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} <div className="relative">
onChange={(e) => setCurrentPassword(e.target.value)} className={INPUT_CLS} /> <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>
<div> <div>
<label htmlFor="new-password" className="block text-sm font-medium text-text-primary mb-1"></label> <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} <div className="relative">
onChange={(e) => setNewPassword(e.target.value)} className={INPUT_CLS} /> <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>
<div> <div>
<label htmlFor="confirm-password" className="block text-sm font-medium text-text-primary mb-1"></label> <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} <div className="relative">
onChange={(e) => setConfirmPassword(e.target.value)} className={INPUT_CLS} /> <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> </div>
{error && <div role="alert" className="text-status-error text-sm bg-red-50 px-3 py-2 rounded-lg">{error}</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} <button type="submit" disabled={saving}