From 65abb41a9fd2570e7efb432a27662884ec4bdf1d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 23 Dec 2020 20:25:43 +0100
Subject: [PATCH] - Implemented store for register methods

---
 api/routes/users.js                     |   4 -
 client/src/api/usersRepository.js       |   3 +
 client/src/pages/user/login-page.vue    |  77 +++---
 client/src/pages/user/register-page.vue | 318 ++++++++++++++----------
 client/src/store/modules/user.store.js  |  24 +-
 client/vue.config.js                    |  30 +--
 6 files changed, 264 insertions(+), 192 deletions(-)

diff --git a/api/routes/users.js b/api/routes/users.js
index ab41d03..8e0ac19 100644
--- a/api/routes/users.js
+++ b/api/routes/users.js
@@ -17,7 +17,6 @@ const Users = new UserRepository();
 const getUsers = () => {
     return Users.getAll()
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
@@ -42,7 +41,6 @@ router.get('/', async (req, res) => {
 const getUserByUUID = (uuid) => {
     return Users.getOneByUUID(uuid)
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
@@ -67,7 +65,6 @@ router.get('/:uuid/', async (req, res) => {
 const checkIfEmailAvailable = (mail) => {
   return Users.checkIfEmailAvailable(mail)
   .catch(err => {
-      console.log(err)
       throw err
   })
 }
@@ -92,7 +89,6 @@ router.get('/available/:mail/', async (req, res) => {
 const logUser = (mail, password) => {
     return Users.logUser(mail, password)
     .catch(err => {
-        console.log(err)
         throw err
     })
 }
diff --git a/client/src/api/usersRepository.js b/client/src/api/usersRepository.js
index dfa0283..a3a9708 100644
--- a/client/src/api/usersRepository.js
+++ b/client/src/api/usersRepository.js
@@ -6,6 +6,9 @@ export default {
   getOneFromUUID(uuid) {
     return api.get(`${resource}/${uuid}`,)
   },
+  checkEmailAvailable(mail) {
+    return api.get(`${resource}/available/${mail}`)
+  },
   login(data) {
     return api.post(`${resource}/login`, data)
   },
diff --git a/client/src/pages/user/login-page.vue b/client/src/pages/user/login-page.vue
index cf8e2a9..ec406c1 100644
--- a/client/src/pages/user/login-page.vue
+++ b/client/src/pages/user/login-page.vue
@@ -14,22 +14,22 @@
               id="email"
               class="form-control"
               :class="{
-                'is-invalid': errors.mailEmpty || errors.login,
-                'is-valid': submitted && !errors.mailEmpty }"
+                'is-invalid': errors.email || errors.login,
+                'is-valid': submitted && !errors.email }"
               placeholder="john.doe@gmail.com"
               autocomplete="email">
 
             <small
-              v-if="!errors.mailEmpty"
+              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.mailEmpty"
+              v-if="errors.email"
               class="form-text text-danger"
             >
-              Veuillez renseigner une adresse mail.
+              {{ errors.email }}
             </small>
           </div>
 
@@ -40,21 +40,19 @@
               type="password"
               id="password"
               class="form-control"
-              :class="{
-                'is-invalid': errors.passwordEmpty || errors.login,
-                'is-valid': submitted && !errors.passwordEmpty }"
+              :class="{ 'is-invalid': errors.password || errors.login }"
               autocomplete="current-password">
             <small
-              v-if="!errors.passwordEmpty"
+              v-if="!errors.password"
               class="form-text text-muted"
             >
               Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
             </small>
             <small
-              v-if="errors.passwordEmpty"
+              v-if="errors.password"
               class="form-text text-danger"
             >
-              Veuillez renseigner un mot de passe.
+              {{ errors.password }}
             </small>
           </div>
 
@@ -98,50 +96,55 @@ export default {
         submitted: false,
 
         errors: {
-          mailEmpty: "",
-          passwordEmpty: "",
+          email: "",
+          password: "",
           login: "",
         }
       }
     },
     methods: {
       async logUser(e) {
+        e.preventDefault();
 
+        // Resets old errors if any
+        for (const o in this.errors) {
+          this.errors[o] = ""
+        }
         this.submitted = true;
 
-        this.errors = this.resetErrors();
-
         let userInput = {
           "mail": this.email,
           "password": this.password
         };
 
-        if (this.email && this.password) {
-          this.$store.dispatch('user_login', userInput)
-            .then(() => {
-              this.$router.push('/profil');
-            })
-            .catch(() => {
-              this.errors.login = "Erreur d'authentification. Les identifiants ne correspondent pas."
-            });
-        } else {
-          if (!userInput.mail) {
-            this.errors.mailEmpty = "Veuillez entrer une addresse mail valide."
-          }
-          if (!userInput.password) {
-            this.errors.passwordEmpty = "Veuillez entrer un mot de passe."
+        if (!userInput.mail) {
+          this.errors.email = "Vous devez renseigner une addresse mail."
+        }
+        if (!userInput.password) {
+          this.errors.password = "Vous devez renseigner un mot de passe."
+        }
+
+        // Stops the method if any errors exist
+        for (const o in this.errors) {
+          if (this.errors[o] != "") {
+            this.submitted = false;
           }
         }
 
-        e.preventDefault();
-      },
-      resetErrors() {
-        return {
-          mailEmpty: "",
-          passwordEmpty: "",
-          login: "",
+        if (this.submitted) {
+          this.$store.dispatch('user_login', userInput)
+            .then(() => {
+              this.$router.push('/profil')
+            })
+            .catch(err => {
+              if (err.status === 404) {
+                this.errors.email = err.data.error;
+              } else {
+                this.errors.login = "Une erreur inconnue est survenue, rééssayez plus tard.";
+              }
+            });
         }
-      }
+      },
     }
 }
 </script>
diff --git a/client/src/pages/user/register-page.vue b/client/src/pages/user/register-page.vue
index db9a38d..e493d30 100644
--- a/client/src/pages/user/register-page.vue
+++ b/client/src/pages/user/register-page.vue
@@ -1,143 +1,193 @@
 <template>
-    <div class="container-fluid">
-        <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="form-text 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="form-text 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="form-text text-danger">{{ errors.password }}</small>
-                        <small v-if="errors.password_check" class="form-text text-danger">{{ errors.password_check }}</small>
-                    </div>
-                    <button type="submit" class="btn btn-dark">Inscription</button>
-                </form>
-            </main>
-        </section>
-    </div>
+  <div class="container-fluid">
+    <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">Nom d'utilisateur</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="form-text text-danger"
+            >
+              {{ errors.name }}
+            </small>
+          </div>
+
+          <div class="form-group">
+            <label for="email">Adresse 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="form-text 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="form-text text-danger"
+              >
+                {{ errors.password }}
+                </small>
+              <small
+                v-if="errors.password_check"
+                class="form-text text-danger"
+              >
+                {{ errors.password_check }}
+              </small>
+          </div>
+
+          <div class="form-group">
+            <small v-if="errors.register" class="text-danger">{{ errors.register }}</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')
-            })
-        }
+  name: 'register-page',
+  data() {
+    return {
+      name: "",
+      email: "",
+      password: "",
+      password_check: "",
+      submitted: false,
+      errors: {
+        name: "",
+        email: "",
+        password: "",
+        password_check: "",
+        register: "",
+      },
     }
+  },
+  methods: {
+    async registerUser(e) {
+      e.preventDefault();
+
+      // Resets old errors if any
+      for (const o in this.errors) {
+        this.errors[o] = ""
+      }
+      this.submitted = true;
+
+      let userInput = {
+        "name": this.name,
+        "mail": this.email,
+        "password": this.password
+      }
+
+      if (!userInput.name) {
+        this.errors.name = "Vous devez renseigner un pseudonyme."
+      }
+
+      if (!userInput.mail) {
+        this.errors.email = "Vous devez renseigner une addresse mail."
+      }
+
+      if (!userInput.password) {
+        this.errors.password = "Vous devez renseigner un mot de passe."
+      }
+
+      if ((userInput.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] != "") {
+          this.submitted = false;
+        }
+      }
+
+      if (this.submitted) {
+        this.$store.dispatch('user_register', userInput)
+          .then(() => {
+            this.$router.push('/');
+          })
+          .catch(err => {
+            if (err.status === 409) {
+              this.errors.email = err.data.error;
+            } else {
+              this.errors.register = "Une erreur inconnue est survenue, rééssayez plus tard.";
+            }
+          });
+      }
+    }
+  }
 }
 </script>
 
diff --git a/client/src/store/modules/user.store.js b/client/src/store/modules/user.store.js
index c3a8824..33424a9 100644
--- a/client/src/store/modules/user.store.js
+++ b/client/src/store/modules/user.store.js
@@ -14,6 +14,7 @@ const state = {
 };
 
 const getters = {
+
   getUserProfile: state => {
     if (state.status.logged) {
       return state.status.profile
@@ -28,9 +29,14 @@ const mutations = {
     state.status.profile = user;
     state.status.logged = true;
   },
+
   logoutUser(state) {
     state.status.profile = null;
     state.status.logged = false;
+  },
+
+  registerUser() {
+
   }
 };
 
@@ -44,14 +50,28 @@ const actions = {
         commit('loginUser', user);
         resolve(user);
       })
-      .catch(() => {
-        reject();
+      .catch(err => {
+        reject(err.response);
       });
     })
   },
+
   user_logout ({ commit }) {
     // cookie.remove('user_token');
     commit('logoutUser');
+  },
+
+  user_register ({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      Users.register(data)
+      .then(() => {
+        commit('registerUser');
+        resolve();
+      })
+      .catch(err => {
+        reject(err.response);
+      });
+    })
   }
 };
 
diff --git a/client/vue.config.js b/client/vue.config.js
index e18e3db..9c7389f 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -1,20 +1,20 @@
 const path = require('path')
 
 module.exports = {
-    configureWebpack: {
-        resolve: {
-            alias: {
-            "~": path.resolve(__dirname, 'src/')
-            }
-        }
-    },
-    css: {
-        loaderOptions: {
-            scss: {
-                prependData: `
-                @import "@/assets/scss/_variables.scss";
-                `
-            }
-        }
+  configureWebpack: {
+    resolve: {
+      alias: {
+      "~": path.resolve(__dirname, 'src/')
+      }
     }
+  },
+  css: {
+    loaderOptions: {
+      scss: {
+        prependData: `
+        @import "@/assets/scss/_variables.scss";
+        `
+      }
+    }
+  }
 };
\ No newline at end of file