Hides logout button when not logged in

Author: Bernardo-MG

src/app/authentication/service/authentication.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ApiResponse } from '@app/api/model/api-response';
 import { environment } from '@environments/environment';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LoginStatus } from '../model/login-status';
 import { User } from '../model/user';
@@ -14,17 +14,24 @@ export class AuthenticationService {
 
   private loginUrl = environment.apiUrl + "/login";
 
-  private user: User = new User();
-
   private userKey = 'user';
 
+  private userSubject: BehaviorSubject<User>;
+
+  private user: Observable<User>;
+
   constructor(
     private http: HttpClient
   ) {
     const localUser = localStorage.getItem(this.userKey);
     if (localUser) {
-      this.user = JSON.parse(localUser);
+      const readUser = JSON.parse(localUser);
+      this.userSubject = new BehaviorSubject<User>(readUser);
+    } else {
+      this.userSubject = new BehaviorSubject<User>(new User());
     }
+
+    this.user = this.userSubject.asObservable();
   }
 
   public login(username: string, password: string): Observable<User> {
@@ -34,10 +41,15 @@ export class AuthenticationService {
   }
 
   public logout() {
-    this.user = new User();
+    this.userSubject.next(new User());
+    localStorage.removeItem(this.userKey);
   }
 
   public getUser(): User {
+    return this.userSubject.value;
+  }
+
+  public getUserObservable(): Observable<User> {
     return this.user;
   }
 
@@ -57,8 +69,8 @@ export class AuthenticationService {
       }
     }
 
-    this.user = loggedUser;
-    return this.user;
+    this.userSubject.next(loggedUser);
+    return this.getUser();
   }
 
 }

src/app/login/containers/logout-button/logout-button.component.html

@@ -1,3 +1,3 @@
-<button (click)="onLogout()" [disabled]="!isAbleToLogout()" type="button" class="btn btn-default" aria-label="Logout">
+<button (click)="onLogout()" type="button" class="btn btn-default" aria-label="Logout">
     <fa-icon [icon]="logoutIcon"></fa-icon>
 </button>

src/app/login/containers/logout-button/logout-button.component.ts

@@ -24,8 +24,4 @@ export class LogoutButtonComponent {
     this.router.navigate([this.loginUrl]);
   }
 
-  public isAbleToLogout(): boolean {
-    return this.authenticationService.getUser().logged;
-  }
-
 }

src/app/navigation/navigation-menu/navigation-menu.component.html

@@ -1,7 +1,9 @@
 <nav id="navbar-main" class="navbar navbar-expand-md navbar-light bg-light">
   <div class="container-fluid">
     <div class="navbar-brand">{{title}}</div>
-    <logout-button></logout-button>
+    <ng-template [ngIf]="loggedIn">
+      <logout-button></logout-button>
+    </ng-template>
     <ul class="nav navbar-nav ms-auto">
       <navigation-dropdown [links]="links"></navigation-dropdown>
     </ul>

src/app/navigation/navigation-menu/navigation-menu.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { AuthenticationService } from '@app/authentication/service/authentication.service';
 import { MenuLink } from '../model/menu-link';
 
 @Component({
@@ -12,6 +13,12 @@ export class NavigationMenuComponent {
 
   @Input() title: String = '';
 
-  constructor() { }
+  public loggedIn: boolean = false;
+
+  constructor(
+    private authenticationService: AuthenticationService
+  ) {
+    this.authenticationService.getUserObservable().subscribe(u => { this.loggedIn = u.logged });
+  }
 
 }