Secure Reset
Secure password reset form with real-time strength meter, password visibility toggle, and validation. Features animated strength indicators and confirmation field.
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. |
When to Use
Ideal for high-security SaaS platforms, fintech applications, and Next.js sites that require a robust password recovery flow. Use this React component for a secure reset experience with real-time feedback and clear validation rules.
Best Practices
Follow React best practices by managed the strength logic on the client for immediate feedback. Maintain scalable component architecture by keeping validation rules consistent with your backend. Optimize for performance by using efficient regex checks.
Why This Component Matters
A secure reset flow reduces support overhead and builds user trust. This production-ready UI component helpsคุณ build an interface that feels safe and professional, ensuring users can recover their accounts without friction or technical confusion.
FAQ
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.
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.