Register

This is a walk through of registering a user

Overview:

This following code will collect user information by capturing it through html input tags in the register.component.html. We will store the inputs in a form object inside the register.component.ts using two way data binding, the form object will hold multiple data points to hold the following values firstName, lastName, email, password.

Once the data collected through the html file is bound to the typescript file, a user will click the sign up button. Once pressed, the button's (click) event will fire, which will invoke the register.component.ts's signUp function.

The register.component.ts's signUp function will then invoke the userService's registerUser function which will make a HTTP POST to the loopback server's /appUser api route, passing in the user credentials, aka the 'form' object passed by the register.component.ts.

Inside of the register.component.ts's signUp function we will subscribe to the result of the invocation of the userService's registerUser function. The subscribe function will accept a callback function as a argument. This callback function will run once the data has been sent back from loopback's server to the client. This callback function will accept a parameter, typically this parameter is called res, symbolizing the response from the HTTP request. In the callback function's scope we will store some of the response's attributes, such as the user's id and a token, to the client's local storage.

We will then use this token value to hit other api routes in our loopback server to communicate database. This token is a security feature to ensure accessibility only to certain people. This will be discussed in more depth later in the course.

Prerequisites:

Install LoopbackCreate a MongoDBConnect Loopback to MongoDBSetup Token AuthenticationCreate User Models

Open your front end angular application in a code editor

Open a terminal and navigate to your

Create A Register Component

Create a component

Create A User Service

Ceate a service

serviceName should be called user

References

Intro to Services

Important Checks:

• This service should be automatically imported into app.module.ts, check to be sure

• Make sure that we have this service declared inside the app.module.ts providers array

Import User Service & Router Inside Register Component

register.component.ts

import { UserService } from '../user.service'
import { Router } from '@angular/router'

Initialize User Service & Router Inside Register Component Constructor

register.component.ts

constructor(private _userService: UserService, private router: Router){}

Collect User Input & Store It In The Register Component

• Create Input Fields On The register.component.html File

• Create A formObject Inside register.component.ts

  • Thisform object will hold the following fields:

    • firstName

    • lastName

    • email

    • password

  Lines 13 through 18 on the register.component.ts file express how to create this form object

• Create a button to invoke the register.component.ts's signUp function

• Create a signUp function inside the register.component.ts

register.component.html

<input type="text" name="firstName" placeholder="First Name" [(ngModel)]="form.firstName" />
<input type="text" name="lastName" placeholder="Last Name" [(ngModel)]="form.lastName" />
<input type="text" name="email" placeholder="Email" [(ngModel)]="form.email" />
<input type="password" name="password" placeholder="Password" [(ngModel)]="form.password" />
<button type="submit" (click)="signUp()" class="btn btn-primary">Sign Up</button>
      

register.component.ts

Reminder we have done this before check the following website for help:

Login Page Challenge

Import HttpClient In user.service.ts

user.service.ts

import { HttpClient } from '@angular/common/http';

Initialize HttpClient Inside user.service.ts Constructor

user.service.ts

constructor(private http: HttpClient){}

In The User.service.ts File Create The following Attributes in the UserService Class

user.service.ts

baseUrl: string = "http://localhost:3000/api"; 
appUserUrl: string = "appUsers/"

Create A registerUser Function In The User.service.ts File

This function will accept a userCredentialsparameter.

This function will make a post request to the loopback server's localhost:3000/api/appUsers/route, which will then submit the userCredential data to the mongo database.

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  baseUrl: string = "http://localhost:3000/api/";
  appUserUrl: string = "appUsers/"

  constructor(private _http: HttpClient) { }

  registerUser(userCredentials){
    return this._http.post(`${this.baseUrl}${this.appUserUrl}`, userCredentials);
  }
}

Alter the signUp function inside register.component.ts

This function signUp will invoke the userService's registerUser function, passing in the user credentials, aka the register.component.ts's form object.

When we subscribe to the observable we will do the following

• populate session storage with the responses token attribute

• populate session storage with the responses userId attribute

• redirect to home using the router

register.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'

import { UserService } from '../user.service'

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

 form = {
    firstName: null,
    lastName: null,
    email: null,
    password: null,
  };

  constructor(private _userService: UserService, private router: Router) {}
  
  ngOnInit() {
  }

  signUp(){
    this._userService.registerUser(this.form).subscribe( (res: any)=> {
      console.log(res);
      sessionStorage.setItem('token', res.token);
      sessionStorage.setItem('userId', res.userId);
      this._userService.firstName = res.firstName;
      this._userService.isLoggedIn = true;
      this.goToDash();
    })
  }

  goToDash(){
    this.router.navigate(['/home']);
  }

}

Session Storage Reference:

Window: sessionStorage property - Web APIs | MDNMDN Web Docs

Try Creating A New User

Important Notes:

Make sure the loopback server is running when making the request

StackBlitz Example