Skip to main content
Version: 1.0.3

ForgotPassword

Overview​

The Forgot Password Page provides a fully customizable password-recovery interface designed for modern web applications. It supports multiple visual variants, animated inputs, and responsive layout modes. The component includes a dynamic form card with validation states, customizable headers, smooth motion effects, and built-in email validation, making it ideal for authentication flows that require a polished and user-friendly reset password experience.

Preview​

Forgot Password

Enter your email to reset your password.

Installation​

ignix add component ForgotPassword

Basic Example​

Here's a simple example showing how to use the ForgotPasswordPage component:

import { ForgotPasswordPage } from '@site/src/components/UI/forgotpassword';
import { useNavigate } from 'react-router-dom'; // or your routing library

function ForgotPassword() {
  const navigate = useNavigate();

  // TODO: Update the API endpoint URL below
  const handleSubmit = async (email: string) => {
    try {
      const response = await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Failed to send reset email');
      }

      // Component will automatically show success state
      console.log('Password reset email sent to:', email);
    } catch (error) {
      // Component will automatically show error state
      throw error;
    }
  };

  // TODO: Update with your routing logic
  const handleNavigateToLogin = () => {
    navigate('/login');
  };

  return (
    <ForgotPasswordPage
      forgotPasswordHeader={{
        head: "Forgot Password",
        para: "Enter your email address and we'll send you a link to reset your password."
      }}
      onSubmit={handleSubmit}
      onNavigateTo={handleNavigateToLogin}
      variant="default"
      inputVariant="clean"
      headerAnimation="fadeUp"
      submitbuttonLabel="Send Reset Link"
      navigateToLabel="Back to Login"
      successMessage="Check your email for a reset link"
    />
  );
}

export default ForgotPassword;

Advanced Example​

Here's a more advanced example with custom styling, animations, and CAPTCHA:

import { ForgotPasswordPage } from '@site/src/components/UI/forgotpassword';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function AdvancedForgotPassword() {
  const navigate = useNavigate();
  const [captchaVerified, setCaptchaVerified] = useState(false);

  const handleSubmit = async (email: string) => {
    const response = await fetch('/api/auth/forgot-password', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || 'Failed to send reset email');
    }
  };

  return (
    <ForgotPasswordPage
      forgotPasswordHeader={{
        head: "Reset Your Password",
        para: "No worries! Enter your email and we'll send you instructions to reset your password."
      }}
      onSubmit={handleSubmit}
      onNavigateTo={() => navigate('/login')}
      variant="dark"
      inputVariant="floating"
      animationVariant="press3D"
      headerAnimation="fadeUp"
      submitbuttonLabel="Send Reset Instructions"
      navigateToLabel="Return to Login"
      successMessage="We've sent password reset instructions to your email"
      className="custom-forgot-password"
      captcha={
        <div>
          {/* Your CAPTCHA component here */}
          <button onClick={() => setCaptchaVerified(true)}>Verify CAPTCHA</button>
        </div>
      }
      captchaVerified={captchaVerified}
    />
  );
}

export default AdvancedForgotPassword;

Props​

PropTypeDefaultDescription
forgotPasswordHeader{ head: string, para: string }-Simplified header API - provides head and para text
formCardHeaderReact.ReactNode-Backward compatible - custom header React node (alternative to forgotPasswordHeader)
loginLinkReact.ReactNode-Optional override for login link node
buttonReact.ReactNode-Optional override for button node
inputReact.ReactNode-Optional override for input node
variant"default" | "dark""default"Visual theme variant for the page
inputVariant"clean" | "underline" | "floating" | "borderGlow" | "shimmer" | "particles" | "slide" | "scale" | "rotate" | "bounce" | "elastic" | "glow" | "shake" | "wave" | "typewriter" | "magnetic" | "pulse" | "borderBeam" | "ripple" | "particleField" | "tilt3D""clean"Input field animation variant
headerAnimation"fadeUp" | "scaleIn" | "slideLeft" | "slideRight" | "flipIn""fadeUp"Header animation variant
status"idle" | "loading" | "success" | "error"-Current status of the form
errorMessagestring-Error message to display
successMessagestring"Check your email for a reset link"Success message to display
navigateToLabelstring"Back To Login"Label for the navigation/back button
submitbuttonLabelstring"Send Reset Link"Label for the submit button
onSubmit(email: string) => void | Promise<void>-Callback function when form is submitted with email
onNavigateTo() => void-Callback function when navigate/back button is clicked
classNamestring-Additional CSS classes
captchaReact.ReactNode-CAPTCHA component to display
captchaVerifiedboolean-Whether CAPTCHA is verified