feat(admin): implement provider-specific storage configuration pages
Some checks failed
Build and Publish Docker Image / deploy (push) Has been cancelled
Some checks failed
Build and Publish Docker Image / deploy (push) Has been cancelled
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.
This commit is contained in:
@@ -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) => ({
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': """,
|
||||
"'": "'",
|
||||
})[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);
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user