From 7d4942210801956de7067964e4714087c6c0a22e Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Wed, 25 Mar 2020 18:22:03 +0100
Subject: [PATCH] frontend: Page d'inscription + Hotfix backend

---
 api/controllers/users.js                      |  4 +-
 api/routes/users.js                           |  6 +-
 .../{FunctionForm => }/FunctionForm.js        | 15 ++--
 .../components/FunctionForm/FunctionForm.css  | 41 ----------
 website/components/Header/Header.js           | 17 ++---
 website/pages/functions/[slug].js             |  2 +-
 website/pages/functions/index.js              |  4 +-
 website/pages/register.js                     | 75 +++++++++++++++++++
 website/public/css/general.css                | 38 +++++++++-
 website/public/css/pages/functions.css        | 14 +++-
 website/public/css/pages/register-login.css   | 14 ++++
 11 files changed, 160 insertions(+), 70 deletions(-)
 rename website/components/{FunctionForm => }/FunctionForm.js (82%)
 delete mode 100644 website/components/FunctionForm/FunctionForm.css
 create mode 100644 website/pages/register.js
 create mode 100644 website/public/css/pages/register-login.css

diff --git a/api/controllers/users.js b/api/controllers/users.js
index 408fe65..1f5d2ab 100644
--- a/api/controllers/users.js
+++ b/api/controllers/users.js
@@ -10,7 +10,7 @@ const { EMAIL_INFO, HOST }          = require('../assets/config/config');
 const { signupEmail }               = require('../assets/config/emails');
 const Users                         = require('../models/users');
 
-exports.signup = async (req, res, next) => {
+exports.register = async (req, res, next) => {
     const { name, email, password } = req.body;
     const errors = validationResult(req);
     if (!errors.isEmpty()) {
@@ -47,7 +47,7 @@ exports.login = async (req, res, next) => {
         const token = jwt.sign({ 
             email: user.email, userId: user.id
         }, JWT_SECRET, { expiresIn: '1h' });
-        return res.status(200).json({ token, id: user.id, name: user.name, email: user.email, logo: user.logo, isAdmin: user.isAdmin, createdAt: user.createdAt });
+        return res.status(200).json({ token, id: user.id, name: user.name, email: user.email, biography: user.biography, logo: user.logo, isPublicEmail: user.isPublicEmail, isAdmin: user.isAdmin, createdAt: user.createdAt });
     } catch (error) {
         console.log(error);
         errorHandling(next, serverError);
diff --git a/api/routes/users.js b/api/routes/users.js
index d0c4879..25a0804 100644
--- a/api/routes/users.js
+++ b/api/routes/users.js
@@ -9,7 +9,7 @@ const UsersRouter = Router();
 UsersRouter.post('/login', usersController.login);
 
 // Permet de s'inscrire
-UsersRouter.post('/signup', [
+UsersRouter.post('/register', [
     body('email')
         .isEmail()
         .withMessage("Veuillez rentré une adresse mail valide.")
@@ -31,7 +31,7 @@ UsersRouter.post('/signup', [
         .trim()
         .not()
         .isEmpty()
-        .withMessage("Votre nom ne peut pas être vide.")
+        .withMessage("Vous devez avoir un nom (ou pseudo).")
         .isAlphanumeric()
         .withMessage("Votre nom ne peut contenir que des lettres ou/et des nombres.")
         .custom((async (name) => {
@@ -44,7 +44,7 @@ UsersRouter.post('/signup', [
                 return console.log(error);
             }
         }))
-], usersController.signup);
+], usersController.register);
 
 // Confirme l'inscription
 UsersRouter.get('/confirm-email/:tempToken', usersController.confirmEmail);
diff --git a/website/components/FunctionForm/FunctionForm.js b/website/components/FunctionForm.js
similarity index 82%
rename from website/components/FunctionForm/FunctionForm.js
rename to website/components/FunctionForm.js
index 5041227..08a6cf4 100644
--- a/website/components/FunctionForm/FunctionForm.js
+++ b/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 />
diff --git a/website/components/FunctionForm/FunctionForm.css b/website/components/FunctionForm/FunctionForm.css
deleted file mode 100644
index b2c64f6..0000000
--- a/website/components/FunctionForm/FunctionForm.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/website/components/Header/Header.js b/website/components/Header/Header.js
index 4f8aea0..88acc02 100644
--- a/website/components/Header/Header.js
+++ b/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>
 
diff --git a/website/pages/functions/[slug].js b/website/pages/functions/[slug].js
index 1cb29b7..15dd8a6 100644
--- a/website/pages/functions/[slug].js
+++ b/website/pages/functions/[slug].js
@@ -3,7 +3,7 @@ import HeadTag from '../../components/HeadTag';
 import FunctionComponentTop from '../../components/FunctionComponentTop';
 import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
 import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
-import FunctionForm from '../../components/FunctionForm/FunctionForm';
+import FunctionForm from '../../components/FunctionForm';
 import redirect from '../../utils/redirect';
 import api from '../../utils/api';
 import { API_URL } from '../../utils/config';
diff --git a/website/pages/functions/index.js b/website/pages/functions/index.js
index cc015ba..e2bc4a0 100644
--- a/website/pages/functions/index.js
+++ b/website/pages/functions/index.js
@@ -82,13 +82,13 @@ const Functions = () => {
                 </div>
 
                 <div className="Functions__search-container row justify-content-center">
-                    <select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select form-control">
+                    <select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select Functions__form-control">
                         <option value="0">Toutes catégories</option>
                         {categories.map((category) => (
                             <option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
                         ))}
                     </select>
-                    <input value={inputSearch.search} onChange={handleChange} type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
+                    <input value={inputSearch.search} onChange={handleChange} type="search" className="Functions__form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
                 </div>
     
                 <div className="row justify-content-center">
diff --git a/website/pages/register.js b/website/pages/register.js
new file mode 100644
index 0000000..64ccccd
--- /dev/null
+++ b/website/pages/register.js
@@ -0,0 +1,75 @@
+import { Fragment, useState } from 'react';
+import htmlParser from 'html-react-parser';
+import Loader from '../components/Loader';
+import HeadTag from '../components/HeadTag';
+import '../public/css/pages/register-login.css';
+import api from '../utils/api';
+
+const Register = () => {
+    
+    const [inputState, setInputState] = useState({});
+    const [message, setMessage] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    
+    const handleChange = () => {
+        const inputStateNew = { ...inputState };
+        inputStateNew[event.target.name] = event.target.value;
+        setInputState(inputStateNew);
+    }
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        api.post('/users/register', inputState)
+            .then(({ data }) => {
+                setMessage(`<p class="form-success"><b>Succès:</b> ${data.result}</p>`);
+            })
+            .catch((error) => {
+                setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`);
+            });
+    }
+
+    return (
+        <Fragment>
+            <HeadTag 
+                title="S'inscrire" 
+                description="Créer un compte." 
+            />
+            <div className="container Register-Login__container">
+                <div className="row Register-Login__row justify-content-center">
+                    <div className="col-20">
+                        <h1 className="Register-Login__title">S'inscrire</h1>
+                        <form onSubmit={handleSubmit}>
+                            <div className="form-group">
+                                <label className="form-label" htmlFor="name">Nom :</label>
+                                <input onChange={handleChange} type="text" name="name" id="name" className="form-control" placeholder="Divlo" />
+                            </div>
+
+                            <div className="form-group">
+                                <label className="form-label" htmlFor="name">Email :</label>
+                                <input onChange={handleChange} type="email" name="email" id="email" className="form-control" placeholder="email@gmail.com" />
+                            </div>
+
+                            <div className="form-group">
+                                <label className="form-label" htmlFor="name">Mot de passe :</label>
+                                <input onChange={handleChange} type="password" name="password" id="password" className="form-control" placeholder="******" />
+                            </div>
+
+                            <div className="form-group text-center">
+                                <button type="submit" className="btn btn-dark">Envoyer</button>
+                            </div>
+                        </form>
+                        <div className="form-result text-center">
+                            {
+                                (isLoading) ? 
+                                    <Loader />
+                                :
+                                    htmlParser(message)
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}
+export default Register;
\ No newline at end of file
diff --git a/website/public/css/general.css b/website/public/css/general.css
index 688f30c..ac5e396 100644
--- a/website/public/css/general.css
+++ b/website/public/css/general.css
@@ -84,8 +84,12 @@ a, .important {
 .d-none {
     display: none !important;
 }
+.form-group {
+    margin-top: 1.4rem;
+}
 .form-control {
     display: block;
+    width: 100%;
     height: calc(1.5em + .75rem + 2px);
     padding: .375rem .75rem;
     font-size: 1rem;
@@ -95,5 +99,37 @@ a, .important {
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
-    border-radius: .5em;
+    border-radius: .25rem;
+}
+.form-label {
+    display: inline-block;
+    margin-bottom: .5em;
+}
+.form-result {
+    margin-top: 25px;
+}
+.form-success {
+    color: #90EE90;
+}
+.form-error {
+    color: #ff7f7f;
+}
+.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;
 }
\ No newline at end of file
diff --git a/website/public/css/pages/functions.css b/website/public/css/pages/functions.css
index 44cd0fc..f52f045 100644
--- a/website/public/css/pages/functions.css
+++ b/website/public/css/pages/functions.css
@@ -2,7 +2,19 @@
     padding: 20px 0 20px 0;
     margin-bottom: 0;
 }
-
+.Functions__form-control {
+    display: block;
+    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: .5em;
+}
 .Functions__search-container {
     margin-bottom: 50px;
 }
diff --git a/website/public/css/pages/register-login.css b/website/public/css/pages/register-login.css
new file mode 100644
index 0000000..d02a231
--- /dev/null
+++ b/website/public/css/pages/register-login.css
@@ -0,0 +1,14 @@
+.Register-Login__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.Register-Login__row {
+    padding: 30px;
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
+    border: 1px solid black;
+    border-radius: 1rem;
+}
+.Register-Login__title {
+    text-align: center;
+}
\ No newline at end of file