Merge pull request 'feat(auth): add login and registration modal functionality' (!189) from refactor/dialogs into main

Reviewed-on: #189
Reviewed-by: Jan K9f <jan@kjan.email>

frontend/src/app/app.component.html

@@ -1,7 +1,32 @@
 <div class="min-h-screen flex flex-col">
   <main class="flex-grow">
-    <app-navbar></app-navbar>
+    <app-navbar (showLogin)="showLoginForm()" (showRegister)="showRegisterForm()"></app-navbar>
     <router-outlet></router-outlet>
   </main>
   <app-footer></app-footer>
+
+  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/app.component.ts

@@ -1,16 +1,44 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component, HostListener, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
-import { FooterComponent } from '@shared/components/footer/footer.component';
+import { NavbarComponent } from './shared/components/navbar/navbar.component';
-import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+import { FooterComponent } from './shared/components/footer/footer.component';
+import { LoginComponent } from './feature/auth/login/login.component';
+import { RegisterComponent } from './feature/auth/register/register.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, FooterComponent, NavbarComponent],
+  imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent],
-  providers: [],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {}
+export class AppComponent {
+  showLogin = signal(false);
+  showRegister = signal(false);
+
+  @HostListener('document:keydown.escape')
+  handleEscapeKey() {
+    this.hideAuthForms();
+  }
+
+  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';
+  }
+
+  stopPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
+}

frontend/src/app/app.routes.ts

@@ -7,16 +7,6 @@ export const routes: Routes = [
     path: '',
     component: LandingComponent,
   },
-  {
-    path: 'login',
-    loadComponent: () =>
-      import('./feature/auth/login/login.component').then((m) => m.LoginComponent),
-  },
-  {
-    path: 'register',
-    loadComponent: () =>
-      import('./feature/auth/register/register.component').then((m) => m.RegisterComponent),
-  },
   {
     path: 'home',
     loadComponent: () => import('./feature/home/home.component'),

frontend/src/app/feature/auth/login/login.component.html

@@ -1,5 +1,26 @@
 <div class="min-h-screen bg-deep-blue flex items-center justify-center">
-  <div class="modal-card max-w-md w-full">
+  <div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
+    <button
+      (click)="closeDialog.emit()"
+      class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
+      aria-label="Dialog schließen"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+
     <h2 class="modal-heading text-center">Anmelden</h2>
 
     @if (errorMessage()) {
@@ -65,12 +86,12 @@
     <div class="mt-6 text-center">
       <p class="text-sm text-text-secondary">
         Noch kein Konto?
-        <a
+        <button
-          routerLink="/register"
+          (click)="switchToRegister()"
           class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
         >
           Registrieren
-        </a>
+        </button>
       </p>
     </div>
   </div>

frontend/src/app/feature/auth/login/login.component.ts

@@ -1,6 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, EventEmitter, Output, signal } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { Router } from '@angular/router';
 import { LoginRequest } from '../../../model/auth/LoginRequest';
 import { AuthService } from '@service/auth.service';
 import { CommonModule } from '@angular/common';
@@ -8,13 +8,15 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './login.component.html',
 })
 export class LoginComponent {
   loginForm: FormGroup;
   errorMessage = signal('');
   isLoading = signal(false);
+  @Output() switchForm = new EventEmitter<void>();
+  @Output() closeDialog = new EventEmitter<void>();
 
   constructor(
     private fb: FormBuilder,
@@ -31,6 +33,10 @@ export class LoginComponent {
     return this.loginForm.controls;
   }
 
+  switchToRegister(): void {
+    this.switchForm.emit();
+  }
+
   onSubmit(): void {
     if (this.loginForm.invalid) {
       return;
@@ -46,6 +52,7 @@ export class LoginComponent {
 
     this.authService.login(loginRequest).subscribe({
       next: () => {
+        this.closeDialog.emit();
         this.router.navigate(['/home']);
       },
       error: (err) => {

frontend/src/app/feature/auth/register/register.component.html

@@ -1,5 +1,26 @@
 <div class="min-h-screen bg-deep-blue flex items-center justify-center">
-  <div class="modal-card max-w-md w-full">
+  <div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
+    <button
+      (click)="closeDialog.emit()"
+      class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
+      aria-label="Dialog schließen"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+
     <h2 class="modal-heading text-center">Konto erstellen</h2>
 
     @if (errorMessage()) {
@@ -107,12 +128,12 @@
     <div class="mt-6 text-center">
       <p class="text-sm text-text-secondary">
         Bereits ein Konto?
-        <a
+        <button
-          routerLink="/login"
+          (click)="switchToLogin()"
           class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
         >
           Anmelden
-        </a>
+        </button>
       </p>
     </div>
   </div>

frontend/src/app/feature/auth/register/register.component.ts

@@ -1,6 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, EventEmitter, Output, signal } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { Router } from '@angular/router';
 import { RegisterRequest } from '../../../model/auth/RegisterRequest';
 import { AuthService } from '@service/auth.service';
 import { CommonModule } from '@angular/common';
@@ -9,7 +9,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './register.component.html',
 })
 export class RegisterComponent {
@@ -17,6 +17,8 @@ export class RegisterComponent {
   errorMessage = signal<string>('');
   isLoading = signal<boolean>(false);
   fieldErrors = signal<Record<string, string>>({});
+  @Output() switchForm = new EventEmitter<void>();
+  @Output() closeDialog = new EventEmitter<void>();
 
   constructor(
     private fb: FormBuilder,
@@ -34,6 +36,10 @@ export class RegisterComponent {
     return this.registerForm.controls;
   }
 
+  switchToLogin(): void {
+    this.switchForm.emit();
+  }
+
   onSubmit(): void {
     if (this.registerForm.invalid) {
       return;

frontend/src/app/feature/game/slots/slots.component.html

@@ -2,13 +2,10 @@
   <h1 class="text-3xl font-bold text-white mb-6">Spielautomaten</h1>
 
   <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
-    <!-- Slot Machine Display -->
     <div class="lg:col-span-3 space-y-6 flex flex-col">
       <div class="card">
-        <!-- Slot Machine Top -->
         <div class="p-6">
           <div class="flex items-center justify-between gap-4">
-            <!-- Wrapper for title and win amount -->
             <div class="flex items-baseline space-x-2">
               <h2 class="text-xl font-bold text-white">Slot Machine</h2>
               <span
@@ -20,7 +17,6 @@
               </span>
             </div>
 
-            <!-- Status Badge -->
             <div
               [ngClass]="{
                 'bg-emerald': slotResult().status === 'win',
@@ -42,7 +38,6 @@
           </div>
         </div>
 
-        <!-- Slot Display -->
         <div class="p-6">
           <div class="bg-deep-blue-light rounded-lg p-4 shadow-inner mb-6">
             <div class="grid grid-cols-3 gap-3">
@@ -60,9 +55,6 @@
             </div>
           </div>
 
-          <!-- Game Result (This section was removed as it's now at the top) -->
-
-          <!-- Controls -->
           <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
             <div class="flex items-center bg-deep-blue-light rounded-lg p-2 flex-1">
               <label for="betAmount" class="text-text-secondary mr-3">Einsatz:</label>
@@ -98,7 +90,6 @@
       </div>
     </div>
 
-    <!-- Game Info Panel -->
     <div class="lg:col-span-1">
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>

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
+            <button
-              routerLink="/register"
+              (click)="showRegisterForm()"
               class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
             >
               Konto erstellen
-            </a>
+            </button>
-            <a
+            <button
-              routerLink="/login"
+              (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,28 @@
       </div>
     </div>
   </div>
+
+  @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,21 @@
-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 +23,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() {

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

@@ -12,12 +12,13 @@
 
       <div class="hidden md:flex items-center space-x-4">
         @if (!isLoggedIn()) {
-          <a routerLink="/login" class="button-primary px-4 py-1.5">Anmelden</a>
+          <button (click)="showLogin.emit()" class="button-primary px-4 py-1.5">Anmelden</button>
-          <a
+          <button
-            routerLink="/register"
+            (click)="showRegister.emit()"
             class="bg-emerald-700 text-white hover:bg-emerald-600 px-4 py-1.5 rounded"
-            >Registrieren</a
           >
+            Registrieren
+          </button>
         }
         @if (isLoggedIn()) {
           <div
@@ -71,14 +72,18 @@
         <a routerLink="/games" class="nav-mobile-link">Spiele</a>
         <div class="pt-2 space-y-2">
           @if (!isLoggedIn()) {
-            <a routerLink="/login" class="button-primary w-full py-1.5 block text-center"
+            <button
-              >Anmelden</a
+              (click)="showLogin.emit()"
+              class="button-primary w-full py-1.5 block text-center"
             >
-            <a
+              Anmelden
-              routerLink="/register"
+            </button>
+            <button
+              (click)="showRegister.emit()"
               class="bg-emerald-700 text-white hover:bg-emerald-600 w-full py-1.5 rounded block text-center"
-              >Registrieren</a
             >
+              Registrieren
+            </button>
           }
           @if (isLoggedIn()) {
             <button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>

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

@@ -1,9 +1,11 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   inject,
   OnDestroy,
   OnInit,
+  Output,
   signal,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -26,6 +28,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
   private authSubscription!: Subscription;
   public balance = signal(0);
 
+  @Output() showLogin = new EventEmitter<void>();
+  @Output() showRegister = new EventEmitter<void>();
+
   ngOnInit() {
     this.authSubscription = this.authService.userSubject.subscribe({
       next: (user) => {