Login Component

Goal

The Login component handles all the functionality for validating a user’s credentials when logging in and directing them to the appropriate landing page. It handles different user statuses, such as a verified user, a user who has not yet verified their email address, or a user who has forgotten their password.

Current Setup

The login component is found in AnScealai/ngapp/src/app/login. It uses the authentication service (AnScealai/ngapp/src/app/authentication.service.ts) for most of its functionality. After typing in their username and password, the user can click on the sign-in button to log into their account.

Login page, initial view

The following errors might occur, and a relevant message is displayed for each one:

• Username not found

• Incorrect password

• Email hasn’t been verified

• No email associated with account (for older users who registered before email verification was introduced)

When users register, they must input an email to receive a verification link. Clicking on this link validates the user and allows them to log in. However, some users may not click on the link, or may have an old account with no email associated. The login component handles these scenarios by updating the view and input boxes accordingly.

The user input typed into the HTML input boxes (e.g. username and password) is stored in a variable called credentials. This data is then copied into another variable called frozenCredentials if the user needs to verify their email address. frozenCredentials acts as a snapshot of user data at a certain point, while credentials continues to store any new input.

Usage / Code Details

This section explains the main functions in the TypeScript file of the login component and how they interact to handle user validation.

ngOnInit()

This function is called every time the component is initialised (i.e. when the user navigates to the login page). It resets any error messages that may have been set previously.

verifyOldAccount()

This function verifies a user’s email if they registered and attempted to log in without having clicked the verification link. It uses the authentication service to resend a verification email and updates the login HTML view with instructions, by setting waitingForEmailVerification to true.
(Called from HTML and login())

login()

Logs the user in using the authentication service. It works in two ways:

Attempt 1
If the user’s status is still waiting for email verification, it attempts to log in using frozenCredentials. This would occur if the user verified their email and then returned to An Scéalaí to log in. If successful, the user is redirected to the profile registration page and the function returns.

Attempt 2
If the user is already verified, it attempts to log in using the current credentials. Upon success, the user is redirected to the appropriate landing page.
(Called from HTML)

resetPassword()

This function retrieves the username input from a user who has forgotten their password. It then uses the authentication service to reset the password and updates the view with error or success messages.
(Called from HTML)