Feat: Implement download cancellation feature with stop button and progress handling

public/script/downloadstatus.js

@@ -1,11 +1,17 @@
 const form = document.getElementById("downloadForm");
 const statusDiv = document.getElementById("downloadStatus");
-const button = form.querySelector("button");
+const button = form.querySelector("button[type=\"submit\"]");
+const stopBtn = document.getElementById("stopBtn");
+let isDownloading = false;
+let userStoppedDownload = false;
 
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
-  button.disabled = true; // Avoid multiple clicks
-  statusDiv.textContent = "Download in progress...";
+  button.disabled = true;
+  stopBtn.style.display = "inline-flex";
+  statusDiv.style.display = "none"; // Hide status div
+  isDownloading = true;
+  userStoppedDownload = false;
 
   const formData = new FormData(form);
   const params = new URLSearchParams(formData);
@@ -18,20 +24,51 @@ form.addEventListener("submit", async (e) => {
     });
 
     if (!res.ok) {
-      statusDiv.textContent = res;
+      if (!userStoppedDownload) {
+        const errorText = await res.text();
+        statusDiv.textContent = errorText;
+        statusDiv.style.display = "block";
+      }
       return;
     }
 
-    const text = await res.text();
-    statusDiv.textContent = text;
-
-  } catch {
-    statusDiv.textContent = "❌ An Error has Occured.";
+  } catch (err) {
+    if (!isDownloading && !userStoppedDownload) {
+      statusDiv.style.display = "none";
+    }
   } finally {
+    isDownloading = false;
     button.disabled = false;
-
-    setTimeout(() => {
-      statusDiv.textContent = "";
-    }, 5000);
+    stopBtn.style.display = "none";
   }
-});
+});
+
+async function stopDownload() {
+  if (!isDownloading) return;
+
+  userStoppedDownload = true;
+  button.disabled = true;
+  stopBtn.disabled = true;
+
+  try {
+    await fetch("/download/cancel", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    });
+    
+  } catch (err) {
+    console.error("Error stopping download:", err);
+  } finally {
+    isDownloading = false;
+    button.disabled = false;
+    stopBtn.disabled = false;
+    stopBtn.style.display = "none";
+
+    // Reset progress bar
+    const progressWrapper = document.getElementById("downloadProgressWrapper");
+    if (progressWrapper) progressWrapper.style.display = "none";
+    
+    const progressBar = document.getElementById("downloadProgress");
+    if (progressBar) progressBar.style.width = "0%";
+  }
+}

public/script/progressBar.js

@@ -13,6 +13,10 @@ function startProgress() {
 
   speedElement.style.display = "block";
   speedElement.innerHTML = "0 Mib/s";
+
+  // Show stop button
+  const stopBtn = document.getElementById("stopBtn");
+  if (stopBtn) stopBtn.style.display = "inline-block";
 }
 
 function updateProgress(percent) {
@@ -28,6 +32,10 @@ function resetProgress() {
 
   speedElement.textContent = "0 Mib/s";
   speedElement.style.display = "none";
+
+  // Hide stop button
+  const stopBtn = document.getElementById("stopBtn");
+  if (stopBtn) stopBtn.style.display = "none";
 }
 
 // SSE Connexion