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

web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue

@@ -1,23 +1,51 @@
 <template lang="html">
   <UserTools v-if="isloggedin" />
-  <Login v-bind:title="title" v-bind:form="form" v-else />
+  <LoginBlock v-bind:title="title" v-bind:block="block" v-else/>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
-import Login from 'vuejs/components/User/Login'
+import LoginBlock from 'vuejs/components/Block/LoginBlock'
 import UserTools from 'vuejs/components/User/UserTools'
 
+import { MA } from 'vuejs/api/ma-axios'
+
 export default {
-  props: ['title', 'form'],
+  props: ['title', 'loginblock'],
+  data(){
+    return {
+      block: null
+    }
+  },
   computed: {
     ...mapState({
       isloggedin: state => state.User.isloggedin
     })
   },
+  beforeMount() {
+    console.log('UserBlock beforeMount');
+    if(this.loginblock){
+      this.block = this.loginblock
+    }else{
+      this.getLoginBlock()
+    }
+
+  },
+  methods: {
+    getLoginBlock(){
+      MA.get(`/materio_user/login_block`)
+        .then(({data}) => {
+          // console.log("getLoginBlock data", data);
+          this.block = data.rendered
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getLoginBlock', error)
+        })
+    }
+  },
   components: {
-    Login,
+    LoginBlock,
     UserTools
   }
 }