From 8cc51e2da1deab6f7e2af084aee18d9275f280d9 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Thu, 12 Dec 2024 15:43:08 +0000
Subject: [PATCH] Prevent leaving the page when the update is in progress

---
 _dev/src/ts/pages/UpdatePageUpdate.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/_dev/src/ts/pages/UpdatePageUpdate.ts b/_dev/src/ts/pages/UpdatePageUpdate.ts
index 0cf6d8cbb..fee59a34d 100644
--- a/_dev/src/ts/pages/UpdatePageUpdate.ts
+++ b/_dev/src/ts/pages/UpdatePageUpdate.ts
@@ -21,6 +21,8 @@ export default class UpdatePageUpdate extends UpdatePage {
     const stepContent = document.getElementById('ua_step_content')!;
     const updateAction = stepContent.dataset.initialProcessAction!;
 
+    this.#enableExitConfirmation();
+
     const process = new Process({
       onProcessResponse: this.#onProcessResponse,
       onProcessEnd: this.#onProcessEnd,
@@ -36,6 +38,7 @@ export default class UpdatePageUpdate extends UpdatePage {
     this.#restoreAlertForm?.removeEventListener('submit', this.#handleSubmit);
     this.#restoreButtonForm?.removeEventListener('submit', this.#handleSubmit);
     this.#submitErrorReportForm?.removeEventListener('submit', this.#handleSubmit);
+    this.#disableExitConfirmation();
   };
 
   get #progressTrackerContainer(): HTMLDivElement {
@@ -55,6 +58,7 @@ export default class UpdatePageUpdate extends UpdatePage {
   };
 
   #onProcessEnd = async (response: ApiResponseAction): Promise<void> => {
+    this.#disableExitConfirmation();
     if (response.error) {
       this.#onError(response);
     } else {
@@ -63,6 +67,7 @@ export default class UpdatePageUpdate extends UpdatePage {
   };
 
   #onError = (response: ApiResponseAction): void => {
+    this.#disableExitConfirmation();
     this.#progressTracker.updateProgress(response);
     this.#progressTracker.endProgress();
     this.#displayErrorAlert();
@@ -105,4 +110,19 @@ export default class UpdatePageUpdate extends UpdatePage {
 
     await api.post(form.dataset.routeToSubmit!);
   };
+
+  #enableExitConfirmation = () => {
+    window.addEventListener('beforeunload', this.#handleBeforeUnload);
+  };
+
+  #disableExitConfirmation = () => {
+    window.removeEventListener('beforeunload', this.#handleBeforeUnload);
+  };
+
+  #handleBeforeUnload = (event: Event) => {
+    event.preventDefault();
+
+    // Included for legacy support, e.g. Chrome/Edge < 119
+    event.returnValue = true;
+  };
 }