Login Form Template

1"use client";
2 
3import { MailIcon, LockIcon } from "lucide-react";
4import { toast } from "sonner";
5import { z } from "zod";
6 
7import { FormFieldType } from "@/components/forms/core";
8import { SchemaForm } from "@/components/forms/patterns/SchemaForm";
9import {
10  Card,
11  CardContent,
12  CardDescription,
13  CardFooter,
14  CardHeader,
15  CardTitle,
16} from "@/components/ui/card";
17 
18const loginFormSchema = z.object({
19  email: z.string().email("Enter a valid email address."),
20  password: z.string().min(8, "Password must be at least 8 characters."),
21  rememberMe: z.boolean(),
22});
23 
24type LoginFormValues = z.infer<typeof loginFormSchema>;
25 
26export default function LoginFormTemplate() {
27  const onSubmit = async (values: LoginFormValues) => {
28    await new Promise((resolve) => setTimeout(resolve, 900));
29    toast.success(`Signed in as ${values.email}.`);
30  };
31 
32  return (
33    <Card className="w-full max-w-md">
34      <CardHeader className="space-y-1">
35        <CardTitle>Welcome back</CardTitle>
36        <CardDescription>
37          A starter login template built with `SchemaForm` on top of the shared
38          field system.
39        </CardDescription>
40      </CardHeader>
41      <CardContent>
42        <SchemaForm<LoginFormValues>
43          schema={loginFormSchema}
44          defaultValues={{
45            email: "adrian@example.com",
46            password: "supersecret",
47            rememberMe: true,
48          }}
49          sections={[
50            {
51              fields: [
52                {
53                  name: "email",
54                  fieldType: FormFieldType.INPUT,
55                  type: "email",
56                  label: "Email",
57                  placeholder: "you@example.com",
58                  prefix: <MailIcon className="size-4" />,
59                  required: true,
60                },
61                {
62                  name: "password",
63                  fieldType: FormFieldType.PASSWORD,
64                  label: "Password",
65                  placeholder: "Enter your password",
66                  prefix: <LockIcon className="size-4" />,
67                  required: true,
68                },
69                {
70                  name: "rememberMe",
71                  fieldType: FormFieldType.CHECKBOX,
72                  label: "Remember me",
73                  description: "Keeps the session active on this device.",
74                },
75              ],
76            },
77          ]}
78          buttons={{
79            signIn: {
80              label: "Sign in",
81              submit: true,
82// … truncated