"use client"; import { Eye, EyeOff, Github, Loader2, Lock, Mail, User } 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, FieldDescription, 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 AuthSignupFormProps { onSubmit?: (data: { name: string; email: string; password: string; confirmPassword: string; acceptTerms: boolean; }) => void; onSocialLogin?: (provider: string) => void; socialProviders?: SocialProvider[]; showSocialLogin?: boolean; className?: string; isLoading?: boolean; errors?: { name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; general?: string; }; termsUrl?: string; privacyUrl?: string; } const GoogleIcon = ({ className }: { className?: string }) => ( ); const DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [ { id: "google", name: "Google", icon: GoogleIcon }, { id: "github", name: "GitHub", icon: Github }, ]; function validateName(value: string): string | undefined { if (!value.trim()) { return "Name is required"; } if (value.trim().length < 2) { return "Name must be at least 2 characters"; } return; } 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 < 8) { return "Password must be at least 8 characters"; } if (!/(?=.*[a-z])/.test(value)) { return "Password must contain at least one lowercase letter"; } if (!/(?=.*[A-Z])/.test(value)) { return "Password must contain at least one uppercase letter"; } if (!/(?=.*\d)/.test(value)) { return "Password must contain at least one number"; } return; } function validateConfirmPassword( value: string, passwordValue: string ): string | undefined { if (!value) { return "Please confirm your password"; } if (value !== passwordValue) { return "Passwords do not match"; } return; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

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

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

); } function EmailSeparator() { return (

Or continue with email

); } interface NameFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; value: string; } function NameField({ id, value, onChange, error }: NameFieldProps) { return ( Full name * {error && {error}} ); } interface EmailFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; value: string; } function EmailField({ id, value, onChange, error }: EmailFieldProps) { return ( Email * {error && {error}} ); } interface PasswordFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; onTogglePassword: () => void; showPassword: boolean; value: string; } function PasswordField({ id, value, onChange, showPassword, onTogglePassword, error, }: PasswordFieldProps) { return ( Password * { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && {error}} Must be at least 8 characters with uppercase, lowercase, and number ); } interface ConfirmPasswordFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; onTogglePassword: () => void; showPassword: boolean; value: string; } function ConfirmPasswordField({ id, value, onChange, showPassword, onTogglePassword, error, }: ConfirmPasswordFieldProps) { return ( Confirm password * { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && {error}} ); } interface TermsCheckboxProps { acceptTerms: boolean; error?: string; onAcceptTermsChange: (checked: boolean) => void; privacyUrl: string; termsUrl: string; } function TermsCheckbox({ acceptTerms, error, onAcceptTermsChange, privacyUrl, termsUrl, }: TermsCheckboxProps) { return (

onAcceptTermsChange(checked === true)} /> I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy *

{error && {error}} ); } export default function AuthSignupForm({ onSubmit, onSocialLogin, socialProviders = DEFAULT_SOCIAL_PROVIDERS, showSocialLogin = true, className, isLoading = false, errors, termsUrl = "#", privacyUrl = "#", }: AuthSignupFormProps) { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [acceptTerms, setAcceptTerms] = useState(false); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [localErrors, setLocalErrors] = useState<{ name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; }>({}); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const nameError = validateName(name); const emailError = validateEmail(email); const passwordError = validatePassword(password); const confirmPasswordError = validateConfirmPassword( confirmPassword, password ); const termsError = acceptTerms ? undefined : "You must accept the terms"; if ( nameError || emailError || passwordError || confirmPasswordError || termsError ) { setLocalErrors({ name: nameError, email: emailError, password: passwordError, confirmPassword: confirmPasswordError, terms: termsError, }); return; } setLocalErrors({}); onSubmit?.({ name: name.trim(), email: email.trim(), password, confirmPassword, acceptTerms, }); }, [name, email, password, confirmPassword, acceptTerms, onSubmit] ); const handleNameChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setName(value); if (localErrors.name) { setLocalErrors((prev) => ({ ...prev, name: validateName(value) })); } }, [localErrors.name] ); 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), })); } if (localErrors.confirmPassword && confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(confirmPassword, value), })); } }, [localErrors.password, localErrors.confirmPassword, confirmPassword] ); const handleConfirmPasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setConfirmPassword(value); if (localErrors.confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(value, password), })); } }, [localErrors.confirmPassword, password] ); const handleTogglePassword = useCallback(() => { setShowPassword((prev) => !prev); }, []); const handleToggleConfirmPassword = useCallback(() => { setShowConfirmPassword((prev) => !prev); }, []); const handleAcceptTermsChange = useCallback((checked: boolean) => { setAcceptTerms(checked); }, []); const nameError = errors?.name || localErrors.name; const emailError = errors?.email || localErrors.email; const passwordError = errors?.password || localErrors.password; const confirmPasswordError = errors?.confirmPassword || localErrors.confirmPassword; const termsError = errors?.terms || localErrors.terms; const generalError = errors?.general; return ( Create an account Enter your information to get started ); }

Example Usage