Updating frontend

package.json

@@ -18,7 +18,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=8080 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

services.sql

@@ -0,0 +1,7 @@
+INSERT INTO services (name,description,price) VALUES 
+('Chirurgie','Service de visio',100),
+('Médecine', 'Service de laboratoire',50),
+('Cancérologie', 'Service de cancérologie',75),
+('Maternité', 'Service de maternité',150),
+('Imagerie médical', "Service d'imagerie",75),
+('Urgences', "Service d'urgences", 25);

src/components/auth/login/index.jsx

@@ -1,20 +1,55 @@
+import { useForm } from 'react-hook-form';
+import { useState, useEffect } from 'react';
+import { post } from '../../../modules/fetchManager.js';
+import { getUserSession, setUserSession } from '../../../modules/userManager.js';
+
 function Login() {
+
+    const [error, setError] = useState(null);
+    const [user, setUser] = useState(getUserSession()); 
+
+    useEffect(() => {
+        if(user.token && user.data){
+            setUserSession(user);
+            window.location.href = '/dashboard';
+        }
+    }, [user]);
+
+    const { register, handleSubmit} = useForm();
+    const onSubmit = (e) => {
+        post('users/login', e)
+            .then(data => {
+                if(data.JSON.token){
+                    setUser({
+                        token: data.JSON.token,
+                        data: data.JSON.user
+                    });
+                }
+                else{
+                    setError("Email ou mot de passe incorrect");
+                }
+            });
+    }
+
     return (
         <div className="bg-hero w-screen h-screen object-fit bg-cover flex justify-center items-center">
             <div className="w-screen h-screen flex justify-center items-center bg-shdw">
-                <form action="" method="post" className="flex flex-col bg-white px-5 py-4 w-2/3 2xl:w-3/12 gap-8 rounded-lg">
+                <form action="" method="post" onSubmit={handleSubmit(onSubmit)} className="flex flex-col bg-white px-5 py-4 w-2/3 2xl:w-3/12 gap-8 rounded-lg">
                     <div className="text-2xl text-center">
                         <h2>Connexion</h2>
                     </div>
+                    <div className='flex justify-center items-center'>
+                        {error ? <p className="text-red-600 my-4">{error}</p> : null}
+                    </div>
                     <div className="flex flex-row justify-between">
                         <div className="flex flex-col w-1/3 gap-4">
-                            <label htmlFor="email">Email</label>
+                            <label htmlFor="usernameOrEmail">Email</label>
                             <br />
                             <label htmlFor="password">Mot de passe</label>
                         </div>
                         <div className="flex flex-col w-2/3 gap-4">
-                            <input type="email" name="email" id="email" className="border-b-2 border-cyan-800"/>
+                            <input type="usernameOrEmail" {...register("usernameOrEmail", {required: true})} className="border-b-2 border-cyan-800"/>
-                            <input type="password" name="password" id="password" className="border-b-2 border-cyan-800 focus:outline-none"/>
+                            <input type="password" {...register("password", {required: true})} className="border-b-2 border-cyan-800 focus:outline-none"/>
                         </div>
                     </div>
                     <div className="flex flex-col gap-2 justify-center items-center">

src/components/auth/register/index.jsx

@@ -13,10 +13,10 @@ function Register() {
         }
         post('users/register', e)
             .then(data => {
-                if(data.error){
+                if(data.status === 200){
-                    setError(data.error);
+                    window.location.href = '/login';
                 }
-                console.log(data);
+                setError(data.error);
             });
     }
 

src/components/auth/verifyEmail/index.jsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import { get } from '../../../modules/fetchManager.js';
+import { getUserSession, setUserSession } from '../../../modules/userManager.js';
+
+function VerifyEmail() {
+    const queryParameters = new URLSearchParams(window.location.search);
+    const code = queryParameters.get('code');
+    const user = getUserSession();
+    const [verified,setVerified] =useState(null);
+    const [error, setError] = useState(null);
+
+    if(!user || !user.token || !user.data){ 
+        console.log(user);
+        window.location.href = '/login';
+    }
+
+    get('users/email/verify?code='+code, user.token)
+        .then(data => {
+            if(data.status !== 200){
+                if(data.status === 400){
+                    setError("Le code de vérification est invalide");
+                }
+                if(data.status === 500){
+                    setError("Erreur serveur, veuillez réessayer plus tard");
+                }
+                return;
+            }
+            setVerified("Votre email a bien été vérifié");
+            setUserSession({
+                token: user.token,
+                data: user.data,
+            });
+        })
+    
+    const handleClick = (e) => {
+        e.preventDefault();
+        get('users/email/request', user.token)
+            .then(data => {
+                if(data.status !== 200){
+                    setError("Erreur serveur, veuillez réessayer plus tard");
+                    return;
+                }
+                setVerified("Email envoyé");
+            })
+    }
+
+    return (
+        <div className="h-screen w-screen bg-cyan-800 flex justify-center items-center">
+            <div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl" >
+                {code ? <p>Vérification de l'email en cours...</p> : <p>Veuillez vérifiez votre boîte mail, un mail de vérification vous a été envoyé</p>}
+                {verified ? <p>{verified}</p> : null}
+                {error ? <div>
+                    <p>{error}</p>
+                    <button className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
+                        Renvoyer un mail
+                    </button>
+                </div> : null}
+            </div>
+        </div>
+    );
+}
+
+export default VerifyEmail;

src/components/dashboard/admin/appointment/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function Appointment({user}) {
+    return(
+        <div>
+            <HeadTitle title={"Rendez-vous"}/>
+        </div>
+    )
+}
+
+export default Appointment;

src/components/dashboard/admin/hospital/create/index.jsx

@@ -0,0 +1,53 @@
+import ModalContainer from '../../../modal-container';
+import { useForm } from 'react-hook-form';
+import { post } from '../../../../../modules/fetchManager';
+
+function CreateHospital({setCreateMenu,user}) {
+
+    const { register, handleSubmit } = useForm();
+
+    const onSubmit = (data) => {
+        data.company_id = 1;
+        data.country = "France";
+        post('hospitals', data, user.token)
+            .then(data => {
+                console.log(data);
+            })
+    }
+
+    return(
+        <ModalContainer title="Créer un hôpital" setModal={setCreateMenu}>
+            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+                <div className="text-center text-2xl">
+                    <h2>Création d'un Hôpital</h2>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="name">Nom</label>
+                    <input type="name" {...register("name", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="code">Code</label>
+                    <input type="code" {...register("code", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="region">Région</label>
+                    <input type="region" {...register("region", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="city">Ville</label>
+                    <input type="city" {...register("city", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="address">Addresse</label>
+                    <input type="address" {...register("address", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-8 justify-center">
+                    <BackButton setMenu={setMenu}/>
+                    <SubmitButton/>
+                </div>
+            </form>
+        </ModalContainer>
+    )
+}
+
+export default CreateHospital;

src/components/dashboard/admin/hospital/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function Hospital({user}) {
+    return(
+        <div>
+            <HeadTitle title={"Hôpitaux"}/>
+        </div>
+    )
+}
+
+export default Hospital;

src/components/dashboard/admin/index.jsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import PageContainer from '../page-container';
+import config from '../../../config';
+import MenuHandler from './menu-handler';
+
+function Admin({user,setUser}) {
+
+    const [page, setPage] = useState("home");
+    const links = [
+        {page:"home",name:"Accueil"},
+        {page:"appointment",name:"Rendez-vous"},
+        config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
+        {page:"medical-file",name:"Dossier Médical"},
+        {page:"user",name:"Utilisateurs"},
+        {page:"hospital",name:"Hôpitaux"},
+        {page:"profil",name:"Profil"}
+    ]
+
+    return(
+        <PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
+            <MenuHandler page={page} user={user}/>
+        </PageContainer>
+    )
+}
+
+export default Admin;

src/components/dashboard/admin/medical-file/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function MedicalFile({user}) {
+    return(
+        <div>
+            <HeadTitle title={"Dossier médical"}/>
+        </div>
+    )
+}
+
+export default MedicalFile;

src/components/dashboard/admin/menu-handler/index.jsx

@@ -0,0 +1,28 @@
+import Prescription from "../prescription";
+import MedicalFile from "../medical-file";
+import Appointment from "../appointment";
+import User from "../user";
+import Hospital from "../hospital";
+import Profil from "../profil";
+import Home from "../../home";
+
+function MenuHandler({page,user}) {
+    switch (page) {
+        case "prescription":
+            return <Prescription user={user} />;
+        case "medical-file":
+            return <MedicalFile user={user} />;
+        case "appointment":
+            return <Appointment user={user} />;
+        case "user":
+            return <User user={user} />;
+        case "hospital":
+            return <Hospital user={user} />;
+        case "profil":
+            return <Profil user={user} />;
+        default:
+            return <Home user={user} />;
+    }
+}
+
+export default MenuHandler;

src/components/dashboard/admin/prescription/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function Prescription({user}) {
+  return (
+    <div>
+      <HeadTitle title={"Préscriptions"}/>
+    </div>
+  );
+}
+
+export default Prescription;

src/components/dashboard/admin/profil/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function Profil({user}) {
+    return(
+        <div>
+            <HeadTitle title={"Profil"}/>
+        </div>
+    )
+}
+
+export default Profil;

src/components/dashboard/admin/user/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function User({user}) {
+    return(
+        <div>
+            <HeadTitle title={"Utilisateurs"}/>
+        </div>
+    )
+}
+
+export default User;

src/components/dashboard/appointment/index.jsx

@@ -1,11 +0,0 @@
-import HeadTitle from "../head-title";
-
-function Appointment() {
-    return (
-        <div>
-        <HeadTitle title="Rendez-vous"/>
-        </div>
-    );
-}
-
-export default Appointment;

src/components/dashboard/back-button/index.jsx

@@ -0,0 +1,12 @@
+function BackButton({setMenu,value}) {
+
+    const val = value ? value : null;
+
+    return(
+        <button className="w-36 p-6 border-2 border-red-600 rounded-2xl hover:bg-red-600 hover:text-white transition-all ease-in-out duration-300" onClick={() => setMenu(val)}>
+            Retour
+        </button>
+    );
+}
+
+export default BackButton;

src/components/dashboard/container/index.jsx

@@ -0,0 +1,9 @@
+function Container({children}) {
+    return(
+        <div className="flex justify-center items-center h-screen">
+            {children}
+        </div>
+    )
+}
+
+export default Container;

src/components/dashboard/createButton/index.jsx

@@ -0,0 +1,9 @@
+function CreateButton({setCreateMenu, nameMenu}) {
+    return(
+        <button onClick={() => setCreateMenu(true)} className="bg-green-600 text-2xl text-white px-4 py-2 rounded-lg">
+            {nameMenu}
+        </button>
+    )
+}
+
+export default CreateButton;

src/components/dashboard/doctor/index.jsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import PageContainer from '../page-container';
+import config from '../../../config';
+import MenuHandler from './menu-handler';
+
+function Doctor({user, setUser}) {
+    const [page, setPage] = useState("home");
+    const links = [
+        {page:"home",name:"Accueil"},
+        {page:"appointment",name:"Rendez-vous"},
+        config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
+        {page:"medical-file",name:"Dossier Médical"},
+        {page:"profil",name:"Profil"}
+    ];
+
+    return (
+        <PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
+            <MenuHandler page={page} setPage={setPage} user={user}/>
+        </PageContainer>
+    )
+}
+
+export default Doctor;

src/components/dashboard/doctor/menu-handler/index.jsx

@@ -0,0 +1,10 @@
+function MenuHandler({page, setPage, user}) {
+    return (
+        <div>
+            <h1>MenuHandler</h1>
+            <p>Current page: {page}</p>
+        </div>
+    )
+}
+
+export default MenuHandler;

src/components/dashboard/home/index.jsx

@@ -2,7 +2,7 @@ import HeadTitle from "../head-title"
 
 function Home() {
     return(
-        <div className="">
+        <div className="flex flex-col">
             <HeadTitle title="Accueil"/>
         </div>
     )

src/components/dashboard/index.jsx

@@ -1,17 +1,102 @@
-import Navbarre from "./navbarre";
-import Layout from "./layout";
 import PageHandler from "./page-handler";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { getUserSession, setUserSession } from "../../modules/userManager";
+import { get } from "../../modules/fetchManager";
+import TypeUser from "./type-user";
+import Loader from "./loader";
+import SecondMenuBg from "./second-menu-bg";
+import NotVerified from "./notVerified";
 
 function Dashboard() {
-    const [page, setPage] = useState("home");
+    const [user, setUser] = useState(getUserSession());
+    const [type, setType] = useState((user.roles) ? true : false);
+    const [loading, setLoading] = useState(0);
+
+    // useEffect(() => {
+    //     setUserSession(user);
+    // }, [user]);
+
+    if(!user.token || !user.data){ 
+        window.location.href = '/login';
+    }
+
+    if(!type && loading === 0){
+        get('users/@me/roles', user.token).then((data) => {
+
+            setLoading(loading + 1);
+
+            if(data.status === 403) {
+                window.location.href = '/login';
+                return;
+            }
+
+            if(data.status === 404) {
+                setType(false);
+                get('doctors/@me', user.token).then((data) => {
+                    setLoading(loading + 1);
+    
+                    if(data.status >= 400) {
+                        return;
+                    }
+    
+                    const newUser = {
+                        token: user.token,
+                        data: user.data,
+                        roles: user.roles,
+                        doctor: data.JSON,
+                    };
+    
+                    setUser(newUser);
+                    setUserSession(newUser);
+                    setType(true);
+                });
+                return;
+            }
+
+            const newUser = {
+                token: user.token,
+                data: user.data,
+                roles: data.JSON,
+            };
+
+            setUser(newUser);
+            setUserSession(newUser);
+            setType(true);
+        });
+
+        // console.log(type);
+    }
 
     return(
         <div>
-            <Navbarre setPage={setPage}/>
+            {
-            <Layout>
+                type && (!user.doctor || user.doctor.is_verified) ? 
-                <PageHandler page={page}/>
+                    <PageHandler user={user} setUser={setUser}/>
-            </Layout>
+                    :
+                    null
+            }
+            {
+                type && user.doctor && !user.doctor.is_verified ? 
+                    <NotVerified setUser={setUser}/>
+                    :
+                    null
+            }
+            {
+                !type && loading < 2 ?                     
+                <div>
+                    <TypeUser />
+                </div>
+                :
+                null
+            }
+            {
+                !type && loading === 2 ?
+                <SecondMenuBg>
+                    <Loader />
+                </SecondMenuBg>
+                :
+                null
+            }
         </div>
     );
 }

src/components/dashboard/list-display/index.jsx

@@ -0,0 +1,18 @@
+function ListDisplay({data,itemComponent,setCreateMenu,nameMenu}) {
+    return(
+        <div>
+            <button onClick={() => setCreateMenu(true)}>{nameMenu}</button>
+            <ul>
+                {
+                    data.map((item) => {
+                        <li>
+                            {itemComponent(item)}
+                        </li>
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default ListDisplay;

src/components/dashboard/loader/index.jsx

@@ -0,0 +1,15 @@
+import './loader.css';
+import SecondMenuBg from '../second-menu-bg';
+
+function Loader({color}) {
+    let cssColor = 'loader'
+    if(color) {
+        cssColor += ' cyan';
+    }
+
+    return(
+        <span className={cssColor}></span>
+    );
+}
+
+export default Loader;

src/components/dashboard/loader/loader.css

@@ -0,0 +1,24 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+.cyan {
+    border: 5px solid rgb(22,78,99);
+    border-bottom-color: transparent;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+} 

src/components/dashboard/modal-container/index.jsx

@@ -0,0 +1,11 @@
+function ModalContainer({ children }) {
+  return (
+    <div className="fixed top-0 left-0 h-screen w-screen flex justify-center items-center bg-black/25 backdrop-blur-sm">
+        <div className="bg-white p-5 rounded-xl flex flex-col justify-start items-center">
+            {children}
+        </div>
+    </div>
+  );
+}
+
+export default ModalContainer;

src/components/dashboard/navbarre/hero/index.jsx

@@ -0,0 +1,12 @@
+function Hero({user}) {
+    return(
+        <div className="py-10 text-center text-3xl flex flex-col items-center gap-5 text-white">
+            <div className="h-36 w-36 bg-gray-400 rounded-full"></div>
+            <div>
+                <h3 className="min-h-10">{user.data.first_name + " " + user.data.last_name}</h3>
+            </div>
+        </div>
+    )
+}
+
+export default Hero;

src/components/dashboard/navbarre/index.jsx

@@ -1,45 +1,22 @@
-function Navbarre({setPage}) {
+import Hero from "./hero";
+import LinkMenu from "./link-menu";
+import { removeUserSession } from "../../../modules/userManager";
+
+function Navbarre({setPage, user, setUser, links}) {
+
     const handleClick = (e) => {
-        // e.preventDefault();
+        e.preventDefault();
-        setPage(e.target.getAttribute("id"));
+        setUser(null);
-    };
+        removeUserSession();
+        window.location.href = '/';
+    }
 
     return (
         <aside className="fixed left-0 top-0 h-screen w-1/6 bg-cyan-800 flex flex-col justify-between items-center">
-            <div className="py-10 text-center text-3xl flex flex-col gap-5 text-white">
+            <Hero user={user}/>
-                <div className="h-36 w-36 bg-gray-400 rounded-full">
+            <LinkMenu setPage={setPage} links={links}/>
-
+            <div className="py-12">
-                </div>
+                <button className="bg-red-500 text-white p-5 rounded-lg text-3xl" onClick={handleClick}>Déconnexion</button>
-                <div>
-                    <h3 className="min-h-10">John Doe</h3>
-                </div>
-            </div>
-            <div className="text-2xl text-white">
-                <ul id="dash-nav">
-                    <li className="relative my-4 hover:text-green-500 hover:cursor-pointer z-10" id="home" onClick={handleClick}>
-                        <p className="transition-all duration-500" id="home">Accueil</p>
-                        <div className="w-full h-1 bg-white mt-1" id="home"></div>
-                        <div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="home"></div>
-                    </li>
-                    <li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="appointment" onClick={handleClick}>
-                        <p className="transition duration-500" id="appointment">Rendez-vous</p>
-                        <div className="w-full h-1 bg-white mt-1" id="appointment"></div>
-                        <div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="appointment"></div>
-                    </li>
-                    <li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="prescription" onClick={handleClick}>
-                        <p className="transition duration-500" id="prescription">Préscriptions</p>
-                        <div className="w-full h-1 bg-white mt-1" id="prescription"></div>
-                        <div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="prescription"></div>
-                    </li>
-                    <li className="relative my-4 hover:text-green-500 hover:cursor-pointer" id="medical-file" onClick={handleClick}>
-                        <p className="transition duration-500" id="medical-file">Dossier Médical</p>
-                        <div className="w-full h-1 bg-white mt-1" id="medical-file"></div>
-                        <div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id="medical-file"></div>
-                    </li>
-                </ul>
-            </div>
-            <div className="py-24">
-                <button className="bg-red-500 text-white p-5 rounded-lg text-3xl">Déconnexion</button>
             </div>
         </aside>
     )

src/components/dashboard/navbarre/link-menu/index.jsx

@@ -0,0 +1,18 @@
+import LinkNav from "../link-nav";
+
+function LinkMenu({setPage, links}) {
+
+    const items = links.map((link,index) => 
+        link ? <LinkNav key={index} setPage={setPage} link={link} /> : null 
+    );
+
+    return (
+        <div className="text-2xl text-white h-fit">
+            <ul id="dash-nav" className="h-full">
+                {items}
+            </ul>
+        </div>
+    )
+}
+
+export default LinkMenu;

src/components/dashboard/navbarre/link-nav/index.jsx

@@ -0,0 +1,17 @@
+function LinkNav({setPage,link}) {
+
+    const handleClick = (e) => {
+        // e.preventDefault();
+        setPage(e.target.getAttribute("id"));
+    };
+
+    return(
+        <li className="relative my-4 hover:text-green-500 hover:cursor-pointer z-10" id={link.page} onClick={handleClick}>
+            <p className="transition-all duration-500" id={link.page}>{link.name}</p>
+            <div className="w-full h-1 bg-white mt-1" id={link.page}></div>
+            <div className="absolute h-1 w-0 bg-green-500 mt-1 z-10 bottom-0 left-0 transition-all duration-500" id={link.page}></div>
+        </li>
+    )
+}
+
+export default LinkNav;

src/components/dashboard/notVerified/index.jsx

@@ -0,0 +1,24 @@
+import { removeUserSession } from "../../../modules/userManager";
+import SecondMenuBg from "../second-menu-bg";
+
+function NotVerified({setUser}) {
+    const handleClick = (e) => {
+        e.preventDefault();
+        removeUserSession();
+        setUser(null);
+        window.location.href = '/';
+    }
+
+    return(
+        <div>
+            <SecondMenuBg>
+                <div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl flex flex-col items-center gap-5 text-center" >
+                    <h2>Votre compte est en cours de vérification,<br/> Un mail vous sera envoyé une fois votre compte validé</h2>
+                    <button className="bg-red-500 text-white p-2 rounded-lg text-ml w-fit" onClick={handleClick}>Déconnexion</button>
+                </div>
+            </SecondMenuBg>
+        </div>
+    )
+}
+
+export default NotVerified;

src/components/dashboard/page-container/index.jsx

@@ -0,0 +1,15 @@
+import Navbarre from "../navbarre"
+import Layout from "../layout"
+
+function PageContainer({children,links,setPage,setUser, user}) {
+    return(
+        <div>
+        <Navbarre links={links} setPage={setPage} setUser={setUser} user={user} />
+        <Layout>
+            {children}
+        </Layout>
+    </div>
+    )
+}
+
+export default PageContainer;

src/components/dashboard/page-handler/index.jsx

@@ -1,22 +1,21 @@
-import Home from "../home";
+import { removeUserSession } from "../../../modules/userManager";
-import Prescription from "../prescription";
+import Patient from "../patient";
-import MedicalFile from "../medical-file";
+import Admin from "../admin";
-import Appointment from "../appointment";
 
-function PageHandler({page}) {
+function PageHandler({user,setUser}) {
-    switch (page) {
+    switch (user.roles[0].name) {
-        case "home":
+        case "Patient" :
-            return <Home />;
+            return <Patient user={user} setUser={setUser} />;
-        case "prescription":
+        case "Doctor" :
-            return <Prescription />;
+            return null;
-        case "medical-file":
+        case "Admin" :
-            return <MedicalFile />;
+            return <Admin user={user} setUser={setUser} />;
-        case "appointment":
-            return <Appointment />;
         default:
-            return <Home />;
+            setUser(null);
+            removeUserSession();
+            window.location.href = "/login";
+            return null;
     }
-    
 }
 
 export default PageHandler;

src/components/dashboard/patient/appointment/create/index.jsx

@@ -0,0 +1,24 @@
+import ModalContainer from "../../../modal-container";
+import SubmitButton from "../../../submit-button";
+import BackButton from "../../../back-button";
+
+function Create({setCreateMenu, user}) {
+    return (
+        <ModalContainer>
+            <div>
+                <h2 className="text-2xl">Prendre Rendez-Vous</h2>
+            </div>
+            <form action="" className="flex flex-col items-center gap-4">
+                <div>
+
+                </div>
+                <div className="flex flex-row gap-5">
+                    <SubmitButton />
+                    <BackButton setMenu={setCreateMenu}/>
+                </div>
+            </form>
+        </ModalContainer>
+    )
+}
+
+export default Create;

src/components/dashboard/patient/appointment/index.jsx

@@ -0,0 +1,51 @@
+import HeadTitle from "../../head-title";
+import { get } from "../../../../modules/fetchManager";
+import { useState } from "react";
+import Loader from "../../loader";
+import Container from "../../container";
+import ListDisplay from "../../list-display";
+import ItemList from "./item-list";
+import Create from "./create";
+import CreateButton from "../../createButton";
+
+function Appointment({user}) {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [appointments, setAppointments] = useState([]);
+    const [createMenu, setCreateMenu] = useState(false);
+
+    if(loading && !error && appointments.length === 0){
+        get('patients/@me/appointments', user.token)
+        .then((data) => {
+            setLoading(false);
+            if(data.status === 404) {
+                setError("Aucun rendez-vous trouvé");
+                return;
+            }
+
+            if(data.status === 500) {
+                setError("Erreur serveur, veuillez réessayer plus tard");
+                return;
+            }
+
+            setAppointments(data.JSON);
+        });
+    }
+
+    return (
+        <div>
+            <HeadTitle title="Rendez-vous"/>
+            <div className="flex justify-center items-center mt-10">
+                <CreateButton setCreateMenu={setCreateMenu} nameMenu="Prendre Rendez-Vous"/>
+            </div>
+            <Container>
+                { loading ? <Loader color={true}/> : null }
+                { error ? <p className="text-2xl">{error}</p> : null }
+                { !error && !loading ? <ListDisplay data={appointments} itemComponent={ItemList}/> : null }
+                { createMenu ? <Create setCreateMenu={setCreateMenu} user={user}/> : null }
+            </Container>
+        </div>
+    );
+}
+
+export default Appointment;

src/components/dashboard/patient/appointment/item-list/index.jsx

@@ -0,0 +1,11 @@
+function ItemList({item}) {
+    return (
+        <div>
+            <h2>{item.date}</h2>
+            <p>{item.doctor}</p>
+            <p>{item.reason}</p>
+        </div>
+    );
+}
+
+export default ItemList;

src/components/dashboard/patient/index.jsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import PageContainer from '../page-container';
+import config from '../../../config';
+import MenuHandler from './menu-handler';
+
+function Patient({user,setUser}) {
+    const [page, setPage] = useState("home");
+    const links = [
+        {page:"home",name:"Accueil"},
+        {page:"appointment",name:"Rendez-vous"},
+        config.prescriptionOn ? {page:"prescription",name:"Préscriptions"} : null,
+        {page:"medical-file",name:"Dossier Médical"},
+        {page:"profil",name:"Profil"}
+    ]
+
+    return (
+        <PageContainer links={links} setUser={setUser} user={user} setPage={setPage}>
+            <MenuHandler page={page} setPage={setPage} user={user} />
+        </PageContainer>
+    )
+}
+
+export default Patient;

src/components/dashboard/patient/medical-file/index.jsx

@@ -1,4 +1,4 @@
-import HeadTitle from "../head-title";
+import HeadTitle from "../../head-title";
 
 function MedicalFile() {
     return (

src/components/dashboard/patient/menu-handler/index.jsx

@@ -0,0 +1,23 @@
+import Home from "../../home";
+import Prescription from "../prescription";
+import MedicalFile from "../medical-file";
+import Appointment from "../appointment";
+import Profil from "../profil";
+
+function MenuHandler({setPage,page,user}) {
+    switch (page) {
+        case "prescription":
+            return <Prescription user={user} />;
+        case "medical-file":
+            return <MedicalFile user={user} />;
+        case "appointment":
+            return <Appointment user={user} />;
+        case "profil":
+            return <Profil user={user} />;
+        default:
+            return <Home user={user} />;
+    }
+    
+}
+
+export default MenuHandler;

src/components/dashboard/patient/prescription/index.jsx

@@ -1,4 +1,4 @@
-import HeadTitle from "../head-title";
+import HeadTitle from "../../head-title";
 
 function Prescription() {
     return (

src/components/dashboard/patient/profil/index.jsx

@@ -0,0 +1,11 @@
+import HeadTitle from "../../head-title";
+
+function Profil() {
+    return (
+        <div>
+            <HeadTitle title="Votre Profil"/>
+        </div>
+    );
+}
+
+export default Profil;

src/components/dashboard/second-menu-bg/index.jsx

@@ -0,0 +1,9 @@
+function SecondMenuBg({children}) {
+    return(
+        <div className="flex justify-center items-center h-screen bg-cyan-800">
+            {children}
+        </div>
+    )
+}
+
+export default SecondMenuBg;

src/components/dashboard/submit-button/index.jsx

@@ -0,0 +1,9 @@
+function SubmitButton() {
+  return (
+    <button type="submit" className="w-36 p-6 border-2 border-green-600 rounded-2xl hover:bg-green-600 hover:text-white transition-all ease-in-out duration-300">
+        Envoyer
+    </button>
+  );
+}
+
+export default SubmitButton;

src/components/dashboard/type-user/container/index.jsx

@@ -0,0 +1,9 @@
+function Container({children}) {
+    return (
+        <div className="flex flex-col gap-7 p-4">
+        {children}
+        </div>
+    );
+}
+
+export default Container;

src/components/dashboard/type-user/doctor-type-user/index.jsx

@@ -0,0 +1,58 @@
+import Container from "../container";
+import BackButton from "../../back-button";
+import SubmitButton from "../../submit-button";
+import { useForm } from 'react-hook-form';
+import { getUserSession, setUserSession } from "../../../../modules/userManager";
+import { post, get } from "../../../../modules/fetchManager";
+
+function DoctorTypeUser({setMenu}) {
+
+    const { register, handleSubmit } = useForm();
+
+    const onSubmit = (data) => {
+        const user = getUserSession();
+        post('doctors/register', data, user.token)
+            .then(data => {
+                if(data.status !== 200) {
+                    alert("Erreur lors de la création du compte médecin");
+                }
+                window.location.href = '/dashboard';
+            });
+    }
+
+    return (
+        <Container>
+            <form action="" method="post" className="flex flex-col gap-10" onSubmit={handleSubmit(onSubmit)}>
+                <div className="text-center text-2xl">
+                    <h2>Création d'un compte Patient</h2>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="email">Email Professionnel</label>
+                    <input type="email" {...register("email", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="phone">Téléphone Professionnel</label>
+                    <input type="tel" {...register("phone", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="speciality">Spécialité</label>
+                    <input type="text" {...register("speciality", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+                </div>
+                <div className="flex flex-row gap-4 justify-between">
+                    <label htmlFor="status">Status</label>
+                    <select {...register("status", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none">
+                        <option value="Available">Disponble</option>
+                        <option value="Absent">Absent</option>
+                        <option value="Unavailable">Indisponible</option>
+                    </select>
+                </div>
+                <div className="flex flex-row gap-8 justify-center">
+                    <BackButton setMenu={setMenu}/>
+                    <SubmitButton/>
+                </div>
+            </form>
+        </Container>
+    );
+}
+
+export default DoctorTypeUser;

src/components/dashboard/type-user/index.jsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import SelectTypeUser from "./select-type-user";
+import DoctorTypeUser from "./doctor-type-user";
+import PatientTypeUser from "./patient-type-user";
+import SecondMenuBg from "../second-menu-bg";
+
+function TypeUser() {
+    const [menu, setMenu] = useState(null);
+
+    return (
+        <SecondMenuBg>
+            <div className="h-auto w-auto border-2 border-cyan-600 rounded-2xl p-5 bg-white text-xl" >
+                {menu === "patient" ? <PatientTypeUser setMenu={setMenu} /> : null}
+                {menu === "doctor" ? <DoctorTypeUser setMenu={setMenu} /> : null}
+                {(menu !== "patient" && menu !== "doctor") ? <SelectTypeUser setMenu={setMenu} /> : null}
+            </div>
+        </SecondMenuBg>
+    );
+}
+
+export default TypeUser;

src/components/dashboard/type-user/patient-type-user/index.jsx

@@ -0,0 +1,63 @@
+import Container from "../container";
+import BackButton from "../../back-button";
+import SubmitButton from "../../submit-button";
+import { useForm } from 'react-hook-form';
+import { getUserSession, setUserSession } from "../../../../modules/userManager";
+import { post, get } from "../../../../modules/fetchManager";
+
+function PatientTypeUser({setMenu}) {
+
+    const { register, handleSubmit } = useForm();
+
+    const onSubmit = (data) => {
+        const user = getUserSession();
+        post('patients/register', data, user.token)
+            .then(data => {
+                console.log(data);
+                if(data.status !== 200) {
+                    alert("Erreur lors de la création du compte patient");
+                }
+                window.location.href = '/dashboard';
+            });
+    }
+
+    return(
+    <Container>
+        <form action="" method="post" className="flex flex-col gap-10" onSubmit={handleSubmit(onSubmit)}>
+            <div className="text-center text-2xl">
+                <h2>Création d'un compte Patient</h2>
+            </div>
+            <div className="flex flex-row gap-4 justify-between">
+                <label htmlFor="date_of_birth">Date de naissance</label>
+                <input type="date" {...register("date_of_birth", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+            </div>
+            <div className="flex flex-row gap-4 justify-between">
+                <label htmlFor="gender">Genre</label>
+                <select {...register("gender", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none">
+                    <option value="M">Homme</option>
+                    <option value="F">Femme</option>
+                    <option value="O">Autre</option>
+                </select>
+            </div>
+            <div className="flex flex-row gap-4 justify-between">
+                <label htmlFor="address">Adresse</label>
+                <input type="text" {...register("address", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+            </div>
+            <div className="flex flex-row gap-4 justify-between">
+                <label htmlFor="social_security_number">Numéro de sécurité social</label>
+                <input type="text" {...register("social_security_number", {required: true})} pattern="[12][0-9]{2}(0[1-9]|1[0-2])(2[AB]|[0-9]{2})[0-9]{3}[0-9]{3}([0-9]{2})" className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+            </div>
+            <div className="flex flex-row gap-4 justify-between">
+                <label htmlFor="insurance_number">Numéro d'assurance</label>
+                <input type="text" {...register("insurance_number", {required: true})} className="border-b-2 border-cyan-800 w-1/2 focus:outline-none"/>
+            </div>
+            <div className="flex flex-row gap-8 justify-center">
+                <BackButton setMenu={setMenu}/>
+                <SubmitButton/>
+            </div>
+        </form>
+    </Container>
+    );
+}
+
+export default PatientTypeUser;

src/components/dashboard/type-user/select-type-user/index.jsx

@@ -0,0 +1,33 @@
+import Container from "../container";
+
+function SelectTypeUser({setMenu}) {
+
+    const handleClick = (e) => {
+        e.preventDefault();
+        const type = e.target.id;
+        if (type !== "patient" && type !== "doctor") {
+            setMenu(null);
+            return;
+        }
+        setMenu(type);
+    }
+
+    return(
+    <Container>
+        <div className="text-center">
+            <h2 className="text-2xl mb-4">Type d'utilisateur</h2>
+            <p>Choisissez le type de compte que vous souhaitez créer</p>
+        </div>
+        <div className="flex flex-col items-center gap-5">
+            <button id="patient" className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
+                Patient
+            </button>
+            <button id="doctor" className="w-52 p-6 border-2 border-cyan-600 rounded-2xl hover:bg-cyan-600 hover:text-white transition-all ease-in-out duration-300" onClick={handleClick}>
+                Docteur
+            </button>
+        </div>
+    </Container>
+    );
+}
+
+export default SelectTypeUser;

src/index.js

@@ -9,6 +9,7 @@ import Home from './components/vitrine/home';
 import Login from './components/auth/login';
 import Register from './components/auth/register';
 import Dashboard from './components/dashboard';
+import VerifyEmail from './components/auth/verifyEmail';
 
 const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
   {
     path: "dashboard",
     element: <Dashboard />,
+  },
+  {
+    path: "email/verify",
+    element: <VerifyEmail />,
   }
 ]);
 

src/modules/fetchManager.js

@@ -8,6 +8,7 @@ function selectUrl(url) {
 async function get(url, token = 'none') {
 	const options = {
 		method: 'GET',
+		mode: 'cors',
 		headers: { 'Content-Type': 'application/json', authorization: `${token}` },
 	};
 
@@ -27,8 +28,6 @@ async function post(url, body, token = 'none') {
 		body: JSON.stringify(body),
 	};
 
-	console.log(body);
-
 	return await fetch(selectUrl(url), options)
 		.then(res => res.json())
 		.then(json => {

src/modules/userManager.js

@@ -0,0 +1,21 @@
+function getUserSession() {
+    const user = JSON.parse(window.sessionStorage.getItem('user'));
+    if (!user) {
+        return false;
+      }
+      return user;
+
+}
+
+function setUserSession(user) {
+    if(!user || !user.token || !user.data) return false;
+    window.sessionStorage.setItem('user', JSON.stringify(user));
+    return true;
+}
+
+function removeUserSession() {
+    window.sessionStorage.removeItem('user');
+    return true;
+}
+
+export { getUserSession, setUserSession, removeUserSession };