ResetPasswordForm

A password reset form block with new password and confirmation fields, plus password requirements indicator.

Set a new password

Your new password must be at least 8 characters long.

CMSCMS Ready

The ResetPasswordForm component accepts customizable title, description, and link props for CMS integration. Content editors can configure form text without code changes.

Basic Usage

import { ResetPasswordForm } from "@corew500/features/auth"

<ResetPasswordForm
  signInHref="/login"
/>

With Validation

Enable client-side validation with password requirements and real-time feedback.

<ResetPasswordForm
  signInHref="/login"
  validation={{
    enableClientValidation: true,
    validationMode: "onBlur",
    resetPasswordOptions: {
      minLength: 8,
      requireUppercase: true,
      requireLowercase: true,
      requireNumber: true,
      requireSpecialChar: false,
    },
  }}
/>

The validation prop enables:

Password requirements indicator (updates in real-time)
Password strength validation
Confirm password matching
Custom error messages

Password Requirements

When validation is enabled, users see a requirements checklist:

<ResetPasswordForm
  signInHref="/login"
  validation={{
    enableClientValidation: true,
  }}
/>

Requirements shown:

Minimum length (default: 8 characters)
Uppercase letter (optional)
Lowercase letter (optional)
Number (optional)
Special character (optional)

With Glow Effect

Enable interactive glow effects on inputs and buttons.

<ResetPasswordForm
  glow
  signInHref="/login"
/>

The glow effect adds:

Mouse-tracking radial gradient on input fields
Animated gradient underline on buttons that fades in on hover

Custom Content

<ResetPasswordForm
  title="Create new password"
  description="Your new password must be different from previous passwords"
  signInHref="/login"
  successTitle="Password updated"
  successDescription="Your password has been successfully reset"
/>

Loading State

<ResetPasswordForm loading signInHref="/login" />

Custom Error Messages

<ResetPasswordForm
  signInHref="/login"
  validation={{
    enableClientValidation: true,
    errorMessages: {
      password: {
        required: "Please enter a password",
        minLength: "Password must be at least 8 characters",
        requireUppercase: "Password must contain an uppercase letter",
      },
      confirmPassword: {
        required: "Please confirm your password",
        mismatch: "Passwords do not match",
      },
    },
  }}
/>

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: ResetPasswordFormData) => void	—	Called when the form is submitted
`loading`	enum	`false`	Whether the form is in a loading state
`success`	enum	`false`	When true, shows success state instead of form
`glow`	enum	`false`	Enable glow effects
`title`	string	`Reset password`	—
`description`	string	`Enter your new password below.`	—
`successTitle`	string	`Password updated!`	—
`successDescription`	string	`Your password has been reset successfully. You can now log in with your new password.`	—
`successAction`	enum	—	—
`labels`	{ password?: string; confirmPassword?: string; }	`{}`	—
`placeholders`	{ password?: string; confirmPassword?: string; }	`{}`	—
`buttonLabels`	{ submit?: string; loading?: string; backToLogin?: string; }	`{}`	—
`errors`	{ password?: string; confirmPassword?: string; general?: string; }	`{}`	—
`features`	{ passwordToggle?: boolean; passwordRequirements?: boolean; }	`{}`	—
`backToLoginHref`	string	`#`	—
`passwordRequirements`	PasswordRequirement[]	—	Custom password requirements