Register: add confirm password field with mismatch highlight
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
817e5f905d
commit
5b11a0d4aa
1 changed files with 14 additions and 1 deletions
|
|
@ -8,6 +8,7 @@ export function Register() {
|
|||
const [email, setEmail] = useState('')
|
||||
const [pin, setPin] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
|
|
@ -33,6 +34,10 @@ export function Register() {
|
|||
|
||||
async function submitPin(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match')
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
|
|
@ -110,11 +115,19 @@ export function Register() {
|
|||
placeholder="Choose a password (min 8 characters)" required autoComplete="new-password"
|
||||
style={input}
|
||||
/>
|
||||
<input
|
||||
type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirm password" required autoComplete="new-password"
|
||||
style={{
|
||||
...input,
|
||||
borderColor: confirmPassword && password !== confirmPassword ? 'var(--danger)' : undefined,
|
||||
}}
|
||||
/>
|
||||
{error && <p style={{ color: 'var(--danger)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
|
||||
<button type="submit" disabled={loading} style={loading ? disabledBtn : goldBtn}>
|
||||
{loading ? 'Creating account…' : 'Create account'}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setStep('email'); setPin(''); setPassword(''); setError('') }}
|
||||
<button type="button" onClick={() => { setStep('email'); setPin(''); setPassword(''); setConfirmPassword(''); setError('') }}
|
||||
style={{ background: 'none', border: 'none', color: 'var(--text-muted)',
|
||||
fontSize: '0.8rem', cursor: 'pointer', textDecoration: 'underline' }}>
|
||||
Use a different email
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue