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';

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,
       },
-    ]
-  }
+    ],
+  },
 ];
-

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);

frontend/src/app/homepage/homepage/homepage.component.html

@@ -1,16 +1,11 @@
-
 <nav class="bg-black border-b border-amber-600/30 sticky top-0 z-50">
   <div class="container mx-auto px-4 py-3 flex justify-between items-center">
     <!-- logo goes here -->
     <div class="flex gap-4">
-      <button class="btn-primary">
-        Ausloggen
-      </button>
+      <button class="btn-primary" (click)="logout()">Ausloggen</button>
     </div>
     <div>
-      <button class="btn-primary">
-        Benutzer
-      </button>
+      <button class="btn-primary">Benutzer</button>
     </div>
   </div>
 </nav>

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();
+  }
 }

frontend/src/app/landing-page/landing-page.component.html

@@ -1 +1 @@
-<button (click)="login()">Login</button>
+<button (click)="login()">Login</button>

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();
   }
 }

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;
 }
-