🚧 Adds token form

web/pages/index.vue

@@ -6,8 +6,12 @@
 </template>
 
 <script lang="ts" setup>
-const res = await useFetch("https://door.svitan.dev/", {
-  method: "GET",
-  retry: 2,
+const token = useCookie("token")
+
+onMounted(() => {
+    if (!token.value) {
+        return navigateTo("/token")
+    }
+    console.log(token.value)
 })
 </script>

web/pages/token.vue

@@ -1,3 +1,42 @@
 <template>
-  <main>where token?</main>
+    <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 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 token = event.data.token
+    const res = await $fetch("https://door.svitan.dev/open", {
+        method: "GET",
+        headers: {
+            Authorization: token
+        }
+    })
+
+    console.log(token)
+    console.log(res)
+    toast.add({ title: "Token saved", color: "success"  })
+}
+</script>