Login test

pages/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl font-bold underline">
+      Hello world!
+    </h1>
+    <Button label="Verify"/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/login.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod';
+import * as zod from 'zod';
+
+const zodSchema = zod.object({
+  username: zod.string().min(1, { message: 'This is required' }),
+  password: zod.string().min(3),
+});
+const schema = toTypedSchema(zodSchema);
+
+const toast = useToast();
+
+function onSubmit(v: unknown) {
+  const values = v as zod.infer<typeof zodSchema>;
+  toast.add({ summary: 'Success', detail: 'The form has been submitted.', severity: 'success' });
+  console.log(values);
+}
+</script>
+
+<template>
+  <div class="w-screen h-screen bg-neutral-600">
+    <div class="flex justify-center items-center h-full">
+      <Card class="w-xs">
+        <template #title>Login</template>
+        <template #content>
+          <VeeForm v-slot="{isSubmitting}" :validation-schema="schema" @submit="onSubmit">
+            <div class="grid grid-cols-1 gap-2">
+              <FloatInputTextField name="username" label="Username"/>
+              <FloatInputTextField name="password" label="Password"/>
+              <Button type="submit" :loading="isSubmitting">Submit</Button>
+            </div>
+          </VeeForm>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/user/myself.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/public/1/auth/myself/', {
+  method: 'GET',
+  headers: {
+    'Accept': 'application/json',
+  }
+});
+</script>
+
+<template>
+  <div>
+    <h2>MYSELF</h2>
+    <div v-if="data === null">
+      No Data
+    </div>
+    <div v-else>
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>