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>
  <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="login">
    <p v-if="loginMessage">{{ loginMessage }}</p>
  </form>
</template>

<style lang="css" scoped>
</style>