// Login / register / wachtwoord vergeten.
// Belangrijke fixes:
// - geen race tussen "ingelogd → redirect" en form submit
// - duidelijke Nederlandse berichten
// - email-confirmation banner zichtbaar
// - geen lokale state-loop
const PageLogin = ({ setPage, compact }) => {
const { useState, useContext, useEffect } = React;
const auth = useContext(window.AuthContext);
const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
const t = langCtx.t || ((nl) => nl);
const lang = langCtx.lang || "nl";
const authText = (text) => {
if (lang !== "en" || !text) return text;
const map = {
"E-mail of wachtwoord onjuist. Heb je je e-mailadres al bevestigd?": "Email or password is incorrect. Have you confirmed your email address?",
"Bevestig eerst je e-mailadres via de link die we je hebben gestuurd.": "Confirm your email address using the link we sent you first.",
"Er bestaat al een account met dit e-mailadres. Probeer in te loggen of vraag een nieuw wachtwoord aan.": "An account already exists with this email address. Try signing in or request a new password.",
"Wachtwoord moet minimaal 8 tekens zijn.": "Password must be at least 8 characters.",
"Te veel pogingen. Probeer het over een paar minuten opnieuw.": "Too many attempts. Try again in a few minutes.",
"Geen verbinding met de server. Controleer je internet en probeer opnieuw.": "No connection to the server. Check your internet and try again.",
"Vul een geldig e-mailadres in.": "Enter a valid email address.",
"Je bent niet (meer) ingelogd. Log opnieuw in.": "You are no longer signed in. Sign in again.",
"Je sessie is verlopen. Log opnieuw in.": "Your session has expired. Sign in again.",
};
return map[text] || text;
};
const [mode, setMode] = useState("login"); // login | register | reset
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [fullName, setFullName] = useState("");
const [phone, setPhone] = useState("");
const [busy, setBusy] = useState(false);
const [msg, setMsg] = useState(null);
const [err, setErr] = useState(null);
const [confirmEmailNotice, setConfirmEmailNotice] = useState(false);
// If already logged in, bounce to account (admin → admin). Use ID-based dep.
useEffect(() => {
if (!auth || !auth.ready) return;
if (auth.user) {
setPage(auth.isAdmin ? "admin" : "account");
}
// eslint-disable-next-line
}, [auth && auth.ready, auth && auth.user && auth.user.id]);
const configMissing = !window.zsb || !window.zsb.isConfigured;
const switchMode = (next) => {
setMode(next);
setErr(null);
setMsg(null);
setConfirmEmailNotice(false);
};
const onSubmit = async (e) => {
e.preventDefault();
if (busy) return;
setErr(null); setMsg(null); setConfirmEmailNotice(false);
setBusy(true);
try {
if (mode === "login") {
const r = await window.zsb.signIn({ email: email.trim(), password });
if (r.error) { setErr(r.error); return; }
// Auth listener will update state; useEffect above does the redirect.
setMsg(t("Ingelogd.","Signed in."));
} else if (mode === "register") {
if (password.length < 8) { setErr(t("Wachtwoord moet minimaal 8 tekens zijn.","Password must be at least 8 characters.")); return; }
const r = await window.zsb.signUp({ email: email.trim(), password, fullName, phone });
if (r.error) { setErr(r.error); return; }
if (r.data && r.data.session) {
setMsg(t("Account aangemaakt en ingelogd.","Account created and signed in."));
} else {
// Email confirmation required
setConfirmEmailNotice(true);
setMode("login");
setPassword("");
}
} else if (mode === "reset") {
if (!email.trim()) { setErr(t("Vul je e-mailadres in.","Enter your email address.")); return; }
await window.zsb.resetPassword({ email: email.trim() });
// Don't reveal whether the email exists — always show the same message.
setMsg(t("Als dit e-mailadres bekend is, ontvang je binnen een paar minuten een herstellink per e-mail.","If this email address is known, you will receive a reset link within a few minutes."));
}
} catch (e2) {
setErr((e2 && e2.message) || t("Onbekende fout.","Unknown error."));
} finally {
setBusy(false);
}
};
const heading = (mode === "login")
? t("Inloggen","Sign in")
: (mode === "register" ? t("Account aanmaken","Create account") : t("Wachtwoord vergeten","Forgot password"));
// ──────────────────────────────────────────────────────────────
// Compact mode (used by the LoginModal). Same form, no page chrome.
// ──────────────────────────────────────────────────────────────
if (compact) {
return (
Account
{heading}
{configMissing && (
{t("Supabase is nog niet geconfigureerd.","Supabase is not configured yet.")}
{(window.zsb && window.zsb.initError) || t("Vul light/config.js in volgens SETUP.md.","Fill in light/config.js as described in SETUP.md.")}
)}
{confirmEmailNotice && (
{t("Controleer je e-mail om je account te bevestigen.","Check your email to confirm your account.")}
{t("We hebben een bevestigingsmail naar","We sent a confirmation email to")} {email}.
{" "}{t("Klik op de link en log daarna in.","Click the link and then sign in.")}
{t("Supabase is nog niet geconfigureerd.","Supabase is not configured yet.")}
{(window.zsb && window.zsb.initError) || t("Vul light/config.js in volgens SETUP.md.","Fill in light/config.js as described in SETUP.md.")} {t("Inloggen, registreren en bestellingen werken pas nadat dit gedaan is.","Sign in, registration and orders work after this is configured.")}
)}
{confirmEmailNotice && (
{t("Controleer je e-mail om je account te bevestigen.","Check your email to confirm your account.")}
{t("We hebben een bevestigingsmail naar","We sent a confirmation email to")} {email}.
{" "}{t("Klik op de link in de mail en log daarna in.","Click the link in the email and then sign in.")}
{" "}{t("Geen mail ontvangen? Check je spam-folder of probeer opnieuw te registreren.","No email received? Check your spam folder or try registering again.")}