localized vue login, added language switcher block

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

@@ -33,8 +33,39 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initUserVBlock(){
+      let props = {
+        title: ""
+      };
       let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
+      switch (mount_point) {
+        case '#block-userlogin':
+          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')
+              }
+            }
+          }
+          break;
+        case '#block-userblock':
+
+          break;
+        default:
+
+      }
+      console.log(props);
       v_user_block = new Vue({
+        // data: data,
         store,
         computed: {
           ...mapState({
@@ -47,8 +78,9 @@ import 'theme/assets/styles/main.scss'
             this.$store.dispatch('User/getUser')
           }
         },
-        render: h => h(VUserBlock)
+        render: h => h(VUserBlock, {props:props})
       }).$mount(mount_point)
+      console.log('initUserVBlock', v_user_block);
     }
 
     function initTestVContent(){
@@ -56,7 +88,7 @@ import 'theme/assets/styles/main.scss'
         store,
         render: h => h(VTestContent)
       }).$mount('#block-pagetitle')
-      console.log('initTestVContent', v_test_content);
+      // console.log('initTestVContent', v_test_content);
     }
 
     init()

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -30,10 +30,14 @@ header[role="banner"]{
     .header-block{
       min-height: 15px;
       font-size: 0;
+      &.header-right{
+        text-align: right;
+      }
       &>*{
         display: inline-block;
         vertical-align: top;
         font-size: $base_font_size;
+        text-align: left;
       }
     }
   }

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

@@ -32,21 +32,29 @@ aside.messages{
 // |_||_\___\__,_\__,_\___|_|
 
 header[role="banner"]{
+  padding:0.2em 0 0 0;
   #block-sitebranding{
     h1{
       margin:0;
+      line-height: 1;
     }
   }
 
   #block-userlogin{
+    width:8em;
+    overflow: visible;
     h2{
       margin: 0;
+      font-size: 1em;
+      font-weight: 400;
     }
     &>section{
       background-color: #fff;
       overflow: hidden;
+      width:14em;
       height:1px;
       padding:0.01em 1em;
+      // margin:0 0 0 -1em;
       box-sizing:content-box;
       transition: all 0.4s ease-in-out;
       // outline: 1px solid blue;
@@ -55,10 +63,62 @@ header[role="banner"]{
     &:hover{
       &>section{
         transition-delay: 0s;
-        height:16em;
+        height:12em;
         padding:1em 1em;
         box-shadow: 0 0 10px #ccc;
       }
     }
   }
+
+  #block-languageswitcher{
+    h2{
+      margin: 0.1em 0 0 0;
+      font-size: 0.756em;
+      font-weight: 400;
+      padding:0.1em 0.4em 0.2em;
+      border-radius: 3px;
+      background-color: #444;
+      color: #fff;
+      display: inline-block;
+      vertical-align: top;
+    }
+    &>ul.links{
+      // background-color: #fff;
+      overflow: hidden;
+      width:5em;
+      height:1px;
+      padding:0.01em 0;
+      margin:0;
+      box-sizing:content-box;
+      transition: all 0.4s ease-in-out;
+      // outline: 1px solid blue;
+      // transition-delay: 2s;
+    }
+    &:hover{
+      &>ul.links{
+        transition-delay: 0s;
+        height:2em;
+        padding:0.3em 0;
+        // box-shadow: 0 0 10px #ccc;
+      }
+    }
+    li{
+      list-style: none;
+      padding:0;
+      &.is-active{
+        display:none;
+      }
+      a{
+        margin: 0;
+        font-size: 0.756em;
+        font-weight: 400;
+        padding:0.2em 0.4em;
+        border-radius: 3px;
+        background-color: #444;
+        color: #fff;
+      }
+    }
+
+  }
+
 }

web/themes/custom/materiotheme/materiotheme.theme

@@ -117,8 +117,8 @@ function materiotheme_preprocess_image_formatter(&$vars){
 
 function materiotheme_preprocess_links__language_block(&$vars){
   // dpm($vars);
-  foreach ($vars['links'] as $lang_code => $link) {
-    $vars['links'][$lang_code]['text'] = $lang_code;
-    $vars['links'][$lang_code]['link']['#title'] = $lang_code;
-  }
+  // foreach ($vars['links'] as $lang_code => $link) {
+  //   $vars['links'][$lang_code]['text'] = $lang_code;
+  //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
+  // }
 }

web/themes/custom/materiotheme/vuejs/components/User/Login.vue

@@ -1,12 +1,12 @@
 <template lang="html">
   <div id="block-userlogin" class="">
-    <h2>Login Hello!</h2>
+    <h2>{{ title }}</h2>
     <section>
       <input
         id="edit-name"
         class="form-email"
         type="text"
-        placeholder="Email" name="name"
+        v-bind:placeholder="form.ph_email" name="name"
         v-model="mail"
         @keyup.enter="login"
       />
@@ -14,7 +14,7 @@
         id="edit-pass"
         class="form-text"
         type="password"
-        placeholder="Password" name="pass"
+        v-bind:placeholder="form.ph_pass" name="pass"
         v-model="password"
         @keyup.enter="login"
       />
@@ -23,17 +23,27 @@
         class="button"
         @click.stop="login"
       >
-        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 {
@@ -41,6 +51,7 @@ export default {
       password: ''
     }
   },
+  props: ['title', 'form'],
   computed: {
     ...mapState(['User'])
   },
@@ -48,14 +59,6 @@ export default {
     ...mapActions({
       userLogin: 'User/userLogin'
     }),
-
-    // usernameInputHandler(input) {
-    //     this.username = input;
-    // },
-    // passwordInputHandler(input) {
-    //     this.password = input;
-    // },
-
     login () {
       this.userLogin({
         mail: this.mail,
@@ -63,10 +66,29 @@ export default {
       })
     }
   }
-
 }
 </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>

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

@@ -1,6 +1,6 @@
 <template lang="html">
   <UserTools v-if="isloggedin" />
-  <Login v-else />
+  <Login v-bind:title="title" v-bind:form="form" v-else />
 </template>
 
 <script>
@@ -10,9 +10,7 @@ import Login from 'vuejs/components/User/Login'
 import UserTools from 'vuejs/components/User/UserTools'
 
 export default {
-  // data () {
-  //   return {}
-  // },
+  props: ['title', 'form'],
   computed: {
     ...mapState({
       isloggedin: state => state.User.isloggedin

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -43,7 +43,13 @@ export default {
 </script>
 
 <style lang="css" scoped>
+#user-tools{
+  margin-right:0.5em;
+  padding-right:0.5em;
+  border-right:1px solid #222;
+}
 h4{
+  margin:0;
   display:inline-block;
   font-size:inherited;
 }