Login and Registration (/js/stc-login.js)

# Overview

stc-login.js is inserted on the login page only (opens new window). This script creates a Vue.js web application that allows users to sign in or register on the site. The script uses the API to perform all these actions. The user is taken away from this page only on the successful login or registration.

Vuex plugin was used to manage the global states of the application.
Vue-router was not used in this application as the routing functionality is minimal and the router does not behave well with URLs that contain URL query parameters. Each screen, however, can be accessed with a custom URL parameter.

# Globals

# Global libraries and dependencies

The stc-login.js relies on the following Javascript libraries, which are loaded in /js/stc-vendor.js or /js/stc-aem-vendor.js file. Additional libraries may be loaded in /js/stc-vendor.js, however, this specific script does not rely on those libraries.
For the full list and differences see files /vendor-list.json & /vendor-list-aem.json in this repository.

# Global Variables

src/js/login/vuex/store.js - All global application properties/variable are set in this one file and can be accessed through the app via Vuex getters.

# Global Functions

stcLoginApp() - Initializes the Vue app when the document is ready.

# Key Functionality

src/js/login/components/login-form.js

Contains all the code that pertains to the login tab on the login page and the password reset screen.
Password reset submits the information to the API. Luminate default functionality is responsible for sending out an email to a standard page.
The component uses the global form validation and reports submission errors to analytics.

# Register Vue Component

src/js/login/components/login-register.js

Contains all the code that pertains to the register tab on the login page.

When the user is registered successfully for the first time, Luminate automatically logs them in and they are redirected to the Supporter Center (opens new window).
When the user who is already registered re-registered Luminate does not log them in. In these instances, the application redirects the user to the login form, which contains a message letting them know that they have registered previously and need to sign in.
The component uses the global form validation and reports submission errors to analytics.

Default Luminate social media login integration is embedded and utilized on this page. Luminate integrates with Janrain to achieve this functionality.
The stc-login.js scripts only style the rendered content and let Luminate handle the sign in or registration functionality.

When a user is successfully logged in the following sequence of event happens. Note that not all of these actions are defined solely in /js/stc-login.js, some are actually defined in /js/stc-scripts.js but are invoked by /js/stc-login.js.

User details are retrieved from the API, so we can have their unique identifier consId
User login history is retrieved from the API, so we can pass the accurate value to the analytics.
The cookie stc-social-login is read to get the details about social media used to login for analytics.
Cookies stc-logged-in and stc-member are set. The cookie stc-logged-in is set so AEM can detect if the user is logged in. The cookie stc-member contains user details, namely first name, constituent id, donor id and flags is user a sponsor, a donor, a partner for children and a friend asking friends participant. This information is used in all subsequent analytic calls.
Login event is recorded in analytics.
The user is redirected to the Supporter Center (opens new window).

# Code Structure

/src/js/login/stc-login.js - The starting point of the code extecution on document ready.
/src/js/login/components/*.js - Vue components.
/src/js/login/mixins/*.js - Vue mixins.
/src/js/login/vuex/*.js - Vuex state, mutations and actions.

# Login and Registration (/js/stc-login.js)