Spaces:
Sleeping
Sleeping
File size: 1,946 Bytes
c742717 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<script setup lang='ts'>
import { computed, ref } from 'vue'
import { NButton, NInput, NModal, useMessage } from 'naive-ui'
import { fetchVerify } from '@/api'
import { useAuthStore } from '@/store'
import Icon403 from '@/icons/403.vue'
interface Props {
visible: boolean
}
defineProps<Props>()
const authStore = useAuthStore()
const ms = useMessage()
const loading = ref(false)
const token = ref('')
const disabled = computed(() => !token.value.trim() || loading.value)
async function handleVerify() {
const secretKey = token.value.trim()
if (!secretKey)
return
try {
loading.value = true
await fetchVerify(secretKey)
authStore.setToken(secretKey)
ms.success('success')
window.location.reload()
}
catch (error: any) {
ms.error(error.message ?? 'error')
authStore.removeToken()
token.value = ''
}
finally {
loading.value = false
}
}
function handlePress(event: KeyboardEvent) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault()
handleVerify()
}
}
</script>
<template>
<NModal :show="visible" style="width: 90%; max-width: 640px">
<div class="p-10 bg-white rounded dark:bg-slate-800">
<div class="space-y-4">
<header class="space-y-2">
<h2 class="text-2xl font-bold text-center text-slate-800 dark:text-neutral-200">
403
</h2>
<p class="text-base text-center text-slate-500 dark:text-slate-500">
{{ $t('common.unauthorizedTips') }}
</p>
<Icon403 class="w-[200px] m-auto" />
</header>
<NInput v-model:value="token" type="password" placeholder="" @keypress="handlePress" />
<NButton
block
type="primary"
:disabled="disabled"
:loading="loading"
@click="handleVerify"
>
{{ $t('common.verify') }}
</NButton>
</div>
</div>
</NModal>
</template>
|