// auth.jsx — Cloudflare Worker backend auth (instant access, no email verification) const { useState, useEffect } = React; const STORAGE_JWT = "skill:jwt"; const API_URL = "https://skilled-cloud.papawhomaomao.workers.dev"; function useAuth() { const [email, setEmail] = useState(null); const [role, setRole] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const validateSession = async () => { const jwt = localStorage.getItem(STORAGE_JWT); if (!jwt) { setLoading(false); return; } try { const r = await fetch(`${API_URL}/auth/me`, { headers: { Authorization: `Bearer ${jwt}` } }); const data = await r.json(); if (data.ok) { setEmail(data.email); setRole(data.role || "user"); } else { localStorage.removeItem(STORAGE_JWT); } } catch (e) { console.error("Session validation failed:", e); localStorage.removeItem(STORAGE_JWT); } setLoading(false); }; validateSession(); }, []); const signUp = async (em, pw, displayName) => { em = em.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)) return { ok: false, error: "Enter a valid email address." }; if (pw.length < 8) return { ok: false, error: "Password must be at least 8 characters." }; try { const r = await fetch(`${API_URL}/auth/signup`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: em, password: pw, displayName: displayName || em.split("@")[0] }) }); const data = await r.json(); // Instant access - no verification needed if (data.ok && data.jwt) { localStorage.setItem(STORAGE_JWT, data.jwt); setEmail(data.email || em); setRole(data.role || "user"); } return data; // { ok, jwt } or { ok: false, error } } catch (e) { return { ok: false, error: "Network error. Try again." }; } }; const signIn = async (em, pw) => { em = em.trim().toLowerCase(); try { const r = await fetch(`${API_URL}/auth/login`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: em, password: pw }) }); const data = await r.json(); if (data.ok) { localStorage.setItem(STORAGE_JWT, data.jwt); setEmail(em); setRole(data.role || "user"); } return data; } catch (e) { return { ok: false, error: "Network error. Try again." }; } }; const signOut = () => { localStorage.removeItem(STORAGE_JWT); setEmail(null); setRole(null); }; const getJWT = () => localStorage.getItem(STORAGE_JWT); return { email, role, loading, error, signUp, signIn, signOut, getJWT }; } // Helper: authenticated fetch for later use async function authenticatedFetch(path, options = {}) { const jwt = localStorage.getItem(STORAGE_JWT); return fetch(`${API_URL}${path}`, { ...options, headers: { ...options.headers, Authorization: `Bearer ${jwt}` } }); } function AuthModal({ open, mode: initialMode, onClose, auth }) { const [mode, setMode] = useState(initialMode || "signin"); // 'signin' | 'signup' const [em, setEm] = useState(""); const [pw, setPw] = useState(""); const [displayName, setDisplayName] = useState(""); const [err, setErr] = useState(""); const [showPw, setShowPw] = useState(false); const [loading, setLoading] = useState(false); useEffect(() => { if (open) { setMode(initialMode || "signin"); setEm(""); setPw(""); setDisplayName(""); setErr(""); } }, [open, initialMode]); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const handleSignUp = async (e) => { e.preventDefault(); setErr(""); setLoading(true); const r = await auth.signUp(em, pw, displayName); setLoading(false); if (r.ok) { onClose(); } else { setErr(r.error); } }; const handleSignIn = async (e) => { e.preventDefault(); setErr(""); setLoading(true); const r = await auth.signIn(em, pw); setLoading(false); if (r.ok) { onClose(); } else { setErr(r.error); } }; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 440, padding: 36, borderRadius: 16, position: "relative", animation: "auth-rise 0.25s cubic-bezier(.2,.8,.2,1)", boxShadow: "0 40px 80px -20px oklch(0 0 0 / 0.6), 0 0 60px -20px var(--acc-glow)", borderColor: "var(--acc-line)", background: "linear-gradient(180deg, oklch(0.11 0.014 275 / 0.96), oklch(0.08 0.012 275 / 0.96))", }}>
S
Skill ACCOUNT
{["signin", "signup"].map(m => ( ))}

{mode === "signin" ? "Welcome back." : "Create an account."}

{mode === "signin" ? "Sign in to manage your license and configs." : "One account, three devices, lifetime updates."}

setEm(e.target.value)} placeholder="you@domain.com" autoComplete="email" required disabled={loading} style={{ height: 44, padding: "0 14px", background: "oklch(1 0 0 / 0.04)", border: "1px solid var(--line-strong)", borderRadius: 9, color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 14, outline: "none", transition: "border-color 0.15s ease, box-shadow 0.15s ease", opacity: loading ? 0.6 : 1, }} onFocus={(e) => { e.target.style.borderColor = "var(--acc-line)"; e.target.style.boxShadow = "0 0 0 4px var(--acc-soft)"; }} onBlur={(e) => { e.target.style.borderColor = "var(--line-strong)"; e.target.style.boxShadow = "none"; }} />
{mode === "signup" && (
setDisplayName(e.target.value)} placeholder="Your name" disabled={loading} style={{ height: 44, padding: "0 14px", background: "oklch(1 0 0 / 0.04)", border: "1px solid var(--line-strong)", borderRadius: 9, color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 14, outline: "none", transition: "border-color 0.15s ease, box-shadow 0.15s ease", opacity: loading ? 0.6 : 1, }} onFocus={(e) => { e.target.style.borderColor = "var(--acc-line)"; e.target.style.boxShadow = "0 0 0 4px var(--acc-soft)"; }} onBlur={(e) => { e.target.style.borderColor = "var(--line-strong)"; e.target.style.boxShadow = "none"; }} />
)}
setPw(e.target.value)} placeholder={mode === "signup" ? "at least 8 characters" : "••••••••••"} autoComplete={mode === "signin" ? "current-password" : "new-password"} required disabled={loading} style={{ width: "100%", height: 44, padding: "0 44px 0 14px", background: "oklch(1 0 0 / 0.04)", border: "1px solid var(--line-strong)", borderRadius: 9, color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 14, outline: "none", transition: "border-color 0.15s ease, box-shadow 0.15s ease", opacity: loading ? 0.6 : 1, }} onFocus={(e) => { e.target.style.borderColor = "var(--acc-line)"; e.target.style.boxShadow = "0 0 0 4px var(--acc-soft)"; }} onBlur={(e) => { e.target.style.borderColor = "var(--line-strong)"; e.target.style.boxShadow = "none"; }} />
{err && (
{err}
)}

{mode === "signin" ? ( <>Don't have an account?{" "} { e.preventDefault(); setMode("signup"); setErr(""); }} style={{ color: "var(--acc)" }}>Sign up ) : ( <>Already have one?{" "} { e.preventDefault(); setMode("signin"); setErr(""); }} style={{ color: "var(--acc)" }}>Sign in )}

); } function UserMenu({ auth, onDashboard }) { const [open, setOpen] = useState(false); useEffect(() => { if (!open) return; const onClick = (e) => { if (!e.target.closest("[data-user-menu]")) setOpen(false); }; window.addEventListener("click", onClick); return () => window.removeEventListener("click", onClick); }, [open]); const initials = (auth.email || "?").slice(0, 2).toUpperCase(); const handle = auth.email ? auth.email.split("@")[0] : ""; return (
{open && (
Signed in as
{auth.email}
{ setOpen(false); onDashboard && onDashboard(); }} />
)}
); } function MenuItem({ icon, label, badge, onClick, danger }) { const icons = { dashboard: , key: <>, device: <>, gear: <>, signout: <>, }; return ( ); } // Announcements (unchanged from before) const STORAGE_ANNOUNCEMENTS = "skill:announcements"; function readAnnouncements() { try { return JSON.parse(localStorage.getItem(STORAGE_ANNOUNCEMENTS)) || []; } catch { return []; } } function writeAnnouncements(a) { localStorage.setItem(STORAGE_ANNOUNCEMENTS, JSON.stringify(a)); } function useAnnouncements() { const [list, setList] = useState(readAnnouncements); useEffect(() => { const onStorage = (e) => { if (e.key === STORAGE_ANNOUNCEMENTS) setList(readAnnouncements()); }; window.addEventListener("storage", onStorage); const onLocal = () => setList(readAnnouncements()); window.addEventListener("skill:announcements", onLocal); return () => { window.removeEventListener("storage", onStorage); window.removeEventListener("skill:announcements", onLocal); }; }, []); const post = (from, body) => { const next = [{ id: Date.now() + "_" + Math.random().toString(36).slice(2,6), at: Date.now(), from, body }, ...readAnnouncements()]; writeAnnouncements(next); setList(next); window.dispatchEvent(new Event("skill:announcements")); }; const remove = (id) => { const next = readAnnouncements().filter(a => a.id !== id); writeAnnouncements(next); setList(next); window.dispatchEvent(new Event("skill:announcements")); }; return { list, post, remove }; } // Backend-backed buyers directory used by the developer dashboard. // Calls /admin/users every 8s. Accepts both array and map shapes from the // worker. Falls back to {} if the endpoint isn't deployed yet so the // dashboard renders an empty buyers table instead of crashing. function useUserDirectory() { const [users, setUsers] = useState({}); useEffect(() => { let alive = true; const load = async () => { try { const r = await authenticatedFetch("/admin/users"); if (!r.ok) return; const data = await r.json(); if (!alive || !data || !data.ok) return; if (Array.isArray(data.users)) { const map = {}; for (const u of data.users) { const em = (u.email || "").toLowerCase(); if (em) map[em] = u; } setUsers(map); } else if (data.users && typeof data.users === "object") { setUsers(data.users); } } catch (e) { /* offline / endpoint missing — leave empty */ } }; load(); const id = setInterval(load, 8000); return () => { alive = false; clearInterval(id); }; }, []); return users; } Object.assign(window, { useAuth, useAnnouncements, useUserDirectory, AuthModal, UserMenu, authenticatedFetch });