// Paywall (in-app, faux Stripe) — also handles signup + login. // Renders when the user enters the dashboard while signed out (signup/login) // or signed in but not yet paid (pay only). const { useState: useStateGate } = React; // ===== Paywall ($7/month) — merged signup + payment ===== // If the user isn't signed in (no session prop), the form also collects // email + password and creates a Supabase account on submit before // marking them as paid. Returning users can toggle to a Log-in view. const Paywall = ({ onUnlock, onBack, session }) => { const isSignedIn = !!session; // If the URL has a "login=1" or auth-callback marker, prefer the login // tab so users coming back from the email confirmation link don't see // an empty signup form. const _wantsLogin = (() => { if (typeof window === "undefined") return false; const s = window.location.search || ""; const h = window.location.hash || ""; return s.includes("login=1") || s.includes("type=signup") || h.includes("type=signup") || h.includes("confirmed"); })(); const [mode, setMode] = useStateGate( isSignedIn ? "pay" : (_wantsLogin ? "login" : "signup") ); // "signup" | "login" | "pay" const [name, setName] = useStateGate(""); const [email, setEmail] = useStateGate(""); const [password, setPassword] = useStateGate(""); const [card, setCard] = useStateGate(""); const [exp, setExp] = useStateGate(""); const [cvc, setCvc] = useStateGate(""); const [processing, setProcessing] = useStateGate(false); const [err, setErr] = useStateGate(""); const [info, setInfo] = useStateGate(""); const supaConfigured = typeof window.SUPABASE_CONFIGURED === "function" && window.SUPABASE_CONFIGURED(); const prefillDemo = () => { // Fill name + card info, leave email/password for the user. setName("Jamie Rivera"); setCard("4242 4242 4242 4242"); setExp("12/28"); setCvc("123"); }; const switchMode = (m) => { setMode(m); setErr(""); setInfo(""); }; const forgotPassword = async () => { setErr(""); setInfo(""); const sb = window.getSupabase && window.getSupabase(); if (!sb) { setErr("Supabase not configured."); return; } if (!email.trim()) { setErr("Enter your email above first."); return; } try { const { error } = await sb.auth.resetPasswordForEmail(email.trim()); if (error) throw error; setInfo("If that email exists, a reset link is on its way."); } catch (e) { setErr((e && e.message) || "Could not send reset email."); } }; const pay = async (e) => { e.preventDefault(); setErr(""); setInfo(""); const sb = window.getSupabase && window.getSupabase(); // ---- LOGIN mode: just authenticate, then paywall component will be re-rendered with session ---- if (mode === "login") { if (!sb) { setErr("Supabase not configured yet."); return; } if (!email.trim() || !password) { setErr("Email and password required."); return; } setProcessing(true); try { const { error } = await sb.auth.signInWithPassword({ email: email.trim(), password }); if (error) throw error; // App will detect new session via onAuthStateChange and re-render us. // If the user is already paid, App will skip past us to the dashboard. } catch (ex) { setErr((ex && ex.message) || "Could not log in."); } finally { setProcessing(false); } return; } // ---- SIGNUP and PAY both require name + card details ---- if (!name.trim()) { setErr("Add the name on the card."); return; } // Card validation — required before we'll let signup or pay through. const cardDigits = (card || "").replace(/\D/g, ""); if (cardDigits.length < 13 || cardDigits.length > 19) { setErr("Enter a valid card number."); return; } if (!/^\d{2}\/\d{2}$/.test((exp || "").trim())) { setErr("Expiry must be in MM/YY format."); return; } if (!/^\d{3,4}$/.test((cvc || "").trim())) { setErr("CVC must be 3 or 4 digits."); return; } // ---- SIGNUP mode: create account first, then mark paid ---- if (mode === "signup") { if (!sb) { setErr("Supabase not configured yet."); return; } if (!email.trim() || !password) { setErr("Email and password required."); return; } if (password.length < 6) { setErr("Password must be at least 6 characters."); return; } setProcessing(true); try { const { data, error } = await sb.auth.signUp({ email: email.trim(), password, options: { data: { name: name.trim() }, // After clicking the confirm link, return to the dashboard // route with a "login=1" flag so the form defaults to the // login tab. Don't append a hash — Supabase appends its // own auth tokens to the hash, and overlapping fragments // confuse the URL parser. emailRedirectTo: window.location.origin + "/?dashboard=1&login=1", }, }); if (error) throw error; // Card was already validated above — mark them paid locally now // so we don't ask again after they confirm + sign in. The next // time they're authenticated, App.jsx will sync this flag to // their profiles row. try { localStorage.setItem("pp_paid", "1"); } catch (_) {} try { localStorage.setItem("pp_name", name.trim()); } catch (_) {} if (!data.session) { // Email confirmation is on. Tell the user — but their trial is // already set up; they just need to confirm and log in. setProcessing(false); setInfo("Trial set up! Check your inbox to confirm your email, then sign in to access your dashboard."); return; } // Otherwise we have a session already — fall through to the paid step. } catch (ex) { setProcessing(false); setErr((ex && ex.message) || "Could not create account."); return; } } // ---- Mark paid (faux Stripe) ---- if (!processing) setProcessing(true); setTimeout(() => { try { localStorage.setItem("pp_paid", "1"); } catch (_) {} try { localStorage.setItem("pp_name", name.trim()); } catch (_) {} onUnlock(); }, 1100); }; return (
{/* Left: pitch */}
← back to reading

Your numbers, your stack, all in one place.

The Index and Weekly Reader stay free forever. The Dashboard — where Splat reads your labs, tracks your stack and nudges you at the right moment — is $7/mo. Cancel anytime from settings.

  • ✓ Personal stack tracker · doses, timing, streaks
  • ✓ Biomarker trends · upload a PDF, Splat reads it
  • ✓ 8-week cycle timeline · taper, wash, repeat
  • ✓ Supply tracker · "you have 6 days of Mots-C left"
  • ✓ The floating Splat, nudging in context
Splat, probably:

"i read 2,000+ papers so you don't have to. seven bucks feels fair, right?"

{/* Right: checkout */}
$7/mo
7-day free trial · cancel anytime
● 4,218 members
PeptidePal Dashboard · monthly $7.00
Splat's Tips (included) free
Due today $0.00
$7.00 will be charged after your 7-day trial ends.
{isSignedIn && (
✓
You're signed in{session && session.user && session.user.email ? ` as ${session.user.email}` : ""}.
One last step — confirm your card to start your free trial.
)} {!isSignedIn && (
)} {!supaConfigured && (
※ Supabase not configured yet — paste your project credentials into src/supabase.js.
)}
{mode === "signup" && ( <> setEmail(e.target.value)} autoComplete="email" required /> setPassword(e.target.value)} autoComplete="new-password" minLength={6} required />
)} {mode === "login" && ( <> setEmail(e.target.value)} autoComplete="email" required /> setPassword(e.target.value)} autoComplete="current-password" required /> )} {mode !== "login" && ( <> setName(e.target.value)} required /> setCard(e.target.value)} inputMode="numeric" maxLength={19} />
setExp(e.target.value)} maxLength={5} />
setCvc(e.target.value)} maxLength={4} />
)} {err && (
{err}
)} {info && (
{info}
)}
🔒 Secured by · no commitment · cancel from settings
); }; Object.assign(window, { Paywall });