materio-d8/web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegisterForm.vue

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