Add navigation

Author: Vishwas Gopinath - I16165

ngApp/server/routes/api.js

@@ -122,7 +122,9 @@ router.post('/register', (req, res) => {
     if (err) {
       console.log(err)      
     } else {
-      res.status(200).send('Successfully registered!')
+      let payload = {subject: registeredUser._id}
+      let token = jwt.sign(payload, 'secretKey')
+      res.status(200).send({token})
     }
   })
 })
@@ -141,7 +143,6 @@ router.post('/login', (req, res) => {
       } else {
         let payload = {subject: user._id}
         let token = jwt.sign(payload, 'secretKey')
-        console.log(token)
         res.status(200).send({token})
       }
     }

ngApp/src/app/app.component.html

@@ -14,8 +14,9 @@
       </li>
     </ul>
     <ul class="navbar-nav">
-        <a class="nav-link" routerLink="/login" routerLinkActive="active">Login</a>
-        <a class="nav-link" routerLink="/register" routerLinkActive="active">Register</a>
+        <a class="nav-link" *ngIf="!_authService.loggedIn()" routerLink="/login" routerLinkActive="active">Login</a>
+        <a class="nav-link" *ngIf="!_authService.loggedIn()" routerLink="/register" routerLinkActive="active">Register</a>
+        <a class="nav-link" style="cursor:pointer" *ngIf="_authService.loggedIn()" (click)="_authService.logoutUser()">Logout</a>        
     </ul>
   </div>
 </nav>    

ngApp/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AuthService } from './auth.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+  constructor(private _authService: AuthService){}
 }

ngApp/src/app/auth.service.ts

@@ -1,13 +1,15 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
+import { Router } from '@angular/router'
 
 @Injectable()
 export class AuthService {
 
   private _registerUrl = "/api/register";
   private _loginUrl = "/api/login";
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient,
+              private _router: Router) { }
 
   registerUser(user) {
     return this.http.post<any>(this._registerUrl, user)
@@ -17,8 +19,16 @@ export class AuthService {
     return this.http.post<any>(this._loginUrl, user)
   }
 
+  logoutUser() {
+    localStorage.removeItem('token')
+    this._router.navigate(['/events'])
+  }
+
   getToken() {
     return localStorage.getItem('token')
   }
 
+  loggedIn() {
+    return !!localStorage.getItem('token')    
+  }
 }

ngApp/src/app/login/login.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../auth.service';
+import { Router } from '@angular/router'
+
 
 @Component({
   selector: 'app-login',
@@ -10,7 +12,8 @@ export class LoginComponent implements OnInit {
 
   loginUserData = {}
 
-  constructor(private _auth: AuthService) { }
+  constructor(private _auth: AuthService,
+              private _router: Router) { }
 
   ngOnInit() {
   }
@@ -19,8 +22,8 @@ export class LoginComponent implements OnInit {
     this._auth.loginUser(this.loginUserData)
     .subscribe(
       res => {
-        console.log(res)
         localStorage.setItem('token', res.token)
+        this._router.navigate(['/special'])
       },
       err => console.log(err)
     ) 

ngApp/src/app/register/register.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../auth.service';
+import { Router } from '@angular/router'
 
 @Component({
   selector: 'app-register',
@@ -9,15 +10,19 @@ import { AuthService } from '../auth.service';
 export class RegisterComponent implements OnInit {
 
   registerUserData = {}
-  constructor(private _auth: AuthService) { }
+  constructor(private _auth: AuthService,
+              private _router: Router) { }
 
   ngOnInit() {
   }
 
   registerUser() {
     this._auth.registerUser(this.registerUserData)
     .subscribe(
-      res => console.log(res),
+      res => {
+        localStorage.setItem('token', res.token)
+        this._router.navigate(['/special'])
+      },
       err => console.log(err)
     )      
   }

ngApp/src/app/special-events/special-events.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { EventService } from '../event.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router'
 
 @Component({
   selector: 'app-special-events',
@@ -10,14 +12,21 @@ export class SpecialEventsComponent implements OnInit {
 
   specialEvents = []
 
-  constructor(private _eventService: EventService) { }
+  constructor(private _eventService: EventService,
+              private _router: Router) { }
 
 
   ngOnInit() {
     this._eventService.getSpecialEvents()
       .subscribe(
         res => this.specialEvents = res,
-        err => console.log(err)
+        err => {
+          if( err instanceof HttpErrorResponse ) {
+            if (err.status === 401) {
+              this._router.navigate(['/login'])
+            }
+          }
+        }
       )
   }