remplacer systeme de v-model par un FormData

science-quest/src/components/Login.vue

@@ -3,24 +3,13 @@ import { REST_API } from '@/assets/const'
 import { RouterLink } from 'vue-router'
 
 export default {
-    data() {
-        return {
-            email:"",
-            password:""
-        }
-    },
     methods:{
-        login: function (event){
-            event.stopPropagation()
-            //TODO : se connecter avec l'api et stocker l'id de session que renvoie l'api dans un cookie
-            console.log("yay")
-             //this.email et this.password synchronisés avec v-model
-            console.log(this.email)
-            console.log(this.password)
-
-            const loginMDP={pseudo:this.email, motDePasse:this.password}
+        login: function (event){event.stopPropagation()
+            let donnees=Object.fromEntries(new FormData(formajouter))
 
-            fetch(REST_API+"/utilisateur/connexion", {method:"POST", body:JSON.stringify(loginMDP)}).then(response=>console.log(response))
+            const donneesJson=JSON.stringify(donnees)
+            console.log(donnees)
+            fetch(REST_API+"/utilisateur/connexion", {method:"POST", body:donneesJson, headers:{"Content-Type":"application/json"}}).then(response=>console.log(response))
         }
     }
 }
@@ -29,26 +18,26 @@ export default {
 
 
 <template>
-    <form  @submit.prevent>
+    <form @submit.prevent>
     <h1 class="h3 mb-3 fw-normal">Se connecter</h1>
 
     <div class="form-floating">
-        <input v-model="email" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
-        <label for="floatingInput">Email</label>
+        <input type="email" class="form-control" id="emailInput" name="email">
+        <label for="emailInput">Email</label>
     </div>
     <div class="form-floating">
-        <input v-model="password" type="password" class="form-control" id="floatingPassword" placeholder="Password">
-        <label for="floatingPassword">Mot de passe</label>
+        <input type="password" class="form-control" id="motDePasseInput" name="motDePasse">
+        <label for="motDePasseInput">Mot de passe</label>
     </div>
 
     <div class="checkbox mb-3">
         <label>
-            <label for="remember-me">Se souvenir de moi</label>
-            <input type="checkbox" value="remember-me" id="remember-me">
+            <label for="rememberMe">Se souvenir de moi</label>
+            <input type="checkbox" value="rememberMe" id="rememberMe" name="rememberMe">
         </label>
     </div>
     <RouterLink to="/inscription">Pas de compte?</RouterLink>
-    <button class="btn btn-lg btn-primary" v-on:click="login">Se connecter</button>
+    <button class="btn btn-lg btn-primary" @click="login">Se connecter</button>
     </form>
 </template>