adding auth guard

src/app/app-routing.module.ts

@@ -3,12 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { AuthComponent } from './auth/auth.component';
 import { CanvasComponent } from './canvas/canvas.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { AuthGuard } from './service/auth-guard.service';
 
 
 const routes: Routes = [
-  {path : '', component: DashboardComponent},
+  {path : '', component: DashboardComponent, canActivate: [AuthGuard]},
   {path : 'canvas', component: CanvasComponent},
-  {path : 'dashboard', component: DashboardComponent},
+  {path : 'dashboard', component: DashboardComponent, canActivate: [AuthGuard],},
   {path : 'login', component: AuthComponent}
 ];
 
@@ -18,4 +19,4 @@ const routes: Routes = [
 })
 export class AppRoutingModule {
   
-}
+} 

src/app/app.component.html

@@ -24,8 +24,8 @@
 </kendo-appbar>
 
 <app-loan-edit #loanEditComponent></app-loan-edit>
-<router-outlet></router-outlet>
 
+<router-outlet></router-outlet>
 
 <div class="vimeo-wrapper">
   <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
 import { mainMenuItems } from './main-menu-items';
+import { AuthService } from './service/auth.service';
 import { MenuService } from './service/menu.service';
 
 @Component({
@@ -19,7 +20,7 @@ export class AppComponent implements OnInit , OnDestroy {
 
   private loginSub: Subscription;
   
-  constructor(private menuService: MenuService){
+  constructor(private menuService: MenuService, private authService: AuthService){
   }
 
   //check menuItem has fontawesome
@@ -38,13 +39,15 @@ export class AppComponent implements OnInit , OnDestroy {
       }
 
       if (item.text == "Logout"){
-        this.login = false;
+        this.authService.logout();
+        this.login = false; 
+        //this.authService.loginSuccess.emit("loggedout");
       }
     }
   }  
 
   ngOnInit (){
-    this.loginSub =  this.menuService.loginSuccess.subscribe(
+    this.loginSub = this.authService.loginSuccess.subscribe(
       (item: any) => {
         console.log(item);
         if (item != null)

src/app/app.module.ts

@@ -26,10 +26,8 @@ import { NavigationModule } from '@progress/kendo-angular-navigation';
 import { LayoutModule } from '@progress/kendo-angular-layout';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { LabelModule } from '@progress/kendo-angular-label';
-
-
-
-
+import { AuthService } from './service/auth.service';
+import { AuthGuard } from './service/auth-guard.service';
 
 
 
@@ -62,7 +60,7 @@ import { LabelModule } from '@progress/kendo-angular-label';
     IndicatorsModule,
     LabelModule
   ],
-  providers: [MenuService],
+  providers: [MenuService, AuthGuard, AuthService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/auth/auth.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { MenuService } from '../service/menu.service';
+import { AuthService } from '../service/auth.service';
 
 
 @Component({
@@ -16,15 +16,16 @@ export class AuthComponent implements OnInit {
     email: new FormControl('email@email.com', Validators.email)
   });
 
-  constructor(private menuService: MenuService, private rounter: Router) { }
+  constructor(private authService: AuthService, private rounter: Router) { }
 
   ngOnInit(): void {
-    this.menuService.loginSuccess.emit(null);
+    this.authService.loginSuccess.emit(null);
   }
 
   submitForm() {
     console.log(this.userForm);
-    this.menuService.loginSuccess.emit(this.userForm)
+    this.authService.login("email", "pass");
+    this.authService.loginSuccess.emit(this.userForm)
     this.rounter.navigate(["/dashboard"]);
   }
 }

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

@@ -10,8 +10,8 @@ exports.AuthComponent = void 0;
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
 var AuthComponent = /** @class */ (function () {
-    function AuthComponent(menuService, rounter) {
-        this.menuService = menuService;
+    function AuthComponent(authService, rounter) {
+        this.authService = authService;
         this.rounter = rounter;
         this.userForm = new forms_1.FormGroup({
             password: new forms_1.FormControl('abcdefg', [forms_1.Validators.minLength(3), forms_1.Validators.maxLength(20)]),
@@ -19,11 +19,12 @@ var AuthComponent = /** @class */ (function () {
         });
     }
     AuthComponent.prototype.ngOnInit = function () {
-        this.menuService.loginSuccess.emit(null);
+        this.authService.loginSuccess.emit(null);
     };
     AuthComponent.prototype.submitForm = function () {
         console.log(this.userForm);
-        this.menuService.loginSuccess.emit(this.userForm);
+        this.authService.login("email", "pass");
+        this.authService.loginSuccess.emit(this.userForm);
         this.rounter.navigate(["/dashboard"]);
     };
     AuthComponent = __decorate([

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

@@ -0,0 +1,35 @@
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Router,
+  CanActivateChild
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+import { AuthService } from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+  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']);
+          }
+        }
+      );
+  }
+
+  canActivateChild(route: ActivatedRouteSnapshot,
+                   state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    return this.canActivate(route, state);
+  }
+}

src/app/service/auth.service.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { BooleanFilterComponent } from '@progress/kendo-angular-grid';
+
+@Injectable()
+export class AuthService {
+    loggedIn: boolean  = false; 
+    loginSuccess = new EventEmitter <any>();
+    
+    isAuthenticated()  {
+        const promise = new Promise(
+            (resolve, reject) => {
+              setTimeout(() => {
+                resolve(this.loggedIn);
+              }, 800);
+            }
+          );
+          return promise;
+    }
+
+    login(emai: string, password: string) {
+        this.loggedIn = true;
+    }
+
+    logout() {
+        this.loggedIn = false;
+    }
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.AuthGuard = void 0;
+var core_1 = require("@angular/core");
+var AuthGuard = /** @class */ (function () {
+    function AuthGuard(authService, router) {
+        this.authService = authService;
+        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']);
+            }
+        });
+    };
+    AuthGuard.prototype.canActivateChild = function (route, state) {
+        return this.canActivate(route, state);
+    };
+    AuthGuard = __decorate([
+        core_1.Injectable()
+    ], AuthGuard);
+    return AuthGuard;
+}());
+exports.AuthGuard = AuthGuard;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.AuthService = void 0;
+var core_1 = require("@angular/core");
+var AuthService = /** @class */ (function () {
+    function AuthService() {
+        this.loggedIn = false;
+        this.loginSuccess = new core_1.EventEmitter();
+    }
+    AuthService.prototype.isAuthenticated = function () {
+        var _this = this;
+        var promise = new Promise(function (resolve, reject) {
+            setTimeout(function () {
+                resolve(_this.loggedIn);
+            }, 800);
+        });
+        return promise;
+    };
+    AuthService.prototype.login = function (emai, password) {
+        this.loggedIn = true;
+    };
+    AuthService.prototype.logout = function () {
+        this.loggedIn = false;
+    };
+    AuthService = __decorate([
+        core_1.Injectable()
+    ], AuthService);
+    return AuthService;
+}());
+exports.AuthService = AuthService;

src/app/service/dist/login.service.js

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.LoginService = void 0;
+var core_1 = require("@angular/core");
+var LoginService = /** @class */ (function () {
+    function LoginService() {
+        this.loggedIn = false;
+    }
+    LoginService.prototype.isAuthenticasted = function () {
+        var _this = this;
+        var promise = new Promise(function (resolve, reject) {
+            setTimeout(function () {
+                resolve(_this.loggedIn);
+            }, 800);
+        });
+        return promise;
+    };
+    LoginService.prototype.login = function () {
+        this.loggedIn = true;
+    };
+    LoginService.prototype.logout = function () {
+        this.loggedIn = false;
+    };
+    LoginService = __decorate([
+        core_1.Injectable()
+    ], LoginService);
+    return LoginService;
+}());
+exports.LoginService = LoginService;

src/app/service/dist/menu.service.js

@@ -11,7 +11,6 @@ var core_1 = require("@angular/core");
 var MenuService = /** @class */ (function () {
     function MenuService() {
         this.itemClicked = new core_1.EventEmitter();
-        this.loginSuccess = new core_1.EventEmitter();
     }
     MenuService = __decorate([
         core_1.Injectable()

src/app/service/menu.service.ts

@@ -6,5 +6,4 @@ export class MenuService {
 
     itemClicked = new EventEmitter <any>();
     
-    loginSuccess = new EventEmitter <any>();
 }