feat: Preparation des modèles Settings pour l'enregistrement SMTP [#17]

Front-End/src/app/[locale]/admin/layout.js

@@ -28,7 +28,7 @@ import {
   FE_ADMIN_GRADES_URL,
   FE_ADMIN_PLANNING_URL,
   FE_ADMIN_SETTINGS_URL,
-  FE_ADMIN_MESSAGERIE_URL
+  FE_ADMIN_MESSAGERIE_URL,
 } from '@/utils/Url';
 
 import { disconnect } from '@/app/actions/authAction';
@@ -38,7 +38,6 @@ import Footer from '@/components/Footer';
 import { getRightStr, RIGHTS } from '@/utils/rights';
 import { useEstablishment } from '@/context/EstablishmentContext';
 
-
 export default function Layout({ children }) {
   const t = useTranslations('sidebar');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);

Front-End/src/app/[locale]/admin/page.js

@@ -10,7 +10,7 @@ import logger from '@/utils/logger';
 import { fetchRegisterForms } from '@/app/actions/subscriptionAction';
 import { fetchUpcomingEvents } from '@/app/actions/planningAction';
 import { useEstablishment } from '@/context/EstablishmentContext';
-
+import { useNotification } from '@/context/NotificationContext';
 // Composant EventCard pour afficher les événements
 const EventCard = ({ title, date, description, type }) => (
   <div className="bg-stone-50 p-4 rounded-lg shadow-sm border border-gray-100 mb-4">
@@ -39,6 +39,7 @@ export default function DashboardPage() {
 
   const [classes, setClasses] = useState([]);
   const { selectedEstablishmentId } = useEstablishment();
+  const { showNotification } = useNotification();
 
   useEffect(() => {
     if (!selectedEstablishmentId) return;
@@ -64,6 +65,11 @@ export default function DashboardPage() {
       })
       .catch((error) => {
         logger.error('Error fetching classes:', error);
+        showNotification(
+          'Error fetching classes: ' + error.message,
+          'error',
+          'Erreur'
+        );
       });
 
     // Fetch des formulaires d'inscription

Front-End/src/app/[locale]/admin/settings/page.js

@@ -1,10 +1,17 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Tab from '@/components/Tab';
 import TabContent from '@/components/TabContent';
 import Button from '@/components/Button';
 import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
+import {
+  fetchSmtpSettings,
+  editSmtpSettings,
+} from '@/app/actions/settingsAction';
+import { useEstablishment } from '@/context/EstablishmentContext';
+import { useCsrfToken } from '@/context/CsrfContext'; // Import du hook pour récupérer le csrfToken
+import { useNotification } from '@/context/NotificationContext';
 
 export default function SettingsPage() {
   const [activeTab, setActiveTab] = useState('structure');
@@ -15,11 +22,35 @@ export default function SettingsPage() {
   const [smtpPort, setSmtpPort] = useState('');
   const [smtpUser, setSmtpUser] = useState('');
   const [smtpPassword, setSmtpPassword] = useState('');
-
+  const [useTls, setUseTls] = useState(true);
+  const [useSsl, setUseSsl] = useState(false);
+  const [statusMessage, setStatusMessage] = useState('');
+  const { selectedEstablishmentId } = useEstablishment();
+  const csrfToken = useCsrfToken(); // Récupération du csrfToken
+  const { showNotification } = useNotification();
   const handleTabClick = (tab) => {
     setActiveTab(tab);
   };
 
+  // Charger les paramètres SMTP existants
+  useEffect(() => {
+    if (activeTab === 'smtp') {
+      fetchSmtpSettings(csrfToken) // Passer le csrfToken ici
+        .then((data) => {
+          setSmtpServer(data.smtp_server || '');
+          setSmtpPort(data.smtp_port || '');
+          setSmtpUser(data.smtp_user || '');
+          setSmtpPassword(data.smtp_password || '');
+          setUseTls(data.use_tls || false);
+          setUseSsl(data.use_ssl || false);
+        })
+        .catch((error) => {
+          logger.error('Erreur lors du chargement des paramètres SMTP:', error);
+          setStatusMessage('Erreur lors du chargement des paramètres SMTP.');
+        });
+    }
+  }, [activeTab, csrfToken]); // Ajouter csrfToken comme dépendance
+
   const handleEmailChange = (e) => {
     setEmail(e.target.value);
   };
@@ -48,24 +79,50 @@ export default function SettingsPage() {
     setSmtpPassword(e.target.value);
   };
 
+  const handleUseTlsChange = (e) => {
+    setUseTls(e.target.checked);
+  };
+
+  const handleUseSslChange = (e) => {
+    setUseSsl(e.target.checked);
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
     if (password !== confirmPassword) {
-      alert('Les mots de passe ne correspondent pas');
+      showNotification(
+        'Les mots de passe ne correspondent pas',
+        'error',
+        'Erreur'
+      );
       return;
     }
-    // Logique pour mettre à jour l'email et le mot de passe
-    logger.debug('Email:', email);
-    logger.debug('Password:', password);
   };
 
   const handleSmtpSubmit = (e) => {
     e.preventDefault();
-    // Logique pour mettre à jour les paramètres SMTP
-    logger.debug('SMTP Server:', smtpServer);
-    logger.debug('SMTP Port:', smtpPort);
-    logger.debug('SMTP User:', smtpUser);
-    logger.debug('SMTP Password:', smtpPassword);
+    const smtpData = {
+      establishment: selectedEstablishmentId,
+      smtp_server: smtpServer,
+      smtp_port: smtpPort,
+      smtp_user: smtpUser,
+      smtp_password: smtpPassword,
+      use_tls: useTls,
+      use_ssl: useSsl,
+    };
+
+    editSmtpSettings(smtpData, csrfToken) // Passer le csrfToken ici
+      .then(() => {
+        setStatusMessage('Paramètres SMTP mis à jour avec succès.');
+        logger.debug('SMTP Settings Updated:', smtpData);
+      })
+      .catch((error) => {
+        logger.error(
+          'Erreur lors de la mise à jour des paramètres SMTP:',
+          error
+        );
+        setStatusMessage('Erreur lors de la mise à jour des paramètres SMTP.');
+      });
   };
 
   return (
@@ -128,8 +185,27 @@ export default function SettingsPage() {
               value={smtpPassword}
               onChange={handleSmtpPasswordChange}
             />
+            <div className="flex items-center space-x-4">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={useTls}
+                  onChange={handleUseTlsChange}
+                />
+                Utiliser TLS
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={useSsl}
+                  onChange={handleUseSslChange}
+                />
+                Utiliser SSL
+              </label>
+            </div>
             <Button type="submit" primary text="Mettre à jour"></Button>
           </form>
+          {statusMessage && <p className="mt-4 text-sm">{statusMessage}</p>}
         </TabContent>
       </div>
     </div>

Front-End/src/app/[locale]/admin/structure/page.js

@@ -1,5 +1,6 @@
 'use client';
 import React, { useState, useEffect } from 'react';
+
 import StructureManagement from '@/components/Structure/Configuration/StructureManagement';
 import ScheduleManagement from '@/components/Structure/Planning/ScheduleManagement';
 import FeesManagement from '@/components/Structure/Tarification/FeesManagement';

Front-End/src/app/[locale]/admin/subscriptions/createSubscription/page.js

@@ -160,7 +160,7 @@ export default function CreateSubscriptionPage() {
 
   const requestErrorHandler = (err) => {
     logger.error('Error fetching data:', err);
-    setErrors(err);
+    //setErrors(err);
   };
 
   useEffect(() => {

Front-End/src/app/[locale]/parents/settings/page.js

@@ -3,11 +3,13 @@ import React, { useState } from 'react';
 import Button from '@/components/Button';
 import InputText from '@/components/InputText';
 import logger from '@/utils/logger';
+import { useNotification } from '@/context/NotificationContext';
 
 export default function SettingsPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const { showNotification } = useNotification();
 
   const handleEmailChange = (e) => {
     setEmail(e.target.value);
@@ -24,7 +26,11 @@ export default function SettingsPage() {
   const handleSubmit = (e) => {
     e.preventDefault();
     if (password !== confirmPassword) {
-      alert('Les mots de passe ne correspondent pas');
+      showNotification(
+        'Les mots de passe ne correspondent pas',
+        'error',
+        'Erreur'
+      );
       return;
     }
     // Logique pour mettre à jour l'email et le mot de passe