Login Component: Difference between revisions

Login Component (view source)

Revision as of 12:29, 2 October 2023

3,280 bytes added , 12:29, 2 October 2023

no edit summary

Admin

Bureaucrats, Interface administrators, Administrators

528

edits

@@ Line 1: / Line 1: @@
 == Intro ==
-The login component lives on every 3B Portal page and monitors for active user sessions. Currently this component cannot be overriden.
+The <code>LoginComponent</code> 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 <code>sessionKey</code> 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 <code>sessionKey</code> in local storage and fires a <code>sessionUpdate</code> 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 ===
+* <code>user-id</code>: The unique ID of the user.
+=== Interface Configuration ===
+* <code>backdrop</code>: Determines whether a backdrop appears behind the login component when it's active (<code>true</code> by default).
+* <code>allowRegistration</code>: If set to <code>true</code>, allows users to register (default is <code>true</code>).
+* <code>allowPassReset</code>: If set to <code>true</code>, allows users to reset their passwords (default is <code>true</code>).
+=== Label Customization ===
+The component offers a range of labels that can be customized to fit your brand or language requirements. Some examples include:
+* <code>labelGeneralError</code>: Message displayed when a generic error occurs.
+* <code>labelNoUserFound</code>: 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:<syntaxhighlight lang="javascript">
+if (!localStorage.getItem('sessionKey')) {
+    // User is not logged in
+}
+</syntaxhighlight>
+=== 2. Embedding the LoginComponent ===
+<syntaxhighlight lang="javascript">
+if (!localStorage.getItem('sessionKey')) {
+    const loginComponent = document.createElement('login-component');
+    document.body.appendChild(loginComponent);
+}
+</syntaxhighlight>
+=== 3. Listening for the Session Update ===
+The <code>LoginComponent</code> dispatches a custom event named <code>sessionUpdate</code> once the user successfully logs in or registers. By listening for this event, you can take subsequent actions:<syntaxhighlight lang="javascript">
+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.
+});
+</syntaxhighlight>
+=== 4. Using the Session Key with Other 3B Components ===
+All other 3B components rely on the <code>sessionKey</code> in local storage to identify the user. Once the <code>LoginComponent</code> sets this key, other components can seamlessly recognize the user and deliver personalized content or functionalities.
+== Conclusion ==
+By integrating the <code>LoginComponent</code> 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 <code>sessionUpdate</code> event to stay informed about changes in the user's session status.
 [[Category:3B Onboarding]]
 [[Category:3B Portals]]