login-form

1"use client";
2 
3import { useForm, Controller } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { toast } from "sonner";
11import { Checkbox } from "@/components/ui/checkbox";
12import { signIn } from "@/lib/auth-client";
13 
14const formSchema = z.object({
15  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
16  password: z.string().min(1, "Password is required"),
17  rememberMe: z.boolean(),
18});
19 
20type FormValues = z.infer<typeof formSchema>;
21export function LoginFormForm() {
22  const form = useForm<FormValues>({
23    resolver: zodResolver(formSchema),
24    defaultValues: {
25      email: "",
26      password: "",
27      rememberMe: false,
28    },
29  });
30 
31  const onSubmit = async (data: FormValues) => {
32    await signIn.email({
33      email: data.email,
34      password: data.password,
35      callbackURL: "/dashboard",
36      fetchOptions: {
37        onResponse: () => {
38          // toast.loading("Logging in...");
39        },
40        onRequest: () => {
41          toast.loading("Logging in...");
42        },
43        onSuccess: () => {
44          toast.dismiss();
45          toast.success("Logged in successfully!");
46        },
47        onError: (ctx) => {
48          toast.dismiss();
49          toast.error(ctx.error.message);
50        },
51      },
52    });
53  };
54 
55  return (
56    <Card className="w-full max-w-md mx-auto">
57      <CardHeader>
58        <CardTitle>Login Form</CardTitle>
59        <CardDescription>Simple email and password login</CardDescription>
60      </CardHeader>
61      <CardContent>
62        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
63          <div className="space-y-2">
64            <Label htmlFor="email">Email Address</Label>
65            <Input
66              id="email"
67              type="email"
68              placeholder="john@example.com"
69              {...form.register("email")}
70            />
71            {form.formState.errors.email && (
72            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
73          )}
74          </div>
75 
76          <div className="space-y-2">
77            <Label htmlFor="password">Password</Label>
78            <Input
79              id="password"
80              type="password"
81// … truncated