3.5: Add Register Functionality

How did you do? We'll work through a solution here. Yours might be different and that's ok.

Add Register Method to the AuthService

Open up the auth.service.ts class and add the following method:

register(model: any) {
    return this._http.post(this.baseUrl + 'register', model, { headers: new HttpHeaders()
      .set('Content-Type', 'application/json')
    });
}

Impement Register Method in the RegisterComponent

In the register.component.ts file, let's start by importing and injecting our AuthService:

import { AuthService } from '../../services/auth.service';

// ...

    constructor(private _authService: AuthService) { }

Next, we'll use our AuthService in our register() method to make it functional:

register() {
    this._authService.register(this.model).subscribe(() => {
        console.log('Registration successful!');
    }, error => {
        console.log(error);
    });
}

Testing Registration

Make sure your SPA and .API servers are both running and open up your browser to port 4200.

Try register with any username and password.

RegistrationSuccess

Open up SQL Server Management Studio and verify that your user was entered:

DatabaseCheck

This isn't perfect. We aren't validating on the client-side at all yet. But, we will come back and do this later.