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

<template>
  <div id="login-register">
    <h2>{{ $t(header) }}</h2>
    <div class="wrapper">
      <section class="login">
        <h3>{{ $t("default.Login") }} </h3>
        <LoginForm @onLogedIn="onLogedIn" />
      </section>
      <section class="register">
        <h3>{{ $t("default.Register a new account") }}</h3>
        <RegisterForm @onRegistered="onRegistered" />
      </section>
    </div>
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex'
import LoginForm from 'vuejs/components/Form/LoginForm'
import RegisterForm from 'vuejs/components/Form/RegisterForm'

export default {
  name: "LoginRegister",
  data: () => ({
    loginEmail:null,
    password:null,
    registerEmail:null
  }),
  props:{
    header: {
      type: String,
      default: 'materio.Please login or create a new account'
    }, 
    callbackargs: Object, 
    onLogedInBack: Function, 
    onRegisteredBack: Function
  },
  methods: {
    ...mapActions({
      userLogin: 'User/userLogin',
      userRegister: 'User/userRegister'
    }),
    onLogedIn () {
      // this.$emit('onLogedIn', this.callbackargs)
      this.onLogedInBack(this.callbackargs)
    },
    onRegistered () {
      // this.$emit('onRegistered', this.callbackargs)
      this.onRegisteredBack(this.callbackargs)
    }
  },
  components: {
    LoginForm,
    RegisterForm
  }
}
</script>

<style lang="scss" scoped>

fieldset{
  padding:0;
  margin:0;
  border:none;
}

</style>