diff --git a/science-quest/src/components/Login.vue b/science-quest/src/components/Login.vue
index a6d18cd..7cfca4f 100644
--- a/science-quest/src/components/Login.vue
+++ b/science-quest/src/components/Login.vue
@@ -1,23 +1,47 @@
+<script>
+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)
+            
+        }
+    }
+}
+
+</script>
+
+
 <template>
-    <form>
+    <form  @submit.prevent>
     <h1 class="h3 mb-3 fw-normal">Se connecter</h1>
 
     <div class="form-floating">
-      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
-      <label for="floatingInput">Email</label>
+        <input v-model="email" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+        <label for="floatingInput">Email</label>
     </div>
     <div class="form-floating">
-      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
-      <label for="floatingPassword">Mot de passe</label>
+        <input v-model="password" type="password" class="form-control" id="floatingPassword" placeholder="Password">
+        <label for="floatingPassword">Mot de passe</label>
     </div>
 
     <div class="checkbox mb-3">
-      <label>
-        <input type="checkbox" value="remember-me"> Remember me
-      </label>
+        <label>
+            <input type="checkbox" value="remember-me"> Remember me
+        </label>
     </div>
-    <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
-  </form>
+    <button class="btn btn-lg btn-primary" v-on:click="login">Sign in</button>
+    </form>
 </template>
 
 <style>