refactor: use signals for modals management

src/app/profile/edit/edit.component.html

@@ -13,14 +13,14 @@
         [iconName]="'delete'"
         [size]="'small'"
         [wide]="true"
-        (action)="showDeleteAccountModal()"
+        (action)="isDeleteAccountModalOpen.set(true)"
       />
       <app-icon-button
         ariaLabel="Supprimer mon compte"
         class="hide-on-desktop"
         [variant]="'secondaryDelete'"
         [iconName]="'delete'"
-        (action)="showDeleteAccountModal()"
+        (action)="isDeleteAccountModalOpen.set(true)"
       />
     </div>
     <!-- Navigation -->
@@ -78,7 +78,7 @@
             [iconName]="'email'"
             [size]="'small'"
             [wide]="true"
-            (action)="showEmailModal()"
+            (action)="isEmailModalOpen.set(true)"
           />
           <app-button
             [variant]="'secondary'"
@@ -86,7 +86,7 @@
             [iconName]="'lock'"
             [size]="'small'"
             [wide]="true"
-            (action)="showPasswordModal()"
+            (action)="isPasswordModalOpen.set(true)"
           />
         </div>
       </div>
@@ -138,9 +138,9 @@
   <app-modal
     [singleButton]="true"
     [title]="'ATTENTION'"
-    [opened]="appointmentModal"
+    [opened]="isAppointmentModalOpen()"
     [validateLabel]="'OK'"
-    (closed)="closeAppointmentModal()"
+    (closed)="isAppointmentModalOpen.set(false)"
   >
     <p class="modalContent emphasized">
       Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'Demander un rendez-vous' dans l'onglet 'Employeur
@@ -151,7 +151,7 @@
   <!-- Some modifications are pending, confirm leaving -->
   <app-modal
     [title]="'ATTENTION'"
-    [opened]="pendingChangesModal"
+    [opened]="isPendingChangesModalOpen()"
     [validateLabel]="'Continuer'"
     (closed)="hasPendingChangesRedirectionAccepted($event ? true : false)"
   >
@@ -161,7 +161,7 @@
   <!-- Modal: Email change -->
   <app-modal
     [title]="'Modifier mon email'"
-    [opened]="emailModal"
+    [opened]="isEmailModalOpen()"
     [validateLabel]="'Valider'"
     [validateDisabled]="!(emailValid(this.newEmail) && newEmail === newEmailConfirm)"
     (closed)="$event ? confirm() : closeModal()"
@@ -198,7 +198,7 @@
   <!-- Modal: Password change -->
   <app-modal
     [title]="'Modifier mon mot de passe'"
-    [opened]="passwordModal"
+    [opened]="isPasswordModalOpen()"
     [validateDisabled]="!isPageValid()"
     (closed)="$event ? confirm() : closeModal()"
   >
@@ -248,7 +248,7 @@
   <!-- Modal: Delete account -->
   <app-modal
     [title]="'Supprimer mon compte'"
-    [opened]="deleteAccountModal"
+    [opened]="isDeleteAccountModalOpen()"
     [validateLabel]="'Valider'"
     [validateDisabled]="!passwordValid(oldPassword)"
     (closed)="$event ? confirmDeleteAccount() : closeModal()"

src/app/profile/edit/edit.component.ts

 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, signal } from '@angular/core';
 import { Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { Employer } from '../../models/employer.model';
@@ -61,13 +61,13 @@ export class EditComponent implements OnInit {
   public statusCode = 200;
 
   // Modal canExit var
-  public emailModal = false;
-  public passwordModal = false;
-  public deleteAccountModal = false;
-  public pendingChangesModal = false;
+  public isEmailModalOpen = signal(false);
+  public isPasswordModalOpen = signal(false);
+  public isDeleteAccountModalOpen = signal(false);
+  public isPendingChangesModalOpen = signal(false);
   private resolve: CanExitResolver;
   private canDeactivate = false;
-  public appointmentModal = false;
+  public isAppointmentModalOpen = signal(false);
 
   constructor(
     public profileService: ProfileService,
@@ -204,18 +204,6 @@ export class EditComponent implements OnInit {
     this.userProfile = { ...this.initialUserProfile };
   }
 
-  public showEmailModal(): void {
-    this.emailModal = true;
-  }
-
-  public showPasswordModal(): void {
-    this.passwordModal = true;
-  }
-
-  public showDeleteAccountModal(): void {
-    this.deleteAccountModal = true;
-  }
-
   public showPassword(key: showPasswordEnum): void {
     this.isShowPassword[key] = !this.isShowPassword[key];
   }
@@ -224,18 +212,18 @@ export class EditComponent implements OnInit {
     this.oldPassword = '';
     this.newPassword = '';
     this.newPasswordConfirm = '';
-    this.emailModal = false;
-    this.passwordModal = false;
-    this.deleteAccountModal = false;
+    this.isEmailModalOpen.set(false);
+    this.isPasswordModalOpen.set(false);
+    this.isDeleteAccountModalOpen.set(false);
   }
 
   public isPageValid(): boolean {
     if (this.currentTab === tabsEnum.details) {
       return this.coordsHaveChanged() && this.phoneValid() && this.nameValid() && this.surnameValid();
     } else if (this.currentTab === tabsEnum.credentials) {
-      if (this.emailModal) {
+      if (this.isEmailModalOpen()) {
         return this.emailValid(this.newEmail) && this.newEmail === this.newEmailConfirm;
-      } else if (this.passwordModal) {
+      } else if (this.isPasswordModalOpen()) {
         return this.passwordValid(this.newPassword) && this.newPassword === this.newPasswordConfirm;
       }
     } else if (this.currentTab === tabsEnum.employer) {
@@ -250,9 +238,9 @@ export class EditComponent implements OnInit {
     if (this.currentTab === tabsEnum.details) {
       this.confirmDetails();
     } else if (this.currentTab === tabsEnum.credentials) {
-      if (this.emailModal) {
+      if (this.isEmailModalOpen()) {
         this.confirmNewEmail();
-      } else if (this.passwordModal) {
+      } else if (this.isPasswordModalOpen()) {
         this.confirmNewPassword();
       }
     } else if (this.currentTab === tabsEnum.employer) {
@@ -417,7 +405,7 @@ export class EditComponent implements OnInit {
       return new Promise((resolve) => this.showPendingChangesModal(resolve));
     }
     if (this.hasPersonalOffer && this.selectedRdvChoice === undefined) {
-      return new Promise(() => this.showAppointmentModal());
+      return new Promise(() => this.isAppointmentModalOpen.set(true));
     }
     return Promise.resolve(true);
   }
@@ -459,18 +447,11 @@ export class EditComponent implements OnInit {
   }
 
   public showPendingChangesModal(resolve: CanExitResolver): void {
-    this.pendingChangesModal = true;
+    this.isPendingChangesModalOpen.set(true);
     this.resolve = resolve;
   }
   public hasPendingChangesRedirectionAccepted(hasAccept: boolean): void {
     this.resolve(hasAccept);
-    this.pendingChangesModal = false;
-  }
-
-  private showAppointmentModal(): void {
-    this.appointmentModal = true;
-  }
-  public closeAppointmentModal(): void {
-    this.appointmentModal = false;
+    this.isPendingChangesModalOpen.set(false);
   }
 }