Skip to main content

Register Module

Goal​

The Register module handles all the functionality for registering a new student or teacher user. It logs a new user to the DB and sends a verification email to the user so the user can verify their account.

Current Setup​

All the files necessary for registering users can be found in the register module1 folder at AnScealai/ngapp/src/register. This folder contains several files/components to build the registration page:

  • register.module.ts
    • Handles the imports and providers for the registration module (such as the register, form, and waiting for email components)
  • register component (.ts, .html, .scss, .spec)
    • This is the parent component for the registration page.
    • It detects if the registration was successful
  • form component (.ts, .html)
    • This is a child component of the register component (i.e. it is injected into the register.component.html page)
    • This component contains the majority of the code for the views and functionality of the registration process
  • waiting-for-email-verification component (.ts, .html)
    • This is a child component of the register component; it gets injected upon a successful registration
    • It provides the login page for users after they have registered

A user can register by clicking on either the ‘I am a student’ or ‘I am a teacher’ button on the An Scéalaí homepage. Clicking on either of these buttons redirects the user to the register component, with either ‘STUDENT’ or ‘TEACHER’ passed into the URL parameters to indicate which button the student pressed2.

register-module-image-01

URL params after the student clicks on one of the registration buttons

register-module-image-02

Students can register from one of the buttons on the homepage

To register, the user inputs a username, email, and password. They must enter their password two times for password confirmation. They can then select their preferred site language (changeable after registration). If the registration was successful, the user is sent an email with a verification link that they can click on in order to verify their account. Once their account is verified they can then log-in3 and access the platform.

register-module-image-03

Registration page

The following errors might occur during registration, and a pertaining message is displayed for each one at the bottom of the screen:

  • Username already exists
  • Username may not contain special characters
  • Password not long enough
  • Passwords don’t match
  • Email not a valid email

Usage / Code Details​

Register Component​

This section goes into detail about the register component and how it implements its child components to create a complete registration process. The HTML file of the register component contains two tags: < register-form > and < waiting-for-email-verification > in order to inject these two components.

The register-form component is conditionally hidden using the [hidden] attribute based on successful registration. Upon successful registration from this component, the created token payload is sent as an @Output4 back to this parent register component. This output is sent to the registerSuccess() function in this component’s TypeScript file.

registerSuccess()​

This function takes in the registration token payload credentials created from the register-form component in the parameters. It then saves this value to a global variable that it can use to inject into the waiting-for-email-verification component. Finally it checks for any changes in the current view[^]. (Called from HTML)

The waiting-for-email-verification component is shown once the registration is successful. It takes the credentials created from the registerSuccess() function as @Input to its component.

Usage/Code Details - form component​

This section goes into detail about the different functions in the TypeScript file of the register-form component (form.component.ts) and how they interact to provide all the functionality for registration.

ngOnInit()​

This function is called every time the component gets initialised (i.e. when the user navigates to the registration page). It gets the role of the user from the URL (either ‘STUDENT’ or ‘TEACHER’) so that it can create the correct user. It then subscribes to a usernameInput variable that detects changes when the user inputs a username in the HTML. Upon entering a username, the input is checked to make sure it is a valid username. Invalid usernames contain empty spaces and special characters. Any error messages are updated accordingly.

register()​

This function registers a user after they click the registration button. It checks the registration details via the checkDetails() function to make sure there are no input errors. It then uses the authentications service5 to register the new user in the DB. If successful, the registerSuccess EventEmitter6 sends the credentials data back to the parent component. (Called from HTML)

checkDetails()​

This function checks that the entered username, email, and password have no errors by calling the following subsequent functions. If errors are found, they are added to the errorTextKeys array. This function then checks the length of this array to determine if any errors were found (returns false if length is 0). (Called from register())

checkEmail()​

This function uses a regex expression to make sure the entered email is in the right format. If it is not, an error is added to the errorTextKeys array. (Called from checkDetails())

checkPassword()​

This function checks if a password is at least 5 characters long and it matches the confirm password input. If it is not, an error is added to the errorTextKeys array. (Called from checkDetails())

checkUsername()​

This function uses a regex expression to make sure the entered username doesn’t contain any special characters. If it does, an error is added to the errorTextKeys array. (Called from checkDetails())

toggleTerms()​

This function updates the HTML view by toggling the terms and conditions text. (Called from HTML)

Usage/Code Details - waiting for email verification component​

This section goes into detail about the different functions in the TypeScript file of the waiting-for-email-verification component and how they interact to provide all the functionality for registration.

login()​

This function uses the authentication service to log-in the user with the credentials passed into the component after a successful registration. If successful, the user is redirected to the registration profile page. Otherwise an error message is displayed.

Footnotes​

  1. Angular Modules: https://angular.io/guide/architecture-modules ↩

  2. See Landing documentation WIP ↩

  3. See Login documentation ↩

  4. Angular @Output/@Input: https://docs.angular.lat/guide/inputs-outputs ↩

  5. Authentication Service documentation ↩

  6. Angular EventEmitter: https://angular.io/api/core/EventEmitter ↩