/* ============================================================
OBSERVANT — Builder / team login (#8)
Gates the team workspace. Sign in with Google or a magic link,
then land in the dashboard. Self-contained (loads on its own
page); auth via window.ObservantAuth.
Redirect target after sign-in: /setup (the self-serve workspace,
served from app/SelfServe.html). Override with ?next=/somewhere.
============================================================ */
const { useState: useStateLG, useEffect: useEffectLG } = React;
function loginNext() {
const params = new URLSearchParams(window.location.search);
const next = params.get("next");
// Only allow same-origin relative paths — and never the /portal sample demo,
// so a real sign-in always lands in the user's own workspace, not Northwind.
if (next && /^\/[a-z0-9/_-]*$/i.test(next) && !/^\/portal(\/|$)/i.test(next)) return next;
return "/setup";
}
function TeamLogin() {
const [phase, setPhase] = useStateLG("loading"); // loading | signedout
const [email, setEmail] = useStateLG("");
const [sent, setSent] = useStateLG(false);
const [busy, setBusy] = useStateLG(false);
const [note, setNote] = useStateLG("");
const next = loginNext();
const emailValid = email.includes("@") && email.includes(".");
// Only forward automatically when we're COMPLETING a sign-in — i.e. returning
// from the Google / magic-link redirect, which carries a code/token in the URL.
// A plain visit to /login ALWAYS shows the sign-in screen, even if a session
// lingers from earlier — so "Sign in" reliably surfaces Google instead of
// silently skipping to /setup.
useEffectLG(() => {
let cancelled = false;
const s = window.location.search + window.location.hash;
const returning = /[?&#](code|access_token|token_hash)=/.test(s);
(async () => {
if (!returning) { setPhase("signedout"); return; }
const u = await ObservantAuth.getUser();
if (cancelled) return;
if (u) { window.location.replace(next); return; }
setPhase("signedout");
})();
let unsub = () => {};
if (returning) {
ObservantAuth.onAuth((u) => { if (u && !cancelled) window.location.replace(next); })
.then((fn) => { unsub = fn; });
}
return () => { cancelled = true; unsub(); };
}, []);
const google = async () => {
setBusy(true); setNote("");
// Return back to this login page; the effect above forwards to `next`
// once the session lands.
const { error } = await ObservantAuth.signInWithGoogle(window.location.href);
if (error) { setNote(error.message); setBusy(false); }
};
const magic = async () => {
if (!emailValid) return;
setBusy(true); setNote("");
const { error } = await ObservantAuth.signInWithEmail(email, window.location.href);
setBusy(false);
if (error) { setNote(error.message); return; }
setSent(true);
};
if (phase === "loading") {
return
Loading…
;
}
return (
Sign in
Access your team's workspace — your feedback programs, panel, and insights.
{sent ? (
Check your inbox — we sent a sign-in link to {email}.
) : (
or
setEmail(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter" && emailValid && !busy) magic(); }}
/>
Email me a sign-in link