Forgot Password Page Documentation

Purpose

The "Forgot Password Page" is a critical component in user account management on the Vantage analytics & data platform. Its primary function is to facilitate users in recovering or resetting their passwords when they are unable to log in to their accounts. This page provides a user-friendly interface that guides users through the process of entering their email address to receive password recovery instructions.

How It Works

The Forgot Password Page is structured to be both responsive and accessible. It integrates with a ForgotPasswordForm component that handles the specific logic for resetting a password, such as validating input and sending recovery emails. The overall layout is designed with a focus on user experience, ensuring that users can easily navigate the process.

Upon navigating to the Forgot Password Page, users encounter a centered form layout with an illustrative logo at the top. This design allows for focused interaction where users can enter their email and request a password reset.

Settings

1. Title Setting

• Name: metadata.title
• Input Type: String
• Description: This setting specifies the title of the page that appears in the browser tab. It is essential for user navigation and search engine optimization (SEO). Changing this value will affect the text displayed in the browser tab.
• Default Value: "Forgot Password"

2. Background Color

• Name: bg-primaryBG / bg-primaryBG-dark
• Input Type: CSS Class
• Description: These CSS classes define the background color for the entire page. The setting adapts the background color according to whether dark mode is enabled or disabled. Changing these classes affects the overall feel of the page, making it either more vibrant or subdued based on user preferences.
• Default Values: Light Theme: Primary background color; Dark Theme: Alternating background color.

3. Container Styling

• Name: max-w-md
• Input Type: CSS Class
• Description: This setting controls the maximum width of the form container in medium-sized views. It plays a crucial role in responsive design, ensuring the form is neither too wide nor too narrow regardless of screen size. Changing this value can affect the layout on different devices.
• Default Value: Maximum width is set to medium (md), typically around 28rem (448px).

4. Form Shadow

• Name: shadow-xl
• Input Type: CSS Class
• Description: This setting applies a larger shadow effect around the form container, creating a sense of depth. Adjusting the shadow intensity can impact the visual hierarchy and focus on the form itself. A bolder shadow may draw more attention to the form.
• Default Value: Extra-large shadow effect.

5. Image Source

• Name: src (for Image component)
• Input Type: String (URL)
• Description: This specifies the path to the logo image that will be displayed at the top of the form. Changing the image source can affect branding and visual identity.
• Default Value: /intuidy_logo_icon.svg

6. Image Alt Text

• Name: alt
• Input Type: String
• Description: The alternative text for the logo image. This is important for accessibility and SEO. Altering this text ensures that users relying on screen readers or those with slow internet connections will understand the image's purpose.
• Default Value: "Intuidy"

7. Image Dimensions

• Name: height / width
• Input Type: Numeric
• Description: These specify the image's height and width in pixels. Changing these values affects the display size of the logo, which may influence the overall aspect ratio.
• Default Values: Height = 50px, Width = 50px.

Use Cases & Examples

Use Case 1: Resetting Password for External Users

A business that utilizes Vantage allows customers to create accounts. When a customer forgets their password, they can navigate to this Forgot Password Page to reset it quickly.

Use Case 2: Admin User Management

An administrative user overseeing multiple accounts may need to reset a client's password on their behalf. This page allows admins to guide clients through the reset process seamlessly.

Example Configuration

Imagine a scenario where a tech startup integrates the Forgot Password Page into its user onboarding process:

Use Case: A software-as-a-service (SaaS) platform aimed at data analysts uses the Forgot Password Page for account recovery.

Configuration Example:

export const metadata = { title: 'Reset Your Password' }; // Custom title for better branding

// Page component
export default function ForgotPasswordPage() {
    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-lg space-y-8 text-center"> // Adjusted max width
                <div className="mt-4 rounded-lg bg-white dark:bg-gray-900 p-8 shadow-lg"> // Custom background and shadow
                    <div className="mb-4">
                        <Image
                            src="/custom_logo.svg" // Changed image source
                            alt="Custom Logo" // Custom alt text
                            height={60} // Changed dimensions
                            width={60} // Changed dimensions
                            unoptimized
                            className="mx-auto"
                        />
                    </div>
                    <ForgotPasswordForm />
                </div>
                <p className="mt-4 text-xs text-gray-500">
                    Remember your password?{' '}
                    <a href="/login" className="font-medium text-blue-600 hover:underline">
                        Sign in
                    </a>
                </p>
            </div>
        </div>
    );
}

In this example, the configuration reflects a distinct branding strategy, emphasizing clarity and usability in the password recovery process. The adjustments in dimensions, colors, and text are essential for personalization and branding consistency.