Auth Forgot Password

1"use client";
2 
3import { ArrowLeft, CheckCircle2, Loader2, Mail } 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  InputGroupInput,
25} from "@/registry/new-york/ui/input-group";
26 
27export interface AuthForgotPasswordProps {
28  onSubmit?: (email: string) => void;
29  onBack?: () => void;
30  className?: string;
31  defaultEmail?: string;
32  isLoading?: boolean;
33  isSuccess?: boolean;
34  errors?: {
35    email?: string;
36    general?: string;
37  };
38  successMessage?: string;
39}
40 
41function validateEmail(value: string): string | undefined {
42  if (!value.trim()) {
43    return "Email is required";
44  }
45  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
46  if (!emailRegex.test(value)) {
47    return "Please enter a valid email address";
48  }
49  return;
50}
51 
52interface ErrorAlertProps {
53  message: string;
54}
55 
56function ErrorAlert({ message }: ErrorAlertProps) {
57  return (
58    <div
59      aria-live="polite"
60      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
61      role="alert"
62    >
63      {message}
64    </div>
65  );
66}
67 
68interface EmailFieldProps {
69  id: string;
70  value: string;
71  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
72  error?: string;
73}
74 
75function EmailField({ id, value, onChange, error }: EmailFieldProps) {
76  return (
77    <Field data-invalid={!!error}>
78      <FieldLabel htmlFor={id}>
79        Email
80        <span aria-label="required" className="text-destructive">
81          *
82        </span>
83      </FieldLabel>
84      <FieldContent>
85        <InputGroup aria-invalid={!!error}>
86          <InputGroupAddon>
87            <Mail aria-hidden="true" className="size-4" />
88          </InputGroupAddon>
89          <InputGroupInput
90            aria-describedby={error ? `${id}-error` : undefined}
91            aria-invalid={!!error}
92            autoComplete="email"
93            id={id}
94            inputMode="email"
95            name="email"
96            onChange={onChange}
97            placeholder="name@example.com…"
98            required
99            type="email"
100            value={value}
101          />
102        </InputGroup>
103// … truncated