Auth Email Change

1"use client";
2 
3import { CheckCircle2, Eye, EyeOff, Loader2, Mail, Shield } from "lucide-react";
4import { useCallback, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import {
15  Field,
16  FieldContent,
17  FieldDescription,
18  FieldError,
19  FieldLabel,
20} from "@/registry/new-york/ui/field";
21import {
22  InputGroup,
23  InputGroupAddon,
24  InputGroupButton,
25  InputGroupInput,
26} from "@/registry/new-york/ui/input-group";
27 
28export interface AuthEmailChangeProps {
29  currentEmail?: string;
30  onSubmit?: (data: { newEmail: string; password: string }) => void;
31  className?: string;
32  isLoading?: boolean;
33  isSuccess?: boolean;
34  errors?: {
35    newEmail?: string;
36    password?: string;
37    general?: string;
38  };
39  successMessage?: string;
40}
41 
42interface FormErrors {
43  newEmail?: string;
44  password?: string;
45}
46 
47function validateEmail(
48  value: string,
49  currentEmail?: string
50): string | undefined {
51  if (!value.trim()) {
52    return "Email is required";
53  }
54  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
55  if (!emailRegex.test(value)) {
56    return "Please enter a valid email address";
57  }
58  if (value.trim().toLowerCase() === currentEmail?.toLowerCase()) {
59    return "New email must be different from current email";
60  }
61  return;
62}
63 
64function validatePassword(value: string): string | undefined {
65  if (!value) {
66    return "Password is required";
67  }
68  return;
69}
70 
71interface ErrorAlertProps {
72  message: string;
73}
74 
75function ErrorAlert({ message }: ErrorAlertProps) {
76  return (
77    <div
78      aria-live="polite"
79      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
80      role="alert"
81    >
82      {message}
83    </div>
84  );
85}
86 
87interface CurrentEmailDisplayProps {
88  email: string;
89}
90 
91function CurrentEmailDisplay({ email }: CurrentEmailDisplayProps) {
92  return (
93    <section
94      aria-label="Current email"
95      className="flex items-center gap-3 rounded-lg border border-muted bg-background px-4 py-3"
96    >
97      <span className="hidden size-12 items-center justify-center rounded-full bg-muted/70 sm:flex">
98        <Mail aria-hidden="true" className="size-4 text-muted-foreground" />
99      </span>
100      <div className="flex min-w-0 flex-col gap-0.5">
101        <span className="text-muted-foreground text-xs leading-none">
102          Signed in as
103        </span>
104// … truncated