fix: minor bugfixes and UI adjustments

src/app/components/main-layout/main-layout.component.scss

@@ -10,6 +10,7 @@ app-header {
   height: 96px;
   width: 100%;
   background-color: var(--white);
+  z-index: 1;
 }
 
 app-sidebar {

src/app/guards/authenticated.guard.ts

@@ -4,6 +4,7 @@ import { catchError, map, Observable, of } from 'rxjs';
 import { AuthService } from '../services/auth.service';
 import { TokenService } from '../services/token.service';
 import { ToastrService } from 'ngx-toastr';
+import { ToastNotificationService } from '../services/toast-notification.servic';
 
 @Injectable({
   providedIn: 'root',
@@ -13,12 +14,14 @@ export class AuthenticatedGuard {
     private authService: AuthService,
     private tokenService: TokenService,
     private router: Router,
-    private toastrService: ToastrService
+    private toastrService: ToastrService,
+    private toastNotificationService: ToastNotificationService
   ) {}
 
   canActivate(): Observable<boolean> | Promise<boolean> | boolean {
     const authToken = this.tokenService.getAuthToken();
-    if (!authToken) {
+
+    if (!authToken || !this.tokenService.isTokenExpired(authToken)) {
       this.router.navigate(['/login']);
       return false;
     }
@@ -28,26 +31,16 @@ export class AuthenticatedGuard {
         if (isAuthenticated) {
           return true;
         } else {
-          this.showSessionExpiredMessage();
+          this.toastNotificationService.showSessionExpiredMessage();
           this.router.navigate(['/login']);
           return false;
         }
       }),
       catchError(() => {
-        this.showSessionExpiredMessage();
+        this.toastNotificationService.showSessionExpiredMessage();
         this.router.navigate(['/login']);
         return of(false);
       })
     );
   }
-
-  private showSessionExpiredMessage() {
-    this.toastrService.error(
-      'Your session has expired, please log in again.',
-      'Session Expired',
-      {
-        timeOut: 3000,
-      }
-    );
-  }
 }

src/app/guards/redirect-if-authenticated.guard.ts

@@ -17,7 +17,8 @@ export class RedirectIfAuthenticatedGuard {
 
   canActivate(): Observable<boolean> | Promise<boolean> | boolean {
     const authToken = this.tokenService.getAuthToken();
-    if (!authToken) {
+
+    if (!authToken || !this.tokenService.isTokenExpired(authToken)) {
       return true;
     }
 

src/app/services/toast-notification.servic.ts

@@ -22,6 +22,13 @@ export class ToastNotificationService {
     );
   }
 
+  showSessionExpiredMessage(): void {
+    this.createInfoToast(
+      'Your session has expired, please log in again.',
+      'Session Expired'
+    );
+  }
+
   // Tasks
   createTaskSuccessToast(): void {
     this.createSuccessToast('Task created successfully!', 'Task Created');

src/app/services/token.service.ts

@@ -42,4 +42,15 @@ export class TokenService {
     localStorage.removeItem(this.USER_ID_KEY);
     sessionStorage.removeItem(this.USER_ID_KEY);
   }
+
+  isTokenExpired(token: string): boolean {
+    try {
+      const payload = JSON.parse(atob(token.split('.')[1]));
+      const expiry = payload.exp;
+      if (!expiry) return true;
+      return expiry * 1000 < Date.now();
+    } catch (e) {
+      return true;
+    }
+  }
 }

src/app/shared/components/confirm-dialog/confirm-dialog.component.scss

@@ -9,9 +9,9 @@ section {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 999;
   backdrop-filter: blur(5px);
   background-color: rgba($color: #000000, $alpha: 0.2);
+  z-index: 999;
 }
 
 .dialog {

src/app/shared/components/header/header.component.html

@@ -12,7 +12,7 @@
     <div class="img-language">
       <img
         class="img-lang"
-        (click)="toggleLanguage()"
+        (click)="toggleLanguageNavbar()"
         src="./../../../../assets/img/header/language.svg"
         alt=""
       />
@@ -22,8 +22,8 @@
     </div>
   </div>
 </div>
-<app-navbar *ngIf="navbarVisible" [navbarVisible]="navbarVisible"></app-navbar>
+<app-navbar *ngIf="showNavbar" [showNavbar]="showNavbar"></app-navbar>
 <app-navbar
-  *ngIf="navbarLanguageVisible"
+  *ngIf="showLanguageNavbar"
-  [navbarLanguageVisible]="navbarLanguageVisible"
+  [showLanguageNavbar]="showLanguageNavbar"
 ></app-navbar>

src/app/shared/components/header/header.component.ts

@@ -14,8 +14,8 @@ import { User } from '../../../interfaces/user.interface';
   styleUrl: './header.component.scss',
 })
 export class HeaderComponent {
-  navbarVisible: boolean = false;
+  showNavbar: boolean = false;
-  navbarLanguageVisible: boolean = false;
+  showLanguageNavbar: boolean = false;
   currentUser: User | null = null;
 
   constructor(private userService: UserService) {}
@@ -41,15 +41,15 @@ export class HeaderComponent {
    * @returns {void}
    */
   toggleNavbar(): void {
-    this.navbarVisible = !this.navbarVisible;
+    this.showNavbar = !this.showNavbar;
   }
 
   /**
    * Toggles the visibility of the language selection navbar.
    * @returns {void}
    */
-  toggleLanguage(): void {
+  toggleLanguageNavbar(): void {
-    this.navbarLanguageVisible = !this.navbarLanguageVisible;
+    this.showLanguageNavbar = !this.showLanguageNavbar;
   }
 
   @HostListener('document:click', ['$event'])
@@ -64,17 +64,17 @@ export class HeaderComponent {
       !targetElement.closest('app-navbar') &&
       !targetElement.closest('.img-user')
     ) {
-      this.navbarVisible = false;
+      this.showNavbar = false;
     }
     if (
       !targetElement.closest('app-navbar') &&
       !targetElement.closest('.img-lang')
     ) {
-      this.navbarLanguageVisible = false;
+      this.showLanguageNavbar = false;
     }
     if (targetElement.closest('.link')) {
-      this.navbarVisible = false;
+      this.showNavbar = false;
-      this.navbarLanguageVisible = false;
+      this.showLanguageNavbar = false;
     }
   }
 }

src/app/shared/components/header/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-@if (navbarVisible) {
+@if (showNavbar) {
 <nav class="navbar d-none">
   <div
     class="link"
@@ -22,7 +22,7 @@
     <span>{{ "navbar.logout" | translate }}</span>
   </div>
 </nav>
-} @else if (navbarLanguageVisible) {
+} @else if (showLanguageNavbar) {
 <nav class="navbar language d-none">
   <div
     class="link"

src/app/shared/components/header/navbar/navbar.component.ts

@@ -14,8 +14,8 @@ import { AuthService } from '../../../../services/auth.service';
   styleUrl: './navbar.component.scss',
 })
 export class NavbarComponent {
-  @Input() navbarVisible: boolean = false;
+  @Input() showNavbar: boolean = false;
-  @Input() navbarLanguageVisible: boolean = false;
+  @Input() showLanguageNavbar: boolean = false;
 
   currentRoute: string = '';