ouatterrir-app/src/components/block/LoginBlock.vue

<script>

// import Vue from 'vue'
import { mapState } from 'pinia'
// import router from 'vuejs/route'
import { UserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = UserStore()

    return { userStore }
  },
  // router,
  // props: ['title', 'block'],
  data () {
    return {
      template: null,
      mail: '',
      passwd: ''
    }
  },
  computed: {
    ...mapState(UserStore,['loginMessage'])
  },
  methods: {
    // ...mapActions({
    //   userLogin: 'User/userLogin',
    //   openCloseHamMenu: 'Common/openCloseHamMenu'
    // }),
    onSubmitLogin (event) {
      console.log("onSubmitLogin", event, this.mail, this.passwd);
      this.userStore.userLogin({
        mail: this.mail,
        pass: this.passwd
      }).then(() => {
        console.log('LoginBlock user logged-in then')
      })
      // this.userLogin({
      //   mail: this.mail,
      //   pass: this.password
      // })
      // moved to user.js store
      // .then(() => {
      //   console.log('LoginBlock user logged-in')
      //   this.openCloseHamMenu(false)
      //   this.$router.push({
      //     name: 'base'
      //   })
      // })
    }
  }
}
</script>

<template>
  <div id="login-block">
    <span>connexion</span>
    <form action="" @submit.prevent="onSubmitLogin">
      <input type="email" placeholder="email" name="email" v-model="mail">
      <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
      <input type="submit" value="se connecter">
      <p v-if="loginMessage">{{ loginMessage }}</p>
    </form>
  </div>
</template>

<style lang="scss" scoped>
  $pad: 1em;
  #login-block{
    position: relative;

    span{
      display: inline-block;
      @include btn();
    }
    form{
      background-color: #fff;
      border-radius: 5px;
      padding: 0 $pad;
      position: absolute;
      bottom: 100%;
      left: -$pad;
      >*{
        margin: 0 0 0.5em 0;
      }
      overflow: hidden;
      max-height:1px;
      opacity: 0;
      $delay: 4s;
      transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
    }
    &:hover{
      form{
        box-shadow: 0 0 5px $btns_back;
        padding: $pad;
        max-height: 100px;
        opacity: 1;
        transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
      }
    }
  }
  

</style>