feat(auth): add login and registration modal functionality

frontend/src/app/feature/landing/landing.component.html

@@ -1,4 +1,4 @@
-<div class="min-h-screen bg-deep-blue text-text-primary">
+<div class="min-h-screen bg-deep-blue text-text-primary relative">
   <div class="container mx-auto px-4 py-8 sm:py-12">
     <div class="max-w-5xl mx-auto">
       <div class="text-center mb-12 sm:mb-16">
@@ -17,18 +17,18 @@
               Spiele
             </a>
           } @else {
-            <a
-              routerLink="/register"
+            <button
+              (click)="showRegisterForm()"
               class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
             >
               Konto erstellen
-            </a>
-            <a
-              routerLink="/login"
+            </button>
+            <button
+              (click)="showLoginForm()"
               class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
             >
               Anmelden
-            </a>
+            </button>
           }
         </div>
       </div>
@@ -120,8 +120,8 @@
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
               fill="none"
-              viewBox="0 0 24 24"
               stroke="currentColor"
+              viewBox="0 0 24 24"
             >
               <path
                 stroke-linecap="round"
@@ -136,8 +136,8 @@
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
               fill="none"
-              viewBox="0 0 24 24"
               stroke="currentColor"
+              viewBox="0 0 24 24"
             >
               <path
                 stroke-linecap="round"
@@ -181,4 +181,39 @@
       </div>
     </div>
   </div>
+
+  <!-- Auth Forms Overlay -->
+  @if (showLogin() || showRegister()) {
+    <div 
+      class="fixed inset-0 bg-black/50 z-40" 
+      (click)="hideAuthForms()"
+      (keydown.enter)="hideAuthForms()"
+      tabindex="0"
+      role="dialog"
+      aria-modal="true"
+    ></div>
+    <div 
+      class="fixed inset-0 flex items-center justify-center z-50 p-4"
+      role="presentation"
+    >
+      <div 
+        class="relative"
+        role="dialog"
+        aria-modal="true"
+      >
+        @if (showLogin()) {
+          <app-login 
+            (switchForm)="showRegisterForm()"
+            (closeDialog)="hideAuthForms()"
+          ></app-login>
+        }
+        @if (showRegister()) {
+          <app-register 
+            (switchForm)="showLoginForm()"
+            (closeDialog)="hideAuthForms()"
+          ></app-register>
+        }
+      </div>
+    </div>
+  }
 </div>

frontend/src/app/feature/landing/landing.component.ts

@@ -1,12 +1,14 @@
-import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { AuthService } from '@service/auth.service';
+import { LoginComponent } from '../auth/login/login.component';
+import { RegisterComponent } from '../auth/register/register.component';
 
 @Component({
   selector: 'app-landing-page',
   standalone: true,
-  imports: [NgFor, RouterLink],
+  imports: [NgFor, RouterLink, LoginComponent, RegisterComponent],
   templateUrl: './landing.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -14,13 +16,35 @@ export class LandingComponent implements OnInit, OnDestroy {
   currentSlide = 0;
   private autoplayInterval: ReturnType<typeof setInterval> | undefined;
   authService: AuthService = inject(AuthService);
+  showLogin = signal(false);
+  showRegister = signal(false);
 
   ngOnInit() {
     this.startAutoplay();
+    document.body.style.overflow = 'auto';
   }
 
   ngOnDestroy() {
     this.stopAutoplay();
+    document.body.style.overflow = 'auto';
+  }
+
+  showLoginForm() {
+    this.showLogin.set(true);
+    this.showRegister.set(false);
+    document.body.style.overflow = 'hidden';
+  }
+
+  showRegisterForm() {
+    this.showRegister.set(true);
+    this.showLogin.set(false);
+    document.body.style.overflow = 'hidden';
+  }
+
+  hideAuthForms() {
+    this.showLogin.set(false);
+    this.showRegister.set(false);
+    document.body.style.overflow = 'auto';
   }
 
   prevSlide() {