feat(navbar): implement login/logout buttons based on state

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

@@ -1 +0,0 @@
-<button (click)="login()">Einloggen</button>

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

@@ -7,12 +7,4 @@ import { KeycloakService } from 'keycloak-angular';
   imports: [],
   templateUrl: './landing-page.component.html',
 })
-export class LandingPageComponent {
+export class LandingPageComponent {}
-  private keycloakService: KeycloakService = inject(KeycloakService);
-
-  login() {
-    const baseUrl = window.location.origin;
-
-    this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
-  }
-}

frontend/src/app/shared/components/footer/footer.component.ts

@@ -1,5 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faMoneyBillTransfer, faCreditCard, faWallet } from '@fortawesome/free-solid-svg-icons';
 import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-icons';
@@ -9,11 +8,11 @@ import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-
   standalone: true,
   templateUrl: './footer.component.html',
   imports: [FontAwesomeModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
   currentYear: number = new Date().getFullYear();
 
-  // Payment method icons
   faPaypal = faPaypal;
   faCreditCard = faCreditCard;
   faMoneyBillTransfer = faMoneyBillTransfer;

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

@@ -15,11 +15,22 @@
       </div>
 
       <div class="hidden md:flex items-center space-x-4">
-        <button
+        @if (!isLoggedIn) {
-          class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
+          <button
-        >
+            (click)="login()"
-          Login
+            class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-        </button>
+          >
+            Login
+          </button>
+        }
+        @if (isLoggedIn) {
+          <button
+            (click)="logout()"
+            class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
+          >
+            Logout
+          </button>
+        }
       </div>
 
       <div class="md:hidden">
@@ -67,11 +78,22 @@
           >Games</a
         >
         <div class="pt-2 space-y-2">
-          <button
+          @if (!isLoggedIn) {
-            class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
+            <button
-          >
+              (click)="login()"
-            Login
+              class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-          </button>
+            >
+              Login
+            </button>
+          }
+          @if (isLoggedIn) {
+            <button
+              (click)="logout()"
+              class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
+            >
+              Logout
+            </button>
+          }
         </div>
       </div>
     </div>

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

@@ -1,15 +1,33 @@
-import { Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
+import { KeycloakService } from 'keycloak-angular';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [RouterModule, AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent {
   isMenuOpen = false;
+  private keycloakService: KeycloakService = inject(KeycloakService);
+
+  isLoggedIn = this.keycloakService.isLoggedIn();
+
+  login() {
+    try {
+      const baseUrl = window.location.origin;
+      this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  }
+
+  logout() {
+    this.keycloakService.logout();
+  }
 
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;