From fa30fc330507e8342026b4c34334b915a4002012 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 09:00:18 +0100 Subject: [PATCH 1/8] Protect homepage with keycloak --- frontend/src/app/app.routes.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index ce6d45a..2dcf135 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,13 +1,17 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; import {LandingPageComponent} from "./landing-page/landing-page.component"; import {HomepageComponent} from "./homepage/homepage/homepage.component"; +import {authGuard} from "./auth.guard"; export const routes: Routes = [ { - path: 'home', - component: HomepageComponent + path: '', + component: LandingPageComponent, + }, + { + path: 'home', + component: HomepageComponent, + canActivate: [authGuard], }, - - { path: '', component: LandingPageComponent } ]; From f10de66c12ba017cd79e71c6377f613b4a1b77fc Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 09:22:20 +0100 Subject: [PATCH 2/8] Refactor auth guard --- frontend/src/app/auth.guard.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/auth.guard.ts b/frontend/src/app/auth.guard.ts index dd78a48..0cd16be 100644 --- a/frontend/src/app/auth.guard.ts +++ b/frontend/src/app/auth.guard.ts @@ -1,16 +1,15 @@ -import { CanActivateFn } from '@angular/router'; -import { inject } from '@angular/core'; -import { KeycloakService } from 'keycloak-angular'; +import {CanActivateFn} from '@angular/router'; +import {inject} from '@angular/core'; +import {KeycloakService} from 'keycloak-angular'; -export const authGuard: CanActivateFn = async (route, state) => { +export const authGuard: CanActivateFn = async () => { const keycloakService = inject(KeycloakService); - const isLoggedIn = keycloakService.isLoggedIn(); if (isLoggedIn) { return true; - } else { - keycloakService.login(); - return false; } + + keycloakService.login(); + return false; }; From 53f21a220f6bc75ab15535ecb7a05ff6b2fc8759 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 09:27:41 +0100 Subject: [PATCH 3/8] Add logout and login functionality --- frontend/src/app/landing-page/landing-page.component.html | 1 + frontend/src/app/landing-page/landing-page.component.ts | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/landing-page/landing-page.component.html b/frontend/src/app/landing-page/landing-page.component.html index e69de29..06f5418 100644 --- a/frontend/src/app/landing-page/landing-page.component.html +++ b/frontend/src/app/landing-page/landing-page.component.html @@ -0,0 +1 @@ + diff --git a/frontend/src/app/landing-page/landing-page.component.ts b/frontend/src/app/landing-page/landing-page.component.ts index ed8aba1..7ea8521 100644 --- a/frontend/src/app/landing-page/landing-page.component.ts +++ b/frontend/src/app/landing-page/landing-page.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import {Component, inject} from '@angular/core'; +import {KeycloakService} from "keycloak-angular"; @Component({ selector: 'app-landing-page', @@ -7,5 +8,9 @@ import { Component } from '@angular/core'; templateUrl: './landing-page.component.html', }) export class LandingPageComponent { + private keycloakService: KeycloakService = inject(KeycloakService); + login() { + this.keycloakService.login(); + } } From dc993b287954a6e35e918b99eacf49eec9d1e00b Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 09:38:31 +0100 Subject: [PATCH 4/8] Add alerts --- frontend/src/app/landing-page/landing-page.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/landing-page/landing-page.component.ts b/frontend/src/app/landing-page/landing-page.component.ts index 7ea8521..56b9183 100644 --- a/frontend/src/app/landing-page/landing-page.component.ts +++ b/frontend/src/app/landing-page/landing-page.component.ts @@ -11,6 +11,10 @@ export class LandingPageComponent { private keycloakService: KeycloakService = inject(KeycloakService); login() { - this.keycloakService.login(); + this.keycloakService.login() + .catch(error => { + alert("Error: Unable to redirect to login page. Please try again later."); + console.error('Error redirecting to login:', error); + }); } } From c3f9ba7bcada69d2bb072ddfa16cb11529333ce9 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 09:41:05 +0100 Subject: [PATCH 5/8] Add nested route config for authentication --- frontend/src/app/app.routes.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 2dcf135..97623db 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -9,9 +9,14 @@ export const routes: Routes = [ component: LandingPageComponent, }, { - path: 'home', - component: HomepageComponent, + path: '**', canActivate: [authGuard], - }, + children: [ + { + path: 'home', + component: HomepageComponent, + }, + ] + } ]; From f6bcc1be11bc4b1de34d9a6e722a98c00d8e6b9b Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 10:46:48 +0100 Subject: [PATCH 6/8] Prettier and rebase --- frontend/src/app/app.config.ts | 6 +++++- frontend/src/app/app.routes.ts | 13 ++++++------- frontend/src/app/auth.guard.ts | 6 +++--- .../app/homepage/homepage/homepage.component.html | 9 ++------- .../src/app/homepage/homepage/homepage.component.ts | 9 +++++++-- .../app/landing-page/landing-page.component.html | 2 +- .../src/app/landing-page/landing-page.component.ts | 10 +++------- frontend/src/styles.css | 8 +++----- 8 files changed, 30 insertions(+), 33 deletions(-) diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index 6fd038e..e7761ba 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -1,4 +1,8 @@ -import { APP_INITIALIZER, ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core'; +import { + APP_INITIALIZER, + ApplicationConfig, + provideExperimentalZonelessChangeDetection, +} from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 97623db..132b0da 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,7 +1,7 @@ -import {Routes} from '@angular/router'; -import {LandingPageComponent} from "./landing-page/landing-page.component"; -import {HomepageComponent} from "./homepage/homepage/homepage.component"; -import {authGuard} from "./auth.guard"; +import { Routes } from '@angular/router'; +import { LandingPageComponent } from './landing-page/landing-page.component'; +import { HomepageComponent } from './homepage/homepage/homepage.component'; +import { authGuard } from './auth.guard'; export const routes: Routes = [ { @@ -16,7 +16,6 @@ export const routes: Routes = [ path: 'home', component: HomepageComponent, }, - ] - } + ], + }, ]; - diff --git a/frontend/src/app/auth.guard.ts b/frontend/src/app/auth.guard.ts index 0cd16be..cb2cbe9 100644 --- a/frontend/src/app/auth.guard.ts +++ b/frontend/src/app/auth.guard.ts @@ -1,6 +1,6 @@ -import {CanActivateFn} from '@angular/router'; -import {inject} from '@angular/core'; -import {KeycloakService} from 'keycloak-angular'; +import { CanActivateFn } from '@angular/router'; +import { inject } from '@angular/core'; +import { KeycloakService } from 'keycloak-angular'; export const authGuard: CanActivateFn = async () => { const keycloakService = inject(KeycloakService); diff --git a/frontend/src/app/homepage/homepage/homepage.component.html b/frontend/src/app/homepage/homepage/homepage.component.html index 6377831..6a710c5 100644 --- a/frontend/src/app/homepage/homepage/homepage.component.html +++ b/frontend/src/app/homepage/homepage/homepage.component.html @@ -1,16 +1,11 @@ - diff --git a/frontend/src/app/homepage/homepage/homepage.component.ts b/frontend/src/app/homepage/homepage/homepage.component.ts index e0a1147..1f01382 100644 --- a/frontend/src/app/homepage/homepage/homepage.component.ts +++ b/frontend/src/app/homepage/homepage/homepage.component.ts @@ -1,12 +1,17 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { KeycloakService } from 'keycloak-angular'; @Component({ selector: 'app-homepage', standalone: true, imports: [], templateUrl: './homepage.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomepageComponent { + private keycloakService: KeycloakService = inject(KeycloakService); + logout() { + this.keycloakService.logout(); + } } diff --git a/frontend/src/app/landing-page/landing-page.component.html b/frontend/src/app/landing-page/landing-page.component.html index 06f5418..f1cfa47 100644 --- a/frontend/src/app/landing-page/landing-page.component.html +++ b/frontend/src/app/landing-page/landing-page.component.html @@ -1 +1 @@ - + diff --git a/frontend/src/app/landing-page/landing-page.component.ts b/frontend/src/app/landing-page/landing-page.component.ts index 56b9183..ff25911 100644 --- a/frontend/src/app/landing-page/landing-page.component.ts +++ b/frontend/src/app/landing-page/landing-page.component.ts @@ -1,5 +1,5 @@ -import {Component, inject} from '@angular/core'; -import {KeycloakService} from "keycloak-angular"; +import { Component, inject } from '@angular/core'; +import { KeycloakService } from 'keycloak-angular'; @Component({ selector: 'app-landing-page', @@ -11,10 +11,6 @@ export class LandingPageComponent { private keycloakService: KeycloakService = inject(KeycloakService); login() { - this.keycloakService.login() - .catch(error => { - alert("Error: Unable to redirect to login page. Please try again later."); - console.error('Error redirecting to login:', error); - }); + this.keycloakService.login(); } } diff --git a/frontend/src/styles.css b/frontend/src/styles.css index ecb1a02..22329e3 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,10 +1,8 @@ -@import "tailwindcss"; - +@import 'tailwindcss'; .btn-primary { - @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20 + @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20; } .btn-secondary { - @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-white/10 text-white hover:bg-white/20 + @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-white/10 text-white hover:bg-white/20; } - From 4b9574ac965b6e428c1575359562e9d68d7f190b Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 10:54:47 +0100 Subject: [PATCH 7/8] fix: fix routing --- frontend/src/app/app.routes.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 132b0da..2d53d28 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -9,13 +9,8 @@ export const routes: Routes = [ component: LandingPageComponent, }, { - path: '**', + path: 'home', + component: HomepageComponent, canActivate: [authGuard], - children: [ - { - path: 'home', - component: HomepageComponent, - }, - ], - }, + } ]; From 13769e0df5f536a45381789ae54c403fda964462 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 12 Feb 2025 10:56:21 +0100 Subject: [PATCH 8/8] fix: Translate login to german --- frontend/src/app/landing-page/landing-page.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/landing-page/landing-page.component.html b/frontend/src/app/landing-page/landing-page.component.html index f1cfa47..aa8bbd8 100644 --- a/frontend/src/app/landing-page/landing-page.component.html +++ b/frontend/src/app/landing-page/landing-page.component.html @@ -1 +1 @@ - +