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

@@ -182,7 +182,7 @@
     </div>
   </div>
 
-  @if (showLogin() || showRegister()) {
+  @if (showLogin() || showRegister() || showRecoverPassword()) {
     <div
       class="fixed inset-0 bg-black/50 z-40"
       (click)="hideAuthForms()"
@@ -194,7 +194,11 @@
     <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>
+          <app-login
+            (forgotPassword)="showRecoverPasswordForm()"
+            (switchForm)="showRegisterForm()"
+            (closeDialog)="hideAuthForms()"
+          ></app-login>
         }
         @if (showRegister()) {
           <app-register
@@ -202,6 +206,12 @@
             (closeDialog)="hideAuthForms()"
           ></app-register>
         }
+        @if (showRecoverPassword()) {
+          <app-recover-password
+            (closeDialog)="hideAuthForms()"
+            (switchToLogin)="showLoginForm()"
+          ></app-recover-password>
+        }
       </div>
     </div>
   }

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

@@ -11,11 +11,12 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { AuthService } from '@service/auth.service';
 import { LoginComponent } from '../auth/login/login.component';
 import { RegisterComponent } from '../auth/register/register.component';
+import { RecoverPasswordComponent } from '../auth/recover-password/recover-password.component';
 
 @Component({
   selector: 'app-landing-page',
   standalone: true,
-  imports: [NgFor, RouterLink, LoginComponent, RegisterComponent],
+  imports: [NgFor, RouterLink, LoginComponent, RegisterComponent, RecoverPasswordComponent],
   templateUrl: './landing.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -26,6 +27,7 @@ export class LandingComponent implements OnInit, OnDestroy {
   route: ActivatedRoute = inject(ActivatedRoute);
   showLogin = signal(false);
   showRegister = signal(false);
+  showRecoverPassword = signal(false);
 
   ngOnInit() {
     this.startAutoplay();
@@ -43,18 +45,28 @@ export class LandingComponent implements OnInit, OnDestroy {
   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';
   }