/* =========================================================================
* Python Tutor — /account (signed-in status page)
* -----------------------------------------------------------------------
* Per web_builder_instructions.md §5:
* - Not signed in → "Sign in with Google" CTA.
* - Signed in → photo + email + name + checkAllowlist() result.
* - allowed → green "you're all set"
* - reason: pending_allowlist_… → amber "pending approval"
* - error → red error message
* - Sign-out button at the bottom.
*
* We never write to Firestore from here — the apps own all teaching
* data (per §1 / §12 in the contract). This page is read-only status.
* =======================================================================*/
const { useState, useEffect, useCallback } = React;
function PythonTutorAccount({ onNavigate }) {
const [user, setUser] = useState(null);
// gateState: 'idle' | 'loading' | 'allowed' | 'pending' | 'error'
const [gateState, setGateState] = useState("idle");
const [gateRole, setGateRole] = useState(null);
const [gateError, setGateError] = useState("");
const [signingIn, setSigningIn] = useState(false);
useEffect(() => {
const off = window.PYTHON_TUTOR_AUTH.onUserChange((u) => setUser(u));
return () => { try { off && off(); } catch {} };
}, []);
// Re-run the gate check whenever the signed-in user changes. Reset the
// gate state if they sign out so we don't show stale "you're all set"
// copy underneath the sign-in CTA.
useEffect(() => {
if (!user) { setGateState("idle"); setGateRole(null); setGateError(""); return; }
let cancelled = false;
setGateState("loading");
setGateError("");
window.PYTHON_TUTOR_FUNCTIONS.checkAllowlist()
.then((res) => {
if (cancelled) return;
if (res && res.allowed) {
setGateRole(res.role || "allowlist");
setGateState("allowed");
} else if (res && res.reason === "pending_allowlist_approval") {
setGateState("pending");
} else {
setGateState("error");
setGateError("Unknown response from allowlist check.");
}
})
.catch((err) => {
if (cancelled) return;
setGateError((err && (err.message || err.code)) || String(err));
setGateState("error");
});
return () => { cancelled = true; };
}, [user && user.uid]);
const onSignIn = useCallback(async () => {
setSigningIn(true);
try {
await window.PYTHON_TUTOR_AUTH.signInWithGoogle();
} catch (err) {
// The redirect fallback never throws here; this branch is the
// genuine "popup closed by user" / blocked case. The auth state
// listener takes care of everything else.
console.warn("[python-tutor] sign-in failed:", err);
} finally {
setSigningIn(false);
}
}, []);
const onSignOut = useCallback(async () => {
await window.PYTHON_TUTOR_AUTH.signOut();
}, []);
return (
);
}
function SignInCTA({ onSignIn, signingIn }) {
return (
Your Python Tutor account
Sign in to check your access.
Sign in with the same Google account you'll use in the Python
Tutor desktop and Android apps. We'll show you whether your
account is on the allowlist.
);
}
function AccountPanel({ user, gateState, gateRole, gateError, onSignOut }) {
return (
Your Python Tutor account
{/* Identity card. Uses .pt-feature for the framed look — no new
design tokens, just reuse what styles-python.css already has. */}
{user.photoURL ? (
) : (
{(user.name || user.email || "?").slice(0, 1).toUpperCase()}
)}
{user.name || "Signed in"}
{user.email}
);
}
function GateBadge({ gateState, gateRole, gateError }) {
if (gateState === "loading" || gateState === "idle") {
return (
Status
Checking your access…
);
}
if (gateState === "allowed") {
return (
{gateRole === "owner" ? "Owner" : "You're all set"}
Access granted
Open the Python Tutor desktop app or Android app and sign in with
this Google account.
);
}
if (gateState === "pending") {
return (
Pending approval
Your email isn't on the allowlist yet
Contact Seth at{" "}
sethbenricks@gmail.com
{" "}to request access. Once your account is added, refresh this page.
);
}
// error
return (
Allowlist check failed
{gateError || "Couldn't reach the allowlist server."}
);
}
// ----- Tiny inline icons + shared bits ----------------------------------
function CheckIcon() {
return (
);
}
function WarnIcon() {
return (
);
}
function Topbar({ onNavigate }) {
// PyBrand from brandmark.jsx — the new ">_" mark, replacing the prior
// inline P-glyph so the topbar matches the brandmark.jsx logo.
return (
);
}
function Footer() {
return (
);
}
window.PythonTutorAccount = PythonTutorAccount;