@matdata/yasgui 5.4.0 → 5.5.0

package/build/ts/src/TabSettingsModal.js

@@ -90,48 +90,55 @@ export default class TabSettingsModal {
         this.modalContent.appendChild(header);
         const body = document.createElement("div");
         addClass(body, "modalBody");
-        const tabsContainer = document.createElement("div");
-        addClass(tabsContainer, "modalTabs");
+        const sidebar = document.createElement("div");
+        addClass(sidebar, "modalSidebar");
         const requestTab = document.createElement("button");
         requestTab.textContent = "Request";
-        addClass(requestTab, "modalTabButton", "active");
+        addClass(requestTab, "modalNavButton", "active");
         requestTab.onclick = () => this.switchTab("request");
+        const endpointsTab = document.createElement("button");
+        endpointsTab.textContent = "SPARQL Endpoints";
+        addClass(endpointsTab, "modalNavButton");
+        endpointsTab.onclick = () => this.switchTab("endpoints");
         const prefixTab = document.createElement("button");
         prefixTab.textContent = "Prefixes";
-        addClass(prefixTab, "modalTabButton");
+        addClass(prefixTab, "modalNavButton");
         prefixTab.onclick = () => this.switchTab("prefix");
         const editorTab = document.createElement("button");
         editorTab.textContent = "Editor";
-        addClass(editorTab, "modalTabButton");
+        addClass(editorTab, "modalNavButton");
         editorTab.onclick = () => this.switchTab("editor");
-        const endpointsTab = document.createElement("button");
-        endpointsTab.textContent = "Endpoint Buttons";
-        addClass(endpointsTab, "modalTabButton");
-        endpointsTab.onclick = () => this.switchTab("endpoints");
         const importExportTab = document.createElement("button");
         importExportTab.textContent = "Import/Export";
-        addClass(importExportTab, "modalTabButton");
+        addClass(importExportTab, "modalNavButton");
         importExportTab.onclick = () => this.switchTab("importexport");
         const shortcutsTab = document.createElement("button");
         shortcutsTab.textContent = "Keyboard Shortcuts";
-        addClass(shortcutsTab, "modalTabButton");
+        addClass(shortcutsTab, "modalNavButton");
         shortcutsTab.onclick = () => this.switchTab("shortcuts");
         const aboutTab = document.createElement("button");
         aboutTab.textContent = "About";
-        addClass(aboutTab, "modalTabButton");
+        addClass(aboutTab, "modalNavButton");
         aboutTab.onclick = () => this.switchTab("about");
-        tabsContainer.appendChild(requestTab);
-        tabsContainer.appendChild(prefixTab);
-        tabsContainer.appendChild(editorTab);
-        tabsContainer.appendChild(endpointsTab);
-        tabsContainer.appendChild(importExportTab);
-        tabsContainer.appendChild(shortcutsTab);
-        tabsContainer.appendChild(aboutTab);
-        body.appendChild(tabsContainer);
+        sidebar.appendChild(requestTab);
+        sidebar.appendChild(endpointsTab);
+        sidebar.appendChild(prefixTab);
+        sidebar.appendChild(editorTab);
+        sidebar.appendChild(importExportTab);
+        sidebar.appendChild(shortcutsTab);
+        sidebar.appendChild(aboutTab);
+        const contentArea = document.createElement("div");
+        addClass(contentArea, "modalContentArea");
+        body.appendChild(sidebar);
+        body.appendChild(contentArea);
         const requestContent = document.createElement("div");
         addClass(requestContent, "modalTabContent", "active");
         requestContent.id = "request-content";
         this.drawRequestSettings(requestContent);
+        const endpointsContent = document.createElement("div");
+        addClass(endpointsContent, "modalTabContent");
+        endpointsContent.id = "endpoints-content";
+        this.drawEndpointsSettings(endpointsContent);
         const prefixContent = document.createElement("div");
         addClass(prefixContent, "modalTabContent");
         prefixContent.id = "prefix-content";
@@ -140,10 +147,6 @@ export default class TabSettingsModal {
         addClass(editorContent, "modalTabContent");
         editorContent.id = "editor-content";
         this.drawEditorSettings(editorContent);
-        const endpointsContent = document.createElement("div");
-        addClass(endpointsContent, "modalTabContent");
-        endpointsContent.id = "endpoints-content";
-        this.drawEndpointButtonsSettings(endpointsContent);
         const importExportContent = document.createElement("div");
         addClass(importExportContent, "modalTabContent");
         importExportContent.id = "importexport-content";
@@ -156,13 +159,13 @@ export default class TabSettingsModal {
         addClass(aboutContent, "modalTabContent");
         aboutContent.id = "about-content";
         this.drawAboutSettings(aboutContent);
-        body.appendChild(requestContent);
-        body.appendChild(prefixContent);
-        body.appendChild(editorContent);
-        body.appendChild(endpointsContent);
-        body.appendChild(importExportContent);
-        body.appendChild(shortcutsContent);
-        body.appendChild(aboutContent);
+        contentArea.appendChild(requestContent);
+        contentArea.appendChild(endpointsContent);
+        contentArea.appendChild(prefixContent);
+        contentArea.appendChild(editorContent);
+        contentArea.appendChild(importExportContent);
+        contentArea.appendChild(shortcutsContent);
+        contentArea.appendChild(aboutContent);
         this.modalContent.appendChild(body);
         const footer = document.createElement("div");
         addClass(footer, "modalFooter");
@@ -181,13 +184,13 @@ export default class TabSettingsModal {
         document.body.appendChild(this.modalOverlay);
     }
     switchTab(tabName) {
-        const buttons = this.modalContent.querySelectorAll(".modalTabButton");
+        const buttons = this.modalContent.querySelectorAll(".modalNavButton");
         const contents = this.modalContent.querySelectorAll(".modalTabContent");
         buttons.forEach((btn, index) => {
             if ((tabName === "request" && index === 0) ||
-                (tabName === "prefix" && index === 1) ||
-                (tabName === "editor" && index === 2) ||
-                (tabName === "endpoints" && index === 3) ||
+                (tabName === "endpoints" && index === 1) ||
+                (tabName === "prefix" && index === 2) ||
+                (tabName === "editor" && index === 3) ||
                 (tabName === "importexport" && index === 4) ||
                 (tabName === "shortcuts" && index === 5) ||
                 (tabName === "about" && index === 6)) {
@@ -338,6 +341,296 @@ export default class TabSettingsModal {
         snippetsBarSection.appendChild(snippetsBarHelp);
         container.appendChild(snippetsBarSection);
     }
+    drawEndpointsSettings(container) {
+        const section = document.createElement("div");
+        addClass(section, "settingsSection");
+        const label = document.createElement("label");
+        label.textContent = "SPARQL Endpoints";
+        addClass(label, "settingsLabel");
+        const help = document.createElement("div");
+        help.textContent =
+            "Manage your SPARQL endpoints. Each endpoint can have its own authentication and be displayed as a quick-switch button.";
+        addClass(help, "settingsHelp");
+        section.appendChild(label);
+        section.appendChild(help);
+        const endpointsList = document.createElement("div");
+        addClass(endpointsList, "endpointsTable");
+        this.renderEndpointsList(endpointsList);
+        section.appendChild(endpointsList);
+        container.appendChild(section);
+    }
+    renderEndpointsList(container) {
+        container.innerHTML = "";
+        const configs = this.tab.yasgui.persistentConfig.getEndpointConfigs();
+        const table = document.createElement("table");
+        addClass(table, "endpointsTableElement");
+        const thead = document.createElement("thead");
+        const headerRow = document.createElement("tr");
+        const headers = ["Endpoint", "Label", "Button", "Authentication", "Actions"];
+        headers.forEach((h) => {
+            const th = document.createElement("th");
+            th.textContent = h;
+            headerRow.appendChild(th);
+        });
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+        const tbody = document.createElement("tbody");
+        if (configs.length === 0) {
+            const emptyRow = document.createElement("tr");
+            const emptyCell = document.createElement("td");
+            emptyCell.colSpan = 5;
+            emptyCell.textContent = "No endpoints yet. Add one below or access an endpoint to have it automatically tracked.";
+            addClass(emptyCell, "emptyMessage");
+            emptyCell.style.textAlign = "center";
+            emptyCell.style.padding = "20px";
+            emptyRow.appendChild(emptyCell);
+            tbody.appendChild(emptyRow);
+        }
+        configs.forEach((config, index) => {
+            const row = document.createElement("tr");
+            const endpointCell = document.createElement("td");
+            endpointCell.textContent = config.endpoint;
+            endpointCell.title = config.endpoint;
+            addClass(endpointCell, "endpointCell");
+            row.appendChild(endpointCell);
+            const labelCell = document.createElement("td");
+            const labelInput = document.createElement("input");
+            labelInput.type = "text";
+            labelInput.value = config.label || "";
+            labelInput.placeholder = "Optional label";
+            addClass(labelInput, "endpointLabelInput");
+            labelInput.onchange = () => {
+                this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(config.endpoint, {
+                    label: labelInput.value.trim() || undefined,
+                });
+                this.renderEndpointsList(container);
+                this.tab.refreshEndpointButtons();
+            };
+            labelCell.appendChild(labelInput);
+            row.appendChild(labelCell);
+            const buttonCell = document.createElement("td");
+            const buttonCheckbox = document.createElement("input");
+            buttonCheckbox.type = "checkbox";
+            buttonCheckbox.checked = !!config.showAsButton;
+            buttonCheckbox.disabled = !config.label;
+            buttonCheckbox.setAttribute("aria-label", config.label ? "Show this endpoint as a quick-switch button" : "Add a label first to enable button");
+            buttonCheckbox.title = config.label
+                ? "Show this endpoint as a quick-switch button"
+                : "Add a label first to enable button";
+            buttonCheckbox.onchange = () => {
+                this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(config.endpoint, {
+                    showAsButton: buttonCheckbox.checked,
+                });
+                this.tab.refreshEndpointButtons();
+            };
+            buttonCell.appendChild(buttonCheckbox);
+            addClass(buttonCell, "centerCell");
+            row.appendChild(buttonCell);
+            const authCell = document.createElement("td");
+            const authButton = document.createElement("button");
+            authButton.type = "button";
+            addClass(authButton, "configureAuthButton");
+            if (config.authentication) {
+                authButton.textContent = "✓ Configured";
+                addClass(authButton, "authenticated");
+            }
+            else {
+                authButton.textContent = "Configure";
+            }
+            authButton.onclick = () => this.showAuthenticationModal(config.endpoint);
+            authCell.appendChild(authButton);
+            addClass(authCell, "centerCell");
+            row.appendChild(authCell);
+            const actionsCell = document.createElement("td");
+            const deleteButton = document.createElement("button");
+            deleteButton.type = "button";
+            deleteButton.textContent = "Delete";
+            addClass(deleteButton, "deleteEndpointButton");
+            deleteButton.onclick = () => {
+                if (confirm(`Delete endpoint "${config.endpoint}"?`)) {
+                    this.tab.yasgui.persistentConfig.deleteEndpointConfig(config.endpoint);
+                    this.renderEndpointsList(container);
+                    this.tab.refreshEndpointButtons();
+                }
+            };
+            actionsCell.appendChild(deleteButton);
+            addClass(actionsCell, "centerCell");
+            row.appendChild(actionsCell);
+            tbody.appendChild(row);
+        });
+        table.appendChild(tbody);
+        container.appendChild(table);
+        const addForm = document.createElement("div");
+        addClass(addForm, "addEndpointForm");
+        const addFormTitle = document.createElement("div");
+        addFormTitle.textContent = "Add New Endpoint";
+        addClass(addFormTitle, "addFormTitle");
+        addForm.appendChild(addFormTitle);
+        const formInputs = document.createElement("div");
+        addClass(formInputs, "addFormInputs");
+        const endpointInput = document.createElement("input");
+        endpointInput.type = "url";
+        endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
+        addClass(endpointInput, "addEndpointInput");
+        formInputs.appendChild(endpointInput);
+        const addButton = document.createElement("button");
+        addButton.type = "button";
+        addButton.textContent = "+ Add Endpoint";
+        addClass(addButton, "addEndpointButton");
+        addButton.onclick = () => {
+            const endpoint = endpointInput.value.trim();
+            if (!endpoint) {
+                alert("Please enter an endpoint URL.");
+                return;
+            }
+            if (!/^https?:\/\//i.test(endpoint)) {
+                alert("Endpoint URL must start with http:// or https://");
+                return;
+            }
+            try {
+                new URL(endpoint);
+            }
+            catch (e) {
+                alert(e instanceof Error && e.message ? "Malformed URL: " + e.message : "Please enter a valid URL.");
+                return;
+            }
+            const existing = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+            if (existing) {
+                alert("This endpoint is already in the list.");
+                return;
+            }
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {});
+            endpointInput.value = "";
+            this.renderEndpointsList(container);
+            this.tab.refreshEndpointButtons();
+        };
+        formInputs.appendChild(addButton);
+        addForm.appendChild(formInputs);
+        container.appendChild(addForm);
+    }
+    showAuthenticationModal(endpoint) {
+        const config = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+        const existingAuth = config === null || config === void 0 ? void 0 : config.authentication;
+        const authModalOverlay = document.createElement("div");
+        addClass(authModalOverlay, "authModalOverlay");
+        authModalOverlay.onclick = () => authModalOverlay.remove();
+        const authModal = document.createElement("div");
+        addClass(authModal, "authModal");
+        authModal.onclick = (e) => e.stopPropagation();
+        const header = document.createElement("div");
+        addClass(header, "authModalHeader");
+        const title = document.createElement("h3");
+        title.textContent = "Configure Authentication";
+        const subtitle = document.createElement("div");
+        subtitle.textContent = endpoint;
+        addClass(subtitle, "authModalSubtitle");
+        header.appendChild(title);
+        header.appendChild(subtitle);
+        authModal.appendChild(header);
+        const body = document.createElement("div");
+        addClass(body, "authModalBody");
+        const typeSection = document.createElement("div");
+        addClass(typeSection, "authModalSection");
+        const typeLabel = document.createElement("label");
+        typeLabel.textContent = "Authentication Type";
+        const typeSelect = document.createElement("select");
+        const basicOption = document.createElement("option");
+        basicOption.value = "basic";
+        basicOption.textContent = "HTTP Basic Authentication";
+        typeSelect.appendChild(basicOption);
+        typeSection.appendChild(typeLabel);
+        typeSection.appendChild(typeSelect);
+        body.appendChild(typeSection);
+        const usernameSection = document.createElement("div");
+        addClass(usernameSection, "authModalSection");
+        const usernameLabel = document.createElement("label");
+        usernameLabel.textContent = "Username";
+        const usernameInput = document.createElement("input");
+        usernameInput.type = "text";
+        usernameInput.placeholder = "Enter username";
+        usernameInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.username) || "";
+        usernameInput.autocomplete = "username";
+        usernameSection.appendChild(usernameLabel);
+        usernameSection.appendChild(usernameInput);
+        body.appendChild(usernameSection);
+        const passwordSection = document.createElement("div");
+        addClass(passwordSection, "authModalSection");
+        const passwordLabel = document.createElement("label");
+        passwordLabel.textContent = "Password";
+        const passwordInput = document.createElement("input");
+        passwordInput.type = "password";
+        passwordInput.placeholder = "Enter password";
+        passwordInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.password) || "";
+        passwordInput.autocomplete = "current-password";
+        passwordSection.appendChild(passwordLabel);
+        passwordSection.appendChild(passwordInput);
+        body.appendChild(passwordSection);
+        const securityNotice = document.createElement("div");
+        addClass(securityNotice, "authSecurityNotice");
+        securityNotice.innerHTML = `
+      <strong>⚠️ Security Notice:</strong>
+      <ul>
+        <li>Credentials are stored in browser localStorage</li>
+        <li>Only use with HTTPS endpoints</li>
+        <li>Be cautious when using on shared computers</li>
+      </ul>
+    `;
+        body.appendChild(securityNotice);
+        authModal.appendChild(body);
+        const footer = document.createElement("div");
+        addClass(footer, "authModalFooter");
+        const removeButton = document.createElement("button");
+        removeButton.textContent = "Remove Authentication";
+        removeButton.type = "button";
+        addClass(removeButton, "authRemoveButton");
+        removeButton.onclick = () => {
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                authentication: undefined,
+            });
+            authModalOverlay.remove();
+            const endpointsList = this.modalContent.querySelector(".endpointsTable");
+            if (endpointsList)
+                this.renderEndpointsList(endpointsList);
+        };
+        if (!existingAuth) {
+            removeButton.disabled = true;
+        }
+        const cancelButton = document.createElement("button");
+        cancelButton.textContent = "Cancel";
+        cancelButton.type = "button";
+        addClass(cancelButton, "authCancelButton");
+        cancelButton.onclick = () => authModalOverlay.remove();
+        const saveButton = document.createElement("button");
+        saveButton.textContent = "Save";
+        saveButton.type = "button";
+        addClass(saveButton, "authSaveButton");
+        saveButton.onclick = () => {
+            const username = usernameInput.value.trim();
+            const password = passwordInput.value;
+            if (username && password) {
+                this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                    authentication: {
+                        type: "basic",
+                        username,
+                        password,
+                    },
+                });
+                authModalOverlay.remove();
+                const endpointsList = this.modalContent.querySelector(".endpointsTable");
+                if (endpointsList)
+                    this.renderEndpointsList(endpointsList);
+            }
+            else {
+                alert("Please enter both username and password.");
+            }
+        };
+        footer.appendChild(removeButton);
+        footer.appendChild(cancelButton);
+        footer.appendChild(saveButton);
+        authModal.appendChild(footer);
+        authModalOverlay.appendChild(authModal);
+        document.body.appendChild(authModalOverlay);
+    }
     drawRequestSettings(container) {
         const reqConfig = this.tab.getRequestConfig();
         const methodSection = this.createSection("Request Method");
@@ -523,90 +816,6 @@ export default class TabSettingsModal {
         const deduplicated = this.deduplicatePrefixes(combined);
         this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     }
-    drawEndpointButtonsSettings(container) {
-        const section = document.createElement("div");
-        addClass(section, "settingsSection");
-        const label = document.createElement("label");
-        label.textContent = "Custom Endpoint Buttons";
-        addClass(label, "settingsLabel");
-        const help = document.createElement("div");
-        help.textContent = "Add custom endpoint buttons that will appear next to the endpoint textbox.";
-        addClass(help, "settingsHelp");
-        section.appendChild(label);
-        section.appendChild(help);
-        const buttonsList = document.createElement("div");
-        addClass(buttonsList, "endpointButtonsList");
-        this.renderEndpointButtonsList(buttonsList);
-        section.appendChild(buttonsList);
-        const addForm = document.createElement("div");
-        addClass(addForm, "addEndpointButtonForm");
-        const labelInput = document.createElement("input");
-        labelInput.type = "text";
-        labelInput.placeholder = "Button label (e.g., DBpedia)";
-        addClass(labelInput, "endpointButtonLabelInput");
-        const endpointInput = document.createElement("input");
-        endpointInput.type = "url";
-        endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
-        addClass(endpointInput, "endpointButtonEndpointInput");
-        const addButton = document.createElement("button");
-        addButton.textContent = "+ Add Button";
-        addClass(addButton, "addEndpointButton");
-        addButton.type = "button";
-        addButton.onclick = () => {
-            const labelValue = labelInput.value.trim();
-            const endpointValue = endpointInput.value.trim();
-            if (!labelValue || !endpointValue) {
-                alert("Please enter both a label and an endpoint URL.");
-                return;
-            }
-            const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-            currentButtons.push({ label: labelValue, endpoint: endpointValue });
-            this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
-            labelInput.value = "";
-            endpointInput.value = "";
-            this.renderEndpointButtonsList(buttonsList);
-        };
-        addForm.appendChild(labelInput);
-        addForm.appendChild(endpointInput);
-        addForm.appendChild(addButton);
-        section.appendChild(addForm);
-        container.appendChild(section);
-    }
-    renderEndpointButtonsList(container) {
-        container.innerHTML = "";
-        const customButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-        if (customButtons.length === 0) {
-            const emptyMsg = document.createElement("div");
-            emptyMsg.textContent = "No custom buttons yet. Add one below.";
-            addClass(emptyMsg, "emptyMessage");
-            container.appendChild(emptyMsg);
-            return;
-        }
-        customButtons.forEach((btn, index) => {
-            const item = document.createElement("div");
-            addClass(item, "endpointButtonItem");
-            const labelSpan = document.createElement("span");
-            labelSpan.textContent = `${btn.label}`;
-            addClass(labelSpan, "buttonLabel");
-            const endpointSpan = document.createElement("span");
-            endpointSpan.textContent = btn.endpoint;
-            addClass(endpointSpan, "buttonEndpoint");
-            const removeBtn = document.createElement("button");
-            removeBtn.textContent = "×";
-            addClass(removeBtn, "removeButton");
-            removeBtn.type = "button";
-            removeBtn.onclick = () => {
-                const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-                currentButtons.splice(index, 1);
-                this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
-                this.renderEndpointButtonsList(container);
-            };
-            item.appendChild(labelSpan);
-            item.appendChild(endpointSpan);
-            item.appendChild(removeBtn);
-            container.appendChild(item);
-        });
-    }
     getThemeToggleIcon() {
         const currentTheme = this.tab.yasgui.getTheme();
         return currentTheme === "dark" ? MOON_ICON : SUN_ICON;