@matdata/yasgui 5.5.0 → 5.7.0

package/build/ts/src/TabSettingsModal.js

@@ -11,6 +11,8 @@ import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import * as ConfigExportImport from "./ConfigExportImport";
 import { VERSION } from "./version";
+import * as OAuth2Utils from "./OAuth2Utils";
+import PersistentConfig from "./PersistentConfig";
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
   <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
 </svg>`;
@@ -36,6 +38,7 @@ const AcceptHeaderGraphMap = [
     { key: "CSV", value: "text/csv,*/*;q=0.9" },
     { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
 ];
+const DEFAULT_API_KEY_HEADER = "X-API-Key";
 export default class TabSettingsModal {
     constructor(tab, controlBarEl) {
         this.tab = tab;
@@ -73,7 +76,6 @@ export default class TabSettingsModal {
     createModal() {
         this.modalOverlay = document.createElement("div");
         addClass(this.modalOverlay, "tabSettingsModalOverlay");
-        this.modalOverlay.onclick = () => this.close();
         this.modalContent = document.createElement("div");
         addClass(this.modalContent, "tabSettingsModal");
         this.modalContent.onclick = (e) => e.stopPropagation();
@@ -326,7 +328,9 @@ export default class TabSettingsModal {
         const snippetsBarCheckbox = document.createElement("input");
         snippetsBarCheckbox.type = "checkbox";
         snippetsBarCheckbox.id = "showSnippetsBar";
-        snippetsBarCheckbox.checked = yasqe.getSnippetsBarVisible();
+        const persistedValue = this.tab.yasgui.persistentConfig.getShowSnippetsBar();
+        snippetsBarCheckbox.checked =
+            persistedValue !== undefined ? persistedValue : this.tab.yasgui.config.showSnippetsBar !== false;
         const snippetsBarLabel = document.createElement("label");
         snippetsBarLabel.htmlFor = "showSnippetsBar";
         snippetsBarLabel.textContent = "Show code snippets bar";
@@ -538,9 +542,27 @@ export default class TabSettingsModal {
         basicOption.value = "basic";
         basicOption.textContent = "HTTP Basic Authentication";
         typeSelect.appendChild(basicOption);
+        const bearerOption = document.createElement("option");
+        bearerOption.value = "bearer";
+        bearerOption.textContent = "Bearer Token";
+        typeSelect.appendChild(bearerOption);
+        const apiKeyOption = document.createElement("option");
+        apiKeyOption.value = "apiKey";
+        apiKeyOption.textContent = "API Key (Custom Header)";
+        typeSelect.appendChild(apiKeyOption);
+        const oauth2Option = document.createElement("option");
+        oauth2Option.value = "oauth2";
+        oauth2Option.textContent = "OAuth 2.0";
+        typeSelect.appendChild(oauth2Option);
+        if (existingAuth) {
+            typeSelect.value = existingAuth.type;
+        }
         typeSection.appendChild(typeLabel);
         typeSection.appendChild(typeSelect);
         body.appendChild(typeSection);
+        const basicAuthFields = document.createElement("div");
+        basicAuthFields.id = "basicAuthFields";
+        addClass(basicAuthFields, "authFieldsContainer");
         const usernameSection = document.createElement("div");
         addClass(usernameSection, "authModalSection");
         const usernameLabel = document.createElement("label");
@@ -548,11 +570,11 @@ export default class TabSettingsModal {
         const usernameInput = document.createElement("input");
         usernameInput.type = "text";
         usernameInput.placeholder = "Enter username";
-        usernameInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.username) || "";
+        usernameInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "basic" ? existingAuth.username : "";
         usernameInput.autocomplete = "username";
         usernameSection.appendChild(usernameLabel);
         usernameSection.appendChild(usernameInput);
-        body.appendChild(usernameSection);
+        basicAuthFields.appendChild(usernameSection);
         const passwordSection = document.createElement("div");
         addClass(passwordSection, "authModalSection");
         const passwordLabel = document.createElement("label");
@@ -560,11 +582,153 @@ export default class TabSettingsModal {
         const passwordInput = document.createElement("input");
         passwordInput.type = "password";
         passwordInput.placeholder = "Enter password";
-        passwordInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.password) || "";
+        passwordInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "basic" ? existingAuth.password : "";
         passwordInput.autocomplete = "current-password";
         passwordSection.appendChild(passwordLabel);
         passwordSection.appendChild(passwordInput);
-        body.appendChild(passwordSection);
+        basicAuthFields.appendChild(passwordSection);
+        body.appendChild(basicAuthFields);
+        const bearerAuthFields = document.createElement("div");
+        bearerAuthFields.id = "bearerAuthFields";
+        addClass(bearerAuthFields, "authFieldsContainer");
+        bearerAuthFields.style.display = "none";
+        const tokenSection = document.createElement("div");
+        addClass(tokenSection, "authModalSection");
+        const tokenLabel = document.createElement("label");
+        tokenLabel.textContent = "Bearer Token";
+        const tokenInput = document.createElement("input");
+        tokenInput.type = "password";
+        tokenInput.placeholder = "Enter bearer token";
+        tokenInput.autocomplete = "off";
+        tokenInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "bearer" ? existingAuth.token : "";
+        tokenSection.appendChild(tokenLabel);
+        tokenSection.appendChild(tokenInput);
+        bearerAuthFields.appendChild(tokenSection);
+        body.appendChild(bearerAuthFields);
+        const apiKeyAuthFields = document.createElement("div");
+        apiKeyAuthFields.id = "apiKeyAuthFields";
+        addClass(apiKeyAuthFields, "authFieldsContainer");
+        apiKeyAuthFields.style.display = "none";
+        const headerNameSection = document.createElement("div");
+        addClass(headerNameSection, "authModalSection");
+        const headerNameLabel = document.createElement("label");
+        headerNameLabel.textContent = "Header Name";
+        const headerNameInput = document.createElement("input");
+        headerNameInput.type = "text";
+        headerNameInput.placeholder = `e.g., ${DEFAULT_API_KEY_HEADER}`;
+        headerNameInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "apiKey" ? existingAuth.headerName : DEFAULT_API_KEY_HEADER;
+        headerNameSection.appendChild(headerNameLabel);
+        headerNameSection.appendChild(headerNameInput);
+        apiKeyAuthFields.appendChild(headerNameSection);
+        const apiKeySection = document.createElement("div");
+        addClass(apiKeySection, "authModalSection");
+        const apiKeyLabel = document.createElement("label");
+        apiKeyLabel.textContent = "API Key";
+        const apiKeyInput = document.createElement("input");
+        apiKeyInput.type = "password";
+        apiKeyInput.placeholder = "Enter API key";
+        apiKeyInput.autocomplete = "off";
+        apiKeyInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "apiKey" ? existingAuth.apiKey : "";
+        apiKeySection.appendChild(apiKeyLabel);
+        apiKeySection.appendChild(apiKeyInput);
+        apiKeyAuthFields.appendChild(apiKeySection);
+        body.appendChild(apiKeyAuthFields);
+        const oauth2AuthFields = document.createElement("div");
+        oauth2AuthFields.id = "oauth2AuthFields";
+        addClass(oauth2AuthFields, "authFieldsContainer");
+        oauth2AuthFields.style.display = "none";
+        const clientIdSection = document.createElement("div");
+        addClass(clientIdSection, "authModalSection");
+        const clientIdLabel = document.createElement("label");
+        clientIdLabel.textContent = "Client ID";
+        const clientIdInput = document.createElement("input");
+        clientIdInput.type = "text";
+        clientIdInput.placeholder = "Enter OAuth 2.0 client ID";
+        clientIdInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" ? existingAuth.clientId : "";
+        clientIdSection.appendChild(clientIdLabel);
+        clientIdSection.appendChild(clientIdInput);
+        oauth2AuthFields.appendChild(clientIdSection);
+        const authEndpointSection = document.createElement("div");
+        addClass(authEndpointSection, "authModalSection");
+        const authEndpointLabel = document.createElement("label");
+        authEndpointLabel.textContent = "Authorization Endpoint";
+        const authEndpointInput = document.createElement("input");
+        authEndpointInput.type = "url";
+        authEndpointInput.placeholder = "https://provider.com/oauth/authorize";
+        authEndpointInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" ? existingAuth.authorizationEndpoint : "";
+        authEndpointSection.appendChild(authEndpointLabel);
+        authEndpointSection.appendChild(authEndpointInput);
+        oauth2AuthFields.appendChild(authEndpointSection);
+        const tokenEndpointSection = document.createElement("div");
+        addClass(tokenEndpointSection, "authModalSection");
+        const tokenEndpointLabel = document.createElement("label");
+        tokenEndpointLabel.textContent = "Token Endpoint";
+        const tokenEndpointInput = document.createElement("input");
+        tokenEndpointInput.type = "url";
+        tokenEndpointInput.placeholder = "https://provider.com/oauth/token";
+        tokenEndpointInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" ? existingAuth.tokenEndpoint : "";
+        tokenEndpointSection.appendChild(tokenEndpointLabel);
+        tokenEndpointSection.appendChild(tokenEndpointInput);
+        oauth2AuthFields.appendChild(tokenEndpointSection);
+        const redirectUriSection = document.createElement("div");
+        addClass(redirectUriSection, "authModalSection");
+        const redirectUriLabel = document.createElement("label");
+        redirectUriLabel.textContent = "Redirect URI (Optional)";
+        const redirectUriInput = document.createElement("input");
+        redirectUriInput.type = "url";
+        redirectUriInput.placeholder = window.location.origin + window.location.pathname;
+        redirectUriInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" ? existingAuth.redirectUri || "" : "";
+        const redirectUriHelp = document.createElement("div");
+        redirectUriHelp.textContent = "Leave empty to use current page URL. Must be registered with OAuth provider.";
+        addClass(redirectUriHelp, "authInputHelp");
+        redirectUriSection.appendChild(redirectUriLabel);
+        redirectUriSection.appendChild(redirectUriInput);
+        redirectUriSection.appendChild(redirectUriHelp);
+        oauth2AuthFields.appendChild(redirectUriSection);
+        const scopeSection = document.createElement("div");
+        addClass(scopeSection, "authModalSection");
+        const scopeLabel = document.createElement("label");
+        scopeLabel.textContent = "Scope (Optional)";
+        const scopeInput = document.createElement("input");
+        scopeInput.type = "text";
+        scopeInput.placeholder = "e.g., read write";
+        scopeInput.value = (existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" ? existingAuth.scope || "" : "";
+        const scopeHelp = document.createElement("div");
+        scopeHelp.textContent = "Space-separated list of OAuth 2.0 scopes";
+        addClass(scopeHelp, "authInputHelp");
+        scopeSection.appendChild(scopeLabel);
+        scopeSection.appendChild(scopeInput);
+        scopeSection.appendChild(scopeHelp);
+        oauth2AuthFields.appendChild(scopeSection);
+        if ((existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" && existingAuth.accessToken) {
+            const tokenStatusSection = document.createElement("div");
+            addClass(tokenStatusSection, "authModalSection");
+            const tokenStatusLabel = document.createElement("label");
+            tokenStatusLabel.textContent = "Authentication Status";
+            const tokenStatus = document.createElement("div");
+            addClass(tokenStatus, "oauth2TokenStatus");
+            tokenStatus.innerHTML = "✓ Authenticated";
+            addClass(tokenStatus, "authenticated");
+            tokenStatusSection.appendChild(tokenStatusLabel);
+            tokenStatusSection.appendChild(tokenStatus);
+            oauth2AuthFields.appendChild(tokenStatusSection);
+        }
+        body.appendChild(oauth2AuthFields);
+        const toggleAuthFields = () => {
+            const authType = typeSelect.value;
+            basicAuthFields.style.display = authType === "basic" ? "block" : "none";
+            bearerAuthFields.style.display = authType === "bearer" ? "block" : "none";
+            apiKeyAuthFields.style.display = authType === "apiKey" ? "block" : "none";
+            oauth2AuthFields.style.display = authType === "oauth2" ? "block" : "none";
+        };
+        toggleAuthFields();
+        typeSelect.onchange = toggleAuthFields;
+        const helpLink = document.createElement("div");
+        addClass(helpLink, "authHelpLink");
+        helpLink.innerHTML = `
+      📚 <a href="https://triply.cc/docs/yasgui#authentication" target="_blank" rel="noopener noreferrer">View authentication documentation</a>
+    `;
+        body.appendChild(helpLink);
         const securityNotice = document.createElement("div");
         addClass(securityNotice, "authSecurityNotice");
         securityNotice.innerHTML = `
@@ -583,15 +747,18 @@ export default class TabSettingsModal {
         removeButton.textContent = "Remove Authentication";
         removeButton.type = "button";
         addClass(removeButton, "authRemoveButton");
-        removeButton.onclick = () => {
-            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
-                authentication: undefined,
-            });
+        const closeModalAndRefresh = () => {
             authModalOverlay.remove();
             const endpointsList = this.modalContent.querySelector(".endpointsTable");
             if (endpointsList)
                 this.renderEndpointsList(endpointsList);
         };
+        removeButton.onclick = () => {
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                authentication: undefined,
+            });
+            closeModalAndRefresh();
+        };
         if (!existingAuth) {
             removeButton.disabled = true;
         }
@@ -605,23 +772,118 @@ export default class TabSettingsModal {
         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);
+            const authType = typeSelect.value;
+            if (authType === "basic") {
+                const username = usernameInput.value.trim();
+                const password = passwordInput.value;
+                if (username && password) {
+                    this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                        authentication: {
+                            type: "basic",
+                            username,
+                            password,
+                        },
+                    });
+                    closeModalAndRefresh();
+                }
+                else {
+                    alert("Please enter both username and password.");
+                }
             }
-            else {
-                alert("Please enter both username and password.");
+            else if (authType === "bearer") {
+                const token = tokenInput.value.trim();
+                if (token) {
+                    this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                        authentication: {
+                            type: "bearer",
+                            token,
+                        },
+                    });
+                    closeModalAndRefresh();
+                }
+                else {
+                    alert("Please enter a bearer token.");
+                }
+            }
+            else if (authType === "apiKey") {
+                const headerName = headerNameInput.value.trim();
+                const apiKey = apiKeyInput.value.trim();
+                if (headerName && apiKey) {
+                    this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                        authentication: {
+                            type: "apiKey",
+                            headerName,
+                            apiKey,
+                        },
+                    });
+                    closeModalAndRefresh();
+                }
+                else {
+                    alert("Please enter both header name and API key.");
+                }
+            }
+            else if (authType === "oauth2") {
+                const clientId = clientIdInput.value.trim();
+                const authorizationEndpoint = authEndpointInput.value.trim();
+                const tokenEndpoint = tokenEndpointInput.value.trim();
+                const redirectUri = redirectUriInput.value.trim() || window.location.origin + window.location.pathname;
+                const scope = scopeInput.value.trim();
+                if (!clientId || !authorizationEndpoint || !tokenEndpoint) {
+                    alert("Please enter Client ID, Authorization Endpoint, and Token Endpoint.");
+                    return;
+                }
+                if ((existingAuth === null || existingAuth === void 0 ? void 0 : existingAuth.type) === "oauth2" && existingAuth.accessToken) {
+                    this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                        authentication: {
+                            type: "oauth2",
+                            clientId,
+                            authorizationEndpoint,
+                            tokenEndpoint,
+                            redirectUri,
+                            scope,
+                            accessToken: existingAuth.accessToken,
+                            idToken: existingAuth.idToken,
+                            refreshToken: existingAuth.refreshToken,
+                            tokenExpiry: existingAuth.tokenExpiry,
+                        },
+                    });
+                    closeModalAndRefresh();
+                    return;
+                }
+                saveButton.disabled = true;
+                saveButton.textContent = "Authenticating...";
+                OAuth2Utils.startOAuth2Flow({
+                    clientId,
+                    authorizationEndpoint,
+                    tokenEndpoint,
+                    redirectUri,
+                    scope,
+                })
+                    .then((tokenResponse) => {
+                    const tokenExpiry = OAuth2Utils.calculateTokenExpiry(tokenResponse.expires_in);
+                    this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+                        authentication: {
+                            type: "oauth2",
+                            clientId,
+                            authorizationEndpoint,
+                            tokenEndpoint,
+                            redirectUri,
+                            scope,
+                            accessToken: tokenResponse.access_token,
+                            idToken: tokenResponse.id_token,
+                            refreshToken: tokenResponse.refresh_token,
+                            tokenExpiry,
+                        },
+                    });
+                    closeModalAndRefresh();
+                    alert("OAuth 2.0 authentication successful!");
+                })
+                    .catch((error) => {
+                    console.error("OAuth 2.0 authentication failed:", error);
+                    alert("OAuth 2.0 authentication failed: " + error.message);
+                    saveButton.disabled = false;
+                    saveButton.textContent = "Save & Authenticate";
+                });
             }
         };
         footer.appendChild(removeButton);
@@ -727,7 +989,18 @@ export default class TabSettingsModal {
             }
             const snippetsBarCheckbox = document.getElementById("showSnippetsBar");
             if (snippetsBarCheckbox) {
-                yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+                this.tab.yasgui.config.showSnippetsBar = snippetsBarCheckbox.checked;
+                this.tab.yasgui.persistentConfig.setShowSnippetsBar(snippetsBarCheckbox.checked);
+                this.tab.yasgui.persistentConfig.getTabs().forEach((tabId) => {
+                    const tab = this.tab.yasgui.getTab(tabId);
+                    if (tab) {
+                        const tabYasqe = tab.getYasqe();
+                        if (tabYasqe) {
+                            tabYasqe.config.showSnippetsBar = snippetsBarCheckbox.checked;
+                            tabYasqe.refreshSnippetsBar();
+                        }
+                    }
+                });
             }
             yasqe.saveQuery();
         }
@@ -1125,6 +1398,22 @@ export default class TabSettingsModal {
         footerInfo.appendChild(paragraph2);
         aboutSection.appendChild(footerInfo);
         container.appendChild(aboutSection);
+        const storageSection = document.createElement("div");
+        addClass(storageSection, "settingsSection");
+        const storageTitle = document.createElement("h3");
+        storageTitle.textContent = "Storage Management";
+        storageSection.appendChild(storageTitle);
+        const storageDescription = document.createElement("p");
+        storageDescription.textContent =
+            "Clear all locally stored data including tabs, queries, endpoint configurations, and preferences. This action cannot be undone.";
+        addClass(storageDescription, "settingsHelp");
+        storageSection.appendChild(storageDescription);
+        const clearStorageButton = document.createElement("button");
+        clearStorageButton.textContent = "Clear Persistent Storage";
+        addClass(clearStorageButton, "dangerButton");
+        clearStorageButton.onclick = () => this.clearPersistentStorage();
+        storageSection.appendChild(clearStorageButton);
+        container.appendChild(storageSection);
     }
     createAboutLink(label, url, description) {
         const linkContainer = document.createElement("div");
@@ -1142,6 +1431,20 @@ export default class TabSettingsModal {
         linkContainer.appendChild(desc);
         return linkContainer;
     }
+    clearPersistentStorage() {
+        const confirmed = confirm("Are you sure you want to clear all persistent storage?\n\n" +
+            "This will delete:\n" +
+            "- All saved tabs and queries\n" +
+            "- Endpoint configurations and history\n" +
+            "- Authentication settings\n" +
+            "- Editor preferences\n" +
+            "- Prefixes\n\n" +
+            "This action cannot be undone and the page will reload.");
+        if (confirmed) {
+            PersistentConfig.clear();
+            window.location.reload();
+        }
+    }
     destroy() {
         if (this.modalOverlay && this.modalOverlay.parentNode) {
             this.modalOverlay.parentNode.removeChild(this.modalOverlay);