Reset Password Page Documentation

Purpose

The Reset Password Page is a crucial part of the user authentication flow within the Vantage analytics platform. Its primary purpose is to facilitate password recovery for users who have forgotten their passwords. By allowing users to reset their passwords securely, this page enhances user experience and ensures compliance with security best practices.

How It Works

The Reset Password Page is composed of several key components:

1. User Interface: It contains a centered layout that features a logo at the top and a password reset form for user interaction.
2. Image Component: Displays the company logo for branding purposes.
3. Suspense Component: Manages asynchronous loading of the Reset Password Form component, showing a fallback text ("Loading...") while the form is being loaded.

When a user navigates to this page, they will see the logo prominently displayed, followed by the form that they can use to enter their email address and receive instructions for resetting their password.

Settings

The Reset Password Page has several settings at its disposal to accommodate various configurations.

Settings Overview

1. title

   • Input Type: String
   • Description: This setting defines the page metadata title that appears in the browser tab and as the title for search engine optimization. Changing this value affects how the page is identified in browser history and search results.
   • Default Value: "Reset Password"

2. Image Component

   • Input Type: String
   • Description: This setting specifies the source path for the company logo image. Changing this affects the visual branding of the page, enabling organizations to customize their logo.
   • Default Value: "/intuidy_logo_icon.svg"

3. height

   • Input Type: Numeric
   • Description: This setting defines the height of the logo image in pixels. Adjusting this value directly impacts the vertical space the logo occupies, which can influence the overall balance of the design.
   • Default Value: 50

4. width

   • Input Type: Numeric
   • Description: This defines the width of the logo image in pixels. Similar to the height, this affects the horizontal space of the logo, which can also contribute to the visual layout of the page.
   • Default Value: 50

5. unoptimized

   • Input Type: Boolean
   • Description: When set to true, this indicates that the image should be loaded without any optimization. This setting impacts performance and image loading times. It is typically used during development or when responsiveness is not a concern.
   • Default Value: true (for less optimized or placeholder images)

6. fallback

   • Input Type: JSX Element
   • Description: This setting defines the fallback content to display while waiting for the Reset Password Form component to load. Adjusting this affects user experience during loading times.
   • Default Value: <p className="text-sm text-textSecondary">Loading...</p>

Use Cases & Examples

Use Cases

1. User Experience Improvement: Enhancing the password recovery experience by providing users with a straightforward interface to reset their forgotten passwords quickly.
2. Branding Consistency: Organizations looking to maintain their branding will benefit from being able to customize logos and colors within the Reset Password Page to match their corporate identity.
3. Security Compliance: Ensuring a secure method for password recovery that can handle lost or forgotten passwords efficiently, thereby reducing the risk of unauthorized account access.

Example Configuration

Business Use Case: A SaaS Company Offering Analytics

A SaaS company providing advanced analytics solutions wants to empower users to regain access to their accounts while maintaining their brand's visual identity.

Solution Configuration

To achieve this, the Reset Password Page configuration may look like the following:

const metadata = { title: 'Reset Your Password - Analytics Hub' };

const logoPath = "/company_logo.svg";  // Custom logo path
const fallbackLoadingText = <p className="text-sm text-blue-500">Please wait while we load the reset form...</p>; // Customized loading text

function ResetPasswordPage() {
    return (
        <div className="flex min-h-screen w-full items-center justify-center bg-gray-100 dark:bg-gray-800 px-4">
            <div className="w-full max-w-md space-y-8 text-center">
                <div className="mt-6 rounded-lg bg-white dark:bg-gray-700 p-8 shadow-xl">
                    {/* Logo */}
                    <div className="mb-2">
                        <Image
                            src={logoPath}
                            alt="Company Logo"
                            height={60}  // Slightly larger logo
                            width={60}
                            unoptimized={true}
                            className="mx-auto"
                        />
                    </div>

                    <Suspense fallback={fallbackLoadingText}>
                        <ResetPasswordForm />
                    </Suspense>
                </div>
            </div>
        </div>
    );
}

This configuration ensures the page is branded correctly while providing a user-friendly experience for password recovery.