); } /* Sélecteur de langue — menu déroulant animé, partagé par les pages traduites. */ function LangSelect(props) { var LANGS = SITE_LANGS; var lang = props.lang || 'fr'; var setLang = props.setLang || function () {}; var [open, setOpen] = React.useState(false); var ref = React.useRef(null); React.useEffect(function () { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } function onKey(e) { if (e.key === 'Escape') setOpen(false); } document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return function () { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, []); var current = LANGS.filter(function (l) { return l[0] === lang; })[0] || LANGS[0]; return (

); } /* ════════════════════════════════════════════════════════════════ Connexion + compte, partagés par toutes les pages du site. • AuthForm : Google / Apple / e-mail + mot de passe / mot de passe oublié. • Modal : fenêtre au-dessus de la page (Échap, clic dehors, focus). • LoginModal : « Se connecter » sur ordinateur (sur mobile : page compte.html). • PasswordModal : changer son mot de passe quand on est connecté. • AccountMenu : la bulle de compte (remplace « Se connecter » une fois connecté). Les textes sont en français (source) : i18n.js les traduit dans le DOM. ════════════════════════════════════════════════════════════════ */ /* Page d'où part la connexion : on y revient après Google/Apple/déconnexion. */ function authNext() { try { return window.location.pathname + (window.location.search || ''); } catch (e) { return '/'; } } function AuthStyles() { return ( ); } function EyeIcon(props) { return ( ); } /* Formulaire de connexion partagé (fenêtre + page compte.html). */ function AuthForm(props) { var next = props.next || authNext(); var [mode, setMode] = React.useState('login'); // 'login' | 'forgot' var [email, setEmail] = React.useState(''); var [password, setPassword] = React.useState(''); var [showPass, setShowPass] = React.useState(false); var [loading, setLoading] = React.useState(false); var [err, setErr] = React.useState(null); var [info, setInfo] = React.useState(null); var oauth = function (p) { return '/api/auth/site-oauth?provider=' + p + '&next=' + encodeURIComponent(next); }; var login = function (e) { e.preventDefault(); if (!email || !password || loading) return; setLoading(true); setErr(null); fetch('/api/auth/site-login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ email: email, password: password }), }).then(function (r) { return r.json().catch(function () { return null; }).then(function (j) { return { ok: r.ok, j: j }; }); }) .then(function (res) { if (!res.ok || !res.j || !res.j.success) { setErr((res.j && res.j.error) || 'Connexion impossible'); setLoading(false); return; } try { if (window.THWAccount) window.THWAccount.refresh(); } catch (x) {} window.location.reload(); }) .catch(function () { setErr('Connexion impossible. Réessaie.'); setLoading(false); }); }; var forgot = function (e) { e.preventDefault(); if (!email || loading) return; setLoading(true); setErr(null); setInfo(null); fetch('/api/auth/site-reset-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }), }).then(function (r) { return r.json().catch(function () { return null; }).then(function (j) { return { ok: r.ok, j: j }; }); }) .then(function (res) { setLoading(false); if (!res.ok) { setErr((res.j && res.j.error) || 'Envoi impossible. Réessaie.'); return; } setInfo('Si un compte existe avec cette adresse, un e-mail vient de partir. Clique sur le lien pour choisir un nouveau mot de passe.'); }) .catch(function () { setLoading(false); setErr('Envoi impossible. Réessaie.'); }); }; if (mode === 'forgot') { return (

Entre l’e-mail de ton compte : on t’envoie un lien pour choisir un nouveau mot de passe.

); } return (

Continuer avec Google Continuer avec Apple

ou par email

); } /* Fenêtre générique : Échap, clic sur le fond, défilement de la page bloqué. */ function Modal(props) { React.useEffect(function () { var onKey = function (e) { if (e.key === 'Escape') props.onClose(); }; document.addEventListener('keydown', onKey); var prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return function () { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, []); return ReactDOM.createPortal(

, document.body ); } function LoginModal(props) { return (

Connecte-toi pour retrouver ton abonnement, tes tokens et toutes tes factures.

Pas encore de compte ? Crée-le en 1 minute — 14 jours d’essai, sans carte bancaire.

); } function PasswordModal(props) { var [pw, setPw] = React.useState(''); var [pw2, setPw2] = React.useState(''); var [show, setShow] = React.useState(false); var [loading, setLoading] = React.useState(false); var [err, setErr] = React.useState(null); var [done, setDone] = React.useState(false); var submit = function (e) { e.preventDefault(); if (loading) return; if (pw.length < 8) { setErr('Le mot de passe doit faire au moins 8 caractères.'); return; } if (pw !== pw2) { setErr('Les deux mots de passe ne sont pas identiques.'); return; } setLoading(true); setErr(null); fetch('/api/auth/site-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ password: pw }), }).then(function (r) { return r.json().catch(function () { return null; }).then(function (j) { return { ok: r.ok, j: j }; }); }) .then(function (res) { setLoading(false); if (!res.ok || !res.j || !res.j.success) { setErr((res.j && res.j.error) || 'Impossible de changer le mot de passe. Réessaie.'); return; } setDone(true); }) .catch(function () { setLoading(false); setErr('Impossible de changer le mot de passe. Réessaie.'); }); }; return ( {done ? (

C’est fait : ton mot de passe est à jour.

) : ( )} ); } /* La bulle de compte : réglages de base (apparence, langue, mot de passe, déconnexion). */ function AccountMenu(props) { var account = props.account; var [open, setOpen] = React.useState(false); var ref = React.useRef(null); React.useEffect(function () { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } function onKey(e) { if (e.key === 'Escape') setOpen(false); } document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return function () { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, []); var adm = React.useState(false), isAdmin = adm[0], setIsAdmin = adm[1]; React.useEffect(function () { var alive = true; fetch('/api/admin/me', { credentials: 'include' }).then(function (r) { return r.ok ? r.json() : null; }).then(function (j) { if (alive && j && j.admin === true) setIsAdmin(true); }).catch(function () {}); return function () { alive = false; }; }, []); var name = account.firstName || 'Mon compte'; var initial = (account.firstName || account.email || 'T').trim().charAt(0).toUpperCase(); return (

{title}

{props.title || 'À lire sur le sujet'}