Login Component

Intro

The LoginComponent serves as a powerful solution for session management on web pages. It facilitates user login/registration and manages user sessions. When a user is not logged in (as determined by the absence of a sessionKey in the local storage), this component can be utilized to prompt users to login or register. Upon successful login or registration, the component updates the sessionKey in local storage and fires a sessionUpdate event.

The login component lives on every 3B Portal page and monitors for active user sessions. Currently this component cannot be overriden in a 3B Portal context.

Attributes

User Settings

user-id: The unique ID of the user.

Interface Configuration

backdrop: Determines whether a backdrop appears behind the login component when it's active (true by default).
allowRegistration: If set to true, allows users to register (default is true).
allowPassReset: If set to true, allows users to reset their passwords (default is true).

Label Customization

The component offers a range of labels that can be customized to fit your brand or language requirements. Some examples include:

labelGeneralError: Message displayed when a generic error occurs.
labelNoUserFound: Message displayed when a user is not found.
... (and many more label attributes for various functionalities).

Implementation Guide

1. Checking for an Active Session

Before allowing users to perform certain actions, such as applying for a job, you need to check whether they have an active session. To determine this:

if (!localStorage.getItem('sessionKey')) {
    // User is not logged in
}

2. Embedding the LoginComponent

if (!localStorage.getItem('sessionKey')) {
    const loginComponent = document.createElement('login-component');
    document.body.appendChild(loginComponent);
}

3. Listening for the Session Update

The LoginComponent dispatches a custom event named sessionUpdate once the user successfully logs in or registers. By listening for this event, you can take subsequent actions:

document.addEventListener('sessionUpdate', (event) => {
    console.log('Received session update:', event.detail);
    // Now you can perform actions like loading the job application form or any other user-specific content.
});

4. Using the Session Key with Other 3B Components

All other 3B components rely on the sessionKey in local storage to identify the user. Once the LoginComponent sets this key, other components can seamlessly recognize the user and deliver personalized content or functionalities.

Conclusion

By integrating the LoginComponent into your web page, you establish an effective session management mechanism that enhances user experience. It ensures users are properly authenticated before granting them access to specific functionalities. Always make sure to listen for the sessionUpdate event to stay informed about changes in the user's session status.