localized vue login, added language switcher block

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;
 }