170 lines
4.4 KiB
Vue
170 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/authStore'
|
|
|
|
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">
|
|
<img src="@/assets/imgs/logo.png" alt="Neptune Logo" class="neptune-logo" />
|
|
</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%;
|
|
object-fit: contain;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.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>
|