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

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

const authStore = useAuthStore()

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

const handleOnboardingComplete = () => {
    authStore.nextStep()
}

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

const handleGoToLogin = () => {
    authStore.goToLogin()
}

const handleNext = () => {
    authStore.nextStep()
}

const handleBack = () => {
    authStore.previousStep()
}
</script>

<template>
    <div class="auth-container">
        <OnboardingComponent
            v-if="currentState === 'onboarding'"
            @go-to-create="handleGoToCreate"
            @go-to-login="handleGoToLogin"
        />

        <LoginTab v-else-if="currentState === 'login'" @go-to-create="handleGoToCreate" />

        <CreateTab
            v-else-if="currentState === 'create'"
            @go-to-login="handleGoToLogin"
            @next="handleNext"
        />

        <RecoveryTab
            v-else-if="currentState === 'recovery'"
            @back="handleBack"
            @next="handleNext"
        />

        <ConfirmTab v-else-if="currentState === 'confirm'" @back="handleBack" @next="handleNext" />

        <div v-else-if="currentState === 'complete'" class="complete-state">
            <h2>Wallet Setup Complete!</h2>
            <p>Your wallet has been successfully created.</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.auth-container {
    min-height: 100vh;
    background: var(--bg-light);
    font-family: var(--font-primary);
}

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