- Implemented store and logged states

client/package-lock.json

@@ -12073,6 +12073,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+      "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

client/package.json

@@ -36,7 +36,8 @@
         "v-clipboard": "^2.2.3",
         "vue": "^2.6.11",
         "vue-cookies": "^1.7.0",
-        "vue-masonry": "^0.11.8"
+        "vue-masonry": "^0.11.8",
+        "vuex": "^3.5.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "~4.2.0",

client/src/assets/scss/_global.scss

@@ -51,6 +51,11 @@ hr {
     border-top-color: rgba($black, .25);
 }
 
+// BOOTSTRAP
+.nav-link {
+    cursor: pointer;
+}
+
 // LAYOUTS
 .fullpage {
     min-height: calc(100vh - 56px);

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

@@ -10,9 +10,9 @@
                     <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
                 </li>
             </ul>
-            <div class="navbar-nav" v-if="user">
+            <div class="navbar-nav" v-if="loggedIn">
                 <router-link :to="'/profil'" class="nav-link">Profil</router-link>
-                <router-link :to="'/deconnexion'" class="nav-link">Deconnexion</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>
@@ -27,7 +27,6 @@
         name: 'navbar',
         data() {
             return {
-                user: this.$cookies.get("U_"),
                 links: [
                     {
                         text: 'Sortilèges',
@@ -39,6 +38,20 @@
                     }
                 ]
             }
+        },
+        computed: {
+            loggedIn() {
+                return this.$store.state.status.loggedIn;
+            }
+        },
+        methods: {
+            logoutUser() {
+                if (this.$cookies.get('U_') != null) {
+                    this.$cookies.remove('U_')
+                    this.$store.commit('logout')
+                    this.$router.push('/')
+                }
+            }
         }
     }
 </script>

client/src/main.js

@@ -1,5 +1,6 @@
 // Core
 import Vue from 'vue'
+import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import App from './app.vue'
 
@@ -51,9 +52,42 @@ 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),
-    router
+    router,
+    store: store
 })
 app.$mount('#srs')

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

@@ -52,9 +52,13 @@ export default {
                 "password": this.password
             })
             .then(v => {
-                this.$cookies.set("U_", v.data.user, 60 * 60 * 24 * 30)
+                let user = v.data.user
+                this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
+                this.$store.commit('loginSucceed', user)
+                this.$router.push('/profil')
             })
             .catch(err => {
+                this.$store.commit('loginFailed')
                 console.log(err)
             })
         }