Goondex/internal/web/templates/settings.html

97 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
{{template "html-head" .}}
</head>
<body>
{{template "navbar" .}}
<main class="container">
<div class="page-header">
<h2>Settings</h2>
<p class="help-text">Manage API keys locally. Keys are stored in <code>config/api_keys.json</code> (gitignored).</p>
</div>
<div class="gx-card" style="margin-top: 1.5rem; padding: 1.5rem;">
<div class="form-grid">
<label class="form-label">TPDB API Key</label>
<input type="password" id="tpdb-key" class="input" placeholder="TPDB API key">
<label class="form-label">Adult Empire API Key</label>
<input type="password" id="ae-key" class="input" placeholder="Adult Empire API key (optional)">
<label class="form-label">StashDB API Key</label>
<input type="password" id="stashdb-key" class="input" placeholder="StashDB API key">
<label class="form-label">StashDB Endpoint</label>
<input type="text" id="stashdb-endpoint" class="input" placeholder="https://stashdb.org/graphql">
</div>
<div class="action-buttons" style="margin-top: 1rem;">
<button class="btn" onclick="saveApiKeys()">Save Keys<div class="hoverEffect"><div></div></div></button>
<button class="btn-secondary" onclick="loadApiKeys()">Reload<div class="hoverEffect"><div></div></div></button>
</div>
<div id="settings-status" class="status-banner" style="margin-top: 1rem;"></div>
</div>
</main>
{{template "html-scripts" .}}
<script>
async function loadApiKeys() {
setSettingsStatus('Loading...');
try {
const res = await fetch('/api/settings/api-keys');
const result = await res.json();
if (result.success && result.data) {
const d = result.data;
document.getElementById('tpdb-key').value = d.tpdb_api_key || '';
document.getElementById('ae-key').value = d.ae_api_key || '';
document.getElementById('stashdb-key').value = d.stashdb_api_key || '';
document.getElementById('stashdb-endpoint').value = d.stashdb_endpoint || 'https://stashdb.org/graphql';
setSettingsStatus('Loaded');
} else {
setSettingsStatus(result.message || 'Failed to load', true);
}
} catch (err) {
setSettingsStatus('Error: ' + err.message, true);
}
}
async function saveApiKeys() {
const payload = {
tpdb_api_key: document.getElementById('tpdb-key').value,
ae_api_key: document.getElementById('ae-key').value,
stashdb_api_key: document.getElementById('stashdb-key').value,
stashdb_endpoint: document.getElementById('stashdb-endpoint').value,
};
setSettingsStatus('Saving...');
try {
const res = await fetch('/api/settings/api-keys', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const result = await res.json();
if (result.success) {
setSettingsStatus('Saved. Restart not required; new keys are active.');
} else {
setSettingsStatus(result.message || 'Failed to save', true);
}
} catch (err) {
setSettingsStatus('Error: ' + err.message, true);
}
}
function setSettingsStatus(msg, isError) {
const el = document.getElementById('settings-status');
el.textContent = msg;
el.classList.toggle('error', !!isError);
el.style.display = msg ? 'block' : 'none';
}
document.addEventListener('DOMContentLoaded', loadApiKeys);
</script>
</body>
</html>