learning_ai_common_plat/packages/auth-ui/src/VerifyEmailForm.tsx

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: 'var(--bl-accent-foreground, #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>
  );
}