43439e9c85
New components: - RegisterForm — name, email, password, confirm, terms, password strength - ForgotPasswordForm — email input with success/error states, back link - ResetPasswordForm — new password + confirm with strength indicator - VerifyEmailForm — 6-digit code input with resend, numeric-only filter - OnboardingShell — step indicator, progress bar, back/next/complete nav - AuthPageLayout — full-page centered card with product branding - PasswordStrengthBar — visual bar + label (weak/fair/good/strong) Existing components preserved: LoginForm, MfaChallenge, SocialButtons All styled via --bl-* CSS custom properties for product theming 54 tests (13 existing + 41 new) — all passing
118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import { useState, type FormEvent } from 'react';
|
|
import type { VerifyEmailFormProps } from './types.js';
|
|
|
|
/**
|
|
* Email verification form — 6-digit code input with resend option.
|
|
* Styled via CSS custom properties (inherits --bl-* from host app).
|
|
*/
|
|
export function VerifyEmailForm({
|
|
onSubmit,
|
|
onResend,
|
|
isLoading = false,
|
|
error,
|
|
success,
|
|
email,
|
|
className,
|
|
}: VerifyEmailFormProps) {
|
|
const [code, setCode] = useState('');
|
|
|
|
function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
onSubmit(code);
|
|
}
|
|
|
|
return (
|
|
<div className={className} data-testid="bl-verify-email-form">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
|
|
>
|
|
<div style={{ fontSize: '14px', color: 'var(--bl-text, #333)' }}>
|
|
Enter the 6-digit code sent to {email ? <strong>{email}</strong> : 'your email'}.
|
|
</div>
|
|
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
autoComplete="one-time-code"
|
|
placeholder="000000"
|
|
value={code}
|
|
onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
|
required
|
|
disabled={isLoading}
|
|
maxLength={6}
|
|
data-testid="bl-verify-code"
|
|
style={{
|
|
padding: '12px',
|
|
border: '1px solid var(--bl-border, #ccc)',
|
|
borderRadius: 'var(--bl-radius, 6px)',
|
|
fontSize: '24px',
|
|
textAlign: 'center',
|
|
letterSpacing: '6px',
|
|
fontFamily: 'monospace',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
|
|
{error && (
|
|
<div
|
|
data-testid="bl-verify-error"
|
|
style={{ color: 'var(--bl-error, #dc3545)', fontSize: '13px' }}
|
|
>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div
|
|
data-testid="bl-verify-success"
|
|
style={{ color: 'var(--bl-success, #22c55e)', fontSize: '13px' }}
|
|
>
|
|
{success}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || code.length < 6}
|
|
data-testid="bl-verify-submit"
|
|
style={{
|
|
padding: '10px 16px',
|
|
border: 'none',
|
|
borderRadius: 'var(--bl-radius, 6px)',
|
|
background: 'var(--bl-primary, #0066ff)',
|
|
color: '#fff',
|
|
cursor: isLoading || code.length < 6 ? 'not-allowed' : 'pointer',
|
|
fontSize: '14px',
|
|
fontWeight: 600,
|
|
opacity: isLoading || code.length < 6 ? 0.6 : 1,
|
|
}}
|
|
>
|
|
{isLoading ? 'Verifying...' : 'Verify email'}
|
|
</button>
|
|
|
|
{onResend && (
|
|
<button
|
|
type="button"
|
|
onClick={onResend}
|
|
disabled={isLoading}
|
|
data-testid="bl-verify-resend"
|
|
style={{
|
|
padding: '8px',
|
|
border: 'none',
|
|
background: 'transparent',
|
|
color: 'var(--bl-link, #0066ff)',
|
|
cursor: 'pointer',
|
|
fontSize: '13px',
|
|
textDecoration: 'underline',
|
|
}}
|
|
>
|
|
Resend code
|
|
</button>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|