Display user's name when logged in

Client/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@auth0/angular-jwt": "^2.1.0",
     "alertifyjs": "^1.11.2",
     "bootstrap": "^4.2.1",
     "core-js": "^2.5.4",

Client/src/app/app.component.ts

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from './services/auth.service';
+import { JwtHelperService } from '@auth0/angular-jwt';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit {
+
+  private title = 'Friendster';
+  private jwtHelper = new JwtHelperService();
+
+  constructor(private authService: AuthService) { }
+
+  ngOnInit(): void {
+    const token = localStorage.getItem('token');
+    if (token) {
+      this.authService.decodedToken = this.jwtHelper.decodeToken(token);
+    }
+  }
+
 }

Client/src/app/components/nav-menu/nav-menu.component.html

@@ -12,13 +12,13 @@
       <a class="nav-link" href="#">Messages</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link text-danger" href="#" (click)="logout()" *ngIf="isLoggedIn()">Logout</a>
+      <a class="nav-link text-danger" href="#" (click)="logout()" *ngIf="isAuthenticated()">Logout</a>
     </li>
   </ul>
 
-  <div class="dropdown" *ngIf="isLoggedIn()">
+  <div class="dropdown" *ngIf="isAuthenticated()">
     <a class="dropdown-toggle text-light">
-      Welcome User
+      Welcome {{ authService.decodedToken?.unique_name | titlecase }}
     </a>
 
     <div class="dropdown-menu">
@@ -28,7 +28,7 @@
     </div>
   </div>
 
-  <form #loginForm="ngForm" class="form-inline my-2 my-lg-0" (ngSubmit)="login()" *ngIf="!isLoggedIn()">
+  <form #loginForm="ngForm" class="form-inline my-2 my-lg-0" (ngSubmit)="login()" *ngIf="!isAuthenticated()">
     <input class="form-control mr-sm-2" type="text" name="username" placeholder="Username" required [(ngModel)]="model.username">
     <input class="form-control mr-sm-2" type="password" name="password" placeholder="Password" required [(ngModel)]="model.password">
     <button [disabled]="!loginForm.valid" class="btn btn-primary my-2 my-sm-0" type="submit">Login</button>

Client/src/app/components/nav-menu/nav-menu.component.ts

@@ -10,10 +10,9 @@ import { AlertifyService } from 'src/app/services/alertify.service';
 export class NavMenuComponent implements OnInit {
   model: any = {};
 
-  constructor(private authService: AuthService, private alertify: AlertifyService) { }
+  constructor(public authService: AuthService, private alertify: AlertifyService) { }
 
-  ngOnInit() {
-  }
+  ngOnInit() { }
 
   login() {
     this.authService.login(this.model).subscribe(next => {
@@ -28,8 +27,7 @@ export class NavMenuComponent implements OnInit {
     this.alertify.message('Logged out');
   }
 
-  isLoggedIn(): boolean {
-    const token = localStorage.getItem('token');
-    return !!token;
+  isAuthenticated(): boolean {
+    return this.authService.isAuthenticated();
   }
 }

Client/src/app/services/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 import { Observable } from 'rxjs';
+import { JwtHelperService } from '@auth0/angular-jwt'
 
 @Injectable({
   providedIn: 'root'
@@ -10,6 +11,8 @@ export class AuthService {
 
   private loginUrl = '/api/auth/login';
   private registerUrl = '/api/auth/register';
+  private jwtHelper = new JwtHelperService();
+  public decodedToken: any;
 
   constructor(private http: HttpClient) { }
 
@@ -20,6 +23,7 @@ export class AuthService {
           const user = res;
           if (user) {
             localStorage.setItem('token', user.token);
+            this.decodedToken = this.jwtHelper.decodeToken(user.token);
           }
         })
       );
@@ -28,4 +32,9 @@ export class AuthService {
   register(model: any) {
     return this.http.post(this.registerUrl, model);
   }
+
+  isAuthenticated(): boolean {
+    const token = localStorage.getItem('token');
+    return !this.jwtHelper.isTokenExpired(token);
+  }
 }