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

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -30,45 +30,27 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVues(){
-      initUserVBlock()
+      initVUserBlock()
       initVMainContent()
       initVSearchBlock()
     }
 
-    function initUserVBlock(){
-      let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
+    function initVUserBlock(){
+      let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
       let props = {
         title: "",
-        form:""
+        loginblock:""
       };
       switch (mount_point) {
-        case '#block-userlogin':
-          // let $form = document.getElementById('user-login-form');
-          // console.log('login form html', $form);
-          // props.form = $form.outerHTML
-          let $block = document.querySelector(mount_point);
-          props = {
-            title: $block.querySelector('h2').textContent,
-            form: {
-              ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
-              ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
-              btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
-              register: {
-                title: $block.querySelector('a.create-account-link').textContent,
-                href: $block.querySelector('a.create-account-link').getAttribute('href')
-              },
-              reset: {
-                title: $block.querySelector('a.request-password-link').textContent,
-                href: $block.querySelector('a.request-password-link').getAttribute('href')
-              }
-            }
-          }
+        case 'block-userlogin':
+          let $block = document.getElementById(mount_point);
+          console.log('initVUserBlock login form html', $block);
+          props.loginblock = $block.outerHTML.trim()
           break;
-        case '#block-userblock':
+        case 'block-userblock':
         default:
           break;
       }
-      // console.log(props);
 
       _v_user_block = new Vue({
         store,
@@ -78,14 +60,15 @@ import 'theme/assets/styles/main.scss'
         //   })
         // },
         created () {
+          // if already loggedin, call store.user to get the user infos
           if(drupalSettings.user.uid !== 0){
             this.$store.commit('User/setUid', drupalSettings.user.uid)
             this.$store.dispatch('User/getUser')
           }
         },
         render: h => h(VUserBlock, {props:props})
-      }).$mount(mount_point)
-      // console.log('initUserVBlock', _v_user_block);
+      }).$mount('#'+mount_point)
+      // console.log('initVUserBlock', _v_user_block);
     }
 
     function initVMainContent(){