loggin service now has a mimic on login delay simulation with loading indicator.

src/app/app.component.html

 
 <router-outlet></router-outlet>
 
-<div class="vimeo-wrapper">
+<!-- <div class="vimeo-wrapper">
   <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"
   allow="autoplay; fullscreen" allowfullscreen></iframe>
-  <div class="overlay">
-    
-  </div>
-
-</div>
+  
+  <div class="overlay"></div>
+</div> -->

src/app/app.component.ts

 
   ngOnInit (){
     this.loginSub = this.authService.loginSuccess.subscribe(
-      (item: any) => {
-        console.log(item);
-        if (item != null)
-          this.login = true;
-        else
-          this.login = false; 
+      (success: boolean) => {
+          this.login = success;
       }
     )
   }

src/app/auth/auth.component.html

 <div class='parent'>
     <div class="form_login">
 
-        <form class="k-form " [formGroup]="userForm">
+        <form *ngIf='!loading' class="k-form " [formGroup]="userForm">
             <fieldset class="k-form-fieldset">
                 <legend class="k-form-legend">Login to Supercredit</legend>
                 <kendo-formfield [showErrors]="'initial'">
                 </div>                
             </fieldset>
         </form>
+
+        <div *ngIf='loading' style="min-height: 200px;">  auth loading...</div>
     </div>
 </div>

src/app/auth/auth.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { AuthService } from '../service/auth.service';
 
 
   templateUrl: './auth.component.html',
   styleUrls: ['./auth.component.scss']
 })
-export class AuthComponent implements OnInit {
+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('abcdefg', [Validators.minLength(3), Validators.maxLength(20)]),
   constructor(private authService: AuthService, private rounter: Router) { }
 
   ngOnInit(): void {
-    this.authService.loginSuccess.emit(null);
+    this.loginSub = this.authService.loginSuccess.subscribe(
+     (ok :boolean ) =>{
+      this.loading = false
+       console.log (" found login success " + ok );
+       if (ok)
+           this.rounter.navigate(["/dashboard"]);
+        else
+          alert('fuck this is wrong');
+     }
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.loginSub.unsubscribe();
   }
 
   submitForm() {
     console.log(this.userForm);
-    this.authService.login("email", "pass");
-    this.authService.loginSuccess.emit(this.userForm)
-    this.rounter.navigate(["/dashboard"]);
+    this.loading = true; 
+    this.authService.login(this.userForm.value.email, this.userForm.value.password);
+
   }
 }

src/app/auth/dist/auth.component.js

         });
     }
     AuthComponent.prototype.ngOnInit = function () {
-        this.authService.loginSuccess.emit(null);
+        var _this = this;
+        this.loginSub = this.authService.loginSuccess.subscribe(function (ok) {
+            _this.loading = false;
+            console.log(" found login success " + ok);
+            if (ok)
+                _this.rounter.navigate(["/dashboard"]);
+            else
+                alert('fuck this is wrong');
+        });
+    };
+    AuthComponent.prototype.ngOnDestroy = function () {
+        this.loginSub.unsubscribe();
     };
     AuthComponent.prototype.submitForm = function () {
         console.log(this.userForm);
-        this.authService.login("email", "pass");
-        this.authService.loginSuccess.emit(this.userForm);
-        this.rounter.navigate(["/dashboard"]);
+        this.loading = true;
+        this.authService.login(this.userForm.value.email, this.userForm.value.password);
     };
     AuthComponent = __decorate([
         core_1.Component({

src/app/service/auth-guard.service.ts

 
 @Injectable()
 export class AuthGuard implements CanActivate, CanActivateChild {
-  constructor(private authService: AuthService, private router: Router) {}
+  constructor(private authService: AuthService, private router: Router) { }
 
   canActivate(route: ActivatedRouteSnapshot,
-              state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
-    return this.authService.isAuthenticated()
-      .then(
-        (authenticated: boolean) => {
-          if (authenticated) {
-            return true;
-          } else {
-            this.router.navigate(['/login']);
-          }
-        }
-      );
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    if (this.authService.isAuthenticated()) {
+      return true;
+    } else {
+      this.router.navigate(['/login']);
+    }
   }
 
   canActivateChild(route: ActivatedRouteSnapshot,
-                   state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
     return this.canActivate(route, state);
   }
 }

src/app/service/auth.service.ts

 
 @Injectable()
 export class AuthService {
-    loggedIn: boolean  = false; 
+    private loggedIn: boolean  = false; 
     loginSuccess = new EventEmitter <any>();
     
     isAuthenticated()  {
-        const promise = new Promise(
-            (resolve, reject) => {
-              setTimeout(() => {
-                resolve(this.loggedIn);
-              }, 800);
-            }
-          );
-          return promise;
+      return this.loggedIn;
     }
 
-    login(emai: string, password: string) {
-        this.loggedIn = true;
+    login(email: string, password: string) {
+      
+      const promise = new Promise(
+        (resolve, reject) => {
+          setTimeout(() => {
+            resolve(this.loggedIn);
+            console.log("email = " +  email  + "  password = " + password);
+            var result = (( email == "email@email.com" ) && (password == "password"));
+            this.loggedIn = result;
+            this.loginSuccess.emit(result);
+          }, 800);
+        }
+      );
+      return promise;
+
     }
 
     logout() {

src/app/service/dist/auth-guard.service.js

         this.router = router;
     }
     AuthGuard.prototype.canActivate = function (route, state) {
-        var _this = this;
-        return this.authService.isAuthenticated()
-            .then(function (authenticated) {
-            if (authenticated) {
-                return true;
-            }
-            else {
-                _this.router.navigate(['/login']);
-            }
-        });
+        if (this.authService.isAuthenticated()) {
+            return true;
+        }
+        else {
+            this.router.navigate(['/login']);
+        }
     };
     AuthGuard.prototype.canActivateChild = function (route, state) {
         return this.canActivate(route, state);

src/app/service/dist/auth.service.js

         this.loginSuccess = new core_1.EventEmitter();
     }
     AuthService.prototype.isAuthenticated = function () {
+        return this.loggedIn;
+    };
+    AuthService.prototype.login = function (email, password) {
         var _this = this;
         var promise = new Promise(function (resolve, reject) {
             setTimeout(function () {
                 resolve(_this.loggedIn);
+                console.log("email = " + email + "  password = " + password);
+                var result = ((email == "email@email.com") && (password == "password"));
+                _this.loggedIn = result;
+                _this.loginSuccess.emit(result);
             }, 800);
         });
         return promise;
     };
-    AuthService.prototype.login = function (emai, password) {
-        this.loggedIn = true;
-    };
     AuthService.prototype.logout = function () {
         this.loggedIn = false;
     };