41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<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> |