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 [email, setEmail] = useState('')
|
||||||
const [pin, setPin] = useState('')
|
const [pin, setPin] = useState('')
|
||||||
const [password, setPassword] = useState('')
|
const [password, setPassword] = useState('')
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('')
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
@ -33,6 +34,10 @@ export function Register() {
|
||||||
|
|
||||||
async function submitPin(e: React.FormEvent) {
|
async function submitPin(e: React.FormEvent) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
setError('Passwords do not match')
|
||||||
|
return
|
||||||
|
}
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
setError('')
|
setError('')
|
||||||
try {
|
try {
|
||||||
|
|
@ -110,11 +115,19 @@ export function Register() {
|
||||||
placeholder="Choose a password (min 8 characters)" required autoComplete="new-password"
|
placeholder="Choose a password (min 8 characters)" required autoComplete="new-password"
|
||||||
style={input}
|
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>}
|
{error && <p style={{ color: 'var(--danger)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
|
||||||
<button type="submit" disabled={loading} style={loading ? disabledBtn : goldBtn}>
|
<button type="submit" disabled={loading} style={loading ? disabledBtn : goldBtn}>
|
||||||
{loading ? 'Creating account…' : 'Create account'}
|
{loading ? 'Creating account…' : 'Create account'}
|
||||||
</button>
|
</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)',
|
style={{ background: 'none', border: 'none', color: 'var(--text-muted)',
|
||||||
fontSize: '0.8rem', cursor: 'pointer', textDecoration: 'underline' }}>
|
fontSize: '0.8rem', cursor: 'pointer', textDecoration: 'underline' }}>
|
||||||
Use a different email
|
Use a different email
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue