"use client"; import { Eye, EyeOff, Github, Loader2, Lock, Mail } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Checkbox } from "@/registry/new-york/ui/checkbox"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Separator } from "@/registry/new-york/ui/separator"; export interface SocialProvider { id: string; name: string; icon: React.ComponentType<{ className?: string }>; } export interface AuthLoginFormProps { onSubmit?: (data: { email: string; password: string; rememberMe: boolean; }) => void; onSocialLogin?: (provider: string) => void; socialProviders?: SocialProvider[]; showRememberMe?: boolean; showSocialLogin?: boolean; className?: string; defaultEmail?: string; isLoading?: boolean; errors?: { email?: string; password?: string; general?: string; }; } const GoogleIcon = ({ className }: { className?: string }) => ( ); const DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [ { id: "google", name: "Google", icon: GoogleIcon }, { id: "github", name: "GitHub", icon: Github }, ]; function validateEmail(value: string): string | undefined { if (!value.trim()) { return "Email is required"; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) { return "Please enter a valid email address"; } return; } function validatePassword(value: string): string | undefined { if (!value) { return "Password is required"; } if (value.length < 6) { return "Password must be at least 6 characters"; } return; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EmailFieldProps { id: string; value: string; onChange: (e: React.ChangeEvent) => void; error?: string; } function EmailField({ id, value, onChange, error }: EmailFieldProps) { return ( Email * {error && {error}} ); } interface PasswordFieldProps { id: string; value: string; onChange: (e: React.ChangeEvent) => void; showPassword: boolean; onTogglePassword: () => void; error?: string; } function PasswordField({ id, value, onChange, showPassword, onTogglePassword, error, }: PasswordFieldProps) { return ( Password * { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && {error}} ); } interface RememberMeCheckboxProps { checked: boolean; onCheckedChange: (checked: boolean) => void; id: string; } function RememberMeCheckbox({ checked, onCheckedChange, id, }: RememberMeCheckboxProps) { return (

onCheckedChange(checked === true)} /> Remember me

); } interface SocialLoginButtonsProps { providers: SocialProvider[]; onSocialLogin?: (provider: string) => void; } function SocialLoginButtons({ providers, onSocialLogin, }: SocialLoginButtonsProps) { return (

{providers.map((provider) => { const Icon = provider.icon; return ( ); })}

); } function EmailSeparator() { return (

Or continue with email

); } export default function AuthLoginForm({ onSubmit, onSocialLogin, socialProviders = DEFAULT_SOCIAL_PROVIDERS, showRememberMe = true, showSocialLogin = true, className, defaultEmail = "", isLoading = false, errors, }: AuthLoginFormProps) { const [email, setEmail] = useState(defaultEmail); const [password, setPassword] = useState(""); const [rememberMe, setRememberMe] = useState(false); const [showPassword, setShowPassword] = useState(false); const [localErrors, setLocalErrors] = useState<{ email?: string; password?: string; }>({}); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const emailError = validateEmail(email); const passwordError = validatePassword(password); if (emailError || passwordError) { setLocalErrors({ email: emailError, password: passwordError, }); return; } setLocalErrors({}); onSubmit?.({ email: email.trim(), password, rememberMe, }); }, [email, password, rememberMe, onSubmit] ); const handleEmailChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }, [localErrors.email] ); const handlePasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setPassword(value); if (localErrors.password) { setLocalErrors((prev) => ({ ...prev, password: validatePassword(value), })); } }, [localErrors.password] ); const handleTogglePassword = useCallback(() => { setShowPassword((prev) => !prev); }, []); const handleRememberMeChange = useCallback((checked: boolean) => { setRememberMe(checked); }, []); const emailError = errors?.email || localErrors.email; const passwordError = errors?.password || localErrors.password; const generalError = errors?.general; return ( Sign in Enter your credentials to access your account ); }

Example Usage