/* ============================================================ 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 [selProducts, setSelProducts] = useState([]); // 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 useEffect(() => { if (params.mode) setMode(params.mode); if (params.role) setRole(params.role); }, [params.mode, params.role]); const clearError = () => setError(""); // ── Helpers ───────────────────────────────────────────────── async function afterSignIn(user, extraMeta = {}) { const auth = DB.buildAuthState(user); // Ensure buyer or supplier row exists try { if (auth.role === "supplier") { await DB.ensureSupplierRecord(user, extraMeta); } else { await DB.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"); setLoading(true); setError(""); try { const { user } = await DB.auth.signIn(email, password); await afterSignIn(user); } catch (err) { setError(friendlyError(err.message)); } finally { setLoading(false); } } // ── Email / Password Register ──────────────────────────────── async function handleRegister(e) { e.preventDefault(); if (!window.supabaseClient) return showToast("Supabase not configured"); setLoading(true); setError(""); try { const meta = { role, name, company, country_code: country, phone }; const { user, session } = await DB.auth.signUp(email, password, meta); 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)); } 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("rate limit")) return "Too many attempts. Please wait a moment."; return msg; } const prodOptions = ["Steel & Metal", "Agriculture", "Construction", "Textiles", "Chemicals", "Machinery", "Food & Beverage", "Plastics"]; // ── Email-sent confirmation screen ─────────────────────────── if (confirmed) { return (

Check your email

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

); } // ── 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" && (
{[["buyer", "shopping-cart", "I'm a buyer", "Source products"], ["supplier", "store", "I'm a supplier", "Sell products"]].map(([r, ic, t, d]) => ( ))}
)}
{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" && ( <>
{prodOptions.map(p => { const on = selProducts.includes(p); return ( ); })}
Upload license document
PDF, JPG or PNG · max 5MB
)}
{ setPassword(e.target.value); clearError(); }} />
{mode === "register" && (

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 });