134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import { ButtonCommon, FormCommon } from '@/components'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
title?: string
|
||
|
|
subtitle?: string
|
||
|
|
buttonText?: string
|
||
|
|
hideBackButton?: boolean
|
||
|
|
backButtonText?: string
|
||
|
|
placeholder?: string
|
||
|
|
label?: string
|
||
|
|
loading?: boolean
|
||
|
|
error?: boolean
|
||
|
|
errorMessage?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
title: 'Access Wallet',
|
||
|
|
subtitle: 'Enter your password to unlock your wallet',
|
||
|
|
buttonText: 'Unlock Wallet',
|
||
|
|
backButtonText: 'Back',
|
||
|
|
hideBackButton: false,
|
||
|
|
placeholder: 'Enter your password',
|
||
|
|
label: 'Password',
|
||
|
|
loading: false,
|
||
|
|
error: false,
|
||
|
|
errorMessage: 'Invalid password',
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
submit: [password: string]
|
||
|
|
back: []
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const password = ref('')
|
||
|
|
const passwordError = ref('')
|
||
|
|
|
||
|
|
const canProceed = computed(() => {
|
||
|
|
return password.value.length > 0 && !passwordError.value
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
if (!canProceed.value) {
|
||
|
|
if (!password.value) {
|
||
|
|
passwordError.value = 'Please enter your password'
|
||
|
|
}
|
||
|
|
return
|
||
|
|
}
|
||
|
|
passwordError.value = ''
|
||
|
|
emit('submit', password.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBack = () => {
|
||
|
|
emit('back')
|
||
|
|
password.value = ''
|
||
|
|
passwordError.value = ''
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="auth-card-content">
|
||
|
|
<div class="form-group">
|
||
|
|
<FormCommon
|
||
|
|
v-model="password"
|
||
|
|
type="password"
|
||
|
|
:label="props.label"
|
||
|
|
:placeholder="props.placeholder"
|
||
|
|
show-password-toggle
|
||
|
|
required
|
||
|
|
:error="passwordError"
|
||
|
|
@input="passwordError = ''"
|
||
|
|
@keyup.enter="handleSubmit"
|
||
|
|
/>
|
||
|
|
<span v-if="error" class="error-message">{{ errorMessage }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="auth-button-group">
|
||
|
|
<ButtonCommon
|
||
|
|
v-if="!props.hideBackButton"
|
||
|
|
type="default"
|
||
|
|
size="large"
|
||
|
|
class="auth-button"
|
||
|
|
block
|
||
|
|
@click="handleBack"
|
||
|
|
>
|
||
|
|
{{ props.backButtonText }}
|
||
|
|
</ButtonCommon>
|
||
|
|
<ButtonCommon
|
||
|
|
type="primary"
|
||
|
|
size="large"
|
||
|
|
class="auth-button"
|
||
|
|
block
|
||
|
|
:disabled="!canProceed"
|
||
|
|
:loading="props.loading"
|
||
|
|
@click="handleSubmit"
|
||
|
|
>
|
||
|
|
{{ props.buttonText }}
|
||
|
|
</ButtonCommon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.auth-card-content {
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: var(--spacing-xl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.auth-button {
|
||
|
|
width: fit-content;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.auth-button-group {
|
||
|
|
width: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: var(--spacing-2xl);
|
||
|
|
@include center_flex;
|
||
|
|
gap: var(--spacing-md);
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-message {
|
||
|
|
display: block;
|
||
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
||
|
|
background: var(--error-light);
|
||
|
|
color: var(--error-color);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
font-size: var(--font-sm);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|