{% extends "base.html" %}
{% block content %}
<div class="row g-3 stagger">
<div class="col-12 col-xl-7"><div class="card"><div class="card-header"><i class="bi bi-sliders"></i>{{ _('Runtime settings') }}</div><div class="card-body">
<p class="small text-muted">{{ _('Applied immediately and persisted in SQLite.') }} <code>OCRROUTE_*</code> · <code>.env</code></p>
<form id="s-form" class="d-grid gap-2">
<div class="row-fields"><div class="field"><label>{{ _('Log retention (days)') }}</label><input name="log_retention_days" type="number" value="{{ settings.log_retention_days }}"></div><div class="field"><label>{{ _('Cache TTL (s)') }}</label><input name="cache_ttl_seconds" type="number" value="{{ settings.cache_ttl_seconds }}"></div><div class="field"><label>{{ _('Max upload (bytes)') }}</label><input name="max_upload_bytes" type="number" value="{{ settings.max_upload_bytes }}"></div><div class="field"><label>{{ _('Max PDF pages') }}</label><input name="max_pages" type="number" value="{{ settings.max_pages }}"></div></div>
<div class="row-fields"><div class="field"><label>{{ _('Timeout (s)') }}</label><input name="default_timeout" type="number" value="{{ settings.default_timeout }}"></div><div class="field"><label>{{ _('Deadline (ms)') }}</label><input name="total_deadline_ms" type="number" value="{{ settings.total_deadline_ms }}"></div><div class="field"><label>{{ _('Breaker threshold') }}</label><input name="breaker_threshold" type="number" value="{{ settings.breaker_threshold }}"></div><div class="field"><label>{{ _('Breaker cooldown (s)') }}</label><input name="breaker_cooldown_seconds" type="number" value="{{ settings.breaker_cooldown_seconds }}"></div></div>
<div class="row-fields"><div class="field"><label>{{ _('URL allowlist') }}</label><input name="url_allowlist" value="{{ settings.url_allowlist|join(', ') }}"></div><div class="field"><label>{{ _('URL denylist') }}</label><input name="url_denylist" value="{{ settings.url_denylist|join(', ') }}"></div><div class="field"><label>{{ _('CORS origins') }}</label><input name="cors_origins" value="{{ settings.cors_origins|join(', ') }}"></div></div>
<div class="d-flex gap-3 flex-wrap"><label class="check"><input type="checkbox" name="store_inputs" {% if settings.store_inputs %}checked{% endif %}>{{ _('store inputs (enables retry)') }}</label><label class="check"><input type="checkbox" name="privacy_mode" {% if settings.privacy_mode %}checked{% endif %}>{{ _('privacy mode') }}</label><label class="check"><input type="checkbox" name="allow_private_urls" {% if settings.allow_private_urls %}checked{% endif %}>{{ _('allow private URLs (lab only)') }}</label></div>
<div class="d-flex gap-2 flex-wrap mt-2"><button class="btn btn-primary" type="submit">{{ _('Save') }}</button><button class="btn btn-outline-secondary" type="button" id="clear-cache">{{ _('Clear result cache') }}</button><a class="btn btn-outline-secondary" href="/panel/doctor?format=md" download="ocrroute-report.md"><i class="bi bi-download me-1"></i>{{ _('Download system report') }}</a></div></form>
<h3 class="small text-muted text-uppercase fw-bold mt-4">{{ _('Storage') }}</h3><table class="table table-sm small mb-0"><tr><td class="text-muted">{{ _('home') }}</td><td class="num">{{ settings.home }}</td></tr><tr><td class="text-muted">{{ _('database') }}</td><td class="num">{{ settings.db_url or (settings.home ~ '/ocrroute.db') }}</td></tr><tr><td class="text-muted">{{ _('artifacts') }}</td><td class="num">{{ settings.artifacts_dir or (settings.home ~ '/artifacts') }}</td></tr><tr><td class="text-muted">{{ _('bind') }}</td><td class="num">{{ settings.host }}:{{ settings.port }}{% if settings.panel_port %} · panel {{ settings.panel_port }}{% endif %}</td></tr></table></div></div></div>
<div class="col-12 col-xl-5">
<div class="card"><div class="card-header"><i class="bi bi-people"></i>{{ _('Panel users') }}<span class="ms-auto small text-muted fw-normal text-none">admin · operator · viewer</span></div>
<div class="table-responsive"><table class="table table-sm mb-0 align-middle"><thead><tr><th>{{ _('user') }}</th><th>{{ _('role') }}</th><th>{{ _('status') }}</th><th>{{ _('last login') }}</th><th></th></tr></thead><tbody>
{% for u in users %}<tr data-uid="{{ u.id }}"><td><strong>{{ u.username }}</strong>{% if u.username == user %} <span class="badge badge-soft">{{ _('you') }}</span>{% endif %}</td>
<td>{% if role == 'admin' %}<select class="form-select form-select-sm u-role" data-uid="{{ u.id }}">{% for r in ['admin','operator','viewer'] %}<option {% if u.role == r %}selected{% endif %}>{{ r }}</option>{% endfor %}</select>{% else %}{{ u.role }}{% endif %}</td>
<td>{% if role == 'admin' %}<div class="form-check form-switch m-0"><input class="form-check-input u-enabled" type="checkbox" role="switch" data-uid="{{ u.id }}" {% if u.enabled %}checked{% endif %}></div>{% else %}<span class="status {{ 'healthy' if u.enabled else 'failed' }}">{{ 'on' if u.enabled else 'off' }}</span>{% endif %}</td>
<td class="small" title="{{ u.last_login_at }}">{{ rel(u.last_login_at) }}</td>
<td class="text-end text-nowrap">{% if role == 'admin' %}<div class="btn-group btn-group-sm"><button class="btn btn-outline-secondary u-reset" data-uid="{{ u.id }}" data-name="{{ u.username }}"><i class="bi bi-key"></i></button><button class="btn btn-outline-danger u-del" data-uid="{{ u.id }}" data-name="{{ u.username }}" {% if u.username == user %}disabled{% endif %}><i class="bi bi-trash"></i></button></div>{% endif %}</td></tr>{% endfor %}
</tbody></table></div>
{% if role == 'admin' %}<div class="card-body border-top"><form id="user-form" class="row g-2 align-items-end"><div class="col-12 col-sm-4"><label class="form-label">{{ _('Username') }}</label><input class="form-control form-control-sm" name="username" required pattern="[A-Za-z0-9._@-]+"></div><div class="col-12 col-sm-4"><label class="form-label">{{ _('Password') }}</label><input class="form-control form-control-sm" name="password" type="password" minlength="8" required autocomplete="new-password"></div><div class="col-6 col-sm-2"><label class="form-label">{{ _('role') }}</label><select class="form-select form-select-sm" name="role"><option>operator</option><option>viewer</option><option>admin</option></select></div><div class="col-6 col-sm-2"><button class="btn btn-primary btn-sm w-100" type="submit">{{ _('Add user') }}</button></div></form>
<p class="small text-muted mt-2 mb-0"><strong>admin</strong>: {{ _('everything') }} · <strong>operator</strong>: {{ _('OCR + providers, credentials, routes, engines') }} · <strong>viewer</strong>: {{ _('read-only') }}.</p></div>{% endif %}
<div class="card-body border-top"><form id="pw-form" class="row g-2 align-items-end"><div class="col-12"><span class="small text-muted text-uppercase fw-bold">{{ _('Change my password') }}</span></div><div class="col-12 col-sm-5"><input class="form-control form-control-sm" name="current" type="password" placeholder="{{ _('current password') }}" required autocomplete="current-password"></div><div class="col-12 col-sm-5"><input class="form-control form-control-sm" name="new" type="password" placeholder="{{ _('new password (min 8)') }}" minlength="8" required autocomplete="new-password"></div><div class="col-12 col-sm-2"><button class="btn btn-outline-secondary btn-sm w-100" type="submit">{{ _('Save') }}</button></div></form></div></div>
<dialog id="reset-dlg"><h2>{{ _('Reset password') }}</h2><p class="small text-muted" id="reset-who"></p><div class="field"><label>{{ _('New password (min 8)') }}</label><input id="reset-pw" type="password" minlength="8" autocomplete="new-password"></div><div class="d-flex gap-2 mt-3"><button class="btn btn-primary" id="reset-run">{{ _('Save') }}</button><button class="btn btn-outline-secondary" onclick="this.closest('dialog').close()">{{ _('Cancel') }}</button></div></dialog>
<div class="card mt-3"><div class="card-header"><i class="bi bi-journal-text"></i>{{ _('Audit log') }}</div><div class="table-responsive" style="max-height:420px"><table class="table table-sm mb-0"><thead><tr><th>{{ _('when') }}</th><th>{{ _('actor') }}</th><th>{{ _('action') }}</th><th>{{ _('target') }}</th></tr></thead><tbody>{% for a in audit %}<tr><td class="small" title="{{ a.created_at }}">{{ rel(a.created_at) }}</td><td class="small">{{ a.actor }}</td><td><code>{{ a.action }}</code></td><td class="small">{{ a.target_type }} {{ a.target_id[-8:] }}</td></tr>{% else %}<tr><td colspan="4" class="text-muted">{{ _('No mutations recorded yet.') }}</td></tr>{% endfor %}</tbody></table></div></div>
</div></div>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => { const {api, toast, $, confirmDo} = OcrRoute;
$("#s-form").onsubmit = async (e) => { e.preventDefault(); const f = e.target.elements; const list = v => v.split(",").map(s => s.trim()).filter(Boolean); const values = {log_retention_days: +f.log_retention_days.value, cache_ttl_seconds: +f.cache_ttl_seconds.value, max_upload_bytes: +f.max_upload_bytes.value, max_pages: +f.max_pages.value, default_timeout: +f.default_timeout.value, total_deadline_ms: +f.total_deadline_ms.value, breaker_threshold: +f.breaker_threshold.value, breaker_cooldown_seconds: +f.breaker_cooldown_seconds.value, url_allowlist: list(f.url_allowlist.value), url_denylist: list(f.url_denylist.value), cors_origins: list(f.cors_origins.value), store_inputs: f.store_inputs.checked, privacy_mode: f.privacy_mode.checked, allow_private_urls: f.allow_private_urls.checked}; try { await api("PATCH", "/v1/settings", {values}); toast("Settings saved"); } catch (err) { toast(err.message, true); } };
const uf = $("#user-form"); if (uf) uf.onsubmit = async (e) => { e.preventDefault(); const f = uf.elements; try { await api("POST", "/v1/users", {username: f.username.value.trim(), password: f.password.value, role: f.role.value}); location.reload(); } catch (err) { toast(err.message, true); } };
document.querySelectorAll(".u-role").forEach(sel => sel.onchange = async () => { try { await api("PATCH", `/v1/users/${sel.dataset.uid}`, {role: sel.value}); toast("Saved"); } catch (e) { toast(e.message, true); location.reload(); } });
document.querySelectorAll(".u-enabled").forEach(cb => cb.onchange = async () => { try { await api("PATCH", `/v1/users/${cb.dataset.uid}`, {enabled: cb.checked}); toast("Saved"); } catch (e) { toast(e.message, true); cb.checked = !cb.checked; } });
document.querySelectorAll(".u-del").forEach(b => b.onclick = async () => { if (!confirmDo(`Delete user ${b.dataset.name}?`)) return; try { await api("DELETE", `/v1/users/${b.dataset.uid}`); location.reload(); } catch (e) { toast(e.message, true); } });
document.querySelectorAll(".u-reset").forEach(b => b.onclick = () => { $("#reset-who").textContent = `New password for ${b.dataset.name}`; $("#reset-pw").value = ""; $("#reset-run").onclick = async () => { try { await api("PATCH", `/v1/users/${b.dataset.uid}`, {password: $("#reset-pw").value}); $("#reset-dlg").close(); toast("Saved"); } catch (e) { toast(e.message, true); } }; $("#reset-dlg").showModal(); });
const pf = $("#pw-form"); if (pf) pf.onsubmit = async (e) => { e.preventDefault(); try { await api("POST", "/v1/users/me/password", {current_password: pf.elements.current.value, new_password: pf.elements.new.value}); pf.reset(); toast("Saved"); } catch (err) { toast(err.message, true); } };
$("#clear-cache").onclick = async () => { if (!confirmDo("Clear all cached results?")) return; try { const r = await api("POST", "/v1/cache/clear"); toast(`Cleared ${r.cleared} entries`); } catch (e) { toast(e.message, true); } }; });
</script>{% endblock %}