<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, { message: 'Password is required longer than 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>