"use client"; import { CheckCircle2, Eye, EyeOff, Loader2, Mail, Shield } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; 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; } 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<{ newEmail?: 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"; } if (value.trim().toLowerCase() === currentEmail?.toLowerCase()) { return "New email must be different from current email"; } return; }; const validatePassword = (value: string): string | undefined => { if (!value) { return "Password is required"; } return; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const newEmailError = validateEmail(newEmail); const passwordError = validatePassword(password); if (newEmailError || passwordError) { setLocalErrors({ newEmail: newEmailError, password: passwordError, }); return; } setLocalErrors({}); onSubmit?.({ newEmail: newEmail.trim(), password, }); }; const handleNewEmailChange = (e: React.ChangeEvent) => { const value = e.target.value; setNewEmail(value); if (localErrors.newEmail) { setLocalErrors((prev) => ({ ...prev, newEmail: validateEmail(value), })); } }; const handlePasswordChange = (e: React.ChangeEvent) => { const value = e.target.value; setPassword(value); if (localErrors.password) { setLocalErrors((prev) => ({ ...prev, password: validatePassword(value), })); } }; const newEmailError = errors?.newEmail || localErrors.newEmail; const passwordError = errors?.password || localErrors.password; const generalError = errors?.general; if (isSuccess) { return ( Verification email sent Check your new email address to verify the change

{successMessage}

{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.

); } return ( Change email address Update your email address. We'll send a verification link to your new email.

{generalError && (

{generalError}

)} {currentEmail && (

Current email {currentEmail}

)}

New email address * {newEmailError && ( {newEmailError} )} We'll send a verification link to this address Password * { e.preventDefault(); setShowPassword((prev) => !prev); }} type="button" > {showPassword ? ( ) : ( )} {passwordError && ( {passwordError} )} Enter your current password to confirm this change

); }

Example Usage