{emailStatus === 'taken' ? 'Email already in use, use another or sign in.'
: emailStatus === 'checking' ? 'Checking…'
: (email && !emailOk ? 'That doesn’t look like an email yet.' : '')}
{emailStatus === 'taken' && (
Sign in
)}
) },
{ key: 'password', eyebrow: 'Sign-in details', title: 'Create a password', hint: 'At least 6 characters', valid: password.length >= 6,
field: },
{ key: 'handle', eyebrow: 'Almost there', title: 'Pick a display name', valid: handleStatus === 'available',
field: (
) },
{ key: 'refCode', eyebrow: 'Last step — optional', title: 'Got a referral code?',
hint: 'Leave it blank to skip.',
valid: !refCode.trim() || refStatus === 'valid',
field: (
setRefCode(e.target.value)} placeholder="SBX-XXXX"
autoCapitalize="characters" autoCorrect="off" autoComplete="off" spellCheck={false} maxLength={12}
style={{
width: '100%', boxSizing: 'border-box', textAlign: 'center',
background: 'rgba(255,255,255,0.08)',
border: `1px solid ${refStatus === 'invalid' ? 'var(--loss-soft)' : refStatus === 'valid' ? 'rgba(234,226,206,0.8)' : 'rgba(234,226,206,0.25)'}`,
borderRadius: 14, padding: '15px 14px', color: 'var(--paper)',
fontSize: 20, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', outline: 'none',
textTransform: 'uppercase', transition: 'border-color 0.15s',
}}/>
{refStatus === 'valid' ? '✓ $10 off your first round is loaded.'
: refStatus === 'invalid' ? 'Code not found — check it or leave blank.'
: refStatus === 'checking' ? 'Checking…'
: ''}
) },
];
const last = steps.length - 1;
const cur = steps[step];
// Keyboard-aware: when the on-screen keyboard opens the visual viewport shrinks.
// We lift the centered content by half that amount so it re-centers in the
// space that's left; when the keyboard hides, it eases back to centre.
const inset = useKeyboardInset();
// Drop focus when moving between steps so the keyboard tucks away and you see
// the screen first — you tap the field to bring it back.
function blur() { if (document.activeElement && document.activeElement.blur) document.activeElement.blur(); }
function next() {
if (!cur.valid || busy) return;
blur();
if (step < last) { setErr(''); setStep(s => s + 1); }
else submit();
}
function back() {
blur();
if (step === 0) onBack();
else { setErr(''); setStep(s => s - 1); }
}
async function submit() {
setBusy(true); setErr('');
// Stash the typed referral code BEFORE the account exists — the App
// claims it automatically once the profile lands (typed wins over any
// share-link attribution).
if (refCode.trim() && refStatus === 'valid') setTypedReferralCode(refCode);
// Create the auth user once. If a later retry happens (e.g. handle taken),
// reuse the existing user instead of signing up again with the same email.
let userId = createdUserId;
if (!userId) {
const { data: signUpData, error: signUpErr } = await sbx.auth.signUp({ email: email.trim(), password });
if (signUpErr) { setErr(signUpErr.message); setBusy(false); return; }
const user = signUpData.user;
if (!user) { setErr('Sign-up did not return a user. Check your email confirmation settings.'); setBusy(false); return; }
if (!signUpData.session) { setErr('Account created. Check your email for a confirmation link, then sign in.'); setBusy(false); return; }
userId = user.id;
setCreatedUserId(userId);
}
// Branded bouncing-logo loader while we finish + land in the app.
if (window.spp_beginLanding) window.spp_beginLanding();
const landedAt = Date.now();
// New users start unrated — SBX 0 (no history), not the table's 4.0 default.
const { error: profileErr } = await sbx.from('profiles').upsert({
id: userId, first_name: firstName.trim(), last_name: lastName.trim(),
gender: gender || null, dob: dob || null, handle: '@' + cleanHandle, sbx: 0,
}, { onConflict: 'id' });
if (profileErr) {
if (window.spp_endLanding) window.spp_endLanding();
if (/duplicate|unique/i.test(profileErr.message)) {
// Handle was taken in the moment between the check and the insert.
setHandleStatus('taken');
setStep(steps.findIndex(s => s.key === 'handle'));
setErr('That display name was just taken — pick another.');
} else {
setErr('Account created but profile save failed: ' + profileErr.message);
}
setBusy(false);
return;
}
// Hold the bounce for at least 2s, then load the app (gate routes to home).
const elapsed = Date.now() - landedAt;
if (elapsed < 2000) await new Promise(r => setTimeout(r, 2000 - elapsed));
if (window.reloadProfile) await window.reloadProfile();
if (window.spp_endLanding) window.spp_endLanding();
setBusy(false);
}
return (
{/* Centered content — lifts up by half the keyboard height when focused */}
{/* Progress */}
{steps.map((s, i) => (
))}
{/* Sliding questions */}
{steps.map((s, i) => (
{s.eyebrow}
{s.title}
{s.field}
{s.hint &&
{s.hint}
}
{/* Next / submit, right under the field (hidden when email is taken — the Sign in button takes over) */}
{!(s.key === 'email' && emailStatus === 'taken') && (
{i < last ? 'Next' : (busy ? 'Creating…' : 'Create account')}
{!busy && }
)}
))}
{err &&
{err}
}
);
}
// ─── Keyboard inset (visual viewport) ────────────────────────
function useKeyboardInset() {
const [inset, setInset] = React.useState(0);
React.useEffect(() => {
const vv = window.visualViewport;
if (!vv) return undefined;
const onResize = () => setInset(Math.max(0, window.innerHeight - vv.height - vv.offsetTop));
vv.addEventListener('resize', onResize);
vv.addEventListener('scroll', onResize);
onResize();
return () => { vv.removeEventListener('resize', onResize); vv.removeEventListener('scroll', onResize); };
}, []);
return inset;
}
// ─── Choice buttons (gender) ─────────────────────────────────
function ChoiceButtons({ value, onChange, options }) {
return (
{options.map(([v, l]) => {
const on = value === v;
return (
onChange(v)} style={{
padding: '15px 16px', borderRadius: 14, fontSize: 16, fontWeight: 600, fontFamily: 'var(--font-body)',
cursor: 'pointer', transition: 'background 0.15s, border-color 0.15s',
background: on ? 'var(--paper)' : 'rgba(255,255,255,0.08)',
border: `1px solid ${on ? 'var(--paper)' : 'rgba(234,226,206,0.2)'}`,
color: on ? 'var(--forest)' : 'var(--paper)',
}}>{l}
);
})}
);
}
// ─── Birthday wheel picker ───────────────────────────────────
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function WheelPicker({ value, onChange }) {
const thisYear = new Date().getFullYear();
const years = React.useMemo(() => { const a = []; for (let y = thisYear - 13; y >= 1925; y--) a.push(y); return a; }, [thisYear]);
const days = React.useMemo(() => Array.from({ length: 31 }, (_, i) => i + 1), []);
const parsed = (value && /^\d{4}-\d{2}-\d{2}$/.test(value)) ? value.split('-').map(Number) : null;
const [y, setY] = React.useState(parsed ? parsed[0] : thisYear - 25);
const [m, setM] = React.useState(parsed ? parsed[1] : 1); // 1-12
const [d, setD] = React.useState(parsed ? parsed[2] : 1); // 1-31
React.useEffect(() => {
onChange(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [y, m, d]);
return (
{/* Selected band */}
i + 1)} value={m} onChange={setM} fmt={(mm) => MONTHS[mm - 1]}/>
{items.map((it) => {
const on = it === value;
return (
{fmt(it)}
);
})}
);
}
// ─── Sign In ─────────────────────────────────────────────────
function SignInView({ onBack, onSignUpInstead, onForgot }) {
const [identity, setIdentity] = React.useState(''); // email or @handle
const [password, setPassword] = React.useState('');
const [remember, setRemember] = React.useState(true);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
async function submit(e) {
e.preventDefault();
if (!identity || !password || busy) return;
setBusy(true); setErr('');
// Resolve to an email. Strict email-shape regex so "@handle" or
// a bare "handle" both go through the username path. If it doesn't
// match the email regex, look up the email via the email_for_handle
// RPC (SECURITY DEFINER on the server, normalizes @-prefix).
let email = identity.trim();
const isEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
if (!isEmail) {
const handle = email.replace(/^@/, '').toLowerCase();
const { data: foundEmail, error: lookupErr } = await sbx.rpc('email_for_handle', { handle_input: handle });
if (lookupErr || !foundEmail) {
setErr('No account found for that username. Try signing in with your email instead.');
setBusy(false);
return;
}
email = foundEmail;
}
const { error } = await sbx.auth.signInWithPassword({ email, password });
if (error) { setErr(error.message); setBusy(false); return; }
// "Remember me" controls session persistence past tab close.
// Supabase persists in localStorage by default (≈ "remember on").
// If the user unchecked it, sign them out when the tab/window closes.
if (!remember) {
sessionStorage.setItem('spp_session_only', '1');
window.addEventListener('beforeunload', () => { sbx.auth.signOut(); });
} else {
sessionStorage.removeItem('spp_session_only');
}
// Branded bouncing-logo loader for at least 2s, then land in the app.
if (window.spp_beginLanding) window.spp_beginLanding();
await new Promise(r => setTimeout(r, 2000));
if (window.spp_endLanding) window.spp_endLanding();
setBusy(false);
// AuthGate picks up the new session automatically.
}
const inset = useKeyboardInset();
return (
);
}
// ─── Forgot password (request reset email) ──────────────────
function ForgotPasswordView({ onBack }) {
const [email, setEmail] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const [sent, setSent] = React.useState(false);
async function submit(e) {
e.preventDefault();
if (!email.trim() || busy) return;
setBusy(true); setErr('');
const { error } = await sbx.auth.resetPasswordForEmail(email.trim(), {
redirectTo: window.redirectOrigin ? window.redirectOrigin() : (window.location.origin + window.location.pathname),
});
if (error) { setErr(error.message); setBusy(false); return; }
setSent(true);
setBusy(false);
}
return (
);
}
// ─── Reset password (set new password after clicking email link) ────
// Rendered when the app is opened via a password-recovery link: Supabase
// fires a PASSWORD_RECOVERY auth event, which Root detects via useRecovering.
function ResetPasswordScreen({ onDone }) {
const [password, setPassword] = React.useState('');
const [confirm, setConfirm] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const valid = password.length >= 6 && password === confirm;
async function submit(e) {
e.preventDefault();
if (!valid || busy) return;
setBusy(true); setErr('');
const { error } = await sbx.auth.updateUser({ password });
if (error) { setErr(error.message); setBusy(false); return; }
setBusy(false);
onDone && onDone();
}
return (
);
}
// ─── Profile completion (for users signed up elsewhere w/o profile row) ───
function ProfileSetupScreen({ session, onDone }) {
const [firstName, setFirstName] = React.useState('');
const [lastName, setLastName] = React.useState('');
const [gender, setGender] = React.useState('');
const [dob, setDob] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const valid = firstName.trim() && lastName.trim();
async function submit(e) {
e.preventDefault();
if (!valid || busy) return;
setBusy(true); setErr('');
// No handle here — DisplayNameScreen picks it up next.
const { error } = await sbx.from('profiles').insert({
id: session.user.id,
first_name: firstName.trim(),
last_name: lastName.trim(),
gender: gender || null,
dob: dob || null,
sbx: 0,
});
if (error) { setErr(error.message); setBusy(false); return; }
setBusy(false);
onDone && onDone();
}
return (
);
}
// ─── Small form primitives ───────────────────────────────────
function Row({ children }) {
return {children}
;
}
function Field({ label, required, hint, children }) {
return (
{label} {required && * }
{children}
{hint && {hint}
}
);
}
function Input({ value, onChange, type = 'text', ...rest }) {
return (
onChange(e.target.value)}
style={{
width: '100%', padding: '13px 14px',
borderRadius: 12,
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(234,226,206,0.2)',
color: 'var(--paper)',
fontSize: 15, fontFamily: 'var(--font-body)',
outline: 'none',
appearance: 'none',
}}
>
{options.map(([v, l]) => {l} )}
);
}
function BackButton({ onClick }) {
return (
);
}
// ─── Display name (handle) step ──────────────────────────────
// Shown right after sign-up for new accounts, or from MatchHub when an
// existing user wants to change their @handle. Validates format + uniqueness
// as the user types, with a 400ms debounce.
// onDone: optional — if provided, called after save instead of relying on Root's gate
// onCancel: optional — shows a back button and calls this when pressed
function DisplayNameScreen({ profile, onDone, onCancel }) {
const currentClean = profile.handle ? profile.handle.replace(/^@/, '') : '';
const [raw, setRaw] = React.useState(currentClean);
const [status, setStatus] = React.useState(currentClean ? 'available' : 'idle'); // idle | checking | available | taken | invalid
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const clean = sanitizeHandle(raw);
const validFormat = isValidHandle(clean);
// Debounced uniqueness check. If the typed name matches the user's current
// handle, treat as available (so re-opening the screen with the existing
// handle doesn't show as "taken by yourself").
React.useEffect(() => {
if (!raw) { setStatus('idle'); return; }
if (!validFormat) { setStatus('invalid'); return; }
if (clean === currentClean) { setStatus('available'); return; }
setStatus('checking');
const t = setTimeout(async () => {
const { data } = await sbx.from('profiles').select('id').eq('handle', '@' + clean).maybeSingle();
if (!data || data.id === profile.id) setStatus('available');
else setStatus('taken');
}, 400);
return () => clearTimeout(t);
}, [raw, clean, validFormat, profile.id, currentClean]);
const isChange = Boolean(profile.handle);
const noChangeFromCurrent = clean === currentClean;
async function submit(e) {
e.preventDefault();
if (status !== 'available' || busy) return;
// No-op save when opening the change screen and pressing continue without edits.
if (noChangeFromCurrent) { onDone ? onDone() : null; return; }
setBusy(true); setErr('');
const { error } = await sbx.from('profiles').update({ handle: '@' + clean }).eq('id', profile.id);
if (error) {
if (/duplicate|unique/i.test(error.message)) {
setStatus('taken');
setErr('That name was just taken. Try another.');
} else {
setErr(error.message);
}
setBusy(false);
return;
}
if (window.reloadProfile) await window.reloadProfile();
setBusy(false);
if (onDone) onDone();
}
return (
);
}
// ─── Handle validation + UI helpers ──────────────────────────
// Handle rules: 3–20 chars; lowercase letters, digits, underscore.
// Stripping happens live (uppercase is lowercased, other chars dropped).
function sanitizeHandle(raw) {
return (raw || '').toLowerCase().replace(/[^a-z0-9_]/g, '').slice(0, 20);
}
function isValidHandle(clean) {
return /^[a-z0-9_]{3,20}$/.test(clean);
}
function borderFor(status) {
if (status === 'available') return 'rgba(62,138,87,0.9)';
if (status === 'taken' || status === 'invalid') return 'rgba(231,184,167,0.6)';
return 'rgba(234,226,206,0.2)';
}
function statusTextColor(status) {
if (status === 'available') return 'rgba(201,216,190,1)';
if (status === 'taken' || status === 'invalid') return 'var(--loss-soft)';
return 'rgba(234,226,206,0.6)';
}
function statusText(status, clean) {
switch (status) {
case 'idle': return '3–20 characters. Letters, numbers, underscores.';
case 'checking': return 'Checking…';
case 'available': return `✓ @${clean} is yours.`;
case 'taken': return `✗ @${clean} is taken.`;
case 'invalid': return clean.length < 3
? 'Too short — at least 3 characters.'
: 'Only letters, numbers, and underscores.';
default: return '';
}
}
function StatusIcon({ status }) {
const size = 22;
if (status === 'available') {
return (
);
}
if (status === 'taken' || status === 'invalid') {
return (
);
}
if (status === 'checking') {
return (
);
}
return
;
}
Object.assign(window, { AuthScreens, ProfileSetupScreen, DisplayNameScreen, ResetPasswordScreen });
{view === 'welcome' &&