- Fixed my revert hahaha :)

api/repositories/user-repository.js

@@ -116,7 +116,8 @@ class UserRepository {
                     .then(newUser => {
                         resolve({
                             "message": "Account successfully created !",
-                            "user": newUser,
+                            "code": 201,
+                            "token": newUser.uuid,
                         })
                     })
                     .catch(err => {
@@ -146,11 +147,13 @@ class UserRepository {
                 if (match) {
                     resolve({
                         "message": "User successfully logged in !",
-                        "user": fetchedUser,
+                        "code": 200,
+                        "token": fetchedUser.uuid,
                     })
                 } else {
                     reject({
-                        "message": "Les informations de connexion sont erronées.",
+                        "message": "Authentification attempt failed ; credentials are incorrect.",
+                        "code": 400,
                     })
                 }
             })
@@ -166,7 +169,7 @@ class UserRepository {
             this.getOneByEmail(mail, false)
             .then(() => {
                 reject({
-                    "message": "L'email est déjà utilisé par un autre utilisateur.",
+                    "message": "This email is already linked to an account.",
                     "code": 403
                 })
             })

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

@@ -1,60 +1,61 @@
 <template>
-    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
-        <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbar">
-            <ul class="navbar-nav mr-auto" v-if="links.length != 0">
-                <li class="nav-item" v-for="(link, index) in links" :key="index">
-                    <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
-                </li>
-            </ul>
-            <div v-if="user" class="navbar-nav">
-                <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">
-                <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
-            </div>
-        </div>
-    </nav>
+  <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
+    <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbar">
+      <ul class="navbar-nav mr-auto" v-if="links.length != 0">
+        <li class="nav-item" v-for="(link, index) in links" :key="index">
+          <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
+        </li>
+      </ul>
+      <div v-if="user_token" class="navbar-nav">
+        <router-link :to="'/profil'" class="nav-link">{{ user_token }}</router-link>
+        <div @click="logoutUser()" class="nav-link">Deconnexion</div>
+      </div>
+      <div v-else class="navbar-nav">
+        <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script>
-    export default {
-        name: 'navbar',
-        data() {
-            return {
-                links: [
-                    {
-                        text: 'Sortilèges',
-                        url: '/sorts',
-                    },
-                    {
-                        text: 'Écoles',
-                        url: '/ecoles',
-                    },
-                    {
-                        text: 'Chronologie',
-                        url: '/ages',
-                    }
-                ]
-            }
+
+export default {
+  name: 'navbar',
+  data() {
+    return {
+      links: [
+        {
+          text: 'Sortilèges',
+          url: '/sorts',
         },
-        computed: {
-            user() {
-                return this.$store.state.user
-            }
+        {
+          text: 'Écoles',
+          url: '/ecoles',
         },
-        methods: {
-            logoutUser() {
-                this.$cookies.remove('U_')
-                this.$store.commit('logout')
-                this.$router.push('/')
-            }
+        {
+          text: 'Chronologie',
+          url: '/ages',
         }
+      ]
     }
+  },
+  computed: {
+    user_token() {
+      return this.$store.getters.getUserToken
+    }
+  },
+  methods: {
+    logoutUser() {
+      this.$store.dispatch('user_logout');
+      this.$router.push('/');
+    }
+  }
+}
+
 </script>
 
 <style lang="scss"></style>

client/src/main.js

@@ -1,9 +1,10 @@
 // Core
 import Vue from 'vue'
-import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import App from './app.vue'
 
+import store from './store'
+
 import Globals from './global-components.js'
 Globals.forEach(component => {
     Vue.component(component.name, component)
@@ -55,38 +56,6 @@ Vue.filter('truncate', filter)
 import router from './routes'
 Vue.use(VueRouter)
 
-// Store
-Vue.use(Vuex)
-let user = Vue.$cookies.get('U_')
-
-const store = new Vuex.Store({
-    state: user ?
-        { status: { loggedIn: true }, user }
-        : { status: { loggedIn: false }, user: null },
-    mutations: {
-        loginSucceed (state, user) {
-            state.status.loggedIn = true
-            state.user = user
-        },
-        loginFail (state) {
-            state.status.loggedIn = false
-            state.user = null
-        },
-        logout(state) {
-            state.status.loggedIn = false;
-            state.user = null;
-        },
-        registerSucceed (state, user) {
-            state.status.loggedIn = true
-            state.user = user
-        },
-        registerFail (state) {
-            state.status.loggedIn = false
-            state.user = null
-        },
-    }
-})
-
 // Mount Vue
 const app = new Vue({
     render: h => h(App),

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

@@ -1,92 +1,93 @@
 <template>
-    <div class="container-fluid">
-        <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
-                            v-model="email"
-                            type="email"
-                            id="email"
-                            class="form-control"
-                            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>
-                    </div>
-                    <div class="form-group">
-                        <label for="password">Mot de passe</label>
-                        <input
-                            v-model="password"
-                            type="password"
-                            id="password"
-                            class="form-control"
-                            autocomplete="current-password">
-                    </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>
-                </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">Connexion</div>
+        <form @submit="logUser">
+          <div class="form-group">
+            <label for="email">Addresse mail</label>
+            <input
+              v-model="email"
+              type="email"
+              id="email"
+              class="form-control"
+              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>
+          </div>
+          <div class="form-group">
+            <label for="password">Mot de passe</label>
+            <input
+              v-model="password"
+              type="password"
+              id="password"
+              class="form-control"
+              autocomplete="current-password">
+          </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>
+        </form>
+      </main>
+    </section>
+  </div>
 </template>
 
 <script>
-// API
-import { RepositoryFactory } from "~/api/repositories"
-const Users = RepositoryFactory.get('users')
 
 export default {
     name: 'login-page',
     data() {
-        return {
-            email: "",
-            password: "",
-            submitted: false,
-            errors: {
-                login: ""
-            }
+      return {
+        email: "",
+        password: "",
+        submitted: false,
+        errors: {
+          login: ""
         }
+      }
     },
     methods: {
-        async logUser(e) {
-            e.preventDefault()
+      async logUser(e) {
 
-            Users.login({
-                "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('loginSucceed', user)
-                this.$router.push('/profil')
-            })
-            .catch(() => {
-                this.$store.commit('loginFailed')
-            })
-        }
+        let userInput = {
+          "mail": this.email,
+          "password": this.password
+        };
+
+        this.$store.dispatch('user_login', userInput)
+          .then(() => {
+            this.$router.push('/profil');
+          })
+
+        e.preventDefault();
+      }
     }
 }
 </script>
 
 <style lang="scss" scoped>
+
 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) {
+  min-height: calc(100vh - 56px);
+  main {
+    width: 600px;
     .title {
-        font-size: 3.5rem;
+      font-size: 5rem;
+      font-weight: 700;
+      text-align: center;
     }
+  }
 }
+
+@media only screen and (max-width: 600px) {
+  section {
+    main {
+      .title {
+        font-size: 3.5rem;
+      }
+    }
+  }
+}
+
 </style>

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

@@ -1,24 +1,25 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
-        <div 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>
-        </div>
+  <div class="container-fluid p-4" id="spell-container">
+    <div class="display-3 font-display mb-3">
+      <span class="username">{{ user_token }}</span>
+      <!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'profile-page',
-    computed: {
-        user() {
-            return this.$store.state.user
-        }
-    },
+  name: 'profile-page',
+  computed: {
+    user_token() {
+      return this.$store.getters.getUserToken
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+
 .title {
     font-size: 5rem;
     font-weight: 700;
@@ -28,4 +29,5 @@ export default {
         font-size: 3.5rem;
     }
 }
+
 </style>

client/src/routes.js

@@ -1,5 +1,5 @@
-import Vue from 'vue'
 import VueRouter from 'vue-router'
+import store from './store'
 
 // Pages
 import Index from "~/pages/index-page"
@@ -18,80 +18,84 @@ import Profile from "~/pages/user/profile-page"
 
 // Routes
 const routes = [
-    {
-        path: "*",
-        redirect: "/",
-    },
-    {
-        path: '/',
-        component: Index,
-    },
-    {
-        path: '/connexion',
-        component: Login,
-        meta: {
-            antiAuthGuard: true
-        }
-    },
-    {
-        path: '/inscription',
-        component: Register,
-        meta: {
-            antiAuthGuard: true
-        }
-    },
-    {
-        path: '/sorts',
-        component: Spells,
-    },
-    {
-        path: '/sorts/:id',
-        component: SpellSingle,
-        props: true,
-    },
-    {
-        path: '/ecoles',
-        component: Schools,
-    },
-    {
-        path: '/ecoles/:id',
-        component: SchoolSingle,
-        props: true,
-    },
-    {
-        path: '/ages',
-        component: Timeline,
-    },
-    {
-        path: '/profil',
-        component: Profile,
-        props: true,
-        meta: {
-            authGuard: true,
-        }
-    },
+  {
+    path: "*",
+    redirect: "/",
+  },
+  {
+    path: '/',
+    component: Index,
+  },
+  {
+    path: '/connexion',
+    component: Login,
+    meta: {
+      loginFilter: true
+    }
+  },
+  {
+    path: '/inscription',
+    component: Register,
+    meta: {
+      loginFilter: true
+    }
+  },
+  {
+    path: '/sorts',
+    component: Spells,
+  },
+  {
+    path: '/sorts/:id',
+    component: SpellSingle,
+    props: true,
+  },
+  {
+    path: '/ecoles',
+    component: Schools,
+  },
+  {
+    path: '/ecoles/:id',
+    component: SchoolSingle,
+    props: true,
+  },
+  {
+    path: '/ages',
+    component: Timeline,
+  },
+  {
+    path: '/profil',
+    component: Profile,
+    props: true,
+    meta: {
+      logoutFilter: true,
+    }
+  },
 ]
 
 const router = new VueRouter({
-    mode: 'history',
-    routes,
-    linkActiveClass: "",
-    linkExactActiveClass: "active",
+  mode: 'history',
+  routes,
+  linkActiveClass: "",
+  linkExactActiveClass: "active",
 })
 
 router.beforeEach((to, from, next) => {
-    if (to.matched.some(record => record.meta.authGuard)) {
-        if (Vue.$cookies.get('U_') == null) {
-            next({
-                path: '/connexion',
-                params: { nextUrl: to.fullPath },
-            })
-        } else {
-            next()
-        }
-    } else {
-        next()
+  if (to.matched.some(record => record.meta.loginFilter)) {
+    if (store.getters.getUserToken) {
+      next({
+        path: '/',
+      });
     }
+    next();
+  } else if (to.matched.some(record => record.meta.logoutFilter)) {
+    if (!store.getters.getUserToken) {
+      next({
+        path: '/connexion',
+      });
+    }
+    next();
+  }
+  next();
 })
 
 export default router;