/* ============================================================ AfricaMart — Registration & Login (Supabase Auth) ============================================================ */ function AuthPage({ nav, params, onAuth, showToast }) { const [mode, setMode] = useState(params.mode || "login"); const [role, setRole] = useState(params.role || "buyer"); const roleLocked = !!params.role; // came from a role-specific entry point (e.g. "Sell on AfricaMart") // Form fields const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const [company, setCompany] = useState(""); const [country, setCountry] = useState(""); const [phone, setPhone] = useState(""); // UI state const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [confirmed, setConfirmed] = useState(false); // email sent const [resetSent, setResetSent] = useState(false); // password reset email sent // Cloudflare Turnstile (gates login / register / forgot-password — // Supabase's CAPTCHA protection is global once enabled in the dashboard) const [turnstileToken, setTurnstileToken] = useState(""); const turnstileRef = useRef(null); const widgetIdRef = useRef(null); useEffect(() => { if (params.mode) setMode(params.mode); if (params.role) setRole(params.role); }, [params.mode, params.role]); // Render the Cloudflare Turnstile widget into whichever form is currently // visible (login/register share one form, forgot-password has its own; // "reset" needs no widget since updateUser isn't captcha-gated). useEffect(() => { if (window.turnstile && widgetIdRef.current != null) { window.turnstile.remove(widgetIdRef.current); widgetIdRef.current = null; } setTurnstileToken(""); if (mode === "reset") return; let cancelled = false; let timer = null; const tryRender = () => { if (cancelled) return; if (!window.turnstile || !turnstileRef.current) { timer = setTimeout(tryRender, 200); return; } widgetIdRef.current = window.turnstile.render(turnstileRef.current, { sitekey: window.AM_CONFIG.TURNSTILE_SITE_KEY, callback: token => setTurnstileToken(token), "expired-callback": () => setTurnstileToken(""), "error-callback": () => setTurnstileToken(""), }); }; tryRender(); return () => { cancelled = true; if (timer) clearTimeout(timer); if (window.turnstile && widgetIdRef.current != null) { window.turnstile.remove(widgetIdRef.current); widgetIdRef.current = null; } }; }, [mode]); const clearError = () => setError(""); // ── Helpers ───────────────────────────────────────────────── async function afterSignIn(user, extraMeta = {}) { const auth = DB.auth.buildAuthState(user); // Ensure buyer or supplier row exists try { if (auth.role === "supplier") { await DB.auth.ensureSupplierRecord(user, extraMeta); } else { await DB.auth.ensureBuyerRecord(user, extraMeta); } } catch (e) { // Non-fatal — row may already exist or RLS is pending email confirm console.warn("[AfricaMart] Could not create profile row:", e.message); } onAuth(auth); nav("dashboard", { role: auth.role }); showToast("Welcome" + (auth.name ? ", " + auth.name.split(" ")[0] : "") + "!"); } // ── Email / Password Login ─────────────────────────────────── async function handleLogin(e) { e.preventDefault(); if (!window.supabaseClient) return showToast("Supabase not configured"); if (!turnstileToken) { setError("Please complete the verification check below."); return; } setLoading(true); setError(""); try { const { user } = await DB.auth.signIn(email, password, turnstileToken); await afterSignIn(user); } catch (err) { setError(friendlyError(err.message)); if (window.turnstile && widgetIdRef.current != null) { window.turnstile.reset(widgetIdRef.current); setTurnstileToken(""); } } finally { setLoading(false); } } // ── Email / Password Register ──────────────────────────────── async function handleRegister(e) { e.preventDefault(); if (!window.supabaseClient) return showToast("Supabase not configured"); if (!turnstileToken) { setError("Please complete the verification check below."); return; } setLoading(true); setError(""); try { const meta = { role, name, company, country_code: country, phone }; const { user, session } = await DB.auth.signUp(email, password, meta, turnstileToken); if (session) { // Email confirmation disabled — user is immediately signed in await afterSignIn(user, { company, country_code: country, phone }); } else { // Email confirmation required setConfirmed(true); showToast("Check your email to verify your account"); } } catch (err) { setError(friendlyError(err.message)); if (window.turnstile && widgetIdRef.current != null) { window.turnstile.reset(widgetIdRef.current); setTurnstileToken(""); } } finally { setLoading(false); } } // ── Forgot / reset password ────────────────────────────────── async function handleForgotPassword(e) { e.preventDefault(); if (!window.supabaseClient) return showToast("Supabase not configured"); if (!turnstileToken) { setError("Please complete the verification check below."); return; } setLoading(true); setError(""); try { await DB.auth.resetPasswordForEmail(email, turnstileToken); setResetSent(true); } catch (err) { setError(friendlyError(err.message)); if (window.turnstile && widgetIdRef.current != null) { window.turnstile.reset(widgetIdRef.current); setTurnstileToken(""); } } finally { setLoading(false); } } async function handleResetPassword(e) { e.preventDefault(); if (!window.supabaseClient) return showToast("Supabase not configured"); setLoading(true); setError(""); try { await DB.auth.updateUser({ password }); showToast("Password updated"); const session = await DB.auth.getSession(); if (session?.user) await afterSignIn(session.user); else nav("auth", { mode: "login" }); } catch (err) { setError(friendlyError(err.message)); } finally { setLoading(false); } } // ── Google OAuth ───────────────────────────────────────────── async function handleGoogle() { if (!window.supabaseClient) return showToast("Supabase not configured"); setLoading(true); setError(""); try { await DB.auth.signInWithGoogle(); // Page will redirect — Supabase handles the return } catch (err) { setError(friendlyError(err.message)); setLoading(false); } } // ── Error messages ─────────────────────────────────────────── function friendlyError(msg) { if (!msg) return "Something went wrong. Please try again."; if (msg.includes("Invalid login credentials")) return "Incorrect email or password."; if (msg.includes("Email not confirmed")) return "Please verify your email before logging in."; if (msg.includes("User already registered")) return "An account with this email already exists."; if (msg.includes("Password should be")) return "Password must be at least 6 characters."; if (msg.includes("Password is known to be weak") || msg.includes("pwned")) return "This password has appeared in a known data breach. Please choose a different, stronger password."; if (msg.includes("rate limit") || msg.includes("security purposes")) return "Too many attempts. Please wait a moment and try again."; return msg; } // ── Email-sent confirmation screen ─────────────────────────── if (confirmed) { return (

Check your email

We sent a verification link to {email}. Click it to activate your account.

); } // ── Reset-link-sent confirmation screen ────────────────────── if (resetSent) { return (

Check your email

If an account exists for {email}, we've sent a link to reset your password.

); } // ── Forgot password form ────────────────────────────────────── if (mode === "forgot") { return (

Reset your password

Enter your email and we'll send you a link to reset your password.

{error && (
{error}
)}
{ setEmail(e.target.value); clearError(); }} />

{ setMode("login"); clearError(); }} style={{ cursor: "pointer", color: "var(--navy-700)", fontWeight: 600 }}> Back to log in

); } // ── Set new password form (after clicking reset link) ──────── if (mode === "reset") { return (

Set a new password

Choose a new password for your account.

{error && (
{error}
)}
{ setPassword(e.target.value); clearError(); }} />
); } // ── Main form ───────────────────────────────────────────────── const submit = mode === "login" ? handleLogin : handleRegister; return (
{/* Left brand panel */}

{role === "supplier" ? "Grow your business across Africa" : "Source smarter, trade with confidence"}

{role === "supplier" ? "List products free, get a branded store page, and reach 118,000+ verified buyers across 54 countries." : "Compare verified suppliers, send inquiries, and post RFQs — all in one place."}

{[["badge-check", "Verified suppliers & trade assurance"], ["globe", "All 54 African countries"], ["zap", "Fast quotes — most reply within hours"]].map(([ic, t]) => (
{t}
))}
{/* Right form */}
{/* Mode toggle */}
{["login", "register"].map(m => ( ))}

{mode === "login" ? "Welcome back" : "Create your account"}

{mode === "login" ? "Log in to your AfricaMart account" : "Join the pan-African B2B marketplace"}

{/* Error banner */} {error && (
{error}
)} {/* Google OAuth */}
or {mode === "login" ? "log in" : "sign up"} with email
{mode === "register" && !roleLocked && (
{[["buyer", "shopping-cart", "I'm a buyer"], ["supplier", "store", "I'm a supplier"]].map(([r, ic, t]) => ( ))}
)} {mode === "register" && roleLocked && (
{role === "supplier" ? "Creating a supplier account" : "Creating a buyer account"}
)}
{mode === "register" && (
setName(e.target.value)} />
setCompany(e.target.value)} />
)}
{ setEmail(e.target.value); clearError(); }} />
{mode === "register" && (
setPhone(e.target.value)} />
)} {mode === "register" && role === "buyer" && (
)}
{mode === "register" && (

{role === "supplier" ? "We'll email a verification link — then add products, certifications and trade details from your dashboard." : "We'll send a verification link to confirm your email before activating your account."}

)}

{mode === "login" ? "New to AfricaMart? " : "Already have an account? "} { setMode(mode === "login" ? "register" : "login"); clearError(); }} style={{ cursor: "pointer", color: "var(--navy-700)", fontWeight: 600 }}> {mode === "login" ? "Create an account" : "Log in"}

); } Object.assign(window, { AuthPage });