63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
|
"use client"
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
import { z } from "zod";
|
||
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||
|
|
import { toast } from "@/components/ui/use-toast";
|
||
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
|
||
|
|
const formSchema = z.object({
|
||
|
|
email: z.string().email(),
|
||
|
|
password: z.string().min(6)
|
||
|
|
})
|
||
|
|
|
||
|
|
export default function LoginForm() {
|
||
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
||
|
|
resolver: zodResolver(formSchema),
|
||
|
|
})
|
||
|
|
|
||
|
|
function onErrors(errors) {
|
||
|
|
toast({
|
||
|
|
title: "WHOOPS",
|
||
|
|
description: JSON.stringify(errors)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form {...form}>
|
||
|
|
<form action={signIn}>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="email"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>Email Address</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input placeholder="email goes here" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
></FormField>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="password"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>Password</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input placeholder="password goes here" type="password"{...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
></FormField>
|
||
|
|
<Button type="submit">SUBMIT</Button>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|