37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ title: string }>()
|
|
const emit = defineEmits<{ unlocked: [] }>()
|
|
|
|
const password = ref('')
|
|
const error = ref<string>()
|
|
const unlocking = ref(false)
|
|
|
|
async function unlock() {
|
|
if (!password.value) return
|
|
unlocking.value = true
|
|
error.value = undefined
|
|
try {
|
|
await $fetch('/api/auth/login', { method: 'POST', body: { password: password.value } })
|
|
emit('unlocked')
|
|
} catch (e) {
|
|
error.value = errorMessage(e) ?? 'Couldn\'t unlock'
|
|
password.value = ''
|
|
} finally {
|
|
unlocking.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UModal :open="true" :dismissible="false" :close="false" :title="title" description="Enter your password to continue.">
|
|
<template #body>
|
|
<form class="space-y-4" @submit.prevent="unlock">
|
|
<UFormField label="Password" :error="error">
|
|
<UInput v-model="password" type="password" autocomplete="current-password" class="w-full" autofocus />
|
|
</UFormField>
|
|
<UButton type="submit" label="Unlock" icon="i-lucide-lock-open" :loading="unlocking" :disabled="!password" />
|
|
</form>
|
|
</template>
|
|
</UModal>
|
|
</template>
|