` swaps tone. const modeLinkStyle = { background: 'transparent', border: 0, padding: 0, color: 'var(--vg-purple-700)', fontWeight: 600, cursor: 'pointer', font: 'inherit', textDecoration: 'underline', }; function LoginModal({ open, onClose }) { const [email, setEmail] = React.useState(''); const [code, setCode] = React.useState(''); // 'idle' | 'sending' | 'codeSent' | 'verifying' | 'error' const [status, setStatus] = React.useState({ kind: 'idle' }); // 'otp' (default — magic-link / one-time code) or 'password' — // toggled by the link under the primary CTA. OTP stays the // default because it's the no-password path visitors expect // out of the box. const [mode, setMode] = React.useState('otp'); const [password, setPassword] = React.useState(''); const emailInputRef = React.useRef(null); const codeInputRef = React.useRef(null); const passwordInputRef = React.useRef(null); React.useEffect(() => { if (open) { setEmail(''); setCode(''); setPassword(''); setMode('otp'); setStatus({ kind: 'idle' }); requestAnimationFrame( () => emailInputRef.current && emailInputRef.current.focus() ); } }, [open]); // When the visitor toggles to the password mode, slide focus // into the password input so they can type immediately. React.useEffect(() => { if (!open) return; if (mode === 'password' && passwordInputRef.current) { passwordInputRef.current.focus(); } }, [mode, open]); // When step 2 mounts, focus the code input. React.useEffect(() => { if (status.kind === 'codeSent' && codeInputRef.current) { codeInputRef.current.focus(); } }, [status.kind]); // Escape-key dismiss while open. React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; // ── Password sign-in (single step). ───────────────────────── // POSTs to /api/auth/password-signin, which calls // supabase.auth.signInWithPassword server-side and writes the // session cookies via @supabase/ssr. On success the user is // dropped at /home; the middleware will redirect to // /change-password if their profile flag is set. const signInWithPasswordFlow = async (e) => { e.preventDefault(); const trimmed = email.trim(); if (!trimmed || !password) return; setStatus({ kind: 'sending' }); try { const res = await fetch('/api/auth/password-signin', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ email: trimmed, password }), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.ok) { setStatus({ kind: 'error', step: 'send', message: json.error || "That email + password didn't work. Try again or use a one-time code.", }); return; } window.location.href = '/home'; } catch { setStatus({ kind: 'error', step: 'send', message: 'Network error. Try again.', }); } }; // ── Step 1: request the OTP code ─────────────────────────────── const sendCode = async (e) => { e.preventDefault(); const trimmed = email.trim(); if (!trimmed) return; setStatus({ kind: 'sending' }); try { const res = await fetch('/api/auth/magic-link', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ email: trimmed }), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.ok) { setStatus({ kind: 'error', step: 'send', message: json.error || 'Could not send the code. Try again.', }); return; } setStatus({ kind: 'codeSent', email: trimmed }); } catch { setStatus({ kind: 'error', step: 'send', message: 'Network error. Try again.', }); } }; // ── Step 2: submit the OTP code ─────────────────────────────── const verifyCode = async (e) => { e.preventDefault(); // Strip non-digits so a paste of "123 456" or "123-456" still works. // Supabase's OTP length is configurable (6–10 digits) — we accept // any length in that range so a future dashboard change doesn't // silently truncate. const cleaned = code.replace(/\D/g, ''); if (cleaned.length < 6) return; setStatus({ kind: 'verifying', email }); try { const res = await fetch('/api/auth/verify-otp', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ email, token: cleaned }), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.ok) { setStatus({ kind: 'error', step: 'verify', email, message: json.error || 'That code didn’t work. Try again or request a new one.', }); // Clear the bad code so retyping is unambiguous. setCode(''); return; } // Session cookies are now set. Send the visitor to the // signed-in landing. window.location.href = '/home'; } catch { setStatus({ kind: 'error', step: 'verify', email, message: 'Network error. Try again.', }); } }; const inStep2 = status.kind === 'codeSent' || status.kind === 'verifying' || (status.kind === 'error' && status.step === 'verify'); const errorMessage = status.kind === 'error' ? status.message : null; return (
{mode === 'password' ? "Enter your email and password." : "Enter your email and we'll send you a one-time code."}
{/* Mode toggle — subtle link under the primary CTA. OTP stays the default for visitors who came in via a magic-link invitation; admins enrolled with a password use this to switch modes. */}{mode === 'password' ? ( <> Prefer a one-time code?{' '} ) : ( <> Have a password?{' '} )}
Member accounts are created after joining a Sunday service. If you don't have one yet,{' '} plan a visit {' '} first.
)} {/* ── Step 2: enter the code ─────────────────────────── */} {inStep2 && ( <>We sent it to {status.email || email}. The code expires in a few minutes.