hobokenchicken
9b8483e797
This commit introduces: - AES-256-GCM encryption for LLM provider API keys in the database. - HMAC-SHA256 signed session tokens with activity-based refresh logic. - Standardized frontend XSS protection using a global escapeHtml utility. - Hardened security headers and request body size limits. - Improved database integrity with foreign key enforcement and atomic transactions. - Integration tests for the full encrypted key storage and proxy usage lifecycle.
249 lines
11 KiB
JavaScript
249 lines
11 KiB
JavaScript
// Providers Page Module
|
|
|
|
class ProvidersPage {
|
|
constructor() {
|
|
this.providers = [];
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
await this.loadProviders();
|
|
this.setupEventListeners();
|
|
}
|
|
|
|
async loadProviders() {
|
|
try {
|
|
const data = await window.api.get('/providers');
|
|
this.providers = data;
|
|
this.renderProviders();
|
|
this.renderStats();
|
|
} catch (error) {
|
|
console.error('Error loading providers:', error);
|
|
window.authManager.showToast('Failed to load providers', 'error');
|
|
}
|
|
}
|
|
|
|
renderProviders() {
|
|
const container = document.getElementById('providers-list');
|
|
if (!container) return;
|
|
|
|
if (this.providers.length === 0) {
|
|
container.innerHTML = '<div class="empty-state">No providers configured</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="provider-cards-grid">
|
|
${this.providers.map(provider => this.renderProviderCard(provider)).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
renderProviderCard(provider) {
|
|
const statusClass = provider.status === 'online' ? 'success' : 'warning';
|
|
const modelCount = provider.models ? provider.models.length : 0;
|
|
|
|
// Credit balance display logic
|
|
const isLowBalance = provider.credit_balance <= provider.low_credit_threshold && provider.id !== 'ollama';
|
|
const balanceColor = isLowBalance ? 'var(--red-light)' : 'var(--green-light)';
|
|
|
|
const escapedId = window.api.escapeHtml(provider.id);
|
|
const escapedName = window.api.escapeHtml(provider.name);
|
|
const escapedStatus = window.api.escapeHtml(provider.status);
|
|
const billingMode = provider.billing_mode ? provider.billing_mode.toUpperCase() : 'PREPAID';
|
|
|
|
return `
|
|
<div class="provider-card ${escapedStatus}">
|
|
<div class="provider-card-header">
|
|
<div class="provider-info">
|
|
<h4 class="provider-name">${escapedName}</h4>
|
|
<span class="provider-id">${escapedId}</span>
|
|
</div>
|
|
<span class="status-badge ${statusClass}">
|
|
<i class="fas fa-circle"></i>
|
|
${escapedStatus}
|
|
</span>
|
|
</div>
|
|
<div class="provider-card-body">
|
|
<div class="provider-meta">
|
|
<div class="meta-item">
|
|
<i class="fas fa-microchip"></i>
|
|
<span>${modelCount} Models Available</span>
|
|
</div>
|
|
<div class="meta-item" style="color: ${balanceColor}; font-weight: 700;">
|
|
<i class="fas fa-wallet"></i>
|
|
<span>Balance: ${escapedId === 'ollama' ? 'FREE' : window.api.formatCurrency(provider.credit_balance)}</span>
|
|
${isLowBalance ? '<i class="fas fa-exclamation-triangle" title="Low Balance"></i>' : ''}
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
<span>Billing: ${window.api.escapeHtml(billingMode)}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Last used: ${provider.last_used ? window.api.formatTimeAgo(provider.last_used) : 'Never'}</span>
|
|
</div>
|
|
</div>
|
|
<div class="model-tags">
|
|
${(provider.models || []).slice(0, 5).map(m => `<span class="model-tag">${window.api.escapeHtml(m)}</span>`).join('')}
|
|
${modelCount > 5 ? `<span class="model-tag more">+${modelCount - 5} more</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="provider-card-footer">
|
|
<button class="btn btn-secondary btn-sm" onclick="window.providersPage.testProvider('${escapedId}')">
|
|
<i class="fas fa-vial"></i> Test
|
|
</button>
|
|
${window._userRole === 'admin' ? `
|
|
<button class="btn btn-primary btn-sm" onclick="window.providersPage.configureProvider('${escapedId}')">
|
|
<i class="fas fa-cog"></i> Config
|
|
</button>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
renderStats() {
|
|
const container = document.getElementById('provider-stats');
|
|
if (!container) return;
|
|
|
|
const onlineCount = this.providers.filter(p => p.status === 'online').length;
|
|
const totalModels = this.providers.reduce((sum, p) => sum + (p.models ? p.models.length : 0), 0);
|
|
|
|
container.innerHTML = `
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-value">${this.providers.length}</div>
|
|
<div class="stat-label">Total Providers</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-value">${onlineCount}</div>
|
|
<div class="stat-label">Online Status</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-value">${totalModels}</div>
|
|
<div class="stat-label">Total Models</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async testProvider(id) {
|
|
window.authManager.showToast(`Testing connection to ${id}...`, 'info');
|
|
try {
|
|
await window.api.post(`/providers/${id}/test`, {});
|
|
window.authManager.showToast(`${id} connection successful!`, 'success');
|
|
this.loadProviders();
|
|
} catch (error) {
|
|
window.authManager.showToast(`${id} test failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
configureProvider(id) {
|
|
const provider = this.providers.find(p => p.id === id);
|
|
if (!provider) return;
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'modal active';
|
|
|
|
const escapedId = window.api.escapeHtml(provider.id);
|
|
const escapedName = window.api.escapeHtml(provider.name);
|
|
const escapedBaseUrl = window.api.escapeHtml(provider.base_url);
|
|
const escapedBalance = window.api.escapeHtml(provider.credit_balance);
|
|
const escapedThreshold = window.api.escapeHtml(provider.low_credit_threshold);
|
|
|
|
modal.innerHTML = `
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Configure ${escapedName}</h3>
|
|
<button class="modal-close" onclick="this.closest('.modal').remove()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-control">
|
|
<label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
|
<input type="checkbox" id="provider-enabled" ${provider.enabled ? 'checked' : ''} style="width: auto;">
|
|
<span>Enable Provider</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="provider-base-url">Base URL</label>
|
|
<input type="text" id="provider-base-url" value="${escapedBaseUrl}" placeholder="Default API URL">
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="provider-api-key">API Key (Optional / Overwrite)</label>
|
|
<input type="password" id="provider-api-key" placeholder="••••••••••••••••">
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="form-control">
|
|
<label for="provider-balance">Current Credit Balance ($)</label>
|
|
<input type="number" id="provider-balance" value="${escapedBalance}" step="0.01">
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="provider-threshold">Low Balance Alert ($)</label>
|
|
<input type="number" id="provider-threshold" value="${escapedThreshold}" step="0.50">
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="provider-billing-mode">Billing Mode</label>
|
|
<select id="provider-billing-mode">
|
|
<option value="prepaid" ${!provider.billing_mode || provider.billing_mode === 'prepaid' ? 'selected' : ''}>Prepaid</option>
|
|
<option value="postpaid" ${provider.billing_mode === 'postpaid' ? 'selected' : ''}>Postpaid</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="this.closest('.modal').remove()">Cancel</button>
|
|
<button class="btn btn-primary" id="save-provider-config">Save Configuration</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
modal.querySelector('#save-provider-config').onclick = async () => {
|
|
const enabled = modal.querySelector('#provider-enabled').checked;
|
|
const baseUrl = modal.querySelector('#provider-base-url').value;
|
|
const apiKey = modal.querySelector('#provider-api-key').value;
|
|
const balance = parseFloat(modal.querySelector('#provider-balance').value);
|
|
const threshold = parseFloat(modal.querySelector('#provider-threshold').value);
|
|
const billingMode = modal.querySelector('#provider-billing-mode').value;
|
|
|
|
try {
|
|
await window.api.put(`/providers/${id}`, {
|
|
enabled,
|
|
base_url: baseUrl || null,
|
|
api_key: apiKey || null,
|
|
credit_balance: isNaN(balance) ? null : balance,
|
|
low_credit_threshold: isNaN(threshold) ? null : threshold,
|
|
billing_mode: billingMode || null,
|
|
});
|
|
|
|
window.authManager.showToast(`${provider.name} configuration saved`, 'success');
|
|
modal.remove();
|
|
this.loadProviders();
|
|
} catch (error) {
|
|
window.authManager.showToast(error.message, 'error');
|
|
}
|
|
};
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const testAllBtn = document.getElementById('test-all-providers');
|
|
if (testAllBtn) {
|
|
testAllBtn.onclick = () => {
|
|
this.providers.forEach(p => this.testProvider(p.id));
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
window.initProviders = async () => {
|
|
window.providersPage = new ProvidersPage();
|
|
};
|