Reset Password Form

Forms 193

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reset Password Form to your project and fits it to your theme.

Code

How Reset Password Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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;