bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored user blocks using ajax loaded drupal's html as template for vue

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-05-31 23:05:37 +02:00
parent a48b7262eb
commit d21bd5ef4e
22 changed files with 492 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
web/themes/custom/materiotheme/vuejs/components/User/Login.vue
View File

@ -1,94 +0,0 @@
<template lang="html">
<div id="block-userlogin" class="">
<h2>{{ title }}</h2>
<section>
<input
id="edit-name"
class="form-email"
type="text"
v-bind:placeholder="form.ph_email" name="name"
v-model="mail"
@keyup.enter="login"
/>
<input
id="edit-pass"
class="form-text"
type="password"
v-bind:placeholder="form.ph_pass" name="pass"
v-model="password"
@keyup.enter="login"
/>
<button
id="edit-submit"
class="button"
@click.stop="login"
>
{{ form.btn_value }}
</button>
<ul>
<li><a
v-bind:href="form.register.href"
>
{{ form.register.title }}
</a></li>
<li><a
v-bind:href="form.reset.href"
>
{{ form.reset.title }}
</a></li>
</ul>
</section>
</div>
</template>
<script>
// https://github.com/alvar0hurtad0/drupal-vuejs-todo
import { mapState, mapActions } from 'vuex'
export default {
data () {
return {
mail: '',
password: ''
}
},
props: ['title', 'form'],
computed: {
...mapState(['User'])
},
methods: {
...mapActions({
userLogin: 'User/userLogin'
}),
login () {
this.userLogin({
mail: this.mail,
pass: this.password
})
}
}
}
</script>
<style lang="scss" scoped>
section{
max-width:300px;
}
input{
display:block;
max-width:100%;
margin:0.5em 0 0 0;
}
button{
margin:0.5em 0 0 0;
}
ul{
margin:0; padding:0.5em 0 0 0;
}
li{
list-style:none;
margin:0.5em 0 0 0; padding:0;
font-size:0.882em;
}
a{
}
</style>