70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
import { FormCommon } from '@/components'
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'update:valid', valid: boolean): void
|
||
|
|
(e: 'submit', keystore: string): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const keystore = ref('')
|
||
|
|
const keystoreError = ref('')
|
||
|
|
|
||
|
|
// Watch keystore and emit validity
|
||
|
|
watch(
|
||
|
|
[keystore, keystoreError],
|
||
|
|
() => {
|
||
|
|
const isValid = !!keystore.value.trim() && !keystoreError.value
|
||
|
|
emit('update:valid', isValid)
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
)
|
||
|
|
|
||
|
|
const validateKeystore = () => {
|
||
|
|
if (!keystore.value.trim()) {
|
||
|
|
keystoreError.value = 'Please enter your keystore.'
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
keystoreError.value = ''
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
if (validateKeystore()) {
|
||
|
|
emit('submit', keystore.value)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
handleSubmit,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="keystore-tab">
|
||
|
|
<div class="form-row mb-md">
|
||
|
|
<FormCommon
|
||
|
|
v-model="keystore"
|
||
|
|
type="text"
|
||
|
|
label="Keystore"
|
||
|
|
placeholder="Enter keystore"
|
||
|
|
:error="keystoreError"
|
||
|
|
@focus="keystoreError = ''"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.keystore-tab {
|
||
|
|
.form-row {
|
||
|
|
margin-top: 19px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
.mb-md {
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|