fix(Mon Compte): Update cancel button when editing profile

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

 <div *ngIf="userProfile" class="content-container full-screen">
   <div class="edit-profile">
-    <app-go-back (action)="goBack()" />
+    <app-go-back (action)="showPendingChangesModal()" />
 
     <div class="header">
       <div class="title">
@@ -180,16 +180,6 @@
         />
       </div>
 
-      <app-modal
-        [title]="'ATTENTION'"
-        [opened]="showConfirmationModal"
-        [validateLabel]="'OK'"
-        (closed)="closeExitModal()"
-      >
-        Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et
-        fonction'.
-      </app-modal>
-
       <div *ngIf="currentTab === tabsEnum.description" class="descriptionTab">
         <app-textarea
           [id]="'description'"
@@ -202,11 +192,34 @@
 
     <!-- Footer -->
     <div *ngIf="currentTab !== tabsEnum.credentials" class="footer">
-      <app-button *ngIf="profileChanged()" [variant]="'secondary'" [label]="'Annuler'" (action)="cancel()" />
+      <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="showPendingChangesModal()" />
       <app-button [variant]="'primary'" [label]="'Valider'" [disabled]="!isPageValid()" (action)="confirm()" />
     </div>
   </div>
 
+  <!-- No information on appointment option, should pick one -->
+  <app-modal
+    [title]="'Attention !'"
+    [opened]="showConfirmationModal"
+    [validateLabel]="'OK'"
+    (closed)="closeExitModal()"
+  >
+    <p class="modalContent emphasized">
+      Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et
+      fonction'.
+    </p>
+  </app-modal>
+
+  <!-- Some modifications are pending, confirm leaving -->
+  <app-modal
+    [title]="'Attention !'"
+    [opened]="pendingChangesModal"
+    [validateLabel]="'Continuer'"
+    (closed)="$event ? goBack() : closePendingChangesModal()"
+  >
+    <p class="modalContent emphasized">Des changements ne sont pas enregistrés, souhaitez-vous continuer ?</p>
+  </app-modal>
+
   <!-- Modal: Email change -->
   <app-modal
     [title]="'Modifier mon email'"

src/app/profile/edit/edit.component.scss

@@ -150,18 +150,6 @@
   }
 }
 
-p {
-  margin: 10px 0;
-  &.passwordInfo {
-    @include font-regular-14;
-    text-align: left;
-    padding: 0 10px;
-    &.warn {
-      color: $orange-warning;
-    }
-  }
-}
-
 .modal-content {
   display: flex;
   flex-direction: column;

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

 import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import * as _ from 'lodash';
 import { lastValueFrom } from 'rxjs';
 import { Employer } from '../../models/employer.model';
 import { Job } from '../../models/job.model';
@@ -39,9 +38,6 @@ export class EditComponent implements OnInit {
 
   @Input() userProfile: User;
   public initialUserProfile: User;
-  public emailModal = false;
-  public passwordModal = false;
-  public deleteAccountModal = false;
   public newEmail = '';
   public newEmailConfirm = '';
   public oldPassword = '';
@@ -65,6 +61,10 @@ export class EditComponent implements OnInit {
   public hasPersonalOffer = false;
 
   // Modal canExit var
+  public emailModal = false;
+  public passwordModal = false;
+  public deleteAccountModal = false;
+  public pendingChangesModal = false;
   public showConfirmationModal = false;
 
   @ViewChild('newJobInput') newJobInput: ElementRef;
@@ -201,10 +201,6 @@ export class EditComponent implements OnInit {
     this.userProfile = { ...this.initialUserProfile };
   }
 
-  public profileChanged(): boolean {
-    return !_.isEqual(this.userProfile, this.initialUserProfile);
-  }
-
   public showEmailModal(): void {
     this.emailModal = true;
   }
@@ -228,7 +224,7 @@ export class EditComponent implements OnInit {
 
   public isPageValid(): boolean {
     if (this.currentTab === tabsEnum.details) {
-      return this.profileChanged() && this.phoneValid() && this.nameValid() && this.surnameValid();
+      return this.coordsHaveChanged() && this.phoneValid() && this.nameValid() && this.surnameValid();
     } else if (this.currentTab === tabsEnum.credentials) {
       if (this.emailModal) {
         return this.emailValid(this.newEmail) && this.newEmail === this.newEmailConfirm;
@@ -241,16 +237,12 @@ export class EditComponent implements OnInit {
           return false;
         }
         return true;
-      } else if (
-        this.selectedEmployer?.name !== this.userProfile.employer?.name ||
-        (this.selectedJob?.name !== this.userProfile.job?.name && !this.hasPersonalOffer) ||
-        (this.hasPersonalOffer && this.selectedRdvChoice !== null)
-      ) {
+      } else if (this.jobHasChanged()) {
         return true;
       }
       return false;
-    } else if (this.currentTab === tabsEnum.description) {
-      return this.descriptionValid() && this.initialUserProfile.description !== this.userProfile.description;
+    } else if (this.descriptionHasChanged()) {
+      return this.descriptionValid();
     }
   }
 
@@ -345,7 +337,7 @@ export class EditComponent implements OnInit {
   }
 
   public confirmNewPassword(): void {
-    if (this.passwordValid(this.newPassword) && this.newPassword == this.newPasswordConfirm) {
+    if (this.passwordValid(this.newPassword) && this.newPassword === this.newPasswordConfirm) {
       this.profileService.changePassword(this.newPassword, this.oldPassword).subscribe({
         next: () => {
           this.notificationService.showSuccess('Votre mot de passe a bien été modifié');
@@ -435,6 +427,43 @@ export class EditComponent implements OnInit {
     }
   }
 
+  private coordsHaveChanged(): boolean {
+    return (
+      this.userProfile.name !== this.initialUserProfile.name ||
+      this.userProfile.surname !== this.initialUserProfile.surname ||
+      this.userProfile.phone !== this.initialUserProfile.phone
+    );
+  }
+
+  private jobHasChanged(): boolean {
+    return (
+      this.selectedEmployer?.name !== this.initialUserProfile.employer?.name ||
+      this.selectedJob?.name !== this.initialUserProfile.job?.name ||
+      (this.hasPersonalOffer && this.selectedRdvChoice !== this.initialUserProfile.withAppointment) ||
+      this.isUnexistingJob()
+    );
+  }
+
+  private descriptionHasChanged(): boolean {
+    return this.userProfile.description !== (this.initialUserProfile.description ?? '');
+  }
+
+  public hasPendingChanges(): boolean {
+    return this.coordsHaveChanged() || this.jobHasChanged() || this.descriptionHasChanged();
+  }
+
+  public showPendingChangesModal(): void {
+    if (this.hasPendingChanges()) {
+      this.pendingChangesModal = true;
+    } else {
+      this.goBack();
+    }
+  }
+
+  public closePendingChangesModal(): void {
+    this.pendingChangesModal = false;
+  }
+
   private showModal(): void {
     this.showConfirmationModal = true;
   }