feat: Ajout de l'envoie de mail [#17]

Front-End/src/components/Admin/EmailSender.js

@@ -0,0 +1,74 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { sendMessage } from '@/app/actions/messagerieAction';
+
+export default function EmailSender({ csrfToken }) {
+  const [recipients, setRecipients] = useState('');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState('');
+
+  const handleSendEmail = async () => {
+    const data = {
+      recipients: recipients.split(',').map((email) => email.trim()),
+      subject,
+      message,
+    };
+    sendMessage(data);
+
+  };
+
+  return (
+    <div className="p-4 bg-white rounded shadow">
+      <h2 className="text-xl font-bold mb-4">Envoyer un Email</h2>
+      <div className="mb-4">
+        <label className="block font-medium">Destinataires (séparés par des virgules)</label>
+        <input
+          type="text"
+          value={recipients}
+          onChange={(e) => setRecipients(e.target.value)}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium">Sujet</label>
+        <input
+          type="text"
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          className="w-full p-2 border rounded"
+        />
+      </div>
+      <div className="mb-4">
+        <label className="block font-medium">Message</label>
+        <Editor
+          apiKey="8ftyao41dcp1et0p409ipyrdtp14wxs0efqdofvrjq1vo2gi" // Remplacez par votre clé API TinyMCE
+          value={message}
+          init={{
+            height: 300,
+            menubar: false,
+            plugins: [
+              'advlist autolink lists link image charmap print preview anchor',
+              'searchreplace visualblocks code fullscreen',
+              'insertdatetime media table paste code help wordcount',
+            ],
+            toolbar:
+              'undo redo | formatselect | bold italic backcolor | \
+              alignleft aligncenter alignright alignjustify | \
+              bullist numlist outdent indent | removeformat | help',
+          }}
+          onEditorChange={(content) => setMessage(content)}
+        />
+      </div>
+      <button
+        onClick={handleSendEmail}
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+      >
+        Envoyer
+      </button>
+      {status && <p className="mt-4 text-sm">{status}</p>}
+    </div>
+  );
+}