Secure Reset
Secure password reset form with real-time strength meter, password visibility toggle, and validation. Features animated strength indicators and confirmation field.
Main Features of Secure Reset
How to Use Secure Reset in Next.js
Installation Guide for Secure Reset
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | "Set New Password" | Title text displayed at the top of the form. |
subtitle | string | "Ensure it's at least 8 chars long." | Subtitle text displayed below the title. |
onSubmit | (data: { password: string; confirmPassword: string }) => Promise<void> | undefined | Callback function called when form is submitted with password data. |
onStrengthChange | (strength: number) => void | undefined | Callback function called when password strength changes (0-4 scale). |
className | string | undefined | Additional CSS classes for custom styling. |
minLength | number | 8 | Minimum password length requirement. |
showStrengthMeter | boolean | true | Whether to display the password strength meter. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow is strength calculated?
The component uses a built-in entropy algorithm that checks for length, character variety (symbols, numbers), and common patterns.
QCan I customize validation?
Yes, the `minLength` prop controls length, and you can extend the `onSubmit` logic to include complex requirements like 'no sequential numbers'.
QDoes it support dark mode?
The component is designed as a neutral, high-contrast module that adapts to your primary application theme's background and text colors.