// v-auth.jsx — vendor auth/session UX: sign-in, session restore, expired session, role gate // ─── Field ─────────────────────────────────────────────────────────── const AUTH_FLD = { width:'100%', boxSizing:'border-box', background:'rgba(255,255,255,0.07)', border:'1px solid rgba(255,255,255,0.16)', borderRadius:12, padding:'13px 15px', fontFamily:'var(--font-body)', fontSize:14, color:'var(--dust-cream)', outline:'none' }; // ─── Sign-in screen (signed-out state) ─────────────────────────────── // states: idle → signingin → error (denied) | success → session function AuthScreen({ onSignIn, expired=false, inviteId=null }) { const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [confirmPw, setConfirmPw] = React.useState(''); const [mode, setMode] = React.useState(inviteId ? 'signup' : 'signin'); const [state, setState] = React.useState('idle'); // idle | signingin | error const [err, setErr] = React.useState(null); const [captchaState, setCaptchaState] = React.useState('loading'); const captchaContainerRef = React.useRef(null); const captchaTokenRef = React.useRef(''); const captchaWidgetRef = React.useRef(null); const captchaApiRef = React.useRef(null); React.useEffect(() => { let disposed = false; let timer = null; const siteKey = window.LASSO_RUNTIME_CONFIG?.turnstileSiteKey; const fail = () => { if (!disposed) setCaptchaState('unavailable'); }; const mount = () => { if (disposed || captchaWidgetRef.current !== null || !captchaContainerRef.current) return; if (!siteKey || !window.turnstile?.render) { fail(); return; } captchaApiRef.current = window.turnstile; captchaWidgetRef.current = captchaApiRef.current.render(captchaContainerRef.current, { sitekey: siteKey, callback(token) { captchaTokenRef.current = typeof token === 'string' ? token : ''; if (!disposed) setCaptchaState(captchaTokenRef.current ? 'verified' : 'unavailable'); }, 'expired-callback'() { captchaTokenRef.current = ''; if (!disposed) setCaptchaState('ready'); }, 'error-callback'() { captchaTokenRef.current = ''; fail(); }, }); if (!disposed) setCaptchaState('ready'); }; const startedAt = Date.now(); timer = window.setInterval(() => { if (window.turnstile?.render) { window.clearInterval(timer); timer = null; mount(); } else if (Date.now() - startedAt >= 8000) { window.clearInterval(timer); timer = null; fail(); } }, 50); return () => { disposed = true; if (timer) window.clearInterval(timer); if (captchaWidgetRef.current !== null && window.turnstile?.remove) window.turnstile.remove(captchaWidgetRef.current); }; }, []); const consumeCaptcha = () => { captchaTokenRef.current = ''; const responseField = captchaContainerRef.current?.querySelector('input[name="cf-turnstile-response"]'); if (responseField) responseField.value = ''; if (captchaWidgetRef.current !== null && captchaApiRef.current?.reset) captchaApiRef.current.reset(captchaWidgetRef.current); setCaptchaState('ready'); }; const submit = async () => { if (state==='signingin') return; setErr(null); setState('signingin'); if (!email.trim() || !pw.trim()) { setState('error'); setErr('Enter your email and password.'); return; } if (mode==='signup' && pw.length < 8) { setState('error'); setErr('Choose a password with at least 8 characters.'); return; } if (mode==='signup' && pw !== confirmPw) { setState('error'); setErr('Your passwords do not match.'); return; } try { const responseField = captchaContainerRef.current?.querySelector('input[name="cf-turnstile-response"]'); const captchaToken = captchaTokenRef.current || responseField?.value || ''; if (!captchaToken) throw new Error(captchaState==='unavailable' ? 'Security check is unavailable. Nothing has been submitted.' : 'Complete the security check before continuing. Nothing has been submitted.'); if (mode==='signup') { const result = await signUpVendor({ email:email.trim(), password:pw, captchaToken, inviteId }); if (result.confirmationRequired) { setState('confirmation'); return; } onSignIn(result.session); } else onSignIn(await signInVendor({ email:email.trim(), password:pw, captchaToken, inviteId })); } catch (error) { setState('error'); setErr(error instanceof Error ? error.message : 'No active vendor membership was found for this account.'); } finally { consumeCaptcha(); } }; return (
Vendor
{expired && (
Your session expired. Sign back in to keep managing orders — nothing was lost.
)}

{inviteId && mode==='signup' ? 'Join your kitchen' : 'Sign in to your kitchen'}

{inviteId && mode==='signup' ? 'Create your own password. Your invited role activates after you verify this email.' : 'Owner, manager and staff sign-ins each see what their role allows.'}

{state==='confirmation' ? (
Check your email to verify this address. Then return through the same invite link and sign in to activate your kitchen role.
) : <> {mode==='signup' && }
Forgot password?
{captchaState==='unavailable' &&

Security check is unavailable. Nothing has been submitted.

} {state==='error' && err && (
{err}
)} : }> {state==='signingin' ? (mode==='signup' ? 'Creating account…' : 'Signing in…') : (mode==='signup' ? 'Create account' : 'Sign in')} {inviteId && } }
Access is for active Lasso vendor owners, managers and staff. Your assigned role controls what you can open.
New restaurant? Apply to join Lasso →
); } // ─── Session restore splash ────────────────────────────────────────── function SessionRestoring() { return (
Restoring your session…
); } // ─── Expired-session overlay (kept context, re-auth in place) ──────── function SessionExpiredOverlay({ onSignBackIn, onSignOut }) { const [busy, setBusy] = React.useState(false); const go = () => { setBusy(true); setTimeout(onSignBackIn, 800); }; return (
Session expired

For security you've been signed out after inactivity. Sign back in to continue exactly where you left off — the kitchen queue is untouched.

: }> {busy ? 'Signing back in…' : 'Sign back in'}
); } // ─── Role-denied gate (mirrors RLS expectations) ───────────────────── function RoleDenied({ page, session }) { const r = ROLES[session.role]; return (

Your role can't open this

You're signed in as {r.name} ({r.label} — {r.access.toLowerCase()}). Ask your owner to upgrade your role if you need access here.

Access is enforced server-side by row-level security — this screen mirrors it.
); } Object.assign(window, { AuthScreen, SessionRestoring, SessionExpiredOverlay, RoleDenied });