feat(admin): implement provider-specific storage configuration pages

Refactor the admin storage backend creation and editing flows to use
provider-specific pages (e.g., `/admin/storage/new/sftp`) instead of a
single generic form. This ensures only relevant fields are rendered for
each storage provider (such as SFTP, S3, or WebDAV).

Additionally:
- Prevent mutation of the storage provider type during backend edits.
- Add comprehensive unit tests for provider-specific rendering, edit
  validation, and CSRF/admin route protection.

backend/static/js/20-storage-admin.js

@@ -1,125 +1,115 @@
 (function () {
-  const storageProviderSelects = document.querySelectorAll("[data-storage-provider]");
+  document.querySelectorAll("[data-storage-speed-open]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const modal = document.querySelector("[data-storage-speed-modal]");
+      if (modal) {
+        modal.hidden = false;
+      }
+    });
+  });
 
-  function syncStorageProvider(select) {
-    const formScope = select.closest("form");
-    if (!formScope) {
+  document.querySelectorAll("[data-storage-modal-close]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const modal = button.closest(".storage-modal");
+      if (modal) {
+        modal.hidden = true;
+      }
+    });
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") {
       return;
     }
-    const provider = select.value;
-    const isContabo = provider === "contabo";
-    formScope.querySelectorAll("[data-provider-fields]").forEach((group) => {
-      const providers = (group.getAttribute("data-provider-fields") || "").split(/\s+/);
-      const active = providers.includes(provider);
-      group.hidden = !active;
-      group.querySelectorAll("input, select, textarea").forEach((input) => {
-        input.disabled = !active;
-      });
+    document.querySelectorAll(".storage-modal").forEach((modal) => {
+      modal.hidden = true;
     });
-    const tls = formScope.querySelector('input[name="use_ssl"]');
-    const pathStyle = formScope.querySelector('input[name="path_style"]');
-    if (tls) {
-      tls.checked = isContabo || tls.checked;
-      tls.disabled = isContabo;
-    }
-    if (pathStyle) {
-      pathStyle.checked = isContabo || pathStyle.checked;
-      pathStyle.disabled = isContabo;
-    }
-  }
-
-  storageProviderSelects.forEach((select) => {
-    select.addEventListener("change", () => syncStorageProvider(select));
-    syncStorageProvider(select);
   });
 
-  document.querySelectorAll(".storage-edit-trigger").forEach((button) => {
-    button.addEventListener("click", () => {
-      const card = button.closest(".storage-card");
-      if (!card) {
+  document.querySelectorAll(".storage-speed-form").forEach((form) => {
+    const customFields = form.querySelector("[data-storage-custom-fields]");
+    function syncCustomFields() {
+      if (!customFields) {
         return;
       }
-      card.classList.add("is-editing");
-      const providerSelect = card.querySelector("[data-storage-provider]");
-      if (providerSelect) {
-        syncStorageProvider(providerSelect);
-      }
-    });
-  });
-
-  document.querySelectorAll(".storage-cancel-trigger").forEach((button) => {
-    button.addEventListener("click", () => {
-      const card = button.closest(".storage-card");
-      if (!card) {
-        return;
-      }
-      const form = card.querySelector("form");
-      if (form) {
-        form.reset();
-      }
-      card.classList.remove("is-editing");
-    });
-  });
-
-  const storageAddTrigger = document.querySelector(".storage-add-trigger");
-  const storageTypePicker = document.querySelector(".storage-type-picker");
-  const storageNewCard = document.querySelector(".storage-new-card");
-
-  const providerLabels = {
-    s3: "S3 bucket",
-    contabo: "Contabo Object Storage",
-    sftp: "SFTP",
-    smb: "Samba",
-    webdav: "WebDAV",
-  };
-
-  if (storageAddTrigger && storageTypePicker) {
-    storageAddTrigger.addEventListener("click", () => {
-      storageTypePicker.hidden = !storageTypePicker.hidden;
-      if (storageNewCard && !storageTypePicker.hidden) {
-        storageNewCard.hidden = true;
-      }
-    });
-
-    storageTypePicker.querySelectorAll(".storage-type-option").forEach((option) => {
-      option.addEventListener("click", () => {
-        const provider = option.dataset.provider;
-        if (!storageNewCard) {
-          return;
-        }
-
-        const providerSelect = storageNewCard.querySelector("[data-storage-provider]");
-        if (providerSelect) {
-          providerSelect.value = provider;
-          syncStorageProvider(providerSelect);
-        }
-
-        const typeBadge = storageNewCard.querySelector(".storage-new-type-badge");
-        if (typeBadge) {
-          typeBadge.textContent = providerLabels[provider] || provider;
-        }
-
-        const iconEl = storageNewCard.querySelector(".storage-new-icon");
-        const optIcon = option.querySelector("svg");
-        if (iconEl && optIcon) {
-          iconEl.innerHTML = optIcon.outerHTML;
-        }
-
-        storageTypePicker.hidden = true;
-        storageNewCard.hidden = false;
-      });
-    });
-  }
-
-  if (storageNewCard) {
-    const cancelBtn = storageNewCard.querySelector(".storage-new-cancel");
-    if (cancelBtn) {
-      cancelBtn.addEventListener("click", () => {
-        storageNewCard.hidden = true;
-        if (storageTypePicker) {
-          storageTypePicker.hidden = true;
-        }
+      const customSelected = form.querySelector('input[name="mode"]:checked')?.value === "custom";
+      customFields.hidden = !customSelected;
+      customFields.querySelectorAll("input").forEach((input) => {
+        input.disabled = !customSelected;
       });
     }
+    form.querySelectorAll('input[name="mode"]').forEach((input) => {
+      input.addEventListener("change", syncCustomFields);
+    });
+    syncCustomFields();
+  });
+
+  const testList = document.querySelector("[data-storage-tests-page]");
+  if (!testList) {
+    return;
   }
+
+  function escapeHTML(value) {
+    return String(value || "").replace(/[&<>"']/g, (char) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+    })[char]);
+  }
+
+  function renderTest(test) {
+    const progress = Math.max(0, Math.min(100, Number(test.progress || 0)));
+    const error = test.error
+      ? `<span class="storage-result-error"><strong>Error</strong>${escapeHTML(test.error)}</span>`
+      : "";
+    return `
+      <details class="storage-result-row" data-storage-test-id="${escapeHTML(test.id)}">
+        <summary>
+          <span>${escapeHTML(test.startedLabel)}</span>
+          <span>${escapeHTML(test.customLabel || test.modeLabel)}</span>
+          <span class="storage-result-status is-${escapeHTML(test.status)}">${escapeHTML(test.status)}</span>
+        </summary>
+        <div class="storage-test-progress" aria-label="Test progress">
+          <div class="storage-test-progress-bar"><span style="width: ${progress}%"></span></div>
+          <small>${progress}%${test.stage ? " · " + escapeHTML(test.stage) : ""}</small>
+        </div>
+        <div class="storage-result-detail">
+          <span><strong>Finished</strong>${escapeHTML(test.finishedLabel)}</span>
+          <span><strong>Files</strong>${escapeHTML(test.files)}</span>
+          <span><strong>Size</strong>${escapeHTML(test.sizeLabel)}</span>
+          <span><strong>Write</strong>${escapeHTML(test.writeSpeed)}</span>
+          <span><strong>Read</strong>${escapeHTML(test.readSpeed)}</span>
+          ${error}
+        </div>
+      </details>`;
+  }
+
+  async function refreshTests() {
+    const url = testList.getAttribute("data-storage-tests-url");
+    if (!url) {
+      return;
+    }
+    const response = await fetch(url, { headers: { Accept: "application/json" } });
+    if (!response.ok) {
+      return;
+    }
+    const payload = await response.json();
+    const openIDs = new Set(Array.from(testList.querySelectorAll("details[open]")).map((row) => row.dataset.storageTestId));
+    const tests = payload.tests || [];
+    if (tests.length === 0) {
+      return;
+    }
+    testList.innerHTML = tests.map(renderTest).join("");
+    testList.querySelectorAll("details").forEach((row) => {
+      if (openIDs.has(row.dataset.storageTestId)) {
+        row.open = true;
+      }
+    });
+  }
+
+  setInterval(() => {
+    refreshTests().catch(() => {});
+  }, 1200);
 })();