From 080c46593ca5f3d2e1a696c4146e4eafb3c166e9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 7 Jul 2020 23:24:10 +0200
Subject: [PATCH] - Added error handler to register form

---
 client/src/api/usersRepository.js             |   2 +-
 client/src/assets/scss/_global.scss           |   4 +
 .../src/components/global/navbar/navbar.vue   |   5 +-
 client/src/pages/index-page.vue               |  19 ++-
 client/src/pages/user/login-page.vue          |  31 ++--
 client/src/pages/user/register-page.vue       | 146 +++++++++++++++++-
 client/src/routes.js                          |   6 +
 repositories/user-repository.js               |   4 +-
 8 files changed, 191 insertions(+), 26 deletions(-)

diff --git a/client/src/api/usersRepository.js b/client/src/api/usersRepository.js
index 9320855..2e041a9 100644
--- a/client/src/api/usersRepository.js
+++ b/client/src/api/usersRepository.js
@@ -6,7 +6,7 @@ export default {
     login(data) {
         return api.post(`${resource}/login`, data)
     },
-    addOne(data) {
+    register(data) {
         return api.post(`${resource}`, data)
     },
 }
\ No newline at end of file
diff --git a/client/src/assets/scss/_global.scss b/client/src/assets/scss/_global.scss
index 8968aae..37fcf93 100644
--- a/client/src/assets/scss/_global.scss
+++ b/client/src/assets/scss/_global.scss
@@ -56,6 +56,10 @@ hr {
     cursor: pointer;
 }
 
+.btn {
+    margin-right: 5px;
+}
+
 // LAYOUTS
 .fullpage {
     min-height: calc(100vh - 56px);
diff --git a/client/src/components/global/navbar/navbar.vue b/client/src/components/global/navbar/navbar.vue
index 8a8a473..85ec442 100644
--- a/client/src/components/global/navbar/navbar.vue
+++ b/client/src/components/global/navbar/navbar.vue
@@ -10,12 +10,11 @@
                     <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
                 </li>
             </ul>
-            <div class="navbar-nav" v-if="loggedIn">
+            <div v-if="loggedIn" class="navbar-nav">
                 <router-link :to="'/profil'" class="nav-link">Profil</router-link>
                 <div @click="logoutUser()" class="nav-link">Deconnexion</div>
             </div>
-            <div class="navbar-nav" v-else>
-                <router-link :to="'/inscription'" class="nav-link">S'inscrire</router-link>
+            <div v-else class="navbar-nav">
                 <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
             </div>
         </div>
diff --git a/client/src/pages/index-page.vue b/client/src/pages/index-page.vue
index 0100af5..3018784 100644
--- a/client/src/pages/index-page.vue
+++ b/client/src/pages/index-page.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="container-fluid">
-        <section class="fullpage">
-            <div class="px-4">
+        <section class="d-flex justify-content-center align-items-center">
+            <main class="px-4">
                 <h1 class="title text-dark mb-4 font-display line-height-100">"C'est magique, ta gueule."</h1>
                 <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
                 <hr class="w-50">
                 <div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
-            </div>
+            </main>
         </section>
     </div>
 </template>
@@ -18,9 +18,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.title {
-    font-size: 5rem;
-    font-weight: 900;
+section {
+    min-height: calc(100vh - 56px);
+    main {
+        width: 1000px;
+        .title {
+            font-size: 5rem;
+            font-weight: 700;
+            text-align: center;
+        }
+    }
 }
 @media only screen and (max-width: 600px) {
     .title {
diff --git a/client/src/pages/user/login-page.vue b/client/src/pages/user/login-page.vue
index 5aa5499..5317808 100644
--- a/client/src/pages/user/login-page.vue
+++ b/client/src/pages/user/login-page.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container-fluid">
-        <section class="fullpage">
-            <div>
+        <section class="d-flex justify-content-center align-items-center">
+            <main>
                 <div class="title font-display mb-3">Connexion</div>
                 <form @submit="logUser">
                     <div class="form-group">
@@ -24,9 +24,11 @@
                             class="form-control"
                             autocomplete="current-password">
                     </div>
-                    <button type="submit" class="btn btn-dark">Connexion</button>
+                    <button type="submit" class="btn btn-primary">Connexion</button>
+                    <router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link>
+                    <small class="form-text text-muted">Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer !</small>
                 </form>
-            </div>
+            </main>
         </section>
     </div>
 </template>
@@ -42,11 +44,16 @@ export default {
         return {
             email: "",
             password: "",
+            submitted: false,
+            errors: {
+                login: ""
+            }
         }
     },
     methods: {
         async logUser(e) {
             e.preventDefault()
+
             Users.login({
                 "mail": this.email,
                 "password": this.password
@@ -57,9 +64,8 @@ export default {
                 this.$store.commit('loginSucceed', user)
                 this.$router.push('/profil')
             })
-            .catch(err => {
+            .catch(() => {
                 this.$store.commit('loginFailed')
-                console.log(err)
             })
         }
     }
@@ -67,9 +73,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.title {
-    font-size: 5rem;
-    font-weight: 700;
+section {
+    min-height: calc(100vh - 56px);
+    main {
+        width: 600px;
+        .title {
+            font-size: 5rem;
+            font-weight: 700;
+            text-align: center;
+        }
+    }
 }
 @media only screen and (max-width: 600px) {
     .title {
diff --git a/client/src/pages/user/register-page.vue b/client/src/pages/user/register-page.vue
index d254b84..f55518c 100644
--- a/client/src/pages/user/register-page.vue
+++ b/client/src/pages/user/register-page.vue
@@ -1,21 +1,157 @@
 <template>
     <div class="container-fluid">
-        <section class="fullpage">
-            <div class="title font-display mb-3">Inscription</div>
+        <section class="d-flex justify-content-center align-items-center">
+            <main>
+                <div class="title font-display mb-3">Inscription</div>
+                <form @submit="registerUser">
+                    <div class="form-group">
+                        <label for="email">Pseudo</label>
+                        <input
+                            v-model="name"
+                            :class="{
+                                'is-invalid': errors.name,
+                                'is-valid': submitted && !errors.name }"
+                            type="text"
+                            id="username"
+                            class="form-control"
+                            placeholder="John Doe"
+                            autocomplete="username">
+                        <small v-if="!errors.name" class="form-text text-muted">Vous pouvez changer votre pseudo à tout moment.</small>
+                        <small v-if="errors.name" class="text-danger">{{ errors.name }}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Addresse mail</label>
+                        <input
+                            v-model="email"
+                            :class="{
+                                'is-invalid': errors.email,
+                                'is-valid': submitted && !errors.email }"
+                            type="email"
+                            id="email"
+                            class="form-control"
+                            placeholder="john.doe@gmail.com"
+                            autocomplete="email">
+                        <small v-if="!errors.email" class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
+                        <small v-if="errors.email" class="text-danger">{{ errors.email }}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Mot de passe</label>
+                        <input
+                            :class="{
+                                'is-invalid': errors.password,
+                                'is-valid': submitted && !errors.password }"
+                            v-model="password"
+                            type="password"
+                            id="password"
+                            class="form-control"
+                            autocomplete="password">
+                    </div>
+                    <div class="form-group">
+                        <label for="password_check">Confirmer le mot de passe</label>
+                        <input
+                            v-model="password_check"
+                            :class="{
+                                'is-invalid': errors.password_check || errors.password,
+                                'is-valid': submitted && !errors.password_check}"
+                            type="password"
+                            id="password_check"
+                            class="form-control"
+                            autocomplete="password-verification">
+                        <small v-if="!errors.password && !errors.password_check" class="form-text text-muted">Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres.</small>
+                        <small v-if="errors.password" class="text-danger">{{ errors.password }}</small>
+                        <small v-if="errors.password_check" class="text-danger">{{ errors.password_check }}</small>
+                    </div>
+                    <button type="submit" class="btn btn-dark">Inscription</button>
+                </form>
+            </main>
         </section>
     </div>
 </template>
 
 <script>
+// API
+import { RepositoryFactory } from "~/api/repositories"
+const Users = RepositoryFactory.get('users')
+
 export default {
     name: 'register-page',
+    data() {
+        return {
+            name: "",
+            email: "",
+            password: "",
+            password_check: "",
+            submitted: false,
+            errors: {
+                name: "",
+                email: "",
+                password: "",
+                password_check: "",
+            },
+        }
+    },
+    methods: {
+        async registerUser(e) {
+            e.preventDefault()
+
+            // Resets old errors if any
+            for (const o in this.errors) {
+                this.errors[o] = ""
+            }
+            this.submitted = true
+
+            if (!this.name) {
+                this.errors.name = "Vous devez renseigner un pseudonyme."
+            }
+            if (!this.email) {
+                this.errors.email = "Vous devez renseigner une addresse mail."
+            }
+            if (!this.password) {
+                this.errors.password = "Vous devez renseigner un mot de passe."
+            }
+            if ((this.password.localeCompare(this.password_check)) != 0) {
+                this.errors.password_check = "Les mots de passe ne correspondent pas."
+            }
+
+            // Stops the method if any errors exist
+            for (const o in this.errors) {
+                if (this.errors[o]) {
+                    return true
+                }
+            }
+
+            Users.register({
+                "name": this.name,
+                "mail": this.email,
+                "password": this.password
+            })
+            .then(v => {
+                let user = v.data.user
+                this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
+                this.$store.commit('registerSucceed', user)
+                this.$router.push('/profil')
+            })
+            .catch(err => {
+                let error = err.response.data.error
+                this.errors.email = error
+                this.$store.commit('registerFail')
+            })
+        }
+    }
 }
 </script>
 
 <style lang="scss" scoped>
-.title {
-    font-size: 5rem;
-    font-weight: 700;
+section {
+    min-height: calc(100vh - 56px);
+    main {
+        width: 600px;
+        .title {
+            font-size: 5rem;
+            font-weight: 700;
+            text-align: center;
+        }
+    }
 }
 @media only screen and (max-width: 600px) {
     .title {
diff --git a/client/src/routes.js b/client/src/routes.js
index e19646a..94f2c96 100644
--- a/client/src/routes.js
+++ b/client/src/routes.js
@@ -27,10 +27,16 @@ const routes = [
     {
         path: '/connexion',
         component: Login,
+        meta: {
+            antiAuthGuard: true
+        }
     },
     {
         path: '/inscription',
         component: Register,
+        meta: {
+            antiAuthGuard: true
+        }
     },
     {
         path: '/sorts',
diff --git a/repositories/user-repository.js b/repositories/user-repository.js
index 6bd5174..88c7046 100644
--- a/repositories/user-repository.js
+++ b/repositories/user-repository.js
@@ -150,7 +150,7 @@ class UserRepository {
                     })
                 } else {
                     reject({
-                        "message": "The email and passwords don't match.",
+                        "message": "Les informations de connexion sont erronées.",
                     })
                 }
             })
@@ -166,7 +166,7 @@ class UserRepository {
             this.getOneByEmail(mail, false)
             .then(() => {
                 reject({
-                    "message": "Email is already in use !",
+                    "message": "L'email est déjà utilisé par un autre utilisateur.",
                     "code": 403
                 })
             })