materio-d8/web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

<script>

import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import router from 'vuejs/route'

export default {
  name: "LoginBlock",
  router,
  props: ['title', 'block'],
  data () {
    return {
      template: null,
      mail: '',
      password: ''
    }
  },
  computed: {
    ...mapState({
      loginMessage: state => state.User.loginMessage,
    })
  },
  methods: {
    ...mapActions({
      userLogin: 'User/userLogin',
      openCloseHamMenu: 'Common/openCloseHamMenu'
    }),
    login () {
      this.userLogin({
        mail: this.mail,
        pass: this.password
      }).then(() => {
        console.log('LoginBlock user logged-in')
        this.openCloseHamMenu(false)
        this.$router.push({
          name: 'base'
        })
      })
    }
  },
  beforeMount() {
    // console.log('LoginBlock beforeMount', this._props.block)
    if (this._props.block) {
      // console.log('LoginBlock beforeMount if this._props.block ok')
      this.template = Vue.compile(this._props.block)
      this.$options.staticRenderFns = [];
      this._staticTrees = [];
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
    }
  },
  mounted(){
    // console.log('LoginBlock mounted')
    Drupal.attachBehaviors(this.$el);
  },
  render(h) {
    // console.log('LoginBlock render')
    if (!this.template) {
      // console.log('LoginBlock render NAN')
      return h('span', 'Loading ...')
    } else {
      // console.log('LoginBlock render template')
      return this.template.render.call(this)
    }
  }
}
</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>