Matdata-eu
diff --git a/‎docs/developer-guide.md‎
Lines changed: 204 additions & 0 deletions b/‎docs/developer-guide.md‎
Lines changed: 204 additions & 0 deletions
diff --git a/‎docs/user-guide.md‎
Lines changed: 63 additions & 0 deletions b/‎docs/user-guide.md‎
Lines changed: 63 additions & 0 deletions
diff --git a/‎packages/yasgui/src/ConfigExportImport.ts‎
Lines changed: 1 addition & 0 deletions b/‎packages/yasgui/src/ConfigExportImport.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/yasgui/src/PersistentConfig.ts‎
Lines changed: 44 additions & 2 deletions b/‎packages/yasgui/src/PersistentConfig.ts‎
Lines changed: 44 additions & 2 deletions
@@ -904,6 +904,14 @@ interface RequestConfig {
 
   // CORS proxy
   corsProxy?: string;
+
+  // Basic Authentication
+  basicAuth?: BasicAuthConfig | ((yasqe: Yasqe) => BasicAuthConfig | undefined);
+}
+
+interface BasicAuthConfig {
+  username: string;
+  password: string;
 }
 ```
 
@@ -937,6 +945,202 @@ const config = {
 };
 ```
 
+### Basic Authentication
+
+YASGUI supports HTTP Basic Authentication for SPARQL endpoints that require username and password credentials. **Authentication is stored per-endpoint**, meaning all tabs using the same endpoint share the same credentials.
+
+#### Programmatic Configuration
+
+Configure basic authentication programmatically when initializing YASGUI. Note that this sets the initial credentials, but users can also configure them via the UI.
+
+```javascript
+const yasgui = new Yasgui(document.getElementById("yasgui"), {
+  requestConfig: {
+    endpoint: "https://example.com/sparql",
+    basicAuth: {
+      username: "myuser",
+      password: "mypassword"
+    }
+  }
+});
+```
+
+**Important:** When using programmatic configuration, the credentials will be used for that initial request, but YASGUI will store them in the endpoint-based configuration. Any subsequent tab that uses the same endpoint will automatically use these credentials.
+
+#### Managing Endpoint Configurations
+
+Use the PersistentConfig API to manage endpoint configurations programmatically:
+
+```javascript
+// Add or update an endpoint with authentication
+yasgui.persistentConfig.addOrUpdateEndpoint("https://example.com/sparql", {
+  label: "My Secure Endpoint",
+  showAsButton: true,
+  authentication: {
+    type: 'basic',
+    username: "myuser",
+    password: "mypassword"
+  }
+});
+
+// Get endpoint configuration
+const config = yasgui.persistentConfig.getEndpointConfig("https://example.com/sparql");
+
+// Remove authentication from an endpoint
+yasgui.persistentConfig.addOrUpdateEndpoint("https://example.com/sparql", {
+  authentication: undefined
+});
+
+// Delete an endpoint completely
+yasgui.persistentConfig.deleteEndpointConfig("https://example.com/sparql");
+```
+
+#### Dynamic Authentication
+
+Use a function to dynamically provide credentials:
+
+```javascript
+const yasgui = new Yasgui(document.getElementById("yasgui"), {
+  requestConfig: {
+    endpoint: "https://example.com/sparql",
+    basicAuth: (yasqe) => {
+      // Return credentials dynamically
+      return {
+        username: getCurrentUsername(),
+        password: getCurrentPassword()
+      };
+    }
+  }
+});
+```
+
+#### Disabling Authentication
+
+To disable authentication:
+
+```javascript
+tab.setRequestConfig({
+  basicAuth: undefined
+});
+```
+
+#### TypeScript Support
+
+```typescript
+import { BasicAuthConfig } from "@matdata/yasqe";
+
+const authConfig: BasicAuthConfig = {
+  username: "myuser",
+  password: "mypassword"
+};
+
+const yasgui = new Yasgui(element, {
+  requestConfig: {
+    endpoint: "https://secure-endpoint.com/sparql",
+    basicAuth: authConfig
+  }
+});
+```
+
+#### Examples
+
+**Example 1: Simple Authentication**
+
+```javascript
+const yasgui = new Yasgui(document.getElementById("yasgui"), {
+  requestConfig: {
+    endpoint: "https://secure-endpoint.example.com/sparql",
+    basicAuth: {
+      username: "user",
+      password: "pass"
+    }
+  }
+});
+```
+
+**Example 2: Multiple Endpoints with Different Credentials**
+
+Authentication is stored **per-endpoint**, not per-tab. All tabs using the same endpoint will share the same credentials.
+
+```javascript
+const yasgui = new Yasgui(document.getElementById("yasgui"));
+
+// Configure authentication for first endpoint
+yasgui.persistentConfig.addOrUpdateEndpoint("https://dbpedia.org/sparql", {
+  // No authentication needed for public endpoint
+});
+
+// Configure authentication for second endpoint
+yasgui.persistentConfig.addOrUpdateEndpoint("https://private.example.com/sparql", {
+  authentication: {
+    type: "basic",
+    username: "admin",
+    password: "secret"
+  }
+});
+
+// Create tabs - they will automatically use endpoint-based auth
+const tab1 = yasgui.addTab();
+tab1.setRequestConfig({ endpoint: "https://dbpedia.org/sparql" });
+
+const tab2 = yasgui.addTab();
+tab2.setRequestConfig({ endpoint: "https://private.example.com/sparql" });
+
+// Both tabs pointing to the same endpoint will share credentials
+const tab3 = yasgui.addTab();
+tab3.setRequestConfig({ endpoint: "https://private.example.com/sparql" }); // Uses same auth as tab2
+```
+
+**Example 3: Prompt User for Credentials**
+
+⚠️ **Security Warning**: Storing credentials in localStorage exposes them to any script running on the same origin (e.g., XSS attacks or malicious third-party scripts). For production use:
+- Use session-based authentication with short-lived tokens
+- Consider OAuth 2.0 or other secure authentication flows
+- Avoid storing reusable passwords in browser storage
+- Only use HTTPS endpoints
+
+```javascript
+const yasgui = new Yasgui(document.getElementById("yasgui"), {
+  requestConfig: {
+    endpoint: "https://secure-endpoint.example.com/sparql",
+    basicAuth: (yasqe) => {
+      // WARNING: This example stores credentials in localStorage for demonstration only.
+      // In production, use more secure alternatives (session tokens, OAuth, etc.)
+      
+      const username = prompt("Enter username:");
+      const password = prompt("Enter password:");
+      
+      if (username && password) {
+        return { username, password };
+      }
+      
+      return undefined;
+    }
+  }
+});
+```
+
+**Recommended Approach**: Use endpoint-based authentication via the UI or configure it once programmatically:
+
+```javascript
+// Configure authentication securely
+yasgui.persistentConfig.addOrUpdateEndpoint("https://secure-endpoint.example.com/sparql", {
+  authentication: {
+    type: "basic",
+    username: "user",
+    password: "pass"  // Consider using environment variables or secure credential management
+  }
+});
+```
+
+#### Security Best Practices
+
+1. **Use HTTPS Only**: Never use basic authentication with HTTP endpoints
+2. **Secure Storage**: Consider implementing additional encryption for stored credentials
+3. **Token-Based Auth**: For production applications, consider using token-based authentication instead of basic auth
+4. **Clear on Logout**: Implement a logout mechanism that clears stored credentials
+5. **Environment Variables**: Store credentials in environment variables for server-side applications
+
 ### Endpoint Buttons Configuration
 
 The endpoint quick switch buttons feature allows you to configure a list of predefined SPARQL endpoints that users can quickly switch between with a single click.
 
@@ -511,8 +511,71 @@ Access comprehensive configuration options through the Settings modal.
 - Select formatter (sparql-formatter or legacy)
 - Enable/disable auto-format on query execution
 
+**SPARQL Endpoints Tab:**
+- Manage all your SPARQL endpoints in one place
+- Configure authentication per endpoint
+- Add labels and create quick-switch buttons
+- Automatically tracks accessed endpoints
+
 All settings are saved automatically to local storage.
 
+### SPARQL Endpoints Management
+
+YASGUI automatically tracks all SPARQL endpoints you access and lets you manage them from a single location.
+
+**Accessing the Endpoints Manager:**
+
+1. **Open Settings**: Click the settings icon (⚙️) in the control bar
+2. **Navigate to SPARQL Endpoints**: Click on the "SPARQL Endpoints" tab in the settings modal
+
+**Managing Endpoints:**
+
+The endpoints table shows:
+- **Endpoint**: The URL of the SPARQL endpoint
+- **Label**: Optional friendly name for the endpoint
+- **Button**: Checkbox to show endpoint as a quick-switch button (requires label)
+- **Authentication**: Configure HTTP Basic Authentication
+- **Actions**: Delete endpoint from the list
+
+**Adding Quick-Switch Buttons:**
+
+1. Find your endpoint in the list
+2. Enter a label (e.g., "DBpedia", "Wikidata")
+3. Check the "Button" checkbox
+4. The endpoint will now appear as a button in the control bar
+
+**Configuring Authentication:**
+
+YASGUI supports HTTP Basic Authentication for endpoints that require username and password credentials.
+
+1. **Find your endpoint** in the SPARQL Endpoints table
+2. **Click "Configure"** in the Authentication column
+3. **Select authentication type** (currently HTTP Basic Authentication)
+4. **Enter credentials**:
+   - Username: Your endpoint username
+   - Password: Your endpoint password
+5. **Click "Save"** to apply
+
+**Security Considerations:**
+
+⚠️ **Important Security Notes:**
+
+- **Credentials are stored in browser localStorage**: Your username and password are stored locally in your browser
+- **Only use with HTTPS endpoints**: Never send credentials to HTTP endpoints as they will be transmitted in plain text
+- **Be cautious on shared computers**: Clear your browser data when using YASGUI on shared or public computers
+
+**How Authentication Works:**
+
+Authentication is stored per-endpoint, which means:
+- All tabs using the same endpoint share the same credentials
+- You only need to configure authentication once per endpoint
+- Credentials persist across browser sessions (stored in localStorage)
+
+When authentication is configured:
+1. YASGUI encodes your credentials using Base64 encoding
+2. Adds an `Authorization` header with the format: `Basic <encoded-credentials>`
+3. Sends this header with every SPARQL query request to that endpoint
+
 ### Query History and Persistence
 
 YASGUI automatically saves your work locally.
 
@@ -304,6 +304,7 @@ export function parseFromTurtle(turtle: string): Partial<PersistedJson> {
             headers: {},
             withCredentials: false,
             adjustQueryBeforeRequest: false,
+            basicAuth: undefined,
           },
           yasr: {
             settings: {},
 
@@ -1,5 +1,5 @@
 import { Storage as YStorage } from "@matdata/yasgui-utils";
-import Yasgui, { EndpointButton } from "./";
+import Yasgui, { EndpointButton, EndpointConfig } from "./";
 import * as Tab from "./Tab";
 export var storageNamespace = "triply";
 export interface PersistedJson {
@@ -10,7 +10,8 @@ export interface PersistedJson {
   lastClosedTab: { index: number; tab: Tab.PersistedJson } | undefined;
   prefixes?: string;
   autoCaptureEnabled?: boolean;
-  customEndpointButtons?: EndpointButton[];
+  customEndpointButtons?: EndpointButton[]; // Legacy, kept for backwards compatibility
+  endpointConfigs?: EndpointConfig[]; // New endpoint-based storage with auth
   theme?: "light" | "dark";
   orientation?: "vertical" | "horizontal";
 }
@@ -24,6 +25,7 @@ function getDefaults(): PersistedJson {
     prefixes: "",
     autoCaptureEnabled: true,
     customEndpointButtons: [],
+    endpointConfigs: [],
   };
 }
 
@@ -163,6 +165,46 @@ export default class PersistentConfig {
     this.persistedJson.customEndpointButtons = buttons;
     this.toStorage();
   }
+
+  // New endpoint configuration methods
+  public getEndpointConfigs(): EndpointConfig[] {
+    return this.persistedJson.endpointConfigs || [];
+  }
+
+  public setEndpointConfigs(configs: EndpointConfig[]) {
+    this.persistedJson.endpointConfigs = configs;
+    this.toStorage();
+  }
+
+  public addOrUpdateEndpoint(endpoint: string, updates: Partial<Omit<EndpointConfig, "endpoint">>) {
+    const configs = this.getEndpointConfigs();
+    const existingIndex = configs.findIndex((c) => c.endpoint === endpoint);
+
+    if (existingIndex >= 0) {
+      // Update existing endpoint
+      const merged = { ...configs[existingIndex], ...updates };
+      if ("authentication" in updates && updates.authentication === undefined) {
+        delete merged.authentication;
+      }
+      configs[existingIndex] = merged;
+    } else {
+      // Add new endpoint
+      configs.push({ endpoint, ...updates });
+    }
+
+    this.setEndpointConfigs(configs);
+  }
+
+  public getEndpointConfig(endpoint: string): EndpointConfig | undefined {
+    const configs = this.getEndpointConfigs();
+    return configs.find((c) => c.endpoint === endpoint);
+  }
+
+  public deleteEndpointConfig(endpoint: string) {
+    const configs = this.getEndpointConfigs();
+    const filtered = configs.filter((c) => c.endpoint !== endpoint);
+    this.setEndpointConfigs(filtered);
+  }
   public static clear() {
     const storage = new YStorage(storageNamespace);
     storage.removeNamespace();