From 3051a0b2ca49bb09f7f191555ebebd5f210b447e Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Mon, 15 Dec 2025 16:49:07 +0100
Subject: [PATCH] Create ValidationErrorPage

---
 src/layout.jsx                                |  1 +
 .../ValidationErrorPage.jsx                   | 30 +++++++++++++++++++
 .../validationErrorPage.module.css            | 25 ++++++++++++++++
 src/router.js                                 |  5 ++++
 4 files changed, 61 insertions(+)
 create mode 100644 src/pages/waitValidationPage/ValidationErrorPage.jsx
 create mode 100644 src/pages/waitValidationPage/validationErrorPage.module.css

diff --git a/src/layout.jsx b/src/layout.jsx
index 4689a4e..4fa0991 100644
--- a/src/layout.jsx
+++ b/src/layout.jsx
@@ -13,6 +13,7 @@ function Layout(){
 
     if (loading) return <p>Loading</p>;
     if (!user) return <Navigate to="/login" />;
+    if(user && user.validate === 0) return <Navigate to="/error/validation" />;
 
     return (
         <div>
diff --git a/src/pages/waitValidationPage/ValidationErrorPage.jsx b/src/pages/waitValidationPage/ValidationErrorPage.jsx
new file mode 100644
index 0000000..15995e9
--- /dev/null
+++ b/src/pages/waitValidationPage/ValidationErrorPage.jsx
@@ -0,0 +1,30 @@
+import styles from "./validationErrorPage.module.css"
+import Background from "../../components/background/background.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import { useContext } from "react";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { Navigate, useNavigate } from "react-router";
+
+export default function ValidationErrorPage() {
+
+    const { logout, user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const handleLogout = async () => {
+        await logout();
+        navigate("/login");
+    }
+
+    if(user && user.validate === 1) return <Navigate to="/" />;
+
+    return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Votre compte n'a pas été validé </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p> Votre compte n'a pas encore été validé, veuillez attendre la vérification de votre compte par un membre autorisé. </p>
+                <p> Contact : contact@example.com </p>
+                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+            </div>
+        </div>
+    </Background>
+}
\ No newline at end of file
diff --git a/src/pages/waitValidationPage/validationErrorPage.module.css b/src/pages/waitValidationPage/validationErrorPage.module.css
new file mode 100644
index 0000000..e4a398d
--- /dev/null
+++ b/src/pages/waitValidationPage/validationErrorPage.module.css
@@ -0,0 +1,25 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+    }
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index f3fdef6..bf44302 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import RegisterPage from "./pages/Register/RegisterPage.jsx";
 import VolunteersPage from "./pages/Volunteers/VolunteersPage";
 import ProfilePage from "./pages/Profile/ProfilePage";
 import EventsPage from "./pages/Events/EventsPage.jsx";
+import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx";
 
 const router = createBrowserRouter([
     {
@@ -17,6 +18,10 @@ const router = createBrowserRouter([
         path: "/register",
         Component: RegisterPage,
     },
+    {
+        path: "/error/validation",
+        Component: ValidationErrorPage
+    },
     {
         path: "/",
         Component: Layout,