Update Profile.vue and fix bugs

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

@@ -20,10 +20,19 @@
                     return $this->createUser($post);
                 break;
                 case 'GET':
-                    if (empty($this->request->getUriParameters()))
+                    if (empty($this->request->getUriParameters())) {
                         return $this->getAllUsers();
-                    else 
+                    }
+                    else {
+                        $parameters = $this->request->getUriParameters();
+                        
+                        if (is_numeric($parameters[0])) {
                             return $this->getUserById($this->request->getUriParameters()[0]);
+                        }
+                        else {
+                            return $this->getUserByLogin($this->request->getUriParameters()[0]);
+                        }
+                    }
                 break;
                 case 'PUT':
                     $put = json_decode(file_get_contents("php://input"));
@@ -78,6 +87,17 @@
             return $response;
         }
 
+        protected function getUserByLogin($login) {
+            $user = User::getWithLogin($login);
+
+            if (!empty($user))
+                $response = Response::okResponse(json_encode($user));
+            else
+                $response = Response::notFoundResponse("Aucune réponse");
+
+            return $response;
+        }
+
         protected function updateUser($put, $id) {
             $user = User::getWithId($id);
 

frontend/src/components/Input.vue

@@ -5,6 +5,7 @@
         :type="information.type" 
         :id="information.id" 
         :placeholder="information.placeholder"
+        :value="information.value"
         autocomplete="off"
         required>
         <!-- :pattern="information.pattern" -->

frontend/src/router/index.js

@@ -7,6 +7,7 @@ import Rules from '../views/Rules'
 import GameChoice from '../views/GameChoice'
 import GameCreate from '../views/GameCreate'
 import GameJoin from '../views/GameJoin'
+import Waiting from '../views/Waiting'
 import Game from '../views/Game'
 import Profile from '../views/Profile'
 
@@ -48,6 +49,11 @@ const routes = [
     name: 'GameJoin',
     component: GameJoin
   },
+  {
+    path: '/waiting',
+    name: 'Waiting',
+    component: Waiting
+  },
   {
     path: '/game',
     name: 'Game',

frontend/src/views/Game.vue

 <template>
   <div class="body position-absolute h-100 w-100">
     <Navbar/>
-    <div class="container h-75">
+    <div id="game" class="container h-75">
       <div class="row h-100">
-        <div class="col-3 h-100" style="border: 1px solid black;">
-            <div id="chat" class="row h-75" style="border: 1px solid black;">
+        <div id="chat" class="col-3 h-100" style="border: 1px solid black;">
+          <div class="row h-75" style="border: 1px solid black;">
             <div class="col w-100 h-100" style="border: 1px solid black;">
             </div>
           </div>
-            <div id="form" class="row h-25 pt-4" style="border: 1px solid black;">
-              <div class="col w-100 h-75">
+          <div class="row h-25" style="border: 1px solid black;">
+            <div class="col w-100 h-75 pt-4">
               <form @submit="onSubmit">
                 <Input :information="input" />
               </form>
             </div>
           </div>
         </div>
-        <div id="game" class="col-9 h-100" style="border: 1px solid black;">
+        <div class="col-9 h-100" style="border: 1px solid black;">
         </div>
       </div>
     </div>
@@ -48,14 +48,9 @@
 
 <style>
   #chat {
-    background-image: url('../assets/img/chat.png');
-  }
-  #form {
-    background-image: url('../assets/img/form.jpg');
+    background: linear-gradient(rgb(10, 50, 20), rgb(30, 120, 60), rgb(10, 50, 20));
   }
   #game {
-    background-image: url('../assets/img/game.png');
-    background-repeat: no-repeat;
-    background-size: 100%;
+    background: linear-gradient(rgb(10, 50, 20), rgb(20, 85, 40), rgb(10, 50, 20));
   }
 </style>
\ No newline at end of file

frontend/src/views/GameCreate.vue

@@ -5,7 +5,7 @@
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">Créer une partie</h5>
         <div class="card-body" style="width : 500px;">
-          <router-link to="/game">
+          <router-link to="/waiting">
             <button type="button" class="btn btn-primary btn-block">Commencer</button>
           </router-link>
         </div>

frontend/src/views/Index.vue

@@ -96,7 +96,7 @@
           });
       },
       getToken(login, password) {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
           fetch(this.$apiUrl + '/login', {
             method: 'POST',
             body: JSON.stringify({ login: login, password: password })
@@ -113,8 +113,7 @@
               resolve(data.jwt_token)
             }).catch(error => {
               console.error(error)
-              console.error(reject)
-            });
+            })
         })
       }
     }

frontend/src/views/Profile.vue

@@ -4,7 +4,7 @@
     <div class="container d-flex justify-content-center">
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">Vos informations</h5>
-        <div class="card-body" style="width : 500px;">
+        <div id="body" class="card-body" style="width : 500px;">
 
         </div>
       </div>
@@ -24,25 +24,41 @@
       this.getData()
     },
     methods: {
-      // Récupération des données du token
+      // Récupération des données du user
       getData() {
-        fetch(this.$apiUrl + '/validatetoken', {
-          method: 'GET',
-          headers: {
-            'Authorization' : 'Bearer ' + localStorage.token
-          }
+        fetch(this.$apiUrl + '/user/' + localStorage.login, {
+          method: 'GET'
         })
           .then(response => {
             if (response.status === 200) {
-              console.log(response.json())
+              return response.json()
+            } 
+            else {
+                throw new Error('Something went wrong on api server!')
+            }
+          })
+          .then(data => {
+            const body = document.querySelector('#body')
+
+            for (const [key, value] of Object.entries(data)) {
+              if (key != "id" && key != "password" && key != "role") {
+                let div = document.createElement('div')
+                let input = document.createElement('input')
+
+                div.className = 'form-group'
+
+                input.className = 'form-control form-control-user'
+                input.type = 'text'
+                input.id = key
+                input.value = value
+                input.autocomplete = 'off'
+                input.required = true
+
+                div.append(input)
+                body.append(div)
+              }
             }
-            // else {
-            //   window.location.href = '/#/'
-            // }
           })
-          // .then(tokenData => {
-          //   console.log(tokenData)
-          // })
       }
     }
   }

frontend/src/views/Waiting.vue

@@ -5,9 +5,34 @@
       <div class="card shadow mb-4">
         <h5 class="card-header text-primary">En attente de joueurs</h5>
         <div class="card-body" style="width : 500px;">
-          
+          <table class="table table-striped table-primary">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Login</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>{{ login }}</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td></td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td></td>
+              </tr>
+              <tr>
+                <th scope="row">4</th>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
           <router-link to="/game">
-            <button type="button" class="btn btn-primary btn-block" style="margin-top: 20px;">Jouer</button>
+            <button type="button" class="btn btn-primary btn-block">Jouer</button>
           </router-link>
         </div>
       </div>
@@ -22,6 +47,11 @@
     name: 'GameChoice',
     components: {
       Navbar
+    },
+    data() {
+      return {
+        login: localStorage.login
+      }
     }
   }
 </script>
\ No newline at end of file