"use client" import * as React from "react" import Link from "next/link" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { cn } from "@/lib/utils" import { loginSchema, type LoginValues } from "@/lib/validations" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" export interface LoginFormProps { /** Called with validated form values when the user submits. */ onSubmit?: (values: LoginValues) => void | Promise /** Route for the "Forgot password?" link. */ forgotPasswordHref?: string /** Route for the "Sign up" link. */ signUpHref?: string /** Render social login buttons below the form divider. */ socialButtons?: React.ReactNode /** External error message displayed above the form. */ error?: string /** Disables the submit button and shows loading state. */ loading?: boolean className?: string } /** * Email + password login form with Zod validation, optional social login * buttons, forgot-password link, and sign-up redirect. * * @example * ```tsx * signIn(values)} * forgotPasswordHref="/forgot-password" * signUpHref="/signup" * /> * ``` */ export function LoginForm({ onSubmit, forgotPasswordHref = "/forgot-password", signUpHref = "/signup", socialButtons, error, loading = false, className, }: LoginFormProps) { const form = useForm({ resolver: zodResolver(loginSchema), defaultValues: { email: "", password: "", }, }) async function handleSubmit(values: LoginValues) { await onSubmit?.(values) } return (

{/* Header */}

Welcome back

Enter your credentials to sign in to your account

{/* External error */} {error && (

{error}

)} {/* Form */}

( Email )} /> (

Password Forgot password?

)} /> {/* Social login */} {socialButtons && ( <>

{socialButtons}

)} {/* Sign up redirect */}

Don't have an account?{" "} Sign up

) }

Prop	Type	Required	Description
`onSubmit`	`(values: LoginValues) => void \| Promise<void>`	—	Submit handler.
`forgotPasswordHref`	`string`	—	Forgot password link.
`signUpHref`	`string`	—	Sign up link.
`socialButtons`	`ReactNode`	—	OAuth buttons slot.