Add phone and membership request modal

web/src/components/AdhesionForm.jsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { api } from '../lib/api.js';
+import Modal from './Modal.jsx';
+
+const EMPTY_FORM = { nom: '', fonction: '', entreprise: '', email: '', tel: '' };
+
+export function AdhesionForm({ showTitle = true }) {
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const onChange = (event) => setForm({ ...form, [event.target.name]: event.target.value });
+  const submit = async (event) => {
+    event.preventDefault();
+    setError('');
+    setBusy(true);
+    try {
+      await api.post('/api/public/demandes-adhesion', form);
+      setDone(true);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (done) {
+    return (
+      <div style={{ textAlign: 'center', padding: '30px 10px' }}>
+        <div style={{ width: 58, height: 58, borderRadius: '50%', background: '#FBEDEC', color: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 20px' }}>✓</div>
+        <h3 className="serif" style={{ fontSize: 26, fontWeight: 600, marginBottom: 10 }}>Demande envoyée !</h3>
+        <p style={{ fontSize: 15, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 24 }}>
+          Merci pour votre intérêt. Notre équipe vous recontacte sous 48h.
+        </p>
+        <button className="btn btn-outline btn-sm" style={{ fontSize: 14, padding: '12px 24px' }} onClick={() => { setDone(false); setForm(EMPTY_FORM); }}>
+          Nouvelle demande
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={submit}>
+      {showTitle && <h3 className="serif" style={{ fontSize: 24, fontWeight: 600, marginBottom: 22 }}>Demande d'adhésion</h3>}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <label className="field-plain">Nom & prénom
+            <input name="nom" value={form.nom} onChange={onChange} required maxLength={120} autoComplete="name" />
+          </label>
+          <label className="field-plain">Fonction
+            <input name="fonction" value={form.fonction} onChange={onChange} maxLength={120} autoComplete="organization-title" />
+          </label>
+        </div>
+        <label className="field-plain">Entreprise
+          <input name="entreprise" value={form.entreprise} onChange={onChange} required maxLength={120} autoComplete="organization" />
+        </label>
+        <label className="field-plain">Email professionnel
+          <input name="email" type="email" value={form.email} onChange={onChange} required maxLength={254} autoComplete="email" />
+        </label>
+        <label className="field-plain">Numéro de téléphone
+          <input name="tel" type="tel" value={form.tel} onChange={onChange} required minLength={6} maxLength={30} autoComplete="tel" placeholder="+33 6 12 34 56 78" />
+        </label>
+      </div>
+      {error && <p className="error-text" style={{ marginTop: 12 }}>{error}</p>}
+      <button type="submit" className="btn btn-red" style={{ width: '100%', marginTop: 24, padding: 15 }} disabled={busy}>
+        {busy ? 'Envoi…' : 'Envoyer ma demande'}
+      </button>
+    </form>
+  );
+}
+
+export function AdhesionModal({ onClose }) {
+  return (
+    <Modal onClose={onClose} maxWidth={560}>
+      <div style={{ position: 'relative', padding: '34px 38px 38px' }}>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Fermer"
+          style={{ position: 'absolute', top: 14, right: 14, width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'var(--beige)', color: 'var(--gray)', cursor: 'pointer', fontSize: 18 }}
+        >×</button>
+        <h2 className="serif" style={{ fontSize: 27, fontWeight: 600, marginBottom: 24, paddingRight: 28 }}>Demande d'adhésion</h2>
+        <AdhesionForm showTitle={false} />
+      </div>
+    </Modal>
+  );
+}

web/src/components/Header.jsx

@@ -30,7 +30,7 @@ export default function Header() {
           <NavLink to="/rencontres-passees" className={navLinkClass}>Rencontres passées</NavLink>
           <NavLink to="/association" className={navLinkClass}>L'association</NavLink>
           <NavLink to="/espace-membre" className={navLinkClass}>Espace membre</NavLink>
-          <Link to="/" style={{ marginLeft: 10, textDecoration: 'none' }}>
+          <Link to="/?adhesion=1" style={{ marginLeft: 10, textDecoration: 'none' }}>
             <button className="btn btn-red" style={{ padding: '12px 22px', fontSize: 14 }}>Devenir membre</button>
           </Link>
         </nav>

web/src/pages/Home.jsx

@@ -5,6 +5,7 @@ import { useAuth } from '../lib/AuthContext.jsx';
 import { api, dateParts } from '../lib/api.js';
 import Modal from '../components/Modal.jsx';
 import PastEventCard from '../components/PastEventCard.jsx';
+import { AdhesionForm, AdhesionModal } from '../components/AdhesionForm.jsx';
 
 export function InscriptionModal({ rencontre, onClose, onDone }) {
   const { user, login } = useAuth();
@@ -161,9 +162,7 @@ export default function Home() {
   const { data, reload } = usePublicData();
   const [searchParams, setSearchParams] = useSearchParams();
   const [inscrRenc, setInscrRenc] = useState(null);
-  const [homeDone, setHomeDone] = useState(false);
-  const [homeError, setHomeError] = useState('');
-  const [form, setForm] = useState({ nom: '', fonction: '', entreprise: '', email: '' });
+  const [adhesionOpen, setAdhesionOpen] = useState(false);
 
   // Registration links in invitation emails point to /?inscription=<id> :
   // once the public data is loaded, open the matching inscription modal.
@@ -174,21 +173,21 @@ export default function Home() {
     if (renc) setInscrRenc(renc);
   }, [data, searchParams]);
 
+  useEffect(() => {
+    if (searchParams.has('adhesion')) setAdhesionOpen(true);
+  }, [searchParams]);
+
   const closeInscription = () => {
     setInscrRenc(null);
     if (searchParams.has('inscription')) setSearchParams({}, { replace: true });
   };
 
-  const onChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
-
-  const submitHome = async (e) => {
-    e.preventDefault();
-    setHomeError('');
-    try {
-      await api.post('/api/public/demandes-adhesion', form);
-      setHomeDone(true);
-    } catch (err) {
-      setHomeError(err.message);
+  const closeAdhesion = () => {
+    setAdhesionOpen(false);
+    if (searchParams.has('adhesion')) {
+      const next = new URLSearchParams(searchParams);
+      next.delete('adhesion');
+      setSearchParams(next, { replace: true });
     }
   };
 
@@ -212,9 +211,7 @@ export default function Home() {
             de haut niveau : performance, engagement et esprit collectif.
           </p>
           <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
-            <a href="#adhesion" style={{ textDecoration: 'none' }}>
-              <button className="btn btn-red">Rejoindre le club</button>
-            </a>
+            <button className="btn btn-red" onClick={() => setAdhesionOpen(true)}>Rejoindre le club</button>
             <Link to="/association" style={{ textDecoration: 'none' }}>
               <button className="btn btn-outline">Découvrir l'association</button>
             </Link>
@@ -390,42 +387,7 @@ export default function Home() {
             </ul>
           </div>
           <div style={{ background: '#fff', color: 'var(--ink)', borderRadius: 6, padding: 38 }}>
-            {homeDone ? (
-              <div style={{ textAlign: 'center', padding: '30px 10px' }}>
-                <div style={{ width: 58, height: 58, borderRadius: '50%', background: '#FBEDEC', color: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 20px' }}>✓</div>
-                <h3 className="serif" style={{ fontSize: 26, fontWeight: 600, marginBottom: 10 }}>Demande envoyée !</h3>
-                <p style={{ fontSize: 15, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 24 }}>
-                  Merci pour votre intérêt. Notre équipe vous recontacte sous 48h.
-                </p>
-                <button className="btn btn-outline btn-sm" style={{ fontSize: 14, padding: '12px 24px' }} onClick={() => { setHomeDone(false); setForm({ nom: '', fonction: '', entreprise: '', email: '' }); }}>
-                  Nouvelle demande
-                </button>
-              </div>
-            ) : (
-              <form onSubmit={submitHome}>
-                <h3 className="serif" style={{ fontSize: 24, fontWeight: 600, marginBottom: 22 }}>Demande d'adhésion</h3>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-                    <label className="field-plain">Nom & prénom
-                      <input name="nom" value={form.nom} onChange={onChange} required maxLength={120} />
-                    </label>
-                    <label className="field-plain">Fonction
-                      <input name="fonction" value={form.fonction} onChange={onChange} maxLength={120} />
-                    </label>
-                  </div>
-                  <label className="field-plain">Entreprise
-                    <input name="entreprise" value={form.entreprise} onChange={onChange} required maxLength={120} />
-                  </label>
-                  <label className="field-plain">Email professionnel
-                    <input name="email" type="email" value={form.email} onChange={onChange} required maxLength={254} />
-                  </label>
-                </div>
-                {homeError && <p className="error-text" style={{ marginTop: 12 }}>{homeError}</p>}
-                <button type="submit" className="btn btn-red" style={{ width: '100%', marginTop: 24, padding: 15 }}>
-                  Envoyer ma demande
-                </button>
-              </form>
-            )}
+            <AdhesionForm />
           </div>
         </div>
       </section>
@@ -433,6 +395,7 @@ export default function Home() {
       {inscrRenc && (
         <InscriptionModal key={inscrRenc.id} rencontre={inscrRenc} onClose={closeInscription} onDone={reload} />
       )}
+      {adhesionOpen && <AdhesionModal onClose={closeAdhesion} />}
     </main>
   );
 }