feat: add authorization to navigation

petruburlacu · May 2, 2022 · fbd79ac · fbd79ac
1 parent 5d17aa2
commit fbd79ac
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/client/src/app/shared/ui/header/header.component.html b/client/src/app/shared/ui/header/header.component.html
@@ -5,8 +5,12 @@
             <a href="#" class="hover:underline hover:underline-offset-4 hover:decoration-4">Home<span></span></a>
             <a href="#porfolio" class="hover:underline hover:underline-offset-4 hover:decoration-4">Portfolio</a>
             <a href="/blog" class="hover:underline hover:underline-offset-4 hover:decoration-4">Blog</a>
-            <a href="#contact">
-                <button class="px-6 py-2 bg-gray-800 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">Contact</button>
+            <a href="#contact" class="hover:underline hover:underline-offset-4 hover:decoration-4">Contact</a>
+            <a *ngIf="isAuthenticated$ | async" href="/dashboard">
+              <button class="px-6 py-2 bg-gray-800 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">Dashboard</button>
+            </a>
+            <a *ngIf="!(isAuthenticated$ | async)" href="/authentication">
+              <button class="px-6 py-2 bg-gray-800 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">Log in</button>
             </a>
         </div>
         <div class="md:hidden font-black flex">
@@ -44,7 +48,9 @@
 
         <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a>
       </div>
-      <a href="#" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Log in </a>
+
+      <a *ngIf="!(isAuthenticated$ | async)" href="/authentication" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Log in </a>
+      <a *ngIf="isAuthenticated$ | async" href="/dashboard" class="block w-full px-5 py-3 text-center bg-gray-50 hover:bg-gray-800 hover:text-white font-semibold"> Dashboard </a>
     </div>
   </div>
 

diff --git a/client/src/app/shared/ui/header/header.component.ts b/client/src/app/shared/ui/header/header.component.ts
@@ -1,5 +1,7 @@
 import { isPlatformBrowser } from '@angular/common';
 import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AuthenticationService } from 'src/app/pages/authentication/data-access/authentication.service';
 
 @Component({
   selector: 'app-header',
@@ -8,17 +10,21 @@ import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core
 })
 export class HeaderComponent implements OnInit, OnDestroy {
 
+  public isAuthenticated$!: Observable<boolean>;
+
   toggleMobile: boolean = false;
 
   myButton: any;
 
-  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
+  constructor(@Inject(PLATFORM_ID) private platformId: Object, private authService: AuthenticationService) { }
 
   ngOnInit(): void {
     if (isPlatformBrowser(this.platformId)) {
       this.myButton = document.getElementById("btn-back-to-top");
       window.addEventListener('scroll', this.scroll, true);
-   }
+    }
+    this.isAuthenticated$ = this.authService.isAuthenticated();
+
   }
 
   onNavbarToggle(): void {