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

public/index.html

@@ -253,13 +253,14 @@
                 <div id="downloadProgressWrapper">
                     <div id="downloadProgress"></div>   
                 </div>
-                <div style="display: flex; gap: 20px;">
+                <div style="display: flex; gap: 20px; align-items: center;">
                     <div id="downloadProgressText"></div> 
                     <div id="downloadSpeedText"></div>
+                    <button type="button" id="stopBtn" onclick="stopDownload()" class="stop-btn" style="display:none;" title="Stop download">■</button>
                 </div>
             </div>
 
-            <div id="downloadStatus"></div>
+            <div id="downloadStatus" style="display: none;"></div>
 
             <div class="infos-container">
 

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

public/styles/components/progressBar.css

@@ -51,3 +51,39 @@
     font-size: 0.7rem;
   }
 }
+
+/* Stop Button */
+.stop-btn {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--form-button-bg-color);
+  color: var(--form-button-text-color);
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.stop-btn:hover:not(:disabled) {
+  background-color: var(--form-button-bg-hover-color);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
+  transform: scale(1.15);
+}
+
+.stop-btn:active:not(:disabled) {
+  transform: scale(0.96);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.stop-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}