Websites with Angular and Less CSS tutorials
8. The Register component
av_timer2 minute read

So how many more of these pages are there again?

  1. Topics of discussion
  2. The Register Page component

1. Topics of discussion

In this tutorial, we will be creating a new component for the register page. So, let's have some fun.

2. The Register Page component

In our previous tutorial we worked on creating the login component. Now I think it's about time work on the Register page component. So, open up a command prompt in the recipe-site folder and let's run some commands. Since account registration is sort of related to the authentication aspect of a website, we do not need a new module. As a result, we can jump straight to the component:

ng g c components/authentication/Register -m=Authentication --export

Let's now add a route to this component. In your app-routing.module.ts file, place the following code in the Routes array:

{
  path: 'register',
  component: RegisterComponent
}

Make sure to import the component in the file by adding the import manually or using the Ctrl + . command.

Let's now add this route in our navigation menu. Add the following code in your mat-nav-list element in app-navigation.component.html:

<a class="navigation-item" mat-list-item routerLink="/register" routerLinkActive="active">
  <mat-icon class="material-icons">person_add</mat-icon><span class="navigation-item-label">Register</span>
</a>

Let's now add some html elements in our component template. Add the following code in the register.component.html page:

<div class="container container-fluid">
  <form [formGroup]="registerForm" (ngSubmit)="register()">
    <div class="form-group">
      <div class="col-12">
          <h2>Enter all the details below:</h2>
      </div>
    </div>
    <div class="form-group">
      <div class="col-12">
        <label for="username">Username:</label>
        <input id="username" class="form-control" placeholder="Enter your username here..." formControlName="username" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-12">
        <label for="password1">Password:</label>
        <input id="password1" type="password" class="form-control" placeholder="Enter your username here..." formControlName="password1" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-12">
        <label for="password2">Repeat Password:</label>
        <input type="password2" class="form-control" placeholder="Enter your username here..." formControlName="password2" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-12 text-right">
        <button class="btn btn-sm register-button" type="submit" [disabled]="shouldDisableButton()">Register</button>
      </div>
    </div>
  </form>
</div>

Before we move on to the component logic, let's add the following method inside the authentication.service.ts file:

public register(username: string, password: string): void {
  var existsUser =  this.users.filter(c => c.username === username).length > 0;
  if (existsUser) {
    alert("Username already in use!");
  } else {
    this.users.push({ username: username, password: password });
    alert("Account created!");
  }
}

What this method does is check if the username we are trying to register with is already in use and alert us if this is the case. Otherwise, it adds the new user to the array. Please note that each and every time you restart the application, the users you have created through this page will be lost.

Now, let's move on to the component logic. Put the following code in your register.component.ts file: 

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../authentication.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.less']
})
export class RegisterComponent implements OnInit {

  registerForm: FormGroup;
  loading: boolean = false;
  constructor(private fb: FormBuilder, private authService: AuthenticationService) {
    this.registerForm = this.fb.group({
      username: ["", Validators.required],
      password1: ["", Validators.required],
      password2: ["", Validators.required]
    });
  }

  register(): void {
    this.loading = true;
    if (this.registerForm.value.password1 !== this.registerForm.value.password2) {
      alert("Passwords do not match");
      this.loading = false;
      return;
    }
    this.authService.register(this.registerForm.value.username, this.registerForm.value.password1);
    this.loading = false;
  }

  public shouldDisableButton(): boolean {
    return !this.registerForm.valid || this.loading;
  }

  ngOnInit() {
  }

}

As you can see, the code is fairly similar to the login component, the only difference being that we have added an extra field in the form. Let's add a bit of style in our register.component.less file:

label {
  font-weight: bold;
}

.register-button {
  background-color: #062739;
  color: #fff;
}

And yeah, thab about covers it for this tutorial. In the next one, we are going to create another component, one which we will use to view a recipe. See you then.

COMMENTS
No comments yet...