meleki/gott
1
0 Fork 0
Code Activity

API-Keys UI: Toggle+Check neben Badge, übernommene Keys ausblenden, Layout-Polish

Browse Source 
- Toggle-Button (Aktivieren/Deaktivieren) links neben Usage-Badge
- Check-Button rechts neben Usage-Badge statt bei Actions
- '✅ Aktiv' aus Meta-Zeile entfernt (Toggle zeigt Status)
- 'Prüfe...' Text beim Check entfernt (Spinner im Button reicht)
- Übernommene Scanned-Keys komplett ausgeblendet statt halbtransparent
- isAdopted-Logik und Wrapper entfernt, Code entschachtelt
- admin-user-row: Border, Radius, Background hinzugefügt
- Aktive Keys visuell hervorgehoben (Primary-Border + Brightness)
- placeholder.css an gleichen Row-Style angeglichen
This commit is contained in:
Meleki committed 2026-03-12 19:19:35 +01:00
1 parent de388806cb
commit bdcfd1f8b3
4 files changed
+93 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wwwroot/js/pages/api-keys-page.js
+74 -73
View File
@@ -98,7 +98,6 @@ registerPage('api-keys', {
var metaSpan = document.createElement('span');
metaSpan.className = 'admin-user-meta';
var parts = [key.provider];
if (key.isActive) parts.push('✅ Aktiv');
parts.push(formatKeyStatus(key.status));
if (key.plan) parts.push(key.plan);
if (key.checkedAt) parts.push(new Date(key.checkedAt).toLocaleString());
@@ -115,27 +114,50 @@ registerPage('api-keys', {
info.appendChild(urlSpan);
}
info.appendChild(metaSpan);
var usageBadge = createUsageBadge(key.usage5h, key.usage7d);
if (usageBadge) info.appendChild(usageBadge);
var actions = document.createElement('div');
actions.className = 'admin-user-actions';
// Toggle + Usage-Badge nebeneinander
var badgeRow = document.createElement('div');
badgeRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-top:2px';
if (key.isActive) {
var deactivateBtn = document.createElement('button');
deactivateBtn.className = 'icon-btn';
deactivateBtn.title = 'Deaktivieren';
deactivateBtn.innerHTML = '<i class="fa fa-toggle-on" style="color:var(--accent)"></i>';
deactivateBtn.addEventListener('click', function() { deactivateKey(key); });
badgeRow.appendChild(deactivateBtn);
} else {
var activateBtn = document.createElement('button');
activateBtn.className = 'icon-btn';
activateBtn.title = 'Aktivieren';
activateBtn.innerHTML = '<i class="fa fa-toggle-off"></i>';
activateBtn.addEventListener('click', function() { activateKey(key); });
badgeRow.appendChild(activateBtn);
}
var usageBadge = createUsageBadge(key.usage5h, key.usage7d);
if (usageBadge) badgeRow.appendChild(usageBadge);
// Status-Zeile (für Check-Ergebnis)
var statusLine = document.createElement('div');
statusLine.className = 'admin-user-meta';
statusLine.style.cssText = 'padding:0 var(--box-padding) .5rem;display:none;font-size:.85em';
// Check (nur Anthropic)
// Check (nur Anthropic) – rechts neben Usage-Badge
if (key.provider === 'anthropic') {
var checkBtn = document.createElement('button');
checkBtn.className = 'icon-btn';
checkBtn.title = 'Key prüfen';
checkBtn.innerHTML = '<i class="fa fa-refresh"></i>';
checkBtn.addEventListener('click', function() { checkKey(key, checkBtn, statusLine); });
actions.appendChild(checkBtn);
badgeRow.appendChild(checkBtn);
}
info.appendChild(badgeRow);
var actions = document.createElement('div');
actions.className = 'admin-user-actions';
// Bearbeiten
var editBtn = document.createElement('button');
editBtn.className = 'icon-btn';
@@ -144,23 +166,6 @@ registerPage('api-keys', {
editBtn.addEventListener('click', function() { startEdit(key); });
actions.appendChild(editBtn);
// Aktivieren/Deaktivieren
if (key.isActive) {
var deactivateBtn = document.createElement('button');
deactivateBtn.className = 'icon-btn';
deactivateBtn.title = 'Deaktivieren';
deactivateBtn.innerHTML = '<i class="fa fa-toggle-on" style="color:var(--accent)"></i>';
deactivateBtn.addEventListener('click', function() { deactivateKey(key); });
actions.appendChild(deactivateBtn);
} else {
var activateBtn = document.createElement('button');
activateBtn.className = 'icon-btn';
activateBtn.title = 'Aktivieren';
activateBtn.innerHTML = '<i class="fa fa-toggle-off"></i>';
activateBtn.addEventListener('click', function() { activateKey(key); });
actions.appendChild(activateBtn);
}
// Löschen
var deleteBtn = document.createElement('button');
deleteBtn.className = 'icon-btn';
@@ -190,9 +195,8 @@ registerPage('api-keys', {
var origHtml = btn.innerHTML;
btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
btn.disabled = true;
statusLine.style.display = 'block';
statusLine.textContent = 'Prüfe…';
statusLine.style.opacity = '0.5';
statusLine.style.display = 'none';
statusLine.innerHTML = '';
try {
var result = await apiCheckApiKey(key.keyId);
statusLine.style.opacity = '1';
@@ -322,7 +326,8 @@ registerPage('api-keys', {
function renderScannedKeys() {
scannedList.innerHTML = '';
if (scannedKeys.length === 0) {
var visibleKeys = scannedKeys.filter(function(sk) { return sk.adoptedApiKeyId == null; });
if (visibleKeys.length === 0) {
var empty = document.createElement('div');
empty.className = 'admin-user-meta';
empty.style.padding = '1rem 0';
@@ -331,12 +336,10 @@ registerPage('api-keys', {
return;
}
scannedKeys.forEach(function(sk) {
var isAdopted = sk.adoptedApiKeyId != null;
visibleKeys.forEach(function(sk) {
var row = document.createElement('div');
row.className = 'admin-user-row';
if (isAdopted) row.style.opacity = '0.5';
var info = document.createElement('div');
info.className = 'admin-user-info';
@@ -354,7 +357,7 @@ registerPage('api-keys', {
var metaSpan = document.createElement('span');
metaSpan.className = 'admin-user-meta';
var metaParts = isAdopted ? ['📥 Übernommen'] : [];
var metaParts = [];
metaParts.push(formatKeyStatus(sk.status));
if (sk.plan && sk.plan !== 'Unknown') metaParts.push(sk.plan);
if (sk.checkedAt) metaParts.push(new Date(sk.checkedAt).toLocaleString());
@@ -367,54 +370,52 @@ registerPage('api-keys', {
var actions = document.createElement('div');
actions.className = 'admin-user-actions';
if (!isAdopted) {
// Recheck
var recheckBtn = document.createElement('button');
recheckBtn.className = 'icon-btn';
recheckBtn.title = 'Erneut prüfen';
recheckBtn.innerHTML = '<i class="fa fa-refresh"></i>';
recheckBtn.addEventListener('click', async function() {
recheckBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
recheckBtn.disabled = true;
try {
await apiRecheckScannedKey(sk.scannedKeyId);
await loadScannedKeys();
} catch (err) { showToast(err.message, 'error'); }
finally { recheckBtn.innerHTML = '<i class="fa fa-refresh"></i>'; recheckBtn.disabled = false; }
});
actions.appendChild(recheckBtn);
// Recheck
var recheckBtn = document.createElement('button');
recheckBtn.className = 'icon-btn';
recheckBtn.title = 'Erneut prüfen';
recheckBtn.innerHTML = '<i class="fa fa-refresh"></i>';
recheckBtn.addEventListener('click', async function() {
recheckBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
recheckBtn.disabled = true;
try {
await apiRecheckScannedKey(sk.scannedKeyId);
await loadScannedKeys();
} catch (err) { showToast(err.message, 'error'); }
finally { recheckBtn.innerHTML = '<i class="fa fa-refresh"></i>'; recheckBtn.disabled = false; }
});
actions.appendChild(recheckBtn);
// Übernehmen (bei valid oder quota_exceeded)
if (sk.status === 'valid' || sk.status === 'quota_exceeded') {
var adoptBtn = document.createElement('button');
adoptBtn.className = 'icon-btn';
adoptBtn.title = 'Als API-Key übernehmen';
adoptBtn.innerHTML = '<i class="fa fa-plus-circle" style="color:var(--accent)"></i>';
adoptBtn.addEventListener('click', async function() {
try {
await apiAdoptScannedKey(sk.scannedKeyId);
showToast('Key übernommen');
await loadScannedKeys();
await loadKeys();
} catch (err) { showToast(err.message, 'error'); }
});
actions.appendChild(adoptBtn);
}
// Löschen
var delBtn = document.createElement('button');
delBtn.className = 'icon-btn';
delBtn.title = 'Ignorieren';
delBtn.innerHTML = '<i class="fa fa-trash"></i>';
delBtn.addEventListener('click', async function() {
// Übernehmen (bei valid oder quota_exceeded)
if (sk.status === 'valid' || sk.status === 'quota_exceeded') {
var adoptBtn = document.createElement('button');
adoptBtn.className = 'icon-btn';
adoptBtn.title = 'Als API-Key übernehmen';
adoptBtn.innerHTML = '<i class="fa fa-plus-circle" style="color:var(--accent)"></i>';
adoptBtn.addEventListener('click', async function() {
try {
await apiDeleteScannedKey(sk.scannedKeyId);
await apiAdoptScannedKey(sk.scannedKeyId);
showToast('Key übernommen');
await loadScannedKeys();
await loadKeys();
} catch (err) { showToast(err.message, 'error'); }
});
actions.appendChild(delBtn);
actions.appendChild(adoptBtn);
}
// Löschen
var delBtn = document.createElement('button');
delBtn.className = 'icon-btn';
delBtn.title = 'Ignorieren';
delBtn.innerHTML = '<i class="fa fa-trash"></i>';
delBtn.addEventListener('click', async function() {
try {
await apiDeleteScannedKey(sk.scannedKeyId);
await loadScannedKeys();
} catch (err) { showToast(err.message, 'error'); }
});
actions.appendChild(delBtn);
row.appendChild(info);
row.appendChild(actions);
scannedList.appendChild(row);