Components
Loading preview...
Reset Password Form A multi-step form component that guides users through verifying a code and setting a new password, complete with real-time validation and smooth animations.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/reset-password-formimport { ResetPasswordForm } from "@/components/ui/reset-password-form";
// Main demo component
const ResetPasswordFormDemo = () => {
// Mock function to simulate verifying a code
const handleVerifyCode = (code: string): Promise<boolean> => {
console.log("Verifying code:", code);
return new Promise((resolve) => {
setTimeout(() => {
// Simulate success only if the code is "123456"
resolve(code === "123456");
}, 1000);
});
};
// Mock function to simulate form submission
const handleSubmitPassword = (password: string): Promise<void> => {
console.log("New password submitted:", password);
return new Promise((resolve) => {
setTimeout(() => {
alert("Password has been successfully reset!");
resolve();
}, 1500);
});
};
// Mock function for cancel action
const handleCancel = () => {
console.log("Reset password cancelled.");
alert("Operation cancelled.");
};
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<ResetPasswordForm
email="ravikatiyar@gmail.com"
onVerifyCode={handleVerifyCode}
onSubmit={handleSubmitPassword}
onCancel={handleCancel}
/>
</div>
);
};
export default ResetPasswordFormDemo;