// ============================================================ // AUTH MODAL — single-column gradient card with acid-green palette. // Supports three modes: login | signup | apply (Elite application). // No Google sign-in. Mouse-tilt 3D + traveling light beams + corner glow. // ============================================================ const AuthModal = ({ mode = 'login', onClose, onSuccess, onSwitch }) => { const isLogin = mode === 'login'; const isSignup = mode === 'signup'; const isApply = mode === 'apply'; const [data, setData] = React.useState({ name: '', email: '', password: '', phone: '', experience: '', }); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const [successMode, setSuccessMode] = React.useState(null); const [showPassword, setShowPassword] = React.useState(false); const [focused, setFocused] = React.useState(null); const [remember, setRemember] = React.useState(false); // Marketing & terms consent const [marketing, setMarketing] = React.useState(false); // optional in both flows const [terms, setTerms] = React.useState(false); // required in signup // 3D mouse tilt const cardRef = React.useRef(null); const [rot, setRot] = React.useState({ x: 0, y: 0 }); const onMouseMove = (e) => { const el = cardRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = e.clientX - r.left - r.width / 2; const y = e.clientY - r.top - r.height / 2; setRot({ x: -(y / r.height) * 10, y: (x / r.width) * 10 }); }; const onMouseLeave = () => setRot({ x: 0, y: 0 }); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [onClose]); React.useEffect(() => { setError(''); setShowPassword(false); setSuccessMode(null); setSubmitted(false); // Reset consent state when modal switches mode setMarketing(false); setTerms(false); }, [mode]); const noBackend = !window.sb; // After login/signup succeeds, hand the marketing preference to Brevo. // Safe to call without secrets configured — the edge function falls // back to a DB-only update. const syncMarketing = async (src) => { if (!window.sb) return; if (!marketing) return; // nothing to do try { await window.sb.functions.invoke('brevo-sync', { body: { action: 'subscribe', source: src, // 'signup' | 'login' tags: [ 'Free Member', 'Marketing Accepted', 'Not Elite', src === 'signup' ? 'Website Signup' : 'Website Login Opt-in', ], }, }); } catch (e) { // Don't block the user flow if Brevo is down — log and move on. console.warn('[brevo-sync] failed:', e); } }; const handleLogin = async (e) => { e.preventDefault(); setError(''); if (noBackend) { setError('Backend not configured. Edit config.js with your Supabase credentials.'); return; } if (!data.email || !data.password) { setError('Email și parolă sunt necesare.'); return; } setBusy(true); const { error } = await window.sb.auth.signInWithPassword({ email: data.email, password: data.password }); if (error) { setBusy(false); setError(error.message); return; } // After successful login, fire-and-forget the marketing sync if the user opted in. await syncMarketing('login'); setBusy(false); setSuccessMode('login_success'); }; const handleSignup = async (e) => { e.preventDefault(); setError(''); if (noBackend) { setError('Backend not configured. Edit config.js with your Supabase credentials.'); return; } if (!terms) { setError('Trebuie să accepți Termenii și Condițiile.'); return; } if (!data.email || !data.password) { setError('Email și parolă sunt necesare.'); return; } if (data.password.length < 6) { setError('Parola trebuie să aibă cel puțin 6 caractere.'); return; } setBusy(true); const nowIso = new Date().toISOString(); const { error } = await window.sb.auth.signUp({ email: data.email, password: data.password, options: { data: { name: data.name || data.email.split('@')[0], // Picked up by the handle_new_user trigger to seed profiles.* marketing_consent: !!marketing, marketing_consent_at: marketing ? nowIso : null, terms_accepted_at: nowIso, }, }, }); if (error) { setBusy(false); setError(error.message); return; } // Subscribe to Brevo only if the user opted in. await syncMarketing('signup'); setBusy(false); setSuccessMode('signup_success'); }; const continueAfterSuccess = () => { const m = successMode === 'signup_success' ? 'signup' : 'login'; setSuccessMode(null); onSuccess?.(m); }; const canSubmitApply = data.name.trim() && data.phone.trim(); const handleApply = async (e) => { e.preventDefault(); setError(''); if (!canSubmitApply) { setError('Completează toate câmpurile.'); return; } if (noBackend) { setError('Backend not configured. Edit config.js with your Supabase credentials.'); return; } setBusy(true); const { data: sessionData } = await window.sb.auth.getSession(); const uid = sessionData?.session?.user?.id ?? null; const { error } = await window.sb.from('elite_applications').insert({ user_id: uid, name: data.name.trim(), phone: data.phone.trim(), trading_experience: '—', }); setBusy(false); if (error) { setError(error.message); return; } setSubmitted(true); }; const headers = { login: { eyebrow: 'WELCOME BACK', title: 'Bine ai revenit', sub: 'Sign in to continue to Tyrone Trading' }, signup: { eyebrow: 'CREATE ACCOUNT', title: 'Creează cont free', sub: 'Acces la materialele gratuite ale comunității' }, apply: { eyebrow: 'ELITE · APPLICATION', title: 'Aplică pentru Elite', sub: 'Completează cele 2 câmpuri — te contactăm în maxim 24h' }, }; const h = headers[mode] || headers.login; const cardStyle = { transform: `perspective(1500px) rotateX(${rot.x}deg) rotateY(${rot.y}deg)`, transition: 'transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)', }; return (
{/* atmosphere */}
e.stopPropagation()}> {/* Traveling light beams on 4 edges */}
{/* Header (no brand logo — keeps the modal compact) */}
{h.eyebrow}

{h.title}

{h.sub}

{/* Success states */} {successMode && (

{successMode === 'signup_success' ? 'Cont creat' : 'Conectat cu succes'}

{successMode === 'signup_success' ? 'Contul tău a fost creat cu succes. Acces deblocat la materialele free.' : 'Te-ai conectat cu succes.'}

)} {/* LOGIN */} {!successMode && isLogin && (
setData({...data, email: e.target.value})} onFocus={() => setFocused('email')} onBlur={() => setFocused(null)} autoFocus />
setData({...data, password: e.target.value})} onFocus={() => setFocused('password')} onBlur={() => setFocused(null)} />
e.preventDefault()}>Forgot password?
{/* Optional marketing opt-in (login flow) */} {error &&
{error}
}

Nu ai cont?{' '} { e.preventDefault(); onSwitch('signup'); }}>Creează cont gratuit

Vrei Elite?{' '} { e.preventDefault(); onSwitch('apply'); }}>Aplică acum

)} {/* SIGNUP */} {!successMode && isSignup && (
setData({...data, name: e.target.value})} onFocus={() => setFocused('name')} onBlur={() => setFocused(null)} autoFocus />
setData({...data, email: e.target.value})} onFocus={() => setFocused('email')} onBlur={() => setFocused(null)} />
setData({...data, password: e.target.value})} onFocus={() => setFocused('password')} onBlur={() => setFocused(null)} />
{/* Consent — marketing (optional) + terms (required) */} {error &&
{error}
}

Ai deja cont?{' '} { e.preventDefault(); onSwitch('login'); }}>Login

)} {/* ELITE APPLY */} {!successMode && isApply && !submitted && (
setData({...data, name: e.target.value})} onFocus={() => setFocused('name')} onBlur={() => setFocused(null)} autoFocus />
setData({...data, phone: e.target.value})} onFocus={() => setFocused('phone')} onBlur={() => setFocused(null)} />
{error &&
{error}
}

Ai deja cont?{' '} { e.preventDefault(); onSwitch('login'); }}>Login

)} {/* APPLY SUCCESS */} {isApply && submitted && (

Aplicare trimisă

Aplicația ta a fost trimisă cu succes. Te vom contacta în maxim 24 de ore.

)}
); }; Object.assign(window, { AuthModal });