neptune-web-wallet/src/views/Auth/components/LoginTab.vue

<script setup lang="ts">
import { ref } from 'vue'
import { PasswordForm } from '@/components'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import { message } from 'ant-design-vue'

const authStore = useAuthStore()
const router = useRouter()
const neptuneWallet = useNeptuneWallet()

const isLoading = ref(false)
const error = ref(false)

const handlePasswordSubmit = async (password: string) => {
    try {
        isLoading.value = true
        error.value = false
        await neptuneWallet.decryptKeystore(password)
        router.push({ name: 'home' })
    } catch (err) {
        error.value = true
    } finally {
        isLoading.value = false
    }
}

const handleNewWallet = () => {
    authStore.goToCreate()
    router.push({ name: 'auth' })
}
</script>

<template>
    <div class="login-tab">
        <div class="login-password-form">
            <div class="auth-card-header">
                <div class="logo-container">
                    <div class="logo-circle">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 100 100"
                            class="neptune-logo"
                        >
                            <defs>
                                <linearGradient
                                    id="neptuneGradientLogin"
                                    x1="0%"
                                    y1="0%"
                                    x2="100%"
                                    y2="100%"
                                >
                                    <stop
                                        offset="0%"
                                        style="stop-color: #007fcf; stop-opacity: 1"
                                    />
                                    <stop
                                        offset="100%"
                                        style="stop-color: #0066a6; stop-opacity: 1"
                                    />
                                </linearGradient>
                                <linearGradient
                                    id="ringGradientLogin"
                                    x1="0%"
                                    y1="0%"
                                    x2="100%"
                                    y2="0%"
                                >
                                    <stop
                                        offset="0%"
                                        style="stop-color: #007fcf; stop-opacity: 0.3"
                                    />
                                    <stop
                                        offset="50%"
                                        style="stop-color: #007fcf; stop-opacity: 0.6"
                                    />
                                    <stop
                                        offset="100%"
                                        style="stop-color: #007fcf; stop-opacity: 0.3"
                                    />
                                </linearGradient>
                            </defs>

                            <circle cx="50" cy="50" r="28" fill="url(#neptuneGradientLogin)" />

                            <ellipse
                                cx="50"
                                cy="45"
                                rx="22"
                                ry="6"
                                fill="rgba(255, 255, 255, 0.1)"
                            />
                            <ellipse cx="50" cy="55" rx="20" ry="5" fill="rgba(0, 0, 0, 0.1)" />

                            <ellipse
                                cx="50"
                                cy="50"
                                rx="42"
                                ry="12"
                                fill="none"
                                stroke="url(#ringGradientLogin)"
                                stroke-width="4"
                                opacity="0.8"
                            />

                            <circle cx="42" cy="42" r="6" fill="rgba(255, 255, 255, 0.4)" />
                        </svg>
                    </div>
                    <div class="logo-text">
                        <span class="coin-name">Neptune</span>
                        <span class="coin-symbol">NPT</span>
                    </div>
                </div>
                <h1 class="auth-title">Access Wallet</h1>
                <p class="auth-subtitle">Enter your password to unlock your wallet</p>
            </div>

            <PasswordForm
                button-text="Unlock Wallet"
                placeholder="Enter your password"
                back-button-text="New Wallet"
                label="Password"
                :loading="isLoading"
                @submit="handlePasswordSubmit"
                @back="handleNewWallet"
                :error="error"
                :errorMessage="'Invalid password'"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-tab {
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.login-password-form {
    width: 100%;
    max-width: 480px;
}

.auth-card-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);

    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);

        .logo-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-light), var(--bg-white));
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm);
            box-shadow: 0 2px 8px rgba(0, 127, 207, 0.15);

            .neptune-logo {
                width: 100%;
                height: 100%;
            }
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .coin-name {
                font-size: var(--font-lg);
                font-weight: var(--font-bold);
                color: var(--text-primary);
                line-height: 1;
                margin-bottom: 2px;
            }

            .coin-symbol {
                font-size: var(--font-xs);
                font-weight: var(--font-medium);
                color: var(--primary-color);
                background: var(--primary-light);
                padding: 2px 8px;
                border-radius: var(--radius-sm);
            }
        }
    }

    .auth-title {
        font-size: var(--font-2xl);
        font-weight: var(--font-bold);
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .auth-subtitle {
        font-size: var(--font-sm);
        color: var(--text-secondary);
        margin: 0;
    }
}

@include screen(mobile) {
    .auth-card-header {
        .logo-container {
            .logo-circle {
                width: 40px;
                height: 40px;
            }

            .logo-text {
                .coin-name {
                    font-size: var(--font-md);
                }
            }
        }

        .auth-title {
            font-size: var(--font-xl);
        }
    }
}
</style>