build login form

src/app/login/page.tsx

@@ -0,0 +1,68 @@
+"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 onSubmit(values: z.infer<typeof formSchema>) {
+		toast({
+			title: "You submitted:",
+			description: JSON.stringify(values)
+		})
+	}
+
+	function onErrors(errors) {
+		toast({
+			title: "WHOOPS",
+			description: JSON.stringify(errors)
+		})
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit, onErrors)}>
+				<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>
+
+	)
+}
+