Added email verification system frontend

docker-compose.yaml

@@ -15,6 +15,8 @@ services:
       JWT_SECRET: ${JWT_SECRET}
       LOG_FILE: ${LOG_FILE}
       PORT: ${BACKEND_PORT}
+      GMAIL_USER: ${GMAIL_USER}
+      GMAIL_PASSWORD: ${GMAIL_PASSWORD}
     volumes:
         - ./backend/logs:/var/log/freetube
         - ./backend:/app
@@ -45,6 +47,20 @@ services:
     depends_on:
       - resit_backend
   
+  mailpit:
+    image: axllent/mailpit:latest
+    ports:
+      - "8025:8025"   # Web UI
+      - "1025:1025"   # SMTP
+    volumes:
+      - mailpit-data:/data
+    environment:
+      # set where to store the database
+      MP_DATABASE: /data/mailpit.db
+    restart: unless-stopped
+
 volumes:
     db_data:
         driver: local
+    mailpit-data:
+        driver: local

frontend/src/contexts/AuthContext.jsx

@@ -74,8 +74,8 @@ export const AuthProvider = ({ children }) => {
                 throw new Error(data.message || 'Erreur lors de la création du compte');
             }
 
-            // After successful registration, log the user in
-            await login(username, password);
+            // // After successful registration, log the user in
+            // await login(username, password);
 
             return data;
         } catch (error) {

frontend/src/modals/EmailVerificationModal.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+export default function EmailVerificationModal({ isOpen, onSubmit, onClose }) {
+
+    const [verificationCode, setVerificationCode] = useState('');
+
+    return isOpen && (
+        <div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center" >
+            <div className="glassmorphism p-4 w-1/4" >
+                <h2 className="text-lg font-bold mb-2 font-montserrat text-white">Vérification de l'email</h2>
+                <p className="font-montserrat text-white">Un email de vérification a été envoyé à votre adresse email. Veuillez vérifier votre boîte de réception.</p>
+                <input 
+                    type="text"
+                    placeholder="Entrez le code de vérification" 
+                    className="glassmorphism w-full px-4 py-2 mt-4 text-white" 
+                    value={verificationCode}
+                    onChange={(e) => setVerificationCode(e.target.value)}
+                />
+                <button className="bg-primary px-3 py-2 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer mt-2" onClick={() => {
+                    console.log("Verification code submitted:", verificationCode);
+                    onSubmit(verificationCode)
+                }}>Vérifier</button>
+            </div>
+        </div>
+    );
+}

frontend/src/pages/Register.jsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import Navbar from '../components/Navbar';
+import EmailVerificationModal from '../modals/EmailVerificationModal';
+import { verifyEmail } from '../services/user.service';
 
 export default function Register() {
     const [formData, setFormData] = useState({
@@ -17,6 +19,7 @@ export default function Register() {
     const [alerts, setAlerts] = useState([]);
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false);
 
     const navigate = useNavigate();
     const { register } = useAuth();
@@ -63,7 +66,7 @@ export default function Register() {
 
         try {
             await register(formData.email, formData.username, formData.password, formData.profile);
-            navigate('/');
+            setEmailVerificationModalOpen(true);
         } catch (err) {
             addAlert('error', 'Erreur lors de la création du compte');
         } finally {
@@ -71,6 +74,20 @@ export default function Register() {
         }
     };
 
+    const onVerificationSubmit = async (token) => {
+
+        console.log("Submitting email verification with token:", token);
+
+        const response = await verifyEmail(formData.email, token, addAlert);
+
+        if (response) {
+            // Email verified successfully
+            setEmailVerificationModalOpen(false);
+            navigate('/login');
+        }
+
+    }
+
     const addAlert = (type, message) => {
         const newAlert = { type, message, id: Date.now() }; // Add unique ID
         setAlerts([...alerts, newAlert]);
@@ -229,6 +246,7 @@ export default function Register() {
                     </div>
                 </div>
             </div>
+            <EmailVerificationModal isOpen={isEmailVerificationModalOpen} onSubmit={onVerificationSubmit} onClose={() => setEmailVerificationModalOpen(false)} />
         </div>
     );
 }

frontend/src/services/user.service.js

@@ -101,3 +101,25 @@ export async function updateUser(userId, token, userData, addAlert) {
         addAlert('error', "Erreur lors de la mise à jour des données de l'utilisateur.");
     }
 }
+
+export async function verifyEmail(email, token, addAlert) {
+    try {
+        const response = await fetch('/api/users/verify-email', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ email, token })
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to verify email");
+        }
+
+        const data = await response.json();
+        return true;
+    } catch (error) {
+        console.error("Error verifying email:", error);
+        addAlert('error', "Erreur lors de la vérification de l'email.");
+    }
+}