Modify classnames

frontend/public/api/controller/LoginController.class.php

@@ -38,10 +38,11 @@
                 "iat" => $issued_at,
                 "exp" => $expiration_time,
                 "iss" => JWT_ISSUER,
+                "id" => $user->id,
                 "data" => array(
-                    "id" => $user->id,
                     "firstname" => $user->firstname,
                     "lastname" => $user->lastname,
+                    "lastname" => $user->login,
                     "email" => $user->email
                 )
             );

frontend/src/components/Navbar.vue

@@ -39,8 +39,10 @@
         components: {},
         methods: {
             onClick() {
-                if (confirm("Etes-vous sûr de vouloir vous déconnecter ?"))
+                if (confirm("Etes-vous sûr de vouloir vous déconnecter ?")) {
+                    localStorage.clear()
                     window.location.href = '/#/'
+                }
             }
         }
     };

frontend/src/main.js

@@ -11,7 +11,34 @@ Vue.use(BootstrapVue)
 Vue.config.productionTip = false
 Vue.prototype.$hostname = Vue.config.productionTip ? 'https://hostname' : 'http://localhost:8080'
 Vue.prototype.$apiUrl = 'http://localhost:8888/IMT/CDAW/frontend/public/api/api.php'
-Vue.prototype.$token = ""
+
+Vue.mixin({
+  created: function () {
+    if (localStorage.token === undefined && this.$route.name != 'Index' && this.$route.name != 'Signup') {
+      window.location.href = '/#/'
+    }
+    else if (localStorage.token !== undefined && (this.$route.name == 'Index' || this.$route.name == 'Signup')) {
+      window.location.href = '/#/home'
+    }
+  },
+  methods: {
+    isExpired() {
+      fetch(this.$apiUrl + '/validatetoken', {
+        method: 'GET',
+        header: {
+          'Authorization' : 'Bearer ' + localStorage.token
+        }
+      })
+        .then(response => {
+          if (response.status === 200) {
+            return false
+          } else {
+            window.location.href = '/#/'
+          }
+        })
+    }
+  }
+})
 
 new Vue({
   router,

frontend/src/views/Game.vue

@@ -2,7 +2,15 @@
   <div class="body">
     <Navbar/>
     <div class="center">
-      <img src="../assets/img/game.png" class="img-fluid" alt="Responsive image">
+      <!-- <img src="../assets/img/game.png" class="img-fluid" alt="Responsive image"> -->
+      <div id="game" class="container">
+        <div class="row">
+          <div id="chat" class="col-4">
+          </div>
+          <div id="play" class="col-10">
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -16,4 +24,24 @@
       Navbar
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+  #game {
+    display: flex;
+    height: 50px;
+    border: 1px solid black;
+  }
+  #chat {
+    /* display: flex; */
+    /* width: 20%; */
+    height: 50px;
+    border: 1px solid black;
+  }
+  #play {
+    /* display: flex; */
+    /* width: 80%; */
+    height: 50px;
+    border: 1px solid black;
+  }
+</style>
\ No newline at end of file

frontend/src/views/GameChoice.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center">
+    <div class="container d-flex justify-content-center">
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">Choisissez le mode</h5>
         <div class="card-body" style="width : 500px;">

frontend/src/views/GameCreate.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center">
+    <div class="container d-flex justify-content-center">
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">Créer une partie</h5>
         <div class="card-body" style="width : 500px;">

frontend/src/views/GameJoin.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center">
+    <div class="container d-flex justify-content-center">
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">Rejoindre une partie</h5>
         <div class="card-body" style="width : 500px;">
@@ -12,7 +12,7 @@
               <button type="button" class="btn btn-primary btn-block">Commencer</button>
             </router-link>
           </form>
-          <form style="margin-top: 50px;">
+          <form>
             <h5>Sans identifiant :</h5>
             <router-link to="/game">
               <button type="button" class="btn btn-primary btn-block">Trouver une partie</button>
@@ -40,4 +40,10 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+  form:nth-of-type(2) {
+    margin-top: 50px;
+  }
+</style>
\ No newline at end of file

frontend/src/views/Home.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center" style="justify-content: space-around;">
-      <router-link to="/rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link>
-      <router-link to="/gameChoice"><b-button variant="primary">Commercer à jouer</b-button></router-link>
+    <div class="container">
+      <div class="row">
+        <div class="col d-flex justify-content-center">
+          <router-link to="/rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link>
+        </div>
+        <div class="col d-flex justify-content-center">
+          <router-link to="/gameChoice"><b-button variant="primary">Commercer à jouer</b-button></router-link>
+        </div>
+      </div>
     </div>
   </div>
 </template>

frontend/src/views/Index.vue

@@ -77,8 +77,11 @@
               let areEqual = bcrypt.compareSync(form.elements.password.value, row.password)
 
               if (areEqual) {
-                this.getToken(row.login, row.password)
-                window.location.href = "/#/home"
+                // Enregistrement du token et redirection
+                this.getToken(row.login, row.password).then(token => {
+                  localStorage.setItem('token', token)
+                  window.location.href = "/#/home"
+                });
               }
               else {
                 document.querySelector('#message').innerHTML = "Mauvais mot de passe"
@@ -92,22 +95,26 @@
           });
       },
       getToken(login, password) {
-        fetch(this.$apiUrl + '/login', {
-          method: 'POST',
-          body: JSON.stringify({ login: login, password: password })
-        })
-          .then(response => {
-            if (response.status === 200) {
-              return response.json()
-            } else {
-              throw new Error('Something went wrong on api server!')
-            }
+        return new Promise((resolve, reject) => {
+          fetch(this.$apiUrl + '/login', {
+            method: 'POST',
+            body: JSON.stringify({ login: login, password: password })
           })
-          .then(data => {
-            console.log(data.jwt_token)
-          }).catch(error => {
-            console.error(error)
-          });
+            .then(response => {
+              if (response.status === 200) {
+                return response.json()
+              } else {
+                throw new Error('Something went wrong on api server!')
+              }
+            })
+            .then(data => {
+              // Envoie du token
+              resolve(data.jwt_token)
+            }).catch(error => {
+              console.error(error)
+              console.error(reject)
+            });
+        })
       }
     }
   }

frontend/src/views/Rules.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center">
+    <div class="container d-flex justify-content-center">
       <h1>Les règles</h1>
     </div>
   </div>

frontend/src/views/Signup.vue

@@ -4,7 +4,7 @@
       <div class="card-body p-0">
         <div class="row">
           <div class="col-lg-6 d-none d-lg-block bg-login-image">
-            <img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
+            <img src="../assets/img/log.png" class="img-fluid h-100 d-inline-block" alt="Responsive image">
           </div>
           <div class="col-lg-6">
             <div class="p-5">

frontend/src/views/Waiting.vue

 <template>
   <div class="body">
     <Navbar/>
-    <div class="center">
+    <div class="container d-flex justify-content-center">
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">En attente de joueurs</h5>
         <div class="card-body" style="width : 500px;">