ChangePasswordForm
A form block for updating account passwords with current password verification and strength requirements.
Loading...
Installation
pnpm add @corew500/uiUsage
import { ChangePasswordForm } from '@corew500/ui/blocks/change-password-form'
<ChangePasswordForm
onFormSubmit={(data) => handleChangePassword(data)}
onCancel={() => router.back()}
title="Change Password"
description="Your new password must meet all requirements."
/>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onFormSubmit | (data: ChangePasswordFormData) => void | — | Called when the form is submitted |
| onCancel | () => void | — | Called when cancel button is clicked |
| 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 | Change password | — |
| description | string | Enter your current password and choose a new one. | — |
| successTitle | string | Password changed! | — |
| successDescription | string | Your password has been updated successfully. | — |
| successAction | enum | — | — |
| labels | { currentPassword?: string; newPassword?: string; confirmPassword?: string; } | {} | — |
| placeholders | { currentPassword?: string; newPassword?: string; confirmPassword?: string; } | {} | — |
| buttonLabels | { submit?: string; loading?: string; cancel?: string; } | {} | — |
| errors | { currentPassword?: string; newPassword?: string; confirmPassword?: string; general?: string; } | {} | — |
| features | { passwordToggle?: boolean; passwordRequirements?: boolean; showCancel?: boolean; } | {} | — |
| passwordRequirements | PasswordRequirement[] | — | Custom password requirements |