12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <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>
|