frontend: Page d'inscription + Hotfix backend

website/components/FunctionForm.js

@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import Loader from '../Loader';
-import './FunctionForm.css';
+import Loader from './Loader';
 import htmlParser from 'html-react-parser';
-import api from '../../utils/api';
+import api from '../utils/api';
 
 const FunctionForm = (props) => {
     // console.log(props);
@@ -48,24 +47,24 @@ const FunctionForm = (props) => {
                     let inputResult;
                     switch(input.type) {
                         case "text" || "number":
-                            inputResult = (<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="FunctionForm__control" />);
+                            inputResult = (<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />);
                             break;
                         default:
                             inputResult = (<p>Erreur, l'input n'est pas valide...</p>);
                     }
                     return (
-                        <div key={index} className="FunctionForm__group">
-                            <label className="FunctionForm__label"  htmlFor={input.name}>{input.label}</label>
+                        <div key={index} className="form-group">
+                            <label className="form-label"  htmlFor={input.name}>{input.label}</label>
                             {inputResult}
                         </div>
                     );
                 })}
                 
-                <div className="FunctionForm__submit text-center">
+                <div className="form-group text-center">
                     <button type="submit" className="btn btn-dark">Envoyer</button>
                 </div>
             </form>
-            <div className="FunctionForm__result text-center">
+            <div className="form-result text-center">
                 {
                     (isLoading) ? 
                         <Loader />

website/components/FunctionForm/FunctionForm.css

@@ -1,41 +0,0 @@
-.FunctionForm__control {
-    display: block;
-    width: 100%;
-    height: calc(1.5em + .75rem + 2px);
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-}
-.FunctionForm__label {
-    display: inline-block;
-    margin-bottom: .5em;
-    font-size: 16px;
-}
-.FunctionForm__submit, .FunctionForm__result {
-    margin-top: 25px;
-}
-.btn {
-    cursor: pointer;
-    border: 1px solid transparent;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: .25rem;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
-.btn-dark:hover {
-    color: #fff;
-    background-color: #23272b;
-    border-color: #1d2124;
-}
-.btn-dark {
-    color: #fff;
-    background-color: #343a40;
-    border-color: #343a40;
-}

website/components/Header/Header.js

@@ -5,17 +5,10 @@ import './Header.css';
 
 export default function Header() {
 
-    const [hamburgerIcon, setHamburgerIcon] = useState("");
-    const [navbarList, setNavbarList] = useState("");
+    const [isActive, setIsActive] = useState(false);
 
     const toggleNavbar = () => {
-        if (hamburgerIcon) {
-            setHamburgerIcon("");
-            setNavbarList("");
-        } else {
-            setHamburgerIcon("Header__hamburger-active");
-            setNavbarList("navbar__list-active");
-        }
+        setIsActive(!isActive);
     }
 
     return (
@@ -31,15 +24,17 @@ export default function Header() {
                 </Link>
 
                 {/* Hamburger icon on Mobile */}
-                <div onClick={toggleNavbar} className={"Header__hamburger " + hamburgerIcon}>
+                <div onClick={toggleNavbar} className={`Header__hamburger ${(isActive) ? "Header__hamburger-active" : ""}`}>
                     <span></span>
                 </div>
 
                 {/* Navigation */}
                 <nav className="Header__navbar">
-                    <ul className={"navbar__list " + navbarList}>
+                    <ul className={`navbar__list ${(isActive) ? "navbar__list-active" : ""}`}>
                         <NavigationLink name="Accueil" path="/" />
                         <NavigationLink name="Fonctions" path="/functions" />
+                        <NavigationLink name="S'inscrire" path="/register" />
+                        <NavigationLink name="Connexion" path="/login" />
                     </ul>
                 </nav>