From 3898a9a2f1359ba7dc6068aadd6ee009efc6218e Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 5 Apr 2025 04:31:38 +0200 Subject: [PATCH] fix: minor bugfixes and UI adjustments --- .../main-layout/main-layout.component.scss | 1 + src/app/guards/authenticated.guard.ts | 21 +++++++------------ .../guards/redirect-if-authenticated.guard.ts | 3 ++- src/app/services/toast-notification.servic.ts | 7 +++++++ src/app/services/token.service.ts | 11 ++++++++++ .../confirm-dialog.component.scss | 2 +- .../components/header/header.component.html | 8 +++---- .../components/header/header.component.ts | 18 ++++++++-------- .../header/navbar/navbar.component.html | 4 ++-- .../header/navbar/navbar.component.ts | 4 ++-- 10 files changed, 46 insertions(+), 33 deletions(-) diff --git a/src/app/components/main-layout/main-layout.component.scss b/src/app/components/main-layout/main-layout.component.scss index 2d2842f..0ea5de8 100644 --- a/src/app/components/main-layout/main-layout.component.scss +++ b/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 { diff --git a/src/app/guards/authenticated.guard.ts b/src/app/guards/authenticated.guard.ts index 22809ed..9206a4c 100644 --- a/src/app/guards/authenticated.guard.ts +++ b/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 | Promise | 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, - } - ); - } } diff --git a/src/app/guards/redirect-if-authenticated.guard.ts b/src/app/guards/redirect-if-authenticated.guard.ts index 25fbf1e..47e8725 100644 --- a/src/app/guards/redirect-if-authenticated.guard.ts +++ b/src/app/guards/redirect-if-authenticated.guard.ts @@ -17,7 +17,8 @@ export class RedirectIfAuthenticatedGuard { canActivate(): Observable | Promise | boolean { const authToken = this.tokenService.getAuthToken(); - if (!authToken) { + + if (!authToken || !this.tokenService.isTokenExpired(authToken)) { return true; } diff --git a/src/app/services/toast-notification.servic.ts b/src/app/services/toast-notification.servic.ts index 0bb1dee..f5e8bf2 100755 --- a/src/app/services/toast-notification.servic.ts +++ b/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'); diff --git a/src/app/services/token.service.ts b/src/app/services/token.service.ts index ffd3c11..e4b8e35 100755 --- a/src/app/services/token.service.ts +++ b/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; + } + } } diff --git a/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss b/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss index 4fc4917..6d4246d 100644 --- a/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss +++ b/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 { diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html index d9082e6..0a8603e 100644 --- a/src/app/shared/components/header/header.component.html +++ b/src/app/shared/components/header/header.component.html @@ -12,7 +12,7 @@
@@ -22,8 +22,8 @@
- + diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index a9a1acb..57970a2 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/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; - navbarLanguageVisible: boolean = false; + showNavbar: 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 { - this.navbarLanguageVisible = !this.navbarLanguageVisible; + toggleLanguageNavbar(): void { + 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.navbarLanguageVisible = false; + this.showNavbar = false; + this.showLanguageNavbar = false; } } } diff --git a/src/app/shared/components/header/navbar/navbar.component.html b/src/app/shared/components/header/navbar/navbar.component.html index 3e7579f..9a36507 100644 --- a/src/app/shared/components/header/navbar/navbar.component.html +++ b/src/app/shared/components/header/navbar/navbar.component.html @@ -1,4 +1,4 @@ -@if (navbarVisible) { +@if (showNavbar) { -} @else if (navbarLanguageVisible) { +} @else if (showLanguageNavbar) {