117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<script>
|
|
|
|
// import Vue from 'vue'
|
|
import { mapState } from 'pinia'
|
|
// import router from 'vuejs/route'
|
|
import { UserStore } from '@/stores/user'
|
|
|
|
import SvgIcon from '@jamescoyle/vue-icon';
|
|
import { mdiLoginVariant } from '@mdi/js';
|
|
|
|
|
|
export default {
|
|
setup() {
|
|
const userStore = UserStore()
|
|
|
|
return { userStore }
|
|
},
|
|
// router,
|
|
// props: ['title', 'block'],
|
|
data () {
|
|
return {
|
|
template: null,
|
|
mail: '',
|
|
passwd: '',
|
|
login_path: mdiLoginVariant
|
|
}
|
|
},
|
|
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'
|
|
// })
|
|
// })
|
|
}
|
|
},
|
|
components: {
|
|
SvgIcon
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="login-block">
|
|
<label>
|
|
<svg-icon type="mdi" :path="login_path"></svg-icon>
|
|
<span>connexion</span>
|
|
</label>
|
|
<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: 0.75em;
|
|
#login-block{
|
|
position: relative;
|
|
|
|
span{
|
|
display: inline-block;
|
|
@include btn();
|
|
}
|
|
form{
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
padding: 0 $pad;
|
|
position: absolute;
|
|
bottom: 110%;
|
|
left: -$pad;
|
|
>*{
|
|
margin: 0 0 0.5em 0;
|
|
}
|
|
overflow: hidden;
|
|
max-height:1px;
|
|
opacity: 0;
|
|
$delay: 0.5s;
|
|
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>
|