<template>
  <div>
    <p id="infoTitre"> Vos informations : </p>
    <p> Auteur : </p>
    <p> Ecole : </p>
    <p> "Note" : </p>
    <p> "Publications" : </p>
  <button id="afficherMenuChangementMdp" v-on:click="editMode = !editMode">ChangerMdp</button>
    <div id="editMode" v-show="editMode">
    <label for="mdp1">Entrer le nouveau mdp</label>
    <input type="password" id="mdp1">      <br>

      <label for="mdp1">Entrer a nouveau votre mdp</label>
    <input type="password" id="mdp2">      <br>

      <button id="validerChangementMdp" v-on:click="validerChangement">Valider</button>

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

<script>
export default {
  name: "Profil",
  data: function () {
    return {
      editMode: false,
    }
  },
  methods: {
/*    /!**
     * @vuese
     * Activation / Désactivation du mode édition
     *!/
    modeEdition: function () {
      this.editMode = ! this.editMode
    },*/
    /**
     * @vuese
     * (A construire) Fonction permettant d'afficher l'espace du changement du mot de passe
     */
    validerChangement: function (){
      this.editMode = ! this.editMode

    }
  }
}
</script>

<style scoped>
  div{
    text-align: center;
  }

  #infoTitre {
    text-decoration: underline;
  }

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

  #editMode{
    display: flex;
    flex-direction: column;
    width: 350px;
    align-items: center;
    margin: 10px auto 0;
  }
</style>