neptune-web-wallet/src/views/Auth/AuthView.vue

<script setup lang="ts">
import { computed } from 'vue'
import { OnboardingTab } from './components'
import { useAuthStore } from '@/stores'
import { LoginTab, CreateTab, RecoverSeedTab } from './components'

const authStore = useAuthStore()

const currentState = computed(() => authStore.getCurrentState())

const handleGoToCreate = () => {
    authStore.goToCreate()
}

const handleGoToRecover = () => {
    authStore.goToRecover()
}
</script>

<template>
    <div class="auth-container">
        <OnboardingTab
            v-if="currentState === 'onboarding'"
            @go-to-create="handleGoToCreate"
            @go-to-recover="handleGoToRecover"
        />
        <LoginTab v-else-if="currentState === 'login'" @go-to-create="handleGoToCreate" />
        <CreateTab v-else-if="currentState === 'create'" @go-to-recover="handleGoToRecover" />
        <RecoverSeedTab v-else-if="currentState === 'recovery'" />
    </div>
</template>

<style lang="scss" scoped>
.auth-container {
    min-height: 100vh;
}

.complete-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--spacing-xl);

    h2 {
        color: var(--success-color);
        margin-bottom: var(--spacing-md);
    }

    p {
        color: var(--text-secondary);
        font-size: var(--font-lg);
    }
}
</style>