From aaa2d1119464fb383583dac37912c327792ad6d1 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Thu, 8 May 2025 09:39:23 +0200
Subject: [PATCH] refactor: improve code structure and readability in
 ForgotPasswordComponent

---
 .../email-request.component.html              |  4 --
 .../forgot-password.component.html            | 41 +++++++++++--------
 .../forgot-password.component.ts              | 17 ++++++--
 .../password-request.component.html           |  4 --
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/components/auth/forgot-password/email-request/email-request.component.html b/frontend/src/app/components/auth/forgot-password/email-request/email-request.component.html
index fc207e7..a4819e7 100644
--- a/frontend/src/app/components/auth/forgot-password/email-request/email-request.component.html
+++ b/frontend/src/app/components/auth/forgot-password/email-request/email-request.component.html
@@ -1,7 +1,3 @@
-<div class="note">
-  <p>We will send you an email with instructions to reset your password.</p>
-</div>
-
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div class="email-field">
     <input
diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
index 943b7b6..7f4571c 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
@@ -1,33 +1,38 @@
 <section class="login-background">
   <div class="content">
     <div class="headline">Forgot your password?</div>
-    @if (!hasVerificationParams && !emailSendSuccess && !passwordChangeSuccess)
-    {
+
+    <!-- Email Request -->
+    @if (!hasVerificationParams && !emailSentSuccessfully) {
+    <div class="note">
+      <p>We will send you an email with instructions to reset your password.</p>
+    </div>
+
     <app-email-request
       (submittedChangeEmail)="submittedChangeEmail($event)"
     ></app-email-request>
-    } @else { @if (emailSendSuccess) {
+    }
+
+    <!-- Password Request -->
+    @if (hasVerificationParams && !passwordChangedSuccessfully) {
     <div class="note">
-      <p>
-        If the email you entered exists on our server, you will receive a
-        message with instructions on how to reset your password.
-      </p>
-      <a routerLink="/login">To the login</a>
+      <p>Please enter your new password and confirm it.</p>
     </div>
-    } @if (passwordChangeSuccess) {
-    <div class="note">
-      <p>
-        Password change successful.<br />You can now log in with your new
-        password.
-      </p>
-      <a routerLink="/login">To the login</a>
-    </div>
-    } @if (hasVerificationParams && !passwordChangeSuccess) {
+
     <app-password-request
       [verificationParams]="verificationParams"
       (submittedChangePassword)="submittedChangePassword($event)"
     ></app-password-request>
+    }
 
-    } }
+    <!-- Success Messages -->
+    @if (emailSentSuccessfully || passwordChangedSuccessfully) {
+    <div class="note">
+      <p>
+        {{ successMessage }}
+      </p>
+      <a routerLink="/login">To the login</a>
+    </div>
+    }
   </div>
 </section>
diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
index c956c77..78b3db9 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
@@ -21,8 +21,8 @@ import { firstValueFrom } from 'rxjs';
   styleUrl: './forgot-password.component.scss',
 })
 export class ForgotPasswordComponent implements OnInit {
-  emailSendSuccess: boolean = false;
-  passwordChangeSuccess: boolean = false;
+  emailSentSuccessfully: boolean = false;
+  passwordChangedSuccessfully: boolean = false;
   hasVerificationParams: boolean = false;
 
   verificationParams: { email: string; token: string } = {
@@ -82,7 +82,7 @@ export class ForgotPasswordComponent implements OnInit {
    * @param success A boolean indicating whether the request was successful.
    */
   submittedChangeEmail(success: boolean): void {
-    this.emailSendSuccess = success;
+    this.emailSentSuccessfully = success;
   }
 
   /**
@@ -92,6 +92,15 @@ export class ForgotPasswordComponent implements OnInit {
    * @param success A boolean indicating whether the password change was successful.
    */
   submittedChangePassword(success: boolean): void {
-    this.passwordChangeSuccess = success;
+    this.passwordChangedSuccessfully = success;
+  }
+
+  get successMessage(): string {
+    if (this.emailSentSuccessfully) {
+      return 'If the email you entered exists on our server, you will receive a message with instructions on how to reset your password.';
+    } else if (this.passwordChangedSuccessfully) {
+      return 'Password change successful. You can now log in with your new password.';
+    }
+    return '';
   }
 }
diff --git a/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.html b/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.html
index 4dc1c73..81b017b 100644
--- a/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.html
+++ b/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.html
@@ -1,7 +1,3 @@
-<div class="note">
-  <p>Please enter your new password and confirm it.</p>
-</div>
-
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div class="password-field">
     <input