frontend/src/app/app.component.html

@@ -5,8 +5,8 @@
   </main>
   <app-footer></app-footer>
 
-  <!-- Auth Forms Overlay -->
+  Auth Forms Overlay -->
-  @if (showLogin() || showRegister() || showRecoverPassword()) {
+  @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
+          <app-login (switchForm)="showRegisterForm()" (closeDialog)="hideAuthForms()"></app-login>
-            (switchForm)="showRegisterForm()"
-            (closeDialog)="hideAuthForms()"
-            (forgotPassword)="showRecoverPasswordForm()"
-          ></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: [
+  imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent],
-    RouterOutlet,
-    NavbarComponent,
-    FooterComponent,
-    LoginComponent,
-    RegisterComponent,
-    RecoverPasswordComponent,
-  ],
   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,4 +1,5 @@
-<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
+<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"
@@ -159,12 +160,13 @@
 
     <div class="mt-6 text-center">
       <p class="text-sm text-text-secondary">
-      <button
+        <a
-        (click)="goBackToLogin()"
+          routerLink="/"
           class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
         >
-        Zurück zum Login
+          Zurück zur Startseite
-      </button>
+        </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
-    // Check if we're in reset mode via URL parameters
-    // This is still needed for direct access via URLs with token
     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.router.navigate([''], { queryParams: { login: true } });
-          this.switchToLogin.emit();
         }, 3000);
       },
       error: (err) => {
@@ -127,8 +122,4 @@ export class RecoverPasswordComponent implements OnInit {
       },
     });
   }
-
-  goBackToLogin(): void {
-    this.switchToLogin.emit();
-  }
 }