SFM-Broker/src/app/auth/auth.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NotificationService } from '@progress/kendo-angular-notification';
import { Subscription } from 'rxjs';
import { AuthService } from '../service/auth.service';
import {apiV1LoginResponse} from '../models/api-v1-login-response';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit, OnDestroy{
  loading: boolean ; // a state that user is currently loading loggin
  loginSub: Subscription;

  public userForm: FormGroup = new FormGroup({
    password: new FormControl('pass', [Validators.minLength(3), Validators.maxLength(20)]),
    email: new FormControl('admin@supercredit.com.au', Validators.email)
  });

  constructor(private authService: AuthService, private router: Router, private notificationService: NotificationService) { }

  ngOnInit(): void {
    this.authService.logout();
    this.loginSub = this.authService.loginSuccess.subscribe(
        responseData => {
          // console.log(responseData);
          this.onLogin(responseData);
        }
    );
  }

  ngOnDestroy(): void {
    this.loginSub.unsubscribe();
  }

  // tslint:disable-next-line:typedef
  submitForm() {
    console.log(this.userForm);
    this.loading = true;
    this.authService.login(this.userForm.value.email, this.userForm.value.password);
  }

  public onLogin(rsp: apiV1LoginResponse): void {
    this.loading = false;
    // console.log ('found login ' , rsp );
    if (rsp.login) {
      switch ( rsp.role ) {
        case 'admin':
          this.router.navigate(['/dashboard']);
          break;
        case 'broker':
          this.router.navigate(['/broker-loan-list']);
          break;
        case 'user':
          this.router.navigate(['/client-loan-list']);
          break;
        default:
          this.router.navigate(['/e403']);
          break;
      }

    }
    else {
       this.show();
    }
  }

  public show(): void {
    this.notificationService.show({
        content: 'Your loggin is failed, please try again.',
        cssClass: 'button-notification',
        animation: { type: 'slide', duration: 400 },
        position: { horizontal: 'center', vertical: 'top' },
        type: { style: 'error', icon: true },
        hideAfter : 2000
    });
  }
}