You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ScienceQuest/science-quest/src/components/Login.vue

61 lines
1.8 KiB

<script>
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}
fetch(REST_API+"/utilisateur/connexion", {method:"POST", body:JSON.stringify(loginMDP)}).then(response=>console.log(response))
}
}
}
</script>
<template>
<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>
</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>
</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>
</div>
<RouterLink to="/inscription">Pas de compte?</RouterLink>
<button class="btn btn-lg btn-primary" v-on:click="login">Se connecter</button>
</form>
</template>
<style>
form {
display: flex;
flex-direction:column;
align-items: center;
}
</style>