Login test

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>