fix: Runtime-Config Layout + Eye-Toggle fuer Token-Felder

- Eingabefelder haben jetzt width:100% + box-sizing:border-box,
  keine Ueberlappung mehr im Grid
- Token-Felder haben einen Augen-Button daneben (👁/👀) zum
  Anzeigen/Verbergen des Inhalts
- Kleineres Label-Grid (140px statt 150px), grosszuegigerer Gap

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
duffyduck 2026-04-19 16:27:56 +02:00
parent fc3bee6d05
commit 394abb58be
1 changed files with 27 additions and 6 deletions

View File

@ -533,20 +533,26 @@
(Diagnostic-Container bleibt auf ENV).
</div>
<div class="card" style="max-width:600px;">
<div style="display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;font-size:13px;">
<div style="display:grid;grid-template-columns:140px 1fr;gap:8px 10px;align-items:center;font-size:13px;">
<label style="color:#8888AA;">RVS Host:</label>
<input type="text" id="rc-rvs-host" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<input type="text" id="rc-rvs-host" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<label style="color:#8888AA;">RVS Port:</label>
<input type="text" id="rc-rvs-port" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<input type="text" id="rc-rvs-port" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<label style="color:#8888AA;">RVS TLS:</label>
<select id="rc-rvs-tls" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<select id="rc-rvs-tls" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
<option value="true">true (wss://)</option>
<option value="false">false (ws://)</option>
</select>
<label style="color:#8888AA;">RVS Token:</label>
<input type="password" id="rc-rvs-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
<div style="display:flex;gap:4px;min-width:0;">
<input type="password" id="rc-rvs-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
<button type="button" class="btn secondary" onclick="toggleSecret('rc-rvs-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
</div>
<label style="color:#8888AA;">Aria Auth Token:</label>
<input type="password" id="rc-auth-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
<div style="display:flex;gap:4px;min-width:0;">
<input type="password" id="rc-auth-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
<button type="button" class="btn secondary" onclick="toggleSecret('rc-auth-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
</div>
</div>
<div style="display:flex;gap:8px;margin-top:12px;">
<button class="btn" onclick="saveRuntimeConfig()" style="flex:1;">Speichern</button>
@ -1498,6 +1504,21 @@
send({ action: 'send_voice_config', defaultVoice, highlightVoice, ttsEnabled, speedRamona, speedThorsten, ttsEngine, xttsVoice, whisperModel });
}
// ── Passwort-Feld Anzeigen/Verbergen ─────────────────────
function toggleSecret(inputId, btn) {
const el = document.getElementById(inputId);
if (!el) return;
if (el.type === 'password') {
el.type = 'text';
btn.innerHTML = '&#128064;'; // 👀
btn.title = 'Verbergen';
} else {
el.type = 'password';
btn.innerHTML = '&#128065;'; // 👁
btn.title = 'Anzeigen';
}
}
// ── Runtime-Konfiguration ─────────────────────
async function loadRuntimeConfig() {
const statusEl = document.getElementById('rc-status');