"use client"; import { Eye, EyeOff, Github, Loader2, Lock, Mail } from "lucide-react"; import { useCallback, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; 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 }, ]; 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 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; }; const validatePassword = (value: string): string | undefined => { if (!value) { return "Password is required"; } if (value.length < 6) { return "Password must be at least 6 characters"; } return; }; 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 = (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }; const handlePasswordChange = (e: React.ChangeEvent) => { const value = e.target.value; setPassword(value); if (localErrors.password) { setLocalErrors((prev) => ({ ...prev, password: validatePassword(value), })); } }; 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

{generalError && (

{generalError}

)} {showSocialLogin && socialProviders.length > 0 && ( <>

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

Or continue with email

)}

Email * {emailError && ( )} Password * { e.preventDefault(); setShowPassword((prev) => !prev); }} type="button" > {showPassword ? ( ) : ( )} {passwordError && ( )} {showRememberMe && (

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

)}

); }

Example Usage