"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type PasswordResetStatus = "idle" | "success" | "error";

export interface PasswordResetFormProps
  extends React.FormHTMLAttributes<HTMLFormElement> {
  title?: string;
  subtitle?: string;
  emailLabel?: string;
  submitLabel?: string;
  helperText?: string;
  successMessage?: string;
  errorMessage?: string;
  status?: PasswordResetStatus;
}

export const PasswordResetForm = React.forwardRef<
  HTMLFormElement,
  PasswordResetFormProps
>(
  (
    {
      className,
      title = "Reset your password",
      subtitle = "Enter your email and we will send a reset link.",
      emailLabel = "Email address",
      submitLabel = "Send reset link",
      helperText = "We will email you a secure link to reset your password.",
      successMessage = "Reset link sent. Check your inbox.",
      errorMessage = "We could not find that email. Try again.",
      status = "idle",
      ...props
    },
    ref
  ) => {
    const message =
      status === "success"
        ? successMessage
        : status === "error"
          ? errorMessage
          : helperText;

    const messageTone =
      status === "success"
        ? "text-primary"
        : status === "error"
          ? "text-destructive"
          : "text-muted-foreground";

    return (
      <form
        ref={ref}
        className={cn(
          "w-full max-w-md space-y-6 rounded-2xl border border-border bg-card p-6 text-foreground",
          className
        )}
        {...props}
      >
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-foreground">{title}</h2>
          {subtitle ? (
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>

        <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
          <span>{emailLabel}</span>
          <input
            type="email"
            name="email"
            autoComplete="email"
            required
            placeholder="you@example.com"
            className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            aria-invalid={status === "error"}
          />
        </label>

        <button
          type="submit"
          className="w-full rounded-lg border border-border bg-muted px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-card focus-visible:outline-none focus-visible:border-border"
        >
          {submitLabel}
        </button>

        <div
          className="rounded-lg border border-border bg-muted px-3 py-2 text-sm"
          role="status"
          aria-live="polite"
        >
          <p className={cn("text-sm", messageTone)}>{message}</p>
        </div>
      </form>
    );
  }
);

PasswordResetForm.displayName = "PasswordResetForm";
Password Reset Form

Reset your password

Dependencies

Files

Installation
