frontend/src/app/app.component.html

@@ -5,8 +5,8 @@
   </main>
   <app-footer></app-footer>
 
-  <!-- Auth Forms Overlay -->
-  @if (showLogin() || showRegister() || showRecoverPassword()) {
+  Auth Forms Overlay -->
+  @if (showLogin() || showRegister()) {
     <div
       class="fixed inset-0 bg-black/50 z-40"
       (click)="hideAuthForms()"
@@ -18,11 +18,7 @@
     <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()"
-            (forgotPassword)="showRecoverPasswordForm()"
-          ></app-login>
+          <app-login (switchForm)="showRegisterForm()" (closeDialog)="hideAuthForms()"></app-login>
         }
         @if (showRegister()) {
           <app-register
@@ -30,12 +26,6 @@
             (closeDialog)="hideAuthForms()"
           ></app-register>
         }
-        @if (showRecoverPassword()) {
-          <app-recover-password
-            (closeDialog)="hideAuthForms()"
-            (switchToLogin)="showLoginForm()"
-          ></app-recover-password>
-        }
       </div>
     </div>
   }

frontend/src/app/app.component.ts

@@ -4,25 +4,16 @@ 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';
-import { RecoverPasswordComponent } from './feature/auth/recover-password/recover-password.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [
-    RouterOutlet,
-    NavbarComponent,
-    FooterComponent,
-    LoginComponent,
-    RegisterComponent,
-    RecoverPasswordComponent,
-  ],
+  imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent],
   templateUrl: './app.component.html',
 })
 export class AppComponent {
   showLogin = signal(false);
   showRegister = signal(false);
-  showRecoverPassword = signal(false);
 
   @HostListener('document:keydown.escape')
   handleEscapeKey() {
@@ -32,28 +23,18 @@ export class AppComponent {
   showLoginForm() {
     this.showLogin.set(true);
     this.showRegister.set(false);
-    this.showRecoverPassword.set(false);
     document.body.style.overflow = 'hidden';
   }
 
   showRegisterForm() {
     this.showRegister.set(true);
     this.showLogin.set(false);
-    this.showRecoverPassword.set(false);
-    document.body.style.overflow = 'hidden';
-  }
-
-  showRecoverPasswordForm() {
-    this.showRecoverPassword.set(true);
-    this.showLogin.set(false);
-    this.showRegister.set(false);
     document.body.style.overflow = 'hidden';
   }
 
   hideAuthForms() {
     this.showLogin.set(false);
     this.showRegister.set(false);
-    this.showRecoverPassword.set(false);
     document.body.style.overflow = 'auto';
   }
 

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

@@ -17,7 +17,6 @@ export class LoginComponent {
   isLoading = signal(false);
   @Output() switchForm = new EventEmitter<void>();
   @Output() closeDialog = new EventEmitter<void>();
-  @Output() forgotPassword = new EventEmitter<void>();
 
   constructor(
     private fb: FormBuilder,
@@ -66,6 +65,7 @@ export class LoginComponent {
   }
 
   switchToForgotPassword() {
-    this.forgotPassword.emit();
+    this.closeDialog.emit();
+    this.router.navigate(['/recover-password']);
   }
 }

frontend/src/app/feature/auth/recover-password/recover-password.component.html

@@ -1,170 +1,172 @@
-<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"
+<div class="min-h-screen bg-deep-blue flex items-center justify-center">
+  <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"
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
-  </button>
-
-  <h2 class="modal-heading text-center">
-    @if (isResetMode()) {
-      Passwort zurücksetzen
-    } @else {
-      Passwort vergessen
-    }
-  </h2>
-
-  @if (errorMessage()) {
-    <div class="bg-accent-red text-white p-4 rounded mb-4">
-      {{ errorMessage() }}
-    </div>
-  }
-
-  @if (successMessage()) {
-    <div class="bg-emerald text-white p-4 rounded mb-4">
-      {{ successMessage() }}
-    </div>
-  }
-
-  @if (!isResetMode()) {
-    <!-- Request Password Reset Form -->
-    <form [formGroup]="emailForm" (ngSubmit)="onSubmitEmail()" class="space-y-4">
-      <div class="mb-6">
-        <p class="text-text-secondary text-sm mb-4">
-          Gib deine E-Mail-Adresse ein, und wir senden dir einen Link zum Zurücksetzen deines
-          Passworts.
-        </p>
-      </div>
-
-      <div>
-        <label for="email" class="text-text-secondary text-sm font-medium mb-1 block">
-          E-Mail
-        </label>
-        <input
-          id="email"
-          type="email"
-          formControlName="email"
-          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
-          placeholder="Gib deine E-Mail-Adresse ein"
-        />
-
-        @if (emailFormControls['email'].touched && emailFormControls['email'].errors) {
-          <div class="text-accent-red mt-1 text-sm">
-            @if (emailFormControls['email'].errors['required']) {
-              <span>E-Mail ist erforderlich</span>
-            }
-            @if (emailFormControls['email'].errors['email']) {
-              <span>Bitte gib eine gültige E-Mail-Adresse ein</span>
-            }
-          </div>
-        }
-      </div>
-
-      <div class="pt-2">
-        <button
-          type="submit"
-          [disabled]="emailForm.invalid || isLoading()"
-          class="button-primary w-full py-2.5 rounded"
-        >
-          {{ isLoading() ? 'Wird gesendet...' : 'Link zum Zurücksetzen senden' }}
-        </button>
-      </div>
-    </form>
-  }
-
-  @if (isResetMode()) {
-    <!-- Reset Password Form -->
-    <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmitReset()" class="space-y-4">
-      <div class="mb-6">
-        <p class="text-text-secondary text-sm mb-4">Gib dein neues Passwort ein.</p>
-      </div>
-
-      <div>
-        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">
-          Neues Passwort
-        </label>
-        <input
-          id="password"
-          type="password"
-          formControlName="password"
-          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
-          placeholder="Gib dein neues Passwort ein"
-        />
-
-        @if (resetFormControls['password'].touched && resetFormControls['password'].errors) {
-          <div class="text-accent-red mt-1 text-sm">
-            @if (resetFormControls['password'].errors['required']) {
-              <span>Passwort ist erforderlich</span>
-            }
-            @if (resetFormControls['password'].errors['minlength']) {
-              <span>Passwort muss mindestens 8 Zeichen lang sein</span>
-            }
-          </div>
-        }
-      </div>
-
-      <div>
-        <label for="confirmPassword" class="text-text-secondary text-sm font-medium mb-1 block">
-          Passwort bestätigen
-        </label>
-        <input
-          id="confirmPassword"
-          type="password"
-          formControlName="confirmPassword"
-          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
-          placeholder="Bestätige dein neues Passwort"
-        />
-
-        @if (
-          resetFormControls['confirmPassword'].touched &&
-          (resetFormControls['confirmPassword'].errors ||
-            resetPasswordForm.errors?.['passwordMismatch'])
-        ) {
-          <div class="text-accent-red mt-1 text-sm">
-            @if (resetFormControls['confirmPassword'].errors?.['required']) {
-              <span>Passwortbestätigung ist erforderlich</span>
-            }
-            @if (resetPasswordForm.errors?.['passwordMismatch']) {
-              <span>Passwörter stimmen nicht überein</span>
-            }
-          </div>
-        }
-      </div>
-
-      <div class="pt-2">
-        <button
-          type="submit"
-          [disabled]="resetPasswordForm.invalid || isLoading()"
-          class="button-primary w-full py-2.5 rounded"
-        >
-          {{ isLoading() ? 'Wird aktualisiert...' : 'Passwort aktualisieren' }}
-        </button>
-      </div>
-    </form>
-  }
-
-  <div class="mt-6 text-center">
-    <p class="text-sm text-text-secondary">
-      <button
-        (click)="goBackToLogin()"
-        class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
       >
-        Zurück zum Login
-      </button>
-    </p>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+
+    <h2 class="modal-heading text-center">
+      @if (isResetMode()) {
+        Passwort zurücksetzen
+      } @else {
+        Passwort vergessen
+      }
+    </h2>
+
+    @if (errorMessage()) {
+      <div class="bg-accent-red text-white p-4 rounded mb-4">
+        {{ errorMessage() }}
+      </div>
+    }
+
+    @if (successMessage()) {
+      <div class="bg-emerald text-white p-4 rounded mb-4">
+        {{ successMessage() }}
+      </div>
+    }
+
+    @if (!isResetMode()) {
+      <!-- Request Password Reset Form -->
+      <form [formGroup]="emailForm" (ngSubmit)="onSubmitEmail()" class="space-y-4">
+        <div class="mb-6">
+          <p class="text-text-secondary text-sm mb-4">
+            Gib deine E-Mail-Adresse ein, und wir senden dir einen Link zum Zurücksetzen deines
+            Passworts.
+          </p>
+        </div>
+
+        <div>
+          <label for="email" class="text-text-secondary text-sm font-medium mb-1 block">
+            E-Mail
+          </label>
+          <input
+            id="email"
+            type="email"
+            formControlName="email"
+            class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+            placeholder="Gib deine E-Mail-Adresse ein"
+          />
+
+          @if (emailFormControls['email'].touched && emailFormControls['email'].errors) {
+            <div class="text-accent-red mt-1 text-sm">
+              @if (emailFormControls['email'].errors['required']) {
+                <span>E-Mail ist erforderlich</span>
+              }
+              @if (emailFormControls['email'].errors['email']) {
+                <span>Bitte gib eine gültige E-Mail-Adresse ein</span>
+              }
+            </div>
+          }
+        </div>
+
+        <div class="pt-2">
+          <button
+            type="submit"
+            [disabled]="emailForm.invalid || isLoading()"
+            class="button-primary w-full py-2.5 rounded"
+          >
+            {{ isLoading() ? 'Wird gesendet...' : 'Link zum Zurücksetzen senden' }}
+          </button>
+        </div>
+      </form>
+    }
+
+    @if (isResetMode()) {
+      <!-- Reset Password Form -->
+      <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmitReset()" class="space-y-4">
+        <div class="mb-6">
+          <p class="text-text-secondary text-sm mb-4">Gib dein neues Passwort ein.</p>
+        </div>
+
+        <div>
+          <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">
+            Neues Passwort
+          </label>
+          <input
+            id="password"
+            type="password"
+            formControlName="password"
+            class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+            placeholder="Gib dein neues Passwort ein"
+          />
+
+          @if (resetFormControls['password'].touched && resetFormControls['password'].errors) {
+            <div class="text-accent-red mt-1 text-sm">
+              @if (resetFormControls['password'].errors['required']) {
+                <span>Passwort ist erforderlich</span>
+              }
+              @if (resetFormControls['password'].errors['minlength']) {
+                <span>Passwort muss mindestens 8 Zeichen lang sein</span>
+              }
+            </div>
+          }
+        </div>
+
+        <div>
+          <label for="confirmPassword" class="text-text-secondary text-sm font-medium mb-1 block">
+            Passwort bestätigen
+          </label>
+          <input
+            id="confirmPassword"
+            type="password"
+            formControlName="confirmPassword"
+            class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+            placeholder="Bestätige dein neues Passwort"
+          />
+
+          @if (
+            resetFormControls['confirmPassword'].touched &&
+            (resetFormControls['confirmPassword'].errors ||
+              resetPasswordForm.errors?.['passwordMismatch'])
+          ) {
+            <div class="text-accent-red mt-1 text-sm">
+              @if (resetFormControls['confirmPassword'].errors?.['required']) {
+                <span>Passwortbestätigung ist erforderlich</span>
+              }
+              @if (resetPasswordForm.errors?.['passwordMismatch']) {
+                <span>Passwörter stimmen nicht überein</span>
+              }
+            </div>
+          }
+        </div>
+
+        <div class="pt-2">
+          <button
+            type="submit"
+            [disabled]="resetPasswordForm.invalid || isLoading()"
+            class="button-primary w-full py-2.5 rounded"
+          >
+            {{ isLoading() ? 'Wird aktualisiert...' : 'Passwort aktualisieren' }}
+          </button>
+        </div>
+      </form>
+    }
+
+    <div class="mt-6 text-center">
+      <p class="text-sm text-text-secondary">
+        <a
+          routerLink="/"
+          class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
+        >
+          Zurück zur Startseite
+        </a>
+      </p>
+    </div>
   </div>
 </div>

frontend/src/app/feature/auth/recover-password/recover-password.component.ts

@@ -1,16 +1,16 @@
-import { Component, EventEmitter, Output, signal, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService } from '@service/auth.service';
 
 @Component({
   selector: 'app-recover-password',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './recover-password.component.html',
 })
-export class RecoverPasswordComponent implements OnInit {
+export class RecoverPasswordComponent {
   emailForm: FormGroup;
   resetPasswordForm: FormGroup;
   errorMessage = signal('');
@@ -20,7 +20,6 @@ export class RecoverPasswordComponent implements OnInit {
   isResetMode = signal(false);
 
   @Output() closeDialog = new EventEmitter<void>();
-  @Output() switchToLogin = new EventEmitter<void>();
 
   constructor(
     private fb: FormBuilder,
@@ -41,11 +40,8 @@ export class RecoverPasswordComponent implements OnInit {
         validators: this.passwordMatchValidator,
       }
     );
-  }
 
-  ngOnInit(): void {
-    // Check if we're in reset mode via URL parameters
-    // This is still needed for direct access via URLs with token
+    // Check if we're in reset mode
     this.route.queryParamMap.subscribe((params) => {
       const token = params.get('token');
       if (token) {
@@ -115,8 +111,7 @@ export class RecoverPasswordComponent implements OnInit {
           'Dein Passwort wurde erfolgreich zurückgesetzt. Du kannst dich jetzt anmelden.'
         );
         setTimeout(() => {
-          this.closeDialog.emit();
-          this.switchToLogin.emit();
+          this.router.navigate([''], { queryParams: { login: true } });
         }, 3000);
       },
       error: (err) => {
@@ -127,8 +122,4 @@ export class RecoverPasswordComponent implements OnInit {
       },
     });
   }
-
-  goBackToLogin(): void {
-    this.switchToLogin.emit();
-  }
 }