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';


@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('password', [Validators.minLength(3), Validators.maxLength(20)]),
    email: new FormControl('email@email.com', Validators.email)
  });

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

  ngOnInit(): void {
    this.loginSub = this.authService.loginSuccess.subscribe(
      (ok:boolean) =>{this.onLogin(ok)}
    );
  }

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

  submitForm() {
    console.log(this.userForm);
    this.loading = true; 
    this.authService.login(this.userForm.value.email, this.userForm.value.password);

  }

  public onLogin(ok:boolean) {
    this.loading = false
    console.log (" found login success " + ok );
    if (ok)
        this.rounter.navigate(["/dashboard"]);
     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
    });
  }
}