- Fixed the way components get store data

api/repositories/user-repository.js

@@ -117,7 +117,7 @@ class UserRepository {
                         resolve({
                             "message": "Account successfully created !",
                             "code": 201,
-                            "token": newUser.uuid,
+                            "user": newUser,
                         })
                     })
                     .catch(err => {
@@ -148,7 +148,7 @@ class UserRepository {
                     resolve({
                         "message": "User successfully logged in !",
                         "code": 200,
-                        "token": fetchedUser.uuid,
+                        "user": fetchedUser,
                     })
                 } else {
                     reject({

client/src/api/usersRepository.js

@@ -3,6 +3,9 @@ import api from './api'
 const resource = "/users"
 
 export default {
+  getOneFromUUID(uuid) {
+    return api.get(`${resource}/${uuid}`,)
+  },
   login(data) {
     return api.post(`${resource}/login`, data)
   },

client/src/components/global/navbar/navbar.vue

@@ -10,8 +10,8 @@
           <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
         </li>
       </ul>
-      <div v-if="user_token" class="navbar-nav">
+      <div v-if="user" class="navbar-nav">
-        <router-link :to="'/profil'" class="nav-link">{{ user_token }}</router-link>
+        <router-link :to="'/profil'" class="nav-link">{{ user.name }}</router-link>
         <div @click="logoutUser()" class="nav-link">Deconnexion</div>
       </div>
       <div v-else class="navbar-nav">
@@ -44,8 +44,8 @@ export default {
     }
   },
   computed: {
-    user_token() {
+    user() {
-      return this.$store.getters.getUserToken
+      return this.$store.getters.getUserProfile
     }
   },
   methods: {

client/src/components/spells/spell-card.vue

@@ -90,7 +90,7 @@ export default {
   },
   computed: {
     user() {
-            return this.$store.state.user
+      return this.$store.getters.getUserProfile
     }
   },
   methods: {
@@ -109,6 +109,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .spell-card {
   footer {
     a {
@@ -147,4 +148,5 @@ export default {
   @include colorschool(somamancie,#976c67);
   @include colorschool(antimancie,#ad95c1);
 }
+
 </style>

client/src/main.js

@@ -3,6 +3,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './app.vue'
 
+// Environment
+require('dotenv').config()
+
 import store from './store'
 
 import Globals from './global-components.js'
@@ -10,9 +13,6 @@ Globals.forEach(component => {
     Vue.component(component.name, component)
 });
 
-// Environment
-require('dotenv').config()
-
 // Cookies
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)

client/src/pages/user/login-page.vue

@@ -3,7 +3,9 @@
     <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">
             <label for="email">Addresse mail</label>
             <input
@@ -11,10 +13,26 @@
               type="email"
               id="email"
               class="form-control"
+              :class="{
+                'is-invalid': errors.mailEmpty || errors.login,
+                'is-valid': submitted && !errors.mailEmpty }"
               placeholder="john.doe@gmail.com"
               autocomplete="email">
-            <small 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"
+              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"
+              class="form-text text-danger"
+            >
+              Veuillez renseigner une adresse mail.
+            </small>
           </div>
+
           <div class="form-group">
             <label for="password">Mot de passe</label>
             <input
@@ -22,11 +40,46 @@
               type="password"
               id="password"
               class="form-control"
+              :class="{
+                'is-invalid': errors.passwordEmpty || errors.login,
+                'is-valid': submitted && !errors.passwordEmpty }"
               autocomplete="current-password">
+            <small
+              v-if="!errors.passwordEmpty"
+              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"
+              class="form-text text-danger"
+            >
+              Veuillez renseigner un mot de passe.
+            </small>
           </div>
+
+          <div class="form-check">
+            <input
+              type="checkbox"
+              v-model="remember_me"
+              id="remember-me"
+              class="form-check-input">
+            <label
+              class="form-check-label"
+              for="remember-me"
+            >
+              Rester connecté
+            </label>
+          </div>
+
+          <div class="form-group">
+            <small v-if="errors.login" class="text-danger">{{ errors.login }}</small>
+          </div>
+
           <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>
+          <small class="form-text text-muted">Mot de passe oublié ? <a href="#">Vous pouvez le changer ici !</a></small>
+
         </form>
       </main>
     </section>
@@ -41,26 +94,53 @@ export default {
       return {
         email: "",
         password: "",
+        remember_me: false,
         submitted: false,
+
         errors: {
-          login: ""
+          mailEmpty: "",
+          passwordEmpty: "",
+          login: "",
         }
       }
     },
     methods: {
       async logUser(e) {
 
+        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."
+          }
+        }
 
         e.preventDefault();
+      },
+      resetErrors() {
+        return {
+          mailEmpty: "",
+          passwordEmpty: "",
+          login: "",
+        }
       }
     }
 }

client/src/pages/user/profile-page.vue

@@ -1,20 +1,35 @@
 <template>
-  <div class="container-fluid p-4" id="spell-container">
+  <div
-    <div class="display-3 font-display mb-3">
+    v-if="user"
-      <span class="username">{{ user_token }}</span>
+    class="container-fluid p-4"
-      <!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
+    id="spell-container"
-    </div>
+  >
+    <h2 class="display-3 font-display mb-3">
+      <span class="username">{{ user.name }}</span>
+      <span
+        v-if="user.verified"
+        class="verified"
+      >
+        <i class="mad">check_circle</i>
+      </span>
+    </h2>
+
   </div>
 </template>
 
 <script>
+
 export default {
   name: 'profile-page',
-  computed: {
+  data() {
-    user_token() {
+    return {
-      return this.$store.getters.getUserToken
     }
   },
+  computed: {
+    user() {
+      return this.$store.getters.getUserProfile
+    }
+  }
 }
 </script>
 

client/src/pages/user/register-page.vue

@@ -17,7 +17,7 @@
                             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>
+                        <small v-if="errors.name" class="form-text text-danger">{{ errors.name }}</small>
                     </div>
                     <div class="form-group">
                         <label for="email">Addresse mail</label>
@@ -32,7 +32,7 @@
                             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>
+                        <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>
@@ -58,8 +58,8 @@
                             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" class="form-text text-danger">{{ errors.password }}</small>
-                        <small v-if="errors.password_check" class="text-danger">{{ errors.password_check }}</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>

client/src/routes.js

@@ -1,5 +1,6 @@
 import VueRouter from 'vue-router'
-import store from './store'
+
+// import store from './store'
 
 // Pages
 import Index from "~/pages/index-page"
@@ -79,23 +80,23 @@ const router = new VueRouter({
   linkExactActiveClass: "active",
 })
 
-router.beforeEach((to, from, next) => {
+// router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.loginFilter)) {
+//   if (to.matched.some(record => record.meta.loginFilter)) {
-    if (store.getters.getUserToken) {
+//     if (store.getters.getUserProfile) {
-      next({
+//       next({
-        path: '/',
+//         path: '/',
-      });
+//       });
-    }
+//     }
-    next();
+//     next();
-  } else if (to.matched.some(record => record.meta.logoutFilter)) {
+//   } else if (to.matched.some(record => record.meta.logoutFilter)) {
-    if (!store.getters.getUserToken) {
+//     if (!store.getters.getUserProfile) {
-      next({
+//       next({
-        path: '/connexion',
+//         path: '/connexion',
-      });
+//       });
-    }
+//     }
-    next();
+//     next();
-  }
+//   }
-  next();
+//   next();
-})
+// })
 
 export default router;

client/src/store/modules/user.store.js

@@ -1,20 +1,22 @@
-// API
+// import cookie from 'vue-cookies';
-import { RepositoryFactory } from "~/api/repositories"
-const Users = RepositoryFactory.get('users')
 
-export const namespaced = true
+// API
+import { RepositoryFactory } from "~/api/repositories";
+const Users = RepositoryFactory.get('users');
+
+export const namespaced = true;
 
 const state = {
   status: {
     logged: false,
-    user_token: null,
+    profile: null,
   }
 };
 
 const getters = {
-  getUserToken: state => {
+  getUserProfile: state => {
     if (state.status.logged) {
-      return state.status.user_token
+      return state.status.profile
     } else {
       return false
     }
@@ -22,12 +24,12 @@ const getters = {
 };
 
 const mutations = {
-  loginUser(state, user_token) {
+  loginUser(state, user) {
-    state.status.user_token = user_token;
+    state.status.profile = user;
     state.status.logged = true;
   },
   logoutUser(state) {
-    state.status.user_token = null;
+    state.status.profile = null;
     state.status.logged = false;
   }
 };
@@ -37,9 +39,10 @@ const actions = {
     return new Promise((resolve, reject) => {
       Users.login(data)
       .then(v => {
-        let user_token = v.data.token;
+        let user = v.data.user;
-        commit('loginUser', user_token);
+        // cookie.set('user_token', user.uuid);
-        resolve(user_token);
+        commit('loginUser', user);
+        resolve(user);
       })
       .catch(() => {
         reject();
@@ -47,10 +50,16 @@ const actions = {
     })
   },
   user_logout ({ commit }) {
+    // cookie.remove('user_token');
     commit('logoutUser');
   }
 };
 
+// Check if a cookie with user token exists
+// if (cookie.get('user_token')) {
+//   mutations.loginUser(state, cookie.get('user_token'));
+// }
+
 export default {
   state,
   getters,