Create ValidationErrorPage

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>

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>
+}

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;
+    }
+}

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,