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(){

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -52,7 +52,7 @@ header[role="banner"]{
     &>section{
       background-color: #fff;
       overflow: hidden;
-      width:14em;
+      width:11em;
       height:1px;
       padding:0.01em 1em;
       // margin:0 0 0 -1em;
@@ -63,6 +63,7 @@ header[role="banner"]{
       position: absolute;
       right:0;
       top:1.7em;
+      box-sizing: content-box;
     }
     &:hover{
       &>section{
@@ -72,6 +73,48 @@ header[role="banner"]{
         box-shadow: 0 0 10px #ccc;
       }
     }
+    .form-item{
+      margin:0;
+      position: relative;
+      width:100%;
+      &.form-item-name{
+        margin:2px 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-pass{
+        margin:0 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-persistent-login{
+        font-size: 0.756em;
+        label{
+          vertical-align: top;
+        }
+      }
+    }
+    #edit-actions{
+      margin:0;
+    }
+    .item-list{
+      ul{
+        margin:0;
+        li{
+          list-style: none;
+          margin:0;
+          a{
+            font-size: 0.756em;
+          }
+        }
+      }
+    }
   }
 
   #block-languageswitcher{