<template>
  <div id="body">


    <div id="titreApp"> OpenQuizz </div>

    <div id="loginForm" v-on:keyup="keymonitor">

      <p>Trois comptes temporaires : Charles, Jacques, Valery</p>
      <label for="identifiant">Identifiant</label>
      <br>
      <input type="text" id="identifiant" placeholder="identifiant"  v-model="login" required="required"  >
      <br>
      <br>

      <label for="motdepasse">Mot de Passe</label>
      <br>
      <input type="password" id="motdepasse" placeholder="mot de passe" v-model="password">
      <br>
      <br>

      <button @click.prevent="logIn" >Connexion</button>

      <p style="text-align: center; margin-top: 0vh; color: greenyellow" v-show="errorLogin">{{errorMessage}}</p>


    </div>
  </div>
</template>

<script>
import Service from './service/Service'


export default {
  name: "Login",

  methods: {
    /**
     * @vuese
     * fonction de test de la validité de l'authentification de l'utilisateur
     */
    logIn: function () {
      let that = this
      /**
       * @vuese
       * Appel au WS pour tester la validité de la saisie mdp/login de l'utilisateur
       */
      Service.login([this.login, this.password]).then(function (response) {
        // SI connexion réussie, on emet un booléen a true et le nom de l'auteur connecté
        // @arg booléen indiquant que la connexion est ok
        // @arg nom de l'auteur connecté
        if (response.status === 200){
          localStorage.token = response.data.access_token
          that.$emit("user_logged", {"isLogged" : true, "auteur": that.login})
        }
      }).catch(function () {
        //that.$emit("user_logged", {"isLogged" : false})
        that.errorLogin = true
      })
    },
    /**
     * @vuese
     * Permet de valider l'authentification en appuyant sur entrée (et non le bouton)
     * @param event
     */
    keymonitor: function(event) {
      if (event.key === "Enter") {
        this.logIn()
      }
    }
  },
  data: function () {
    return {
      login: "",
      password: "",
      errorMessage: 'Login ou mot de passe erroné',
      errorLogin: false
    }
  },
}
</script>

<style scoped>

body {
  background-color: green;
  min-height: 100vh;
}

#loginForm {
  width : 56vh;
  height: 35vh;
  text-align: center;
  align-content: center;
  margin: 6% auto 0;
  border: 1px solid black;
  padding-top: 2.5% ;
  padding-bottom: 2.5% ;
  background-color: mediumpurple;


}

input{
  width: 350px;
  text-align: center;
}

button {
  height: auto;
  width: auto;
  text-align: center;
}

#titreApp {
  text-align: center;
  padding-top: 7.5%;
  font-size: 300%;
}


</style>