"use client"; import { CheckCircle2, Eye, EyeOff, Loader2, Mail, Shield } 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 { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/registry/new-york/ui/input-group"; export interface AuthEmailChangeProps { currentEmail?: string; onSubmit?: (data: { newEmail: string; password: string }) => void; className?: string; isLoading?: boolean; isSuccess?: boolean; errors?: { newEmail?: string; password?: string; general?: string; }; successMessage?: string; } interface FormErrors { newEmail?: string; password?: string; } function validateEmail( value: string, currentEmail?: 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"; } if (value.trim().toLowerCase() === currentEmail?.toLowerCase()) { return "New email must be different from current email"; } return; } function validatePassword(value: string): string | undefined { if (!value) { return "Password is required"; } return; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface CurrentEmailDisplayProps { email: string; } function CurrentEmailDisplay({ email }: CurrentEmailDisplayProps) { return (

Signed in as {email}

); } interface EmailFieldProps { id: string; value: string; onChange: (e: React.ChangeEvent) => void; error?: string; } function EmailField({ id, value, onChange, error }: EmailFieldProps) { return ( New email address * {error && {error}} We'll send a verification link to this address ); } 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}} Enter your current password to confirm this change ); } interface SuccessStateProps { message: string; newEmail?: string; className?: string; } function SuccessState({ message, newEmail, className }: SuccessStateProps) { return ( Verification email sent Check your new email address to verify the change

{message}

{newEmail && (

Sent to {newEmail}

)}

Click the verification link in the email to complete the change. If you don't see it, check your spam folder.

); } export default function AuthEmailChange({ currentEmail, onSubmit, className, isLoading = false, isSuccess = false, errors, successMessage = "We've sent a verification link to your new email address.", }: AuthEmailChangeProps) { const [newEmail, setNewEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [localErrors, setLocalErrors] = useState({}); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const newEmailError = validateEmail(newEmail, currentEmail); const passwordError = validatePassword(password); if (newEmailError || passwordError) { setLocalErrors({ newEmail: newEmailError, password: passwordError, }); return; } setLocalErrors({}); onSubmit?.({ newEmail: newEmail.trim(), password, }); }, [newEmail, password, currentEmail, onSubmit] ); const handleNewEmailChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setNewEmail(value); if (localErrors.newEmail) { setLocalErrors((prev) => ({ ...prev, newEmail: validateEmail(value, currentEmail), })); } }, [localErrors.newEmail, currentEmail] ); 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 newEmailError = errors?.newEmail || localErrors.newEmail; const passwordError = errors?.password || localErrors.password; const generalError = errors?.general; if (isSuccess) { return ( ); } return ( Change email address Update your email address. We'll send a verification link to your new email. ); }

Example Usage