fix: add password visibility controls to change password
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user