Merge pull request #5 from HiamQuan/feat/auth_update_FE
feat: auth update FE
This commit is contained in:
Nguyễn Anh Quân
GitHub
commit
e24832fa1a
@ -1,12 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, defineEmits } from 'vue'
|
import { ref, computed, defineEmits } from 'vue'
|
||||||
import { ButtonCommon, FormCommon } from '@/components'
|
import { ButtonCommon, FormCommon, KeystoreDownloadComponent } from '@/components'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
navigateToOpenWallet: [event: Event]
|
navigateToOpenWallet: [event: Event]
|
||||||
navigateToRecoverySeed: []
|
navigateToRecoverySeed: []
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const step = ref(1)
|
||||||
|
|
||||||
const password = ref('')
|
const password = ref('')
|
||||||
const confirmPassword = ref('')
|
const confirmPassword = ref('')
|
||||||
const passwordError = ref('')
|
const passwordError = ref('')
|
||||||
@ -23,9 +25,7 @@ const passwordStrength = computed(() => {
|
|||||||
number: /[0-9]/.test(password.value),
|
number: /[0-9]/.test(password.value),
|
||||||
special: /[!@#$%^&*(),.?":{}|<>]/.test(password.value),
|
special: /[!@#$%^&*(),.?":{}|<>]/.test(password.value),
|
||||||
}
|
}
|
||||||
|
|
||||||
strength = Object.values(checks).filter(Boolean).length
|
strength = Object.values(checks).filter(Boolean).length
|
||||||
|
|
||||||
if (strength <= 2) return { level: 1, text: 'Weak', color: 'var(--error-color)' }
|
if (strength <= 2) return { level: 1, text: 'Weak', color: 'var(--error-color)' }
|
||||||
if (strength <= 3) return { level: 2, text: 'Medium', color: 'var(--warning-color)' }
|
if (strength <= 3) return { level: 2, text: 'Medium', color: 'var(--warning-color)' }
|
||||||
if (strength <= 4) return { level: 3, text: 'Good', color: 'var(--info-color)' }
|
if (strength <= 4) return { level: 3, text: 'Good', color: 'var(--info-color)' }
|
||||||
@ -50,8 +50,7 @@ const handleIHaveWallet = (e: Event) => {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
emit('navigateToOpenWallet', e)
|
emit('navigateToOpenWallet', e)
|
||||||
}
|
}
|
||||||
|
const handleNextPassword = () => {
|
||||||
const handleNext = () => {
|
|
||||||
if (!canProceed.value) {
|
if (!canProceed.value) {
|
||||||
if (password.value.length < 8) {
|
if (password.value.length < 8) {
|
||||||
passwordError.value = 'Password must be at least 8 characters'
|
passwordError.value = 'Password must be at least 8 characters'
|
||||||
@ -61,161 +60,250 @@ const handleNext = () => {
|
|||||||
}
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
emit('navigateToRecoverySeed')
|
step.value = 2
|
||||||
|
}
|
||||||
|
function downloadKeystoreFile() {
|
||||||
|
// Giả lập nội dung keystore (có thể tuỳ chỉnh)
|
||||||
|
const data = {
|
||||||
|
account: 'kaspa-wallet',
|
||||||
|
version: 1,
|
||||||
|
enc: 'mock-data',
|
||||||
|
created: new Date().toISOString(),
|
||||||
|
note: 'Exported from web-wallet',
|
||||||
|
hint: 'Replace bằng file thực tế trong tích hợp thật.',
|
||||||
|
}
|
||||||
|
const file = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = URL.createObjectURL(file)
|
||||||
|
link.download = 'kaspa-wallet-keystore.json'
|
||||||
|
link.click()
|
||||||
|
setTimeout(() => URL.revokeObjectURL(link.href), 2300)
|
||||||
|
step.value = 3
|
||||||
|
}
|
||||||
|
function handleBack() {
|
||||||
|
if (step.value === 2) step.value = 1
|
||||||
|
else if (step.value === 3) step.value = 2
|
||||||
|
}
|
||||||
|
function resetAll() {
|
||||||
|
password.value = ''
|
||||||
|
confirmPassword.value = ''
|
||||||
|
passwordError.value = ''
|
||||||
|
confirmPasswordError.value = ''
|
||||||
|
step.value = 1
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="auth-container">
|
<div class="auth-container">
|
||||||
<div class="auth-card">
|
<div class="auth-card">
|
||||||
<div class="auth-card-header">
|
<template v-if="step === 1">
|
||||||
<div class="logo-container">
|
<div class="auth-card-header">
|
||||||
<div class="logo-circle">
|
<div class="logo-container">
|
||||||
<svg
|
<div class="logo-circle">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
viewBox="0 0 100 100"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="neptune-logo"
|
viewBox="0 0 100 100"
|
||||||
|
class="neptune-logo"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="neptuneGradient"
|
||||||
|
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="ringGradient"
|
||||||
|
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(#neptuneGradient)" />
|
||||||
|
|
||||||
|
<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(#ringGradient)"
|
||||||
|
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">NPTUN</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="auth-title">Create New Wallet</h1>
|
||||||
|
<p class="auth-subtitle">Secure your wallet with a strong password</p>
|
||||||
|
</div>
|
||||||
|
<div class="auth-card-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<FormCommon
|
||||||
|
v-model="password"
|
||||||
|
type="password"
|
||||||
|
label="Create Password"
|
||||||
|
placeholder="Enter your password"
|
||||||
|
show-password-toggle
|
||||||
|
required
|
||||||
|
:error="passwordError"
|
||||||
|
@input="passwordError = ''"
|
||||||
|
/>
|
||||||
|
<div v-if="password" class="password-strength">
|
||||||
|
<div class="strength-bar">
|
||||||
|
<div
|
||||||
|
class="strength-fill"
|
||||||
|
:style="{
|
||||||
|
width: `${(passwordStrength.level / 4) * 100}%`,
|
||||||
|
backgroundColor: passwordStrength.color,
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="strength-text"
|
||||||
|
:style="{ color: passwordStrength.color }"
|
||||||
|
>{{ passwordStrength.text }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<FormCommon
|
||||||
|
v-model="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
label="Confirm Password"
|
||||||
|
placeholder="Re-enter your password"
|
||||||
|
show-password-toggle
|
||||||
|
required
|
||||||
|
:error="confirmPasswordError"
|
||||||
|
@input="confirmPasswordError = ''"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="confirmPassword"
|
||||||
|
class="password-match"
|
||||||
|
:class="{ match: isPasswordMatch }"
|
||||||
>
|
>
|
||||||
<defs>
|
<span v-if="isPasswordMatch" class="match-text">
|
||||||
<linearGradient
|
✓ Passwords match
|
||||||
id="neptuneGradient"
|
</span>
|
||||||
x1="0%"
|
<span v-else class="match-text error"> Passwords do not match </span>
|
||||||
y1="0%"
|
</div>
|
||||||
x2="100%"
|
</div>
|
||||||
y2="100%"
|
<p class="helper-text">
|
||||||
>
|
Password must be at least 8 characters with uppercase, lowercase, and
|
||||||
<stop
|
numbers.
|
||||||
offset="0%"
|
</p>
|
||||||
style="stop-color: #007fcf; stop-opacity: 1"
|
<div class="auth-button-group">
|
||||||
/>
|
<ButtonCommon
|
||||||
<stop
|
type="primary"
|
||||||
offset="100%"
|
size="large"
|
||||||
style="stop-color: #0066a6; stop-opacity: 1"
|
class="auth-button"
|
||||||
/>
|
block
|
||||||
</linearGradient>
|
:disabled="!canProceed"
|
||||||
<linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
@click="handleNextPassword"
|
||||||
<stop
|
>Create Wallet</ButtonCommon
|
||||||
offset="0%"
|
>
|
||||||
style="stop-color: #007fcf; stop-opacity: 0.3"
|
<div class="secondary-actions">
|
||||||
/>
|
<button class="link-button" @click="handleIHaveWallet">
|
||||||
<stop
|
Already have a wallet?
|
||||||
offset="50%"
|
</button>
|
||||||
style="stop-color: #007fcf; stop-opacity: 0.6"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<stop
|
</div>
|
||||||
offset="100%"
|
</template>
|
||||||
style="stop-color: #007fcf; stop-opacity: 0.3"
|
<template v-else-if="step === 2">
|
||||||
/>
|
<KeystoreDownloadComponent @download="downloadKeystoreFile" @back="handleBack" />
|
||||||
</linearGradient>
|
</template>
|
||||||
</defs>
|
<template v-else-if="step === 3">
|
||||||
|
<div class="well-done-step">
|
||||||
<circle cx="50" cy="50" r="28" fill="url(#neptuneGradient)" />
|
<h2 class="done-main">You are done!</h2>
|
||||||
|
<p class="done-desc">
|
||||||
<ellipse
|
You are now ready to take advantage of all that your wallet has to offer!
|
||||||
cx="50"
|
Access with keystore file should only be used in an offline setting.
|
||||||
cy="45"
|
</p>
|
||||||
rx="22"
|
<div class="center-svg" style="margin: 14px auto 12px auto">
|
||||||
ry="6"
|
<svg width="180" height="95" viewBox="0 0 175 92" fill="none">
|
||||||
fill="rgba(255, 255, 255, 0.1)"
|
<rect x="111" y="37" width="64" height="33" rx="7" fill="#23B1EC" />
|
||||||
|
<rect
|
||||||
|
x="30.5"
|
||||||
|
y="37.5"
|
||||||
|
width="80"
|
||||||
|
height="46"
|
||||||
|
rx="7.5"
|
||||||
|
fill="#D6F9FE"
|
||||||
|
stroke="#AEEBF8"
|
||||||
|
stroke-width="5"
|
||||||
/>
|
/>
|
||||||
<ellipse cx="50" cy="55" rx="20" ry="5" fill="rgba(0, 0, 0, 0.1)" />
|
<rect x="56" y="67" width="32" height="10" rx="3" fill="#B0F3A6" />
|
||||||
|
<rect x="46" y="49" width="52" height="12" rx="3" fill="#a2d2f5" />
|
||||||
<ellipse
|
<circle cx="155" cy="52" r="8" fill="#fff" />
|
||||||
cx="50"
|
<rect x="121" y="43" width="27" height="7" rx="1.5" fill="#5AE9D2" />
|
||||||
cy="50"
|
<rect x="128" y="59" width="17" height="4" rx="1.5" fill="#FCEBBA" />
|
||||||
rx="42"
|
<circle cx="40" cy="27" r="7" fill="#A2D2F5" />
|
||||||
ry="12"
|
<g>
|
||||||
fill="none"
|
<circle cx="128" cy="21" r="3" fill="#FF8585" />
|
||||||
stroke="url(#ringGradient)"
|
<circle cx="57.5" cy="20.5" r="1.5" fill="#67DEFF" />
|
||||||
stroke-width="4"
|
<rect x="95" y="18" width="7" height="5" rx="2" fill="#A2D2F5" />
|
||||||
opacity="0.8"
|
</g>
|
||||||
/>
|
|
||||||
|
|
||||||
<circle cx="42" cy="42" r="6" fill="rgba(255, 255, 255, 0.4)" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="logo-text">
|
<div class="btn-row">
|
||||||
<span class="coin-name">Neptune</span>
|
<ButtonCommon
|
||||||
<span class="coin-symbol">NPTUN</span>
|
class="done-btn"
|
||||||
</div>
|
type="primary"
|
||||||
</div>
|
size="large"
|
||||||
<h1 class="auth-title">Create New Wallet</h1>
|
block
|
||||||
<p class="auth-subtitle">Secure your wallet with a strong password</p>
|
style="margin-bottom: 0.3em"
|
||||||
</div>
|
@click="$router.push('/')"
|
||||||
|
>Access Wallet</ButtonCommon
|
||||||
<div class="auth-card-content">
|
>
|
||||||
<div class="form-group">
|
<button class="done-link" type="button" @click="resetAll">
|
||||||
<FormCommon
|
Create Another Wallet
|
||||||
v-model="password"
|
|
||||||
type="password"
|
|
||||||
label="Create Password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
show-password-toggle
|
|
||||||
required
|
|
||||||
:error="passwordError"
|
|
||||||
@input="passwordError = ''"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div v-if="password" class="password-strength">
|
|
||||||
<div class="strength-bar">
|
|
||||||
<div
|
|
||||||
class="strength-fill"
|
|
||||||
:style="{
|
|
||||||
width: `${(passwordStrength.level / 4) * 100}%`,
|
|
||||||
backgroundColor: passwordStrength.color,
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="strength-text" :style="{ color: passwordStrength.color }">
|
|
||||||
{{ passwordStrength.text }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<FormCommon
|
|
||||||
v-model="confirmPassword"
|
|
||||||
type="password"
|
|
||||||
label="Confirm Password"
|
|
||||||
placeholder="Re-enter your password"
|
|
||||||
show-password-toggle
|
|
||||||
required
|
|
||||||
:error="confirmPasswordError"
|
|
||||||
@input="confirmPasswordError = ''"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="confirmPassword"
|
|
||||||
class="password-match"
|
|
||||||
:class="{ match: isPasswordMatch }"
|
|
||||||
>
|
|
||||||
<span v-if="isPasswordMatch" class="match-text"> ✓ Passwords match </span>
|
|
||||||
<span v-else class="match-text error"> Passwords do not match </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="helper-text">
|
|
||||||
Password must be at least 8 characters with uppercase, lowercase, and numbers.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="auth-button-group">
|
|
||||||
<ButtonCommon
|
|
||||||
type="primary"
|
|
||||||
size="large"
|
|
||||||
block
|
|
||||||
:disabled="!canProceed"
|
|
||||||
@click="handleNext"
|
|
||||||
>
|
|
||||||
Create Wallet
|
|
||||||
</ButtonCommon>
|
|
||||||
|
|
||||||
<div class="secondary-actions">
|
|
||||||
<button class="link-button" @click="handleIHaveWallet">
|
|
||||||
Already have a wallet?
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<slot> </slot>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -231,7 +319,7 @@ const handleNext = () => {
|
|||||||
|
|
||||||
.auth-card {
|
.auth-card {
|
||||||
@include card-base;
|
@include card-base;
|
||||||
max-width: 420px;
|
max-width: 720px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
@ -360,9 +448,15 @@ const handleNext = () => {
|
|||||||
line-height: var(--leading-normal);
|
line-height: var(--leading-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.auth-button {
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.auth-button-group {
|
.auth-button-group {
|
||||||
margin-top: var(--spacing-2xl);
|
margin-top: var(--spacing-2xl);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.secondary-actions {
|
.secondary-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -379,7 +473,6 @@ const handleNext = () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary-hover);
|
color: var(--primary-hover);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -416,4 +509,53 @@ const handleNext = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.well-done-step {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 8px;
|
||||||
|
.done-title {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
.done-main {
|
||||||
|
font-size: 1.36rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.done-desc {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 1.11em;
|
||||||
|
max-width: 410px;
|
||||||
|
margin: 2px auto 15px auto;
|
||||||
|
}
|
||||||
|
.center-svg {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.btn-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 11px;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0 auto 5px auto;
|
||||||
|
}
|
||||||
|
.done-btn {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
.done-link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 1em;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
270
src/components/auth/ImportWalletComponent.vue
Normal file
270
src/components/auth/ImportWalletComponent.vue
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ButtonCommon, FormCommon } from '@/components'
|
||||||
|
import { validateSeedPhrase18 } from '@/utils/helpers/seedPhrase'
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(
|
||||||
|
e: 'import-success',
|
||||||
|
data: { type: 'seed' | 'privatekey'; value: string | string[]; passphrase?: string }
|
||||||
|
): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const tab = ref<'seedphrase' | 'privatekey'>('seedphrase')
|
||||||
|
const seedWords = ref<string[]>(Array(18).fill(''))
|
||||||
|
const seedError = ref('')
|
||||||
|
const passphrase = ref('')
|
||||||
|
const privateKey = ref('')
|
||||||
|
const privateKeyError = ref('')
|
||||||
|
|
||||||
|
const inputBoxFocus = (idx: number) => {
|
||||||
|
document.getElementById('input-' + idx)?.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
const validateSeed = () => {
|
||||||
|
if (seedWords.value.some((w) => !w.trim())) {
|
||||||
|
seedError.value = 'Please enter all 18 words.'
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (!validateSeedPhrase18(seedWords.value)) {
|
||||||
|
seedError.value = 'One or more words are invalid.'
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
seedError.value = ''
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const validateKey = () => {
|
||||||
|
if (!privateKey.value.trim()) {
|
||||||
|
privateKeyError.value = 'Please enter your private key.'
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
privateKeyError.value = ''
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
if (tab.value === 'seedphrase') {
|
||||||
|
if (validateSeed()) {
|
||||||
|
emit('import-success', {
|
||||||
|
type: 'seed',
|
||||||
|
value: seedWords.value,
|
||||||
|
passphrase: passphrase.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (validateKey()) {
|
||||||
|
emit('import-success', { type: 'privatekey', value: privateKey.value })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="import-wallet dark-card">
|
||||||
|
<h2 class="title">Import Wallet</h2>
|
||||||
|
<div class="desc">Pick your import method</div>
|
||||||
|
<div class="tabs">
|
||||||
|
<button
|
||||||
|
:class="['tab-btn', tab === 'seedphrase' && 'active']"
|
||||||
|
@click="tab = 'seedphrase'"
|
||||||
|
>
|
||||||
|
Import by seed phrase
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="['tab-btn', tab === 'privatekey' && 'active']"
|
||||||
|
@click="tab = 'privatekey'"
|
||||||
|
>
|
||||||
|
Import by private key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="tab === 'seedphrase'" class="tab-pane">
|
||||||
|
<div class="seed-row-radio">
|
||||||
|
<div class="radio active">18 words</div>
|
||||||
|
</div>
|
||||||
|
<div class="seed-inputs">
|
||||||
|
<div class="seed-input-grid">
|
||||||
|
<div v-for="(word, i) in seedWords" :key="i" class="seed-box">
|
||||||
|
<input
|
||||||
|
:id="'input-' + i"
|
||||||
|
type="text"
|
||||||
|
inputmode="text"
|
||||||
|
autocapitalize="off"
|
||||||
|
autocomplete="off"
|
||||||
|
spellcheck="false"
|
||||||
|
v-model="seedWords[i]"
|
||||||
|
:placeholder="i + 1 + '.'"
|
||||||
|
maxlength="24"
|
||||||
|
@keydown.enter="inputBoxFocus(i + 1)"
|
||||||
|
:class="{ error: seedError && !word.trim() }"
|
||||||
|
@focus="seedError = ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row mt-sm">
|
||||||
|
<FormCommon
|
||||||
|
v-model="passphrase"
|
||||||
|
:label="'Seed passphrase (optional)'"
|
||||||
|
placeholder="Enter seed passphrase"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="seedError" class="error-text">{{ seedError }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="tab-pane">
|
||||||
|
<div class="form-row mb-md">
|
||||||
|
<FormCommon
|
||||||
|
v-model="privateKey"
|
||||||
|
type="text"
|
||||||
|
label="Private key"
|
||||||
|
placeholder="Enter private key"
|
||||||
|
:error="privateKeyError"
|
||||||
|
@focus="privateKeyError = ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ButtonCommon
|
||||||
|
class="mt-lg"
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
size="large"
|
||||||
|
:disabled="
|
||||||
|
tab === 'seedphrase'
|
||||||
|
? !seedWords.every((w) => w) || !!seedError
|
||||||
|
: !privateKey || !!privateKeyError
|
||||||
|
"
|
||||||
|
@click="handleContinue"
|
||||||
|
>Continue</ButtonCommon
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.import-wallet {
|
||||||
|
max-width: 420px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 24px auto;
|
||||||
|
background: var(--bg-light);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
box-shadow: var(--shadow-primary);
|
||||||
|
padding: 32px 28px 24px 28px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.45rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
background: var(--text-primary);
|
||||||
|
border-radius: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
.tab-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 13px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.18s;
|
||||||
|
&.active {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
&:hover:not(.active) {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-pane {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.seed-row-radio {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.radio {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-radius: 14px;
|
||||||
|
font-size: 1.08rem;
|
||||||
|
padding: 7px 24px 7px 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
&.active {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seed-inputs {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.seed-input-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.seed-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
outline: none;
|
||||||
|
font-size: 15px;
|
||||||
|
transition:
|
||||||
|
border 0.16s,
|
||||||
|
box-shadow 0.16s;
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
box-shadow: 0 2px 8px var(--shadow-primary);
|
||||||
|
}
|
||||||
|
&.error {
|
||||||
|
border-color: var(--error-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-row {
|
||||||
|
margin-top: 19px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.mt-sm {
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
.mb-md {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.mt-lg {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.error-text {
|
||||||
|
color: var(--error-color);
|
||||||
|
font-size: 0.97em;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.import-wallet {
|
||||||
|
padding: 16px 5px;
|
||||||
|
}
|
||||||
|
.seed-input-grid {
|
||||||
|
gap: 8px;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
235
src/components/auth/KeystoreDownloadComponent.vue
Normal file
235
src/components/auth/KeystoreDownloadComponent.vue
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'download'): void
|
||||||
|
(e: 'back'): void
|
||||||
|
}>()
|
||||||
|
function handleDownload() {
|
||||||
|
emit('download')
|
||||||
|
}
|
||||||
|
function handleBack() {
|
||||||
|
emit('back')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="keystore-step">
|
||||||
|
<div class="step-content">
|
||||||
|
<h2 class="title">Download keystore file</h2>
|
||||||
|
<div class="desc">Important things to know before downloading your keystore file.</div>
|
||||||
|
<div class="box-list">
|
||||||
|
<div class="box">
|
||||||
|
<div class="icn">
|
||||||
|
<svg width="44" height="44" viewBox="0 0 36 36">
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M15,29 L29,29 C30.1045695,29 31,28.1045695 31,27 L31,9 C31,7.8954305 30.1045695,7 29,7 L7,7 C5.8954305,7 5,7.8954305 5,9 L5,27 C5,28.1045695 5.8954305,29 7,29 L11,29"
|
||||||
|
fill="#d8f7fa"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12.5,20.5 L17.5,25.5 L27.5,15.5"
|
||||||
|
stroke="#51c7ce"
|
||||||
|
stroke-width="2.2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="box-title">Don't lose it</div>
|
||||||
|
<div class="box-desc">Be careful, it can not be recovered if you lose it.</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="icn">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 28 28">
|
||||||
|
<g>
|
||||||
|
<circle cx="16" cy="16" r="12" fill="#e3fae5" />
|
||||||
|
<text
|
||||||
|
x="11"
|
||||||
|
y="21"
|
||||||
|
font-size="15"
|
||||||
|
font-family="Arial"
|
||||||
|
fill="#48b783"
|
||||||
|
font-weight="bold"
|
||||||
|
>
|
||||||
|
$
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="box-title">Don't share it</div>
|
||||||
|
<div class="box-desc">
|
||||||
|
Your funds will be stolen if you use this file on a malicious phishing site.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="icn">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 28 28">
|
||||||
|
<g>
|
||||||
|
<rect x="5" y="7" width="18" height="16" rx="3" fill="#c6f1fc" />
|
||||||
|
<rect x="7" y="10" width="14" height="10" rx="2" fill="#96e2fc" />
|
||||||
|
<text
|
||||||
|
x="10"
|
||||||
|
y="19"
|
||||||
|
font-size="9"
|
||||||
|
font-family="monospace"
|
||||||
|
fill="#418aaf"
|
||||||
|
>
|
||||||
|
{ }
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="box-title">Make a backup</div>
|
||||||
|
<div class="box-desc">
|
||||||
|
Secure it like the millions of dollars it may one day be worth.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-row">
|
||||||
|
<button class="back-btn" @click="handleBack">Back</button>
|
||||||
|
<button class="main-btn" @click="handleDownload">Acknowledge & Download</button>
|
||||||
|
</div>
|
||||||
|
<div class="not-recommended">
|
||||||
|
<span class="warn-icn">⚠</span>
|
||||||
|
<div>
|
||||||
|
<span class="strong">NOT RECOMMENDED</span><br />
|
||||||
|
This information is sensitive, and these options should only be used in offline
|
||||||
|
or secure environments.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.keystore-step {
|
||||||
|
max-width: 650px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 34px 16px 28px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-content {
|
||||||
|
padding: 6px 5px 0 5px;
|
||||||
|
}
|
||||||
|
.step-title {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
font-size: 1.07rem;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.36rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 1.09rem;
|
||||||
|
margin-bottom: 23px;
|
||||||
|
}
|
||||||
|
.box-list {
|
||||||
|
display: flex;
|
||||||
|
gap: 21px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--bg-light);
|
||||||
|
padding: 21px 19px 17px 19px;
|
||||||
|
flex: 1 1 140px;
|
||||||
|
min-width: 196px;
|
||||||
|
max-width: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.icn {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.box-title {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1.07em;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.box-desc {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.99em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
margin: 23px 0 0 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.back-btn {
|
||||||
|
padding: 10px 32px;
|
||||||
|
background: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.13s;
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-btn {
|
||||||
|
padding: 10px 32px;
|
||||||
|
background: var(--primary-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-light);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.12s;
|
||||||
|
box-shadow: 0 4px 18px var(--shadow-primary);
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.not-recommended {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
padding: 13px 17px;
|
||||||
|
margin-top: 28px;
|
||||||
|
font-size: 1.09em;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 11px;
|
||||||
|
.warn-icn {
|
||||||
|
font-size: 1.43em;
|
||||||
|
color: var(--error-color);
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.strong {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.steps-bar .step {
|
||||||
|
min-width: 90px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.keystore-step {
|
||||||
|
padding: 15px 3px 13px 3px;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
padding: 12px 5px 10px 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,16 +2,16 @@
|
|||||||
import { ButtonCommon } from '@/components'
|
import { ButtonCommon } from '@/components'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
onboardingComplete: []
|
goToCreate: []
|
||||||
|
goToLogin: []
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const goToNewWallet = () => {
|
const handleGoToCreate = () => {
|
||||||
window.open('https://kaspa-ng.org', '_blank')
|
emit('goToCreate')
|
||||||
}
|
}
|
||||||
|
|
||||||
const goToLegacyWallet = () => {
|
const handleGoToLogin = () => {
|
||||||
// Emit event to parent to show tab interface
|
emit('goToLogin')
|
||||||
emit('onboardingComplete')
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -21,21 +21,19 @@ const goToLegacyWallet = () => {
|
|||||||
<div class="welcome-box">
|
<div class="welcome-box">
|
||||||
<div class="header-section">
|
<div class="header-section">
|
||||||
<h2>Welcome to the New Wallet Experience</h2>
|
<h2>Welcome to the New Wallet Experience</h2>
|
||||||
<p>
|
<p>Choose the next action:</p>
|
||||||
We've launched a new version of the Kaspa Wallet at
|
</div>
|
||||||
<br />
|
<div
|
||||||
<span class="highlight"> https://kaspa-ng.org </span>
|
class="button-group"
|
||||||
</p>
|
style="display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0"
|
||||||
<ButtonCommon @click="goToNewWallet">
|
>
|
||||||
Go to the new Kaspa NG Wallet
|
<ButtonCommon type="primary" size="large" @click="handleGoToCreate">
|
||||||
|
Create new wallet
|
||||||
|
</ButtonCommon>
|
||||||
|
<ButtonCommon type="default" size="large" @click="handleGoToLogin">
|
||||||
|
Open existing wallet
|
||||||
</ButtonCommon>
|
</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div>
|
|
||||||
<p>
|
|
||||||
Already have funds on the old wallet?<br />
|
|
||||||
You can still use <span class="highlight">https://wallet.kaspanet.io</span>
|
|
||||||
</p>
|
|
||||||
<ButtonCommon @click="goToLegacyWallet"> Continue on Legacy Wallet </ButtonCommon>
|
|
||||||
<div class="note">Thank you for being a part of the Kaspa community!</div>
|
<div class="note">Thank you for being a part of the Kaspa community!</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -53,7 +51,7 @@ const goToLegacyWallet = () => {
|
|||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 500px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
|||||||
@ -6,6 +6,8 @@ import OpenWalletComponent from './auth/OpenWalletComponent.vue'
|
|||||||
import CreateWalletComponent from './auth/CreateWalletComponent.vue'
|
import CreateWalletComponent from './auth/CreateWalletComponent.vue'
|
||||||
import RecoverySeedComponent from './auth/RecoverySeedComponent.vue'
|
import RecoverySeedComponent from './auth/RecoverySeedComponent.vue'
|
||||||
import ConfirmSeedComponent from './auth/ConfirmSeedComponent.vue'
|
import ConfirmSeedComponent from './auth/ConfirmSeedComponent.vue'
|
||||||
|
import ImportWalletComponent from './auth/ImportWalletComponent.vue'
|
||||||
|
import KeystoreDownloadComponent from './auth/KeystoreDownloadComponent.vue'
|
||||||
import { IconCommon } from './icon'
|
import { IconCommon } from './icon'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@ -18,4 +20,6 @@ export {
|
|||||||
RecoverySeedComponent,
|
RecoverySeedComponent,
|
||||||
ConfirmSeedComponent,
|
ConfirmSeedComponent,
|
||||||
IconCommon,
|
IconCommon,
|
||||||
|
ImportWalletComponent,
|
||||||
|
KeystoreDownloadComponent,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -126,3 +126,8 @@ export const validateSeedPhrase = (words: string[]): boolean => {
|
|||||||
// Check if all words are in the BIP39 wordlist
|
// Check if all words are in the BIP39 wordlist
|
||||||
return words.every((word) => BIP39_WORDS.includes(word.toLowerCase()))
|
return words.every((word) => BIP39_WORDS.includes(word.toLowerCase()))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const validateSeedPhrase18 = (words: string[]): boolean => {
|
||||||
|
if (words.length !== 18) return false
|
||||||
|
return words.every((word) => BIP39_WORDS.includes(word.toLowerCase()))
|
||||||
|
}
|
||||||
|
|||||||
@ -33,7 +33,8 @@ const handleBack = () => {
|
|||||||
<div class="auth-container">
|
<div class="auth-container">
|
||||||
<OnboardingComponent
|
<OnboardingComponent
|
||||||
v-if="currentState === 'onboarding'"
|
v-if="currentState === 'onboarding'"
|
||||||
@onboarding-complete="handleOnboardingComplete"
|
@go-to-create="handleGoToCreate"
|
||||||
|
@go-to-login="handleGoToLogin"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<LoginTab v-else-if="currentState === 'login'" @go-to-create="handleGoToCreate" />
|
<LoginTab v-else-if="currentState === 'login'" @go-to-create="handleGoToCreate" />
|
||||||
|
|||||||
@ -1,21 +1,31 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { OpenWalletComponent } from '@/components'
|
import { ref } from 'vue'
|
||||||
|
import { ImportWalletComponent, OpenWalletComponent } from '@/components'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{ goToCreate: [] }>()
|
||||||
goToCreate: []
|
|
||||||
}>()
|
const stage = ref<'import' | 'password'>('import')
|
||||||
|
const importData = ref<any>(null)
|
||||||
|
|
||||||
|
const handleImported = (payload: {
|
||||||
|
type: 'seed' | 'privatekey'
|
||||||
|
value: string | string[]
|
||||||
|
passphrase?: string
|
||||||
|
}) => {
|
||||||
|
importData.value = payload
|
||||||
|
stage.value = 'password'
|
||||||
|
}
|
||||||
|
|
||||||
const handleNavigateToCreate = () => {
|
const handleNavigateToCreate = () => {
|
||||||
emit('goToCreate')
|
emit('goToCreate')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="login-tab">
|
<div class="login-tab">
|
||||||
<OpenWalletComponent @navigateToCreate="handleNavigateToCreate" />
|
<ImportWalletComponent v-if="stage === 'import'" @import-success="handleImported" />
|
||||||
|
<OpenWalletComponent v-else @navigateToCreate="handleNavigateToCreate" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login-tab {
|
.login-tab {
|
||||||
padding: var(--spacing-lg);
|
padding: var(--spacing-lg);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user