Checkpoint: Ajout d'une interface d'administration complète pour personnaliser les templates d'emails avec prévisualisation en temps réel, stockage en base de données et intégration avec le service d'envoi

server/db.ts

@@ -18,7 +18,10 @@ import {
   Sequence,
   DateFormation,
   Apprenant,
-  Formation
+  Formation,
+  emailTemplates,
+  EmailTemplate,
+  InsertEmailTemplate
 } from "../drizzle/schema";
 import { ENV } from './_core/env';
 
@@ -467,3 +470,135 @@ export async function deleteExpiredTokens() {
   await db.delete(passwordResetTokens)
     .where(sql`${passwordResetTokens.expiresAt} < ${now}`);
 }
+
+// ============================================
+// Email Templates Management
+// ============================================
+
+/**
+ * Récupère tous les templates d'emails
+ */
+export async function getAllEmailTemplates() {
+  const db = await getDb();
+  if (!db) return [];
+  
+  return await db.select().from(emailTemplates);
+}
+
+/**
+ * Récupère un template par son type
+ */
+export async function getEmailTemplateByType(type: string) {
+  const db = await getDb();
+  if (!db) return undefined;
+  
+  const results = await db.select().from(emailTemplates).where(eq(emailTemplates.type, type)).limit(1);
+  return results.length > 0 ? results[0] : undefined;
+}
+
+/**
+ * Crée ou met à jour un template d'email
+ */
+export async function upsertEmailTemplate(template: InsertEmailTemplate) {
+  const db = await getDb();
+  if (!db) throw new Error("Database not available");
+  
+  const existing = await getEmailTemplateByType(template.type);
+  
+  if (existing) {
+    // Mise à jour
+    await db.update(emailTemplates)
+      .set({
+        name: template.name,
+        logoUrl: template.logoUrl,
+        primaryColor: template.primaryColor,
+        headerBgColor: template.headerBgColor,
+        headerTextColor: template.headerTextColor,
+        headerTitle: template.headerTitle,
+        footerText: template.footerText,
+        active: template.active,
+        updatedAt: new Date(),
+      })
+      .where(eq(emailTemplates.type, template.type));
+    
+    return await getEmailTemplateByType(template.type);
+  } else {
+    // Création
+    await db.insert(emailTemplates).values(template);
+    return await getEmailTemplateByType(template.type);
+  }
+}
+
+/**
+ * Supprime un template d'email
+ */
+export async function deleteEmailTemplate(type: string) {
+  const db = await getDb();
+  if (!db) throw new Error("Database not available");
+  
+  await db.delete(emailTemplates).where(eq(emailTemplates.type, type));
+}
+
+/**
+ * Initialise les templates par défaut si la table est vide
+ */
+export async function initializeDefaultEmailTemplates() {
+  const db = await getDb();
+  if (!db) return;
+  
+  const existing = await getAllEmailTemplates();
+  if (existing.length > 0) return; // Déjà initialisé
+  
+  const defaultTemplates: InsertEmailTemplate[] = [
+    {
+      type: "inscription",
+      name: "Confirmation d'inscription",
+      logoUrl: null,
+      primaryColor: "#2563eb",
+      headerBgColor: "#2563eb",
+      headerTextColor: "#ffffff",
+      headerTitle: "Formation Manager Itinova",
+      footerText: "Cet email a été envoyé automatiquement par le système de gestion des formations Itinova. Pour toute question, veuillez contacter le service RH.",
+      active: true,
+    },
+    {
+      type: "teaser",
+      name: "Email teaser",
+      logoUrl: null,
+      primaryColor: "#2563eb",
+      headerBgColor: "#2563eb",
+      headerTextColor: "#ffffff",
+      headerTitle: "Formation Manager Itinova",
+      footerText: "Cet email a été envoyé automatiquement par le système de gestion des formations Itinova. Pour toute question, veuillez contacter le service RH.",
+      active: true,
+    },
+    {
+      type: "rappel",
+      name: "Rappel J-7",
+      logoUrl: null,
+      primaryColor: "#2563eb",
+      headerBgColor: "#2563eb",
+      headerTextColor: "#ffffff",
+      headerTitle: "Formation Manager Itinova",
+      footerText: "Cet email a été envoyé automatiquement par le système de gestion des formations Itinova. Pour toute question, veuillez contacter le service RH.",
+      active: true,
+    },
+    {
+      type: "reset_password",
+      name: "Réinitialisation de mot de passe",
+      logoUrl: null,
+      primaryColor: "#2563eb",
+      headerBgColor: "#2563eb",
+      headerTextColor: "#ffffff",
+      headerTitle: "Formation Manager Itinova",
+      footerText: "Cet email a été envoyé automatiquement par le système de gestion des formations Itinova. Pour toute question, veuillez contacter le service RH.",
+      active: true,
+    },
+  ];
+  
+  for (const template of defaultTemplates) {
+    await db.insert(emailTemplates).values(template);
+  }
+  
+  console.log("[DB] Templates d'emails par défaut initialisés");
+}

server/emailService.ts

@@ -5,6 +5,7 @@
 
 import { generateFormationICS } from "./icsGenerator";
 import { sendEmail as sendEmailViaService, isEmailServiceConfigured } from "./_core/emailSender";
+import { generateEmailFromTemplate } from "./emailTemplateGenerator";
 
 interface EmailParams {
   to: string;
@@ -26,41 +27,10 @@ async function sendEmail(params: EmailParams): Promise<boolean> {
 }
 
 /**
- * Template HTML de base pour les emails
+ * Template HTML de base pour les emails (avec template personnalisé)
  */
-function getEmailTemplate(content: string): string {
-  return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>
-    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
-    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
-    .header { background-color: #2563eb; color: white; padding: 20px; text-align: center; }
-    .content { background-color: #f9fafb; padding: 30px; }
-    .footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
-    .button { display: inline-block; padding: 12px 24px; background-color: #2563eb; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
-    .info-box { background-color: #dbeafe; border-left: 4px solid #2563eb; padding: 15px; margin: 15px 0; }
-    .date-item { margin: 10px 0; padding: 10px; background-color: white; border-radius: 4px; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>Formation Manager Itinova</h1>
-    </div>
-    <div class="content">
-      ${content}
-    </div>
-    <div class="footer">
-      <p>Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.</p>
-      <p>Pour toute question, veuillez contacter le service RH.</p>
-    </div>
-  </div>
-</body>
-</html>
-  `.trim();
+async function getEmailTemplate(content: string, templateType: string = 'inscription'): Promise<string> {
+  return await generateEmailFromTemplate(templateType, content);
 }
 
 /**
@@ -152,7 +122,7 @@ export async function sendInscriptionConfirmation(params: {
     subject: isConfirmed 
       ? `Confirmation d'inscription - ${params.formationNom}`
       : `Liste d'attente - ${params.formationNom}`,
-    html: getEmailTemplate(content),
+    html: await getEmailTemplate(content, 'inscription'),
     attachments,
   });
 }
@@ -204,7 +174,7 @@ export async function sendTeaserEmail(params: {
   return sendEmail({
     to: params.apprenantEmail,
     subject: `Votre formation ${params.formationNom} approche !`,
-    html: getEmailTemplate(content),
+    html: await getEmailTemplate(content, 'teaser'),
   });
 }
 
@@ -263,7 +233,7 @@ export async function sendRappelJ7Email(params: {
   return sendEmail({
     to: params.apprenantEmail,
     subject: `Rappel J-7 : ${params.formationNom}`,
-    html: getEmailTemplate(content),
+    html: await getEmailTemplate(content, 'rappel'),
   });
 }
 
@@ -356,6 +326,6 @@ export async function sendPasswordResetEmail(params: {
   return sendEmail({
     to: params.apprenantEmail,
     subject: 'Réinitialisation de votre mot de passe - Manager Itinova',
-    html: getEmailTemplate(content),
+    html: await getEmailTemplate(content, 'reset_password'),
   });
 }

server/emailTemplateGenerator.ts

@@ -0,0 +1,161 @@
+/**
+ * Générateur de templates d'emails personnalisés
+ * Utilise les templates stockés en base de données
+ */
+
+import * as db from "./db";
+import { EmailTemplate } from "../drizzle/schema";
+
+/**
+ * Génère le HTML d'un email en utilisant le template personnalisé
+ */
+export async function generateEmailFromTemplate(
+  templateType: string,
+  content: string
+): Promise<string> {
+  // Récupérer le template depuis la base de données
+  const template = await db.getEmailTemplateByType(templateType);
+  
+  // Si pas de template trouvé, utiliser le template par défaut
+  if (!template) {
+    return getDefaultEmailTemplate(content);
+  }
+  
+  return buildEmailHTML(template, content);
+}
+
+/**
+ * Construit le HTML de l'email avec le template
+ */
+function buildEmailHTML(template: EmailTemplate, content: string): string {
+  return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body { 
+      font-family: Arial, sans-serif; 
+      line-height: 1.6; 
+      color: #333; 
+      margin: 0; 
+      padding: 20px; 
+      background-color: #f5f5f5; 
+    }
+    .container { 
+      max-width: 600px; 
+      margin: 0 auto; 
+      background-color: white; 
+    }
+    .header { 
+      background-color: ${template.headerBgColor}; 
+      color: ${template.headerTextColor}; 
+      padding: 30px 20px; 
+      text-align: center; 
+    }
+    .header h1 { 
+      margin: 0; 
+      font-size: 24px; 
+    }
+    ${template.logoUrl ? `
+    .header img { 
+      max-width: 150px; 
+      margin-bottom: 15px; 
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }` : ''}
+    .content { 
+      background-color: #f9fafb; 
+      padding: 30px 20px; 
+    }
+    .content h2 { 
+      color: ${template.primaryColor}; 
+      margin-top: 0; 
+    }
+    .footer { 
+      background-color: #f3f4f6; 
+      padding: 20px; 
+      text-align: center; 
+      font-size: 12px; 
+      color: #6b7280; 
+    }
+    .button { 
+      display: inline-block; 
+      padding: 12px 24px; 
+      background-color: ${template.primaryColor}; 
+      color: white; 
+      text-decoration: none; 
+      border-radius: 6px; 
+      margin: 10px 0; 
+    }
+    .info-box { 
+      background-color: #dbeafe; 
+      border-left: 4px solid ${template.primaryColor}; 
+      padding: 15px; 
+      margin: 15px 0; 
+    }
+    .date-item { 
+      margin: 10px 0; 
+      padding: 10px; 
+      background-color: white; 
+      border-radius: 4px; 
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      ${template.logoUrl ? `<img src="${template.logoUrl}" alt="Logo" />` : ''}
+      <h1>${template.headerTitle}</h1>
+    </div>
+    <div class="content">
+      ${content}
+    </div>
+    <div class="footer">
+      <p>${template.footerText || 'Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.'}</p>
+    </div>
+  </div>
+</body>
+</html>
+  `.trim();
+}
+
+/**
+ * Template par défaut si aucun template personnalisé n'est trouvé
+ */
+function getDefaultEmailTemplate(content: string): string {
+  return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f5f5f5; }
+    .container { max-width: 600px; margin: 0 auto; background-color: white; }
+    .header { background-color: #2563eb; color: white; padding: 30px 20px; text-align: center; }
+    .header h1 { margin: 0; font-size: 24px; }
+    .content { background-color: #f9fafb; padding: 30px 20px; }
+    .footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
+    .button { display: inline-block; padding: 12px 24px; background-color: #2563eb; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
+    .info-box { background-color: #dbeafe; border-left: 4px solid #2563eb; padding: 15px; margin: 15px 0; }
+    .date-item { margin: 10px 0; padding: 10px; background-color: white; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>Formation Manager Itinova</h1>
+    </div>
+    <div class="content">
+      ${content}
+    </div>
+    <div class="footer">
+      <p>Cet email a été envoyé automatiquement par le système de gestion des formations Itinova.</p>
+      <p>Pour toute question, veuillez contacter le service RH.</p>
+    </div>
+  </div>
+</body>
+</html>
+  `.trim();
+}

server/routers.ts

@@ -625,6 +625,47 @@ export const appRouter = router({
       return { success: true, message: "Email de réinitialisation envoyé" };
     }),
   }),
+
+  // ===== GESTION DES TEMPLATES D'EMAILS =====
+  emailTemplates: router({
+    list: adminProcedure.query(async () => {
+      return db.getAllEmailTemplates();
+    }),
+
+    getByType: adminProcedure
+      .input(z.object({ type: z.string() }))
+      .query(async ({ input }) => {
+        return db.getEmailTemplateByType(input.type);
+      }),
+
+    upsert: adminProcedure
+      .input(z.object({
+        type: z.string(),
+        name: z.string(),
+        logoUrl: z.string().nullable(),
+        primaryColor: z.string(),
+        headerBgColor: z.string(),
+        headerTextColor: z.string(),
+        headerTitle: z.string(),
+        footerText: z.string().nullable(),
+        active: z.boolean(),
+      }))
+      .mutation(async ({ input }) => {
+        return db.upsertEmailTemplate(input);
+      }),
+
+    delete: adminProcedure
+      .input(z.object({ type: z.string() }))
+      .mutation(async ({ input }) => {
+        await db.deleteEmailTemplate(input.type);
+        return { success: true };
+      }),
+
+    initializeDefaults: adminProcedure.mutation(async () => {
+      await db.initializeDefaultEmailTemplates();
+      return { success: true };
+    }),
+  }),
 });
 
 export type AppRouter = typeof appRouter;