palizvani-front-vite/src/components/Auth/LoginComponent.vue

<template>
  <template-component :show-header="redirect">
    <template #body>
      <login-step v-if="step === 'login'"
                  :redirect="redirect"
                  @goToRegisterStep="goToRegisterStep"
                  @goToSendOtpStep="goToSendOtpStep"
                  @goToForgetStep="goToForgetStep"
                  @login-success="emitLoginSuccess" />
      <register-step v-if="showRegisterComponent"
                     :register-step-prop="step"
                     :redirect="redirect"
                     @goToLoginStep="goToLoginStep"
                     @register="onRegister"
                     @login-success="emitLoginSuccess" />
      <forget-step v-if="step === 'forget'"
                   :redirect="redirect"
                   @goToLoginStep="goToLoginStep"
                   @register="onRegister"
                   @login-success="emitLoginSuccess" />
      <information-step v-if="step === 'information'"
                        :redirect="redirect"
                        @goToLoginStep="goToLoginStep"
                        @login-success="emitLoginSuccess" />
    </template>
  </template-component>
</template>

<script>
import LoginStep from 'src/components/Auth/LoginStep.vue'
import ForgetStep from 'src/components/Auth/ForgetStep.vue'
import RegisterStep from 'src/components/Auth/RegisterStep.vue'
import InformationStep from 'src/components/Auth/InformationStep.vue'
import TemplateComponent from 'src/components/Auth/TemplateComponent.vue'

export default {
  name: 'LoginComponent',
  components: { TemplateComponent, LoginStep, RegisterStep, InformationStep, ForgetStep },
  props: {
    redirect: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      step: 'login'
    }
  },
  computed: {
    showRegisterComponent() {
      return this.step === 'getUsername' || this.step === 'sendOtp'
    }
  },
  methods: {
    goToRegisterStep () {
      this.step = 'getUsername'
    },
    goToSendOtpStep () {
      this.step = 'sendOtp'
    },
    goToForgetStep () {
      this.step = 'forget'
    },
    goToLoginStep () {
      this.step = 'login'
    },
    onRegister () {
      // console.log('onRegister')
    },
    emitLoginSuccess (payload) {
      this.$emit('login-success', payload)
    }
  }
}
</script>