LoginModal Component Documentation

Overview

The LoginModal component is an interactive user interface element designed for handling user authentication within the Vantage analytics & data platform. It allows users to log in by entering their email and password credentials. Upon successful authentication, the modal will close and refresh the user interface, facilitating a seamless experience. This component ensures that users can access their accounts securely while providing immediate feedback if authentication fails.

Settings

The LoginModal component accepts the following settings to control its behavior and appearance:

1. onClose

• Input Type: Function
• Description: This callback function is triggered when the modal is closed. It allows the parent component to execute any necessary cleanup or state changes after the login process concludes.
• Default Value: Undefined (if not provided)

2. title

• Input Type: String
• Description: Sets the title of the modal to inform users about the purpose of the modal. By default, it is set to "Sign in". Changing this value will directly replace the default title displayed at the top of the modal.
• Default Value: "Sign in"

3. size

• Input Type: String
• Description: Determines the size of the modal. The current implementation uses a value of “sm” indicating “small.” Users can adjust this to other predefined sizes (e.g., “md” for medium or “lg” for large) which will modify the overall dimensions of the modal.
• Default Value: "sm"

4. footer

• Input Type: JSX Element
• Description: Provides custom content for the footer area of the modal. It includes buttons for canceling the login or proceeding with the login action, enhancing flexibility for developers who may want to include additional elements (like links to password recovery) in the footer.
• Default Value: The footer is defined in the component using two buttons (Cancel and Login).

How It Works

1. State Management: The component utilizes state management to manage the state of email, password, and any potential error messages that arise during the login process.

   • email: Holds the user's input for the email field.
   • password: Holds the user's input for the password field.
   • error: Keeps track of any error messages during authentication.

2. Login Handler: The handleLogin function is responsible for sending a POST request to the authorization API with the user's credentials.

   • If authentication is successful (res.ok evaluates true), it will invoke the onClose callback and refresh the UI.
   • If the credentials are invalid, the error message returned from the API is captured and displayed to the user.

3. Rendering: The component structure includes the BaseModal component, which encapsulates the modal's content. It features:

   • Input fields for collecting user email and password.
   • Conditionally rendered error messages, allowing users to receive immediate feedback for invalid inputs.

Data It Expects

1. Email: A valid email address input by the user. It should be well-formed and will undergo standard validation.
2. Password: A user-generated password required for login. The input must conform to standard security policies (minimum length, character complexity) as dictated by the back-end API, though specific validations are not enforced in the UI layer.
3. Error Handling: The component expects the API to return relevant error messages for failed login attempts, which will be displayed to the user.

Use Cases & Examples

Use Case 1: Integrating Authentication for a Secure Dashboard

A business requires a secure login mechanism for its analytics dashboard where only authorized users can access sensitive data. The LoginModal allows users to log in seamlessly, ensuring their data remains protected.

Use Case 2: User Management Operations

For platforms offering subscription services, user login via LoginModal can facilitate personalized dashboards, billing information access, and account preferences management.

Use Case 3: Custom Error Messaging

Organizations that need specific error messages post-login failures (e.g., indicating whether the issue is an incorrect email or password) can utilize the LoginModal's flexibility to display these messages based on API feedback.

Example Configuration

To implement the LoginModal in an application that needs a customized title and footer:

// Parent Component Code Snippet

function App() {
    const handleModalClose = () => {
        console.log('Login modal closed');
    };

    return (
        <LoginModal 
            onClose={handleModalClose}
            title="Welcome Back!"
            size="md"
            footer={
                <>
                    <button onClick={handleModalClose}>Cancel</button>
                    <button onClick={handleLogin}>Login</button>
                    <button>Forgot Password?</button> {/* Additional Button */}
                </>
            }
        />
    );
}

In this example, the modal title is customized to "Welcome Back!" and an additional footer button for "Forgot Password?" has been added, providing users with direct access to password recovery options.