door-alarm/web/pages/token.vue
2025-06-07 09:21:57 +02:00

61 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"
import axios from "axios"
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()
function onSubmit(event: FormSubmitEvent<Schema>) {
const received = event.data.token
axios
.get<boolean>(useAPI("/opened"), {
headers: useHeaders(received),
})
.then((res) => {
handleResponse(res, () => {
toast.add({ title: "Token saved", color: "success" })
token.value = received
navigateTo("/")
})
})
.catch(handleRequestError)
}
onMounted(() => {
if (token.value) {
return navigateTo("/")
}
})
</script>