login from modal is working, register is lacking password generator

web/themes/custom/materiotheme/vuejs/components/Helper/LoginForm.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="login-form">
+    <h2>Login</h2>
+    <input
+      type="email"
+      name="email"
+      v-model="email"
+      placeholder="Email"
+    >
+    <input
+      type="password"
+      name="password"
+      v-model="password"
+      placeholder="Password"
+    >
+    <button
+      type="button"
+      name="login"
+      @click.stop="onLogin"
+    >
+      login
+    </button>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "LoginForm",
+  data: () => ({
+    email:null,
+    password:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    onLogin () {
+      this.userLogin({
+        mail: this.email,
+        pass: this.password
+      }).then( () => {
+          console.log('logedin from login component');
+          this.$emit('onLogedIn')
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with login from login component', error)
+        Promise.reject(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegisterForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="login-form">
+    <fieldset class="login">
+      <h2>Login</h2>
+      <input
+        type="email"
+        name="email"
+        v-model="loginEmail"
+        placeholder="Email"
+      >
+      <input
+        type="password"
+        name="password"
+        v-model="password"
+        placeholder="Password"
+      >
+      <button
+        type="button"
+        name="login"
+        @click.stop="onLogin"
+      >
+        login
+      </button>
+    </fieldset>
+    <fieldset class="register">
+      <h2>Or register</h2>
+      <input
+        type="email"
+        name="email"
+        v-model="registerEmail"
+        placeholder="Email"
+      >
+      <button
+        type="button"
+        name="register"
+        @click.stop="onRegister"
+      >
+        register
+      </button>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "LoginForm",
+  data: () => ({
+    loginEmail:null,
+    password:null,
+    registerEmail:null
+  }),
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin',
+      userRegister: 'User/userRegister'
+    }),
+    onLogin () {
+      this.userLogin({
+        mail: this.loginEmail,
+        pass: this.password
+      }).then( () => {
+          console.log('logedin from login component');
+          this.$emit('onLogedIn')
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with login from login component', error)
+        Promise.reject(error)
+      })
+    },
+    onRegister () {
+      console.log('on register');
+      this.userRegister({
+        mail: this.registerEmail
+      }).then( () => {
+          console.log('user registered');
+        }
+      ).catch(( error ) => {
+        console.warn('Issue with register from login component', error)
+        Promise.reject(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+fieldset{
+  padding:0;
+  margin:0;
+  border:none;
+}
+
+</style>

web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="overlay">
-    <div class="modal">
+  <div
+    class="overlay"
+    @click.self="close"
+  >
+    <div
+      class="modal"
+      v-bind:style="styles"
+    >
       <slot></slot>
     </div>
   </div>
@@ -8,9 +14,26 @@
 <script>
 export default {
   name: "",
+  props: {
+    styles: {
+      default: function () {
+        return {
+          width: '500px',
+          height: '350px'
+        }
+      },
+      type: Object
+    }
+  },
   data: () => ({
 
-  })
+  }),
+  methods: {
+    close () {
+      console.log('click close');
+      this.$emit('close')
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -23,9 +46,14 @@ export default {
 .modal{
   background-color:#fff;
   position:absolute;
-  width:250px;
-  height:200px;
+  box-sizing:border;
+  max-width:80vw;
+  max-height:70vh;
   top:0; right:0; bottom:0; left:0;
   margin:auto;
+  padding:1em;
+  border-radius:3px;
+  box-shadow:2px 2px;
+
 }
 </style>