// Login screen for LineageLens — powered by Supabase Auth const { useState, useEffect } = React; function LoginScreen() { const [mode, setMode] = useState('signin'); // 'signin' | 'signup' | 'forgot' const [email, setEmail] = useState(() => localStorage.getItem('ll_email') || ''); const [password, setPassword] = useState(''); const [rememberMe, setRememberMe] = useState(() => localStorage.getItem('ll_remember') !== 'false'); const [isSubmitting, setIsSubmitting] = useState(false); const [oauthLoading, setOauthLoading] = useState(''); // 'google' | 'github' | '' const [error, setError] = useState(''); const [successMsg, setSuccessMsg] = useState(''); const [needsConfirm, setNeedsConfirm] = useState(false); const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const savedEmail = localStorage.getItem('ll_email') || ''; const persistEmail = (addr) => { localStorage.setItem('ll_remember', 'true'); localStorage.setItem('ll_email', addr); }; const forgetEmail = () => { localStorage.removeItem('ll_email'); localStorage.setItem('ll_remember', 'false'); setEmail(''); }; // Handle OAuth redirect back (Google/GitHub send user back with tokens in URL) useEffect(() => { const sb = window.supabaseClient; if (!sb) return; // If we're returning from an OAuth redirect, supabase picks it up automatically // via detectSessionInUrl: true. We just need to redirect if a session exists. sb.auth.getSession().then(({ data: { session } }) => { if (session) { if (session.user?.email) persistEmail(session.user.email); window.location.href = '/'; } }); }, []); const handleMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; const getFriendlyError = (message) => { if (!message) return 'Something went wrong. Please try again.'; if (message.includes('Invalid login credentials')) return 'Incorrect email or password. Please try again.'; if (message.includes('Email not confirmed')) return 'Please check your email and click the confirmation link before signing in.'; if (message.includes('User already registered')) return 'An account with this email already exists. Try signing in instead.'; if (message.includes('Password should be')) return 'Password must be at least 6 characters.'; if (message.includes('Unable to validate email')) return 'Please enter a valid email address.'; if (message.includes('rate limit')) return 'Too many attempts. Please wait a minute and try again.'; return message; }; const handleOAuth = async (provider) => { const sb = window.supabaseClient; if (!sb) { setError('Authentication service unavailable. Please reload the page.'); return; } setOauthLoading(provider); setError(''); try { const { error: oauthErr } = await sb.auth.signInWithOAuth({ provider, options: { redirectTo: window.location.origin + '/', } }); if (oauthErr) throw oauthErr; // Browser will redirect to provider — no need to do anything else } catch (err) { setError(getFriendlyError(err.message)); setOauthLoading(''); } }; const handleResendConfirmation = async () => { const sb = window.supabaseClient; if (!sb || !email) return; const { error: resendErr } = await sb.auth.resend({ type: 'signup', email }); if (resendErr) setError(getFriendlyError(resendErr.message)); else setSuccessMsg('Confirmation email resent! Check your inbox (and spam folder).'); setNeedsConfirm(false); }; const handleSubmit = async (e) => { e.preventDefault(); setError(''); setSuccessMsg(''); setNeedsConfirm(false); setIsSubmitting(true); const sb = window.supabaseClient; if (!sb) { setError('Authentication service is unavailable. Please reload the page and try again.'); setIsSubmitting(false); return; } try { if (mode === 'signup') { const { data, error: signUpError } = await sb.auth.signUp({ email, password, options: { emailRedirectTo: window.location.origin + '/' } }); if (signUpError) throw signUpError; if (data.user && data.user.identities && data.user.identities.length === 0) { // User already exists setError('An account with this email already exists. Try signing in instead.'); } else if (data.session) { // Email confirmation disabled — logged in straight away if (rememberMe) persistEmail(email); else forgetEmail(); window.location.href = '/'; } else { // Email confirmation required setSuccessMsg('Account created! Check your email for a confirmation link, then come back to sign in.'); } } else { const { data, error: signInError } = await sb.auth.signInWithPassword({ email, password }); if (signInError) { if (signInError.message.includes('Email not confirmed')) { setNeedsConfirm(true); } throw signInError; } if (data.session) { if (rememberMe) persistEmail(email); else forgetEmail(); window.location.href = '/'; } } } catch (err) { setError(getFriendlyError(err.message)); } finally { setIsSubmitting(false); } }; const handleForgotPassword = async (e) => { e.preventDefault(); if (!email) { setError('Please enter your email address.'); return; } const sb = window.supabaseClient; if (!sb) { setError('Authentication service unavailable. Please reload.'); return; } setIsSubmitting(true); setError(''); const { error: resetErr } = await sb.auth.resetPasswordForEmail(email, { redirectTo: window.location.origin + '/login', }); setIsSubmitting(false); if (resetErr) setError(getFriendlyError(resetErr.message)); else setSuccessMsg('Reset link sent! Check your inbox (and spam folder).'); }; const switchMode = (m) => { setMode(m); setError(''); setSuccessMsg(''); setNeedsConfirm(false); }; const isSignUp = mode === 'signup'; const isForgot = mode === 'forgot'; return (
{/* Background ambient glows */}
{/* Hover spotlight */}
{/* Header */}
{isForgot ? ( ) : ( )}

{isForgot ? 'Reset password' : isSignUp ? 'Create account' : 'Welcome back'}

{isForgot ? "Enter your email and we'll send you a reset link" : isSignUp ? 'Start your LineageLens journey' : 'Sign in to your LineageLens account'}

{/* Mode toggle — hidden on forgot screen */} {!isForgot && (
{['signin', 'signup'].map(m => ( ))}
)} {/* OAuth buttons — hidden on forgot screen */} {!isForgot && ( <>
or with email
)} {/* Error / Success */} {error && (
{error} {needsConfirm && ( )}
)} {successMsg && (
{successMsg}
)} {/* ---- FORGOT PASSWORD FORM ---- */} {isForgot ? ( <>
setEmail(e.target.value)} placeholder="you@company.com" required autoFocus style={inputStyle} />

) : ( /* ---- SIGN IN / SIGN UP FORM ---- */ <>
{savedEmail && email === savedEmail && ( )}
setEmail(e.target.value)} placeholder="you@company.com" required style={inputStyle} id="login-email" autoComplete="email" />
setPassword(e.target.value)} placeholder="••••••••" required minLength={6} style={inputStyle} id="login-password" autoComplete={isSignUp ? 'new-password' : 'current-password'} /> {isSignUp &&

Minimum 6 characters

}
{/* Remember me */}

{isSignUp ? <>Already have an account?{' '} : <>Don't have an account?{' '} }

)}
); } const socialBtnStyle = { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '10px 16px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 12, color: 'var(--text)', fontSize: 14, fontWeight: 500, cursor: 'pointer', transition: 'all 0.2s', outline: 'none', }; const labelStyle = { display: 'block', fontSize: 14, fontWeight: 500, marginBottom: 8, color: 'var(--text)' }; const inputStyle = { width: '100%', padding: '12px 16px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 12, color: 'var(--text)', fontSize: 15, outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s', boxSizing: 'border-box' }; if (typeof document !== 'undefined') { const s = document.createElement('style'); s.textContent = ` .login-card input:focus { border-color: var(--solo) !important; box-shadow: 0 0 0 3px rgba(88,166,255,0.2) !important; } #google-login-btn:hover, #github-login-btn:hover { background: var(--bg-3) !important; border-color: var(--border-muted) !important; } `; document.head.appendChild(s); } Object.assign(window, { LoginScreen });