Email d'invitation HTML généré depuis l'administration des rencontres

Chaque rencontre dispose d'un bouton « ✉ Email » dans l'administration
(admins et modérateurs) qui génère un email HTML prêt à envoyer, aux
couleurs du site avec le logo du club : titre, description, encadré
date/heure/lieu/places restantes et bouton d'inscription.

- Nouvelle route GET /api/admin/rencontres/:id/email : construit l'email
  (mise en page en tables + styles inline, compatible clients mail) avec
  des URL absolues dérivées de l'hôte de la requête.
- Le bouton de l'email pointe vers /?inscription=<id> : la page d'accueil
  ouvre alors automatiquement la modale d'inscription de la rencontre.
- Modale d'aperçu dans l'admin : copie de l'email (HTML enrichi presse-
  papiers pour coller directement dans un logiciel de messagerie), copie
  de l'objet et du lien d'inscription, téléchargement du fichier .html.
- Les images publiques (logo, uploads) sont maintenant servies avec
  Cross-Origin-Resource-Policy: cross-origin pour que le logo se charge
  dans les webmails et l'aperçu.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o

server/src/emailTemplate.js

@@ -0,0 +1,94 @@
+// Invitation email for a rencontre, generated on demand from the admin
+// backend. Email-client constraints apply: table layout, inline styles,
+// web-safe font stacks, absolute URLs. The palette mirrors the site theme
+// (see web/src/styles.css) with Georgia standing in for Newsreader.
+function esc(v) {
+  return String(v ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+export function buildInvitationEmail({ rencontre, baseUrl }) {
+  const r = rencontre;
+  const dateStr = new Date(r.date_renc).toLocaleDateString('fr-FR', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+  const restantes = Math.max(0, r.places - (r.inscrits ?? 0));
+  const inscriptionUrl = `${baseUrl}/?inscription=${r.id}`;
+  const logoUrl = `${baseUrl}/assets/logo.jpg`;
+  const subject = `Invitation — ${r.titre} · ${dateStr}`;
+
+  const infoLines = [
+    `<strong style="color:#1B1B1B;">${esc(dateStr.charAt(0).toUpperCase() + dateStr.slice(1))}</strong>`,
+    [r.heure && esc(r.heure), esc(r.lieu)].filter(Boolean).join(' — '),
+    restantes > 0 ? `${restantes} place${restantes > 1 ? 's' : ''} restante${restantes > 1 ? 's' : ''}` : 'Complet — liste d’attente',
+  ];
+
+  const html = `<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(subject)}</title>
+</head>
+<body style="margin:0;padding:0;background-color:#F2EEE8;">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F2EEE8;">
+<tr><td align="center" style="padding:36px 14px;">
+
+<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background-color:#FFFFFF;border:1px solid #E7E2DB;border-radius:8px;overflow:hidden;">
+
+  <tr><td style="background-color:#161514;padding:26px 36px;">
+    <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
+      <td width="52" valign="middle">
+        <img src="${esc(logoUrl)}" width="52" height="52" alt="SLUC Business Club Nancy" style="display:block;border-radius:6px;background-color:#FFFFFF;">
+      </td>
+      <td valign="middle" style="padding-left:16px;">
+        <div style="font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:bold;color:#FFFFFF;line-height:1.1;">Business Club</div>
+        <div style="font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#E0777A;font-weight:bold;padding-top:4px;">SLUC Nancy</div>
+      </td>
+    </tr></table>
+  </td></tr>
+
+  <tr><td style="padding:40px 36px 32px;">
+    <div style="font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#C1272D;font-weight:bold;padding-bottom:16px;">Invitation &middot; Rencontre</div>
+    <div style="font-family:Georgia,'Times New Roman',serif;font-size:30px;line-height:1.15;color:#1B1B1B;padding-bottom:18px;">${esc(r.titre)}</div>
+    <div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65;color:#5A544E;padding-bottom:26px;">${esc(r.description)}</div>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#FAF8F5;border-left:3px solid #C1272D;">
+      <tr><td style="padding:18px 22px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#5A544E;line-height:1.9;">
+        ${infoLines.join('<br>')}
+      </td></tr>
+    </table>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
+      <td align="center" style="padding:30px 0 0;">
+        <a href="${esc(inscriptionUrl)}" style="display:inline-block;background-color:#C1272D;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;padding:15px 40px;border-radius:3px;">Je m'inscris &agrave; la rencontre</a>
+      </td>
+    </tr></table>
+    <div style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#9A938B;text-align:center;padding-top:16px;line-height:1.6;">R&eacute;serv&eacute; aux membres &agrave; jour de leur adh&eacute;sion pour la saison en cours.</div>
+  </td></tr>
+
+  <tr><td style="background-color:#0F0E0D;padding:24px 36px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#B7AFA6;line-height:1.8;">
+    Business Club SLUC Nancy &middot; Palais des Sports Jean Weille, Nancy<br>
+    <a href="mailto:contact@sluc-businessclub.fr" style="color:#E0777A;text-decoration:none;">contact@sluc-businessclub.fr</a>
+  </td></tr>
+
+</table>
+
+<div style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#9A938B;padding-top:18px;max-width:600px;">
+  Si le bouton ne fonctionne pas, copiez ce lien dans votre navigateur&nbsp;:<br>
+  <a href="${esc(inscriptionUrl)}" style="color:#C1272D;text-decoration:underline;word-break:break-all;">${esc(inscriptionUrl)}</a>
+</div>
+
+</td></tr>
+</table>
+</body>
+</html>`;
+
+  return { subject, html, inscriptionUrl };
+}

server/src/index.js

@@ -39,6 +39,11 @@ app.use(
       },
     },
     xFrameOptions: { action: 'deny' },
+    // Site images (logo, uploads) are public and referenced from outside
+    // the app's origin — e.g. the logo embedded in invitation emails is
+    // loaded by webmail clients. The default same-origin policy would
+    // block those loads.
+    crossOriginResourcePolicy: { policy: 'cross-origin' },
   })
 );
 app.use(compression());

server/src/routes/admin.js

@@ -18,6 +18,7 @@ import { imageUpload, saveImage, deleteImage } from '../uploads.js';
 import { ensureMemberAccess } from '../memberAccess.js';
 import { createStaffUser, resetStaffAccess } from '../userAccess.js';
 import { AccessError } from '../errors.js';
+import { buildInvitationEmail } from '../emailTemplate.js';
 
 export const adminRouter = Router();
 
@@ -227,6 +228,22 @@ adminRouter.post('/rencontres/:id/image', validate(idParam, 'params'), (req, res
   });
 });
 
+// Ready-to-send HTML invitation email for a rencontre (admin + moderator).
+// The registration link opens the public site with the inscription modal
+// pre-opened (/?inscription=<id>). URLs are absolute, built from the
+// request's host so they match however the site is reached (direct port
+// or reverse proxy).
+adminRouter.get('/rencontres/:id/email', validate(idParam, 'params'), async (req, res, next) => {
+  try {
+    const result = await query(`${RENC_SQL} WHERE r.id = $1 GROUP BY r.id`, [req.params.id]);
+    if (result.rowCount === 0) return res.status(404).json({ error: 'Rencontre introuvable' });
+    const baseUrl = `${req.protocol}://${req.get('host')}`;
+    res.json(buildInvitationEmail({ rencontre: result.rows[0], baseUrl }));
+  } catch (err) {
+    next(err);
+  }
+});
+
 adminRouter.get('/rencontres/:id/inscriptions', validate(idParam, 'params'), async (req, res, next) => {
   try {
     const result = await query(`${INSCR_SQL} WHERE i.rencontre_id = $1 ORDER BY i.nom`, [req.params.id]);