refactor: improve code structure and readability in ForgotPasswordComponent

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

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>
+      <p>Please enter your new password and confirm it.</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>
     </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>

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;
+  emailSentSuccessfully: boolean = false;
-  passwordChangeSuccess: 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 '';
   }
 }

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