60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
|
<main class="flex items-center justify-center min-w-screen min-h-screen">
|
|
<UForm
|
|
:schema="schema"
|
|
:state="state"
|
|
@submit="onSubmit"
|
|
class="flex flex-col items-end justify-center gap-y-2"
|
|
>
|
|
<UFormField label="Token" name="token" size="xl" required>
|
|
<UInput
|
|
v-model="state.token"
|
|
placeholder="Your token..."
|
|
size="xl"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UButton type="submit" size="xl"> Submit </UButton>
|
|
</UForm>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import * as v from "valibot"
|
|
import type { FormSubmitEvent } from "@nuxt/ui"
|
|
|
|
const token = useToken()
|
|
|
|
const schema = v.object({
|
|
token: v.pipe(v.string(), v.nonEmpty("Please enter your token")),
|
|
})
|
|
type Schema = v.InferOutput<typeof schema>
|
|
|
|
const state = reactive({
|
|
token: "",
|
|
})
|
|
const toast = useToast()
|
|
|
|
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
const received = event.data.token
|
|
await $fetch(useAPI("/open"), {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${received}`,
|
|
},
|
|
onRequestError: handleRequestError,
|
|
onResponse: handleResponse(() => {
|
|
toast.add({ title: "Token saved", color: "success" })
|
|
token.value = received
|
|
navigateTo("/")
|
|
}),
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (token.value) {
|
|
return navigateTo("/")
|
|
}
|
|
})
|
|
</script>
|