From ed83097b6b45c1f613caa84ab98388f4fa24839e Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 4 Jun 2025 14:27:11 +0200
Subject: [PATCH] feat: open login form when accessing restricted links

---
 .../feature/landing/landing.component.html    | 100 +++++++++++++-----
 .../app/feature/landing/landing.component.ts  |  24 +----
 .../components/navbar/navbar.component.html   |  24 +++--
 3 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/frontend/src/app/feature/landing/landing.component.html b/frontend/src/app/feature/landing/landing.component.html
index 9fb0f7b..a7cb79e 100644
--- a/frontend/src/app/feature/landing/landing.component.html
+++ b/frontend/src/app/feature/landing/landing.component.html
@@ -40,33 +40,63 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Slots</h3>
                     <p class="game-text">Klassische Spielautomaten</p>
-                    <a
-                      routerLink="game/slots"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/slots"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Blackjack</h3>
                     <p class="game-text">Klassisches Kartenspiel</p>
-                    <a
-                      routerLink="game/blackjack"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/blackjack"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Coinflip</h3>
                     <p class="game-text">Münzwurf</p>
-                    <a
-                      routerLink="game/blackjack"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/coinflip"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
               </div>
@@ -76,22 +106,42 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Dice</h3>
                     <p class="game-text">Würfelspiel</p>
-                    <a
-                      routerLink="/game/dice"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/dice"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Lootboxen</h3>
                     <p class="game-text">Überraschungskisten</p>
-                    <a
-                      routerLink="game/lootboxes"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/lootboxes"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
               </div>
diff --git a/frontend/src/app/feature/landing/landing.component.ts b/frontend/src/app/feature/landing/landing.component.ts
index d354fa4..93b9e84 100644
--- a/frontend/src/app/feature/landing/landing.component.ts
+++ b/frontend/src/app/feature/landing/landing.component.ts
@@ -23,15 +23,14 @@ import RecoverPasswordComponent from '../auth/recover-password/recover-password.
 })
 export class LandingComponent implements OnInit, OnDestroy {
   currentSlide = 0;
-  private autoplayInterval: ReturnType<typeof setInterval> | undefined;
   authService: AuthService = inject(AuthService);
   route: ActivatedRoute = inject(ActivatedRoute);
   showLogin = signal(false);
   showRegister = signal(false);
   showRecoverPassword = signal(false);
+  isLoggedIn = signal(this.authService.isLoggedIn());
 
   ngOnInit() {
-    this.startAutoplay();
     document.body.style.overflow = 'auto';
     if (this.route.snapshot.queryParamMap.get('login') === 'true') {
       this.showLoginForm();
@@ -39,7 +38,6 @@ export class LandingComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.stopAutoplay();
     document.body.style.overflow = 'auto';
   }
 
@@ -73,33 +71,13 @@ export class LandingComponent implements OnInit, OnDestroy {
 
   prevSlide() {
     this.currentSlide = this.currentSlide === 0 ? 1 : 0;
-    this.resetAutoplay();
   }
 
   nextSlide() {
     this.currentSlide = this.currentSlide === 1 ? 0 : 1;
-    this.resetAutoplay();
   }
 
   goToSlide(index: number) {
     this.currentSlide = index;
-    this.resetAutoplay();
-  }
-
-  private startAutoplay() {
-    this.autoplayInterval = setInterval(() => {
-      this.nextSlide();
-    }, 5000);
-  }
-
-  private stopAutoplay() {
-    if (this.autoplayInterval) {
-      clearInterval(this.autoplayInterval);
-    }
-  }
-
-  private resetAutoplay() {
-    this.stopAutoplay();
-    this.startAutoplay();
   }
 }
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html
index 6cc7863..608f3de 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.html
+++ b/frontend/src/app/shared/components/navbar/navbar.component.html
@@ -10,13 +10,23 @@
         </a>
 
         <div class="hidden md:flex items-center space-x-1">
-          <a
-            routerLink="/home"
-            class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
-          >
-            <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
-            Spiele
-          </a>
+          @if (isLoggedIn()) {
+            <a
+              routerLink="/home"
+              class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
+            >
+              <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
+              Spiele
+            </a>
+          } @else {
+            <button
+              (click)="showLogin.emit()"
+              class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
+            >
+              <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
+              Spiele
+            </button>
+          }
         </div>
       </div>