irdb/ui/resources/views/pages/settings/index.twig

{% extends 'layout.twig' %}

{% block title %}Settings — IRDB{% endblock %}

{% block content %}
{% import 'partials/sort.twig' as sort %}
<div class="mx-auto max-w-5xl space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">Settings</h1>
        <span class="text-xs text-slate-500 dark:text-slate-400">Admin only · read-only · masked secrets</span>
    </div>

    {% if error %}
        <div class="rounded-md border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-300">{{ error }}</div>
    {% endif %}

    {# ------------------------- Configuration ------------------------- #}
    {% if config and config.sections %}
        <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Configuration</h2>
            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Effective values from the api's environment. Secrets are masked (<code>***</code>) or previewed (first 8 chars + …).</p>

            <div class="mt-4 grid gap-5 md:grid-cols-2">
                {% for section_name, items in config.sections %}
                    <div class="rounded-lg border border-slate-100 dark:border-slate-800">
                        <div class="border-b border-slate-100 bg-slate-50 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400">{{ section_name }}</div>
                        <dl class="divide-y divide-slate-100 dark:divide-slate-800 text-sm">
                            {% for key, value in items %}
                                <div class="grid grid-cols-2 gap-2 px-4 py-2">
                                    <dt class="font-mono text-xs text-slate-500 dark:text-slate-400">{{ key }}</dt>
                                    <dd class="break-all font-mono text-xs text-slate-700 dark:text-slate-200">
                                        {%- if value is null -%}<span class="text-slate-400">—</span>
                                        {%- elseif value is same as(true) -%}true
                                        {%- elseif value is same as(false) -%}false
                                        {%- else -%}{{ value }}{%- endif -%}
                                    </dd>
                                </div>
                            {% endfor %}
                        </dl>
                    </div>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ------------------------------ Jobs ----------------------------- #}
    {% if jobs and jobs.jobs %}
        <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Jobs</h2>
            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Latest run, lock state, and manual-trigger buttons. Manual triggers run synchronously — wait for the response.</p>

            <div class="mt-4 overflow-hidden rounded-lg border border-slate-100 dark:border-slate-800">
                <table class="w-full text-sm" data-sortable-table="settings-jobs">
                    <thead class="border-b border-slate-100 bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400">
                        <tr>
                            {{ sort.th('Name', 'name') }}
                            {{ sort.th('Last status', 'status') }}
                            {{ sort.th('Last finished', 'last_finished', 'date') }}
                            {{ sort.th('Items', 'items', 'number') }}
                            <th class="px-4 py-2 text-right font-medium">Trigger</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        {% for name, info in jobs.jobs %}
                            <tr>
                                <td class="px-4 py-2 align-top font-mono text-xs" data-sort-value="{{ name }}">
                                    {{ name }}
                                    {% if info.overdue %}
                                        <span class="ml-1 rounded bg-red-100 px-1.5 py-0.5 text-[0.65rem] font-mono uppercase text-red-800 dark:bg-red-950 dark:text-red-300">overdue</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-2 align-top" data-sort-value="{{ info.last_run.status|default('') }}">
                                    {% if info.last_run %}
                                        {% set s = info.last_run.status %}
                                        {% set classes = {
                                            'success':        'bg-emerald-100 text-emerald-900 dark:bg-emerald-900 dark:text-emerald-100',
                                            'failure':        'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100',
                                            'skipped_locked': 'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100',
                                            'running':        'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
                                        } %}
                                        <span class="rounded px-2 py-0.5 font-mono text-[0.65rem] uppercase {{ classes[s]|default('bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300') }}">{{ s }}</span>
                                    {% else %}
                                        <span class="text-xs text-slate-400">never run</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-2 align-top font-mono text-xs text-slate-500" data-sort-value="{{ info.last_run.finished_at|default('') }}">
                                    {% if info.last_run.finished_at %}<time class="irdb-dt" datetime="{{ info.last_run.finished_at }}">{{ info.last_run.finished_at }}</time>{% else %}—{% endif %}
                                </td>
                                <td class="px-4 py-2 align-top font-mono text-xs text-slate-500" data-sort-value="{{ info.last_run.items_processed|default('') }}">
                                    {{ info.last_run.items_processed|default('—') }}
                                </td>
                                <td class="px-4 py-2 align-top text-right">
                                    {% if name != 'tick' %}
                                        <form method="post" action="/app/settings/jobs/trigger/{{ name }}" class="inline" x-data="{ submitting: false }" x-on:submit="submitting = true">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                            <button type="submit" x-bind:disabled="submitting"
                                                    class="rounded-md border border-slate-300 px-2 py-1 text-xs hover:bg-slate-50 disabled:opacity-50 dark:border-slate-700 dark:hover:bg-slate-800">
                                                <span x-show="!submitting">Run now</span>
                                                <span x-show="submitting" x-cloak>Running…</span>
                                            </button>
                                        </form>
                                    {% else %}
                                        <span class="text-xs text-slate-400">scheduled</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    {% endif %}

    {# -------------------- Demo & maintenance -------------------- #}
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Demo &amp; maintenance</h2>
        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Populate the database with sample data for screenshots and demos, or wipe operational data to start clean. Both actions are admin-only and audited.</p>

        <div class="mt-4 grid gap-4 md:grid-cols-2">
            <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-900 dark:bg-emerald-950/40"
                 x-data="{ open: false, submitting: false }">
                <h3 class="text-sm font-semibold text-emerald-800 dark:text-emerald-200">Load demo data</h3>
                <p class="mt-1 text-xs text-emerald-900/80 dark:text-emerald-200/80">
                    Inserts demo reporters, consumers, IPs, reports, manual blocks, allowlist entries, and synthetic GeoIP — then triggers a full score recompute. Returns "already seeded" if demo data is present.
                </p>
                <div class="mt-3">
                    <button type="button" x-on:click="open = true"
                            class="rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-500">
                        Load demo data…
                    </button>
                </div>

                <div x-show="open" x-cloak
                     class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/70 px-4">
                    <div class="w-full max-w-md rounded-2xl border border-emerald-300 bg-white p-6 shadow-2xl dark:border-emerald-700 dark:bg-slate-900">
                        <h3 class="text-lg font-semibold text-emerald-700 dark:text-emerald-300">Load demo data?</h3>
                        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
                            This will add sample reporters, consumers, IPs, and reports to the database, then run a full recompute. Existing real data is left untouched.
                        </p>
                        <form method="post" action="/app/settings/maintenance/seed-demo" class="mt-4 flex justify-end gap-2"
                              x-on:submit="submitting = true">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <button type="button" x-on:click="open = false"
                                    class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">Cancel</button>
                            <button type="submit" x-bind:disabled="submitting"
                                    class="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-500 disabled:opacity-50">
                                <span x-show="!submitting">Load demo data</span>
                                <span x-show="submitting" x-cloak>Loading…</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950/40"
                 x-data="{ open: false, confirm: '', submitting: false }">
                <h3 class="text-sm font-semibold text-red-800 dark:text-red-200">Purge operational data</h3>
                <p class="mt-1 text-xs text-red-900/80 dark:text-red-200/80">
                    Deletes all reports, scores, manual blocks, allowlist, audit log, reporters, consumers, and non-service tokens. Users, OIDC mappings, and categories are preserved.
                </p>
                <div class="mt-3">
                    <button type="button" x-on:click="open = true"
                            class="rounded-md border border-red-400 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50 dark:border-red-700 dark:bg-slate-900 dark:text-red-300 dark:hover:bg-slate-800">
                        Purge data…
                    </button>
                </div>

                <div x-show="open" x-cloak
                     class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/70 px-4">
                    <div class="w-full max-w-md rounded-2xl border border-red-400 bg-white p-6 shadow-2xl dark:border-red-700 dark:bg-slate-900">
                        <h3 class="text-lg font-semibold text-red-700 dark:text-red-300">Purge operational data?</h3>
                        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
                            This will <strong class="text-red-700 dark:text-red-300">permanently delete</strong> reports, scores, blocks, allowlist, audit log, reporters, consumers, and tokens. The service token, your user account, OIDC mappings, and abuse categories are preserved.
                        </p>
                        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
                            Type <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-xs text-red-700 dark:bg-slate-800 dark:text-red-300">PURGE</code> to confirm:
                        </p>
                        <form method="post" action="/app/settings/maintenance/purge" class="mt-3"
                              x-on:submit="submitting = true">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <input type="text" name="confirm" autocomplete="off" x-model="confirm"
                                   class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-sm dark:border-slate-700 dark:bg-slate-950"
                                   placeholder="PURGE">
                            <div class="mt-4 flex justify-end gap-2">
                                <button type="button" x-on:click="open = false; confirm = ''"
                                        class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">Cancel</button>
                                <button type="submit" x-bind:disabled="confirm !== 'PURGE' || submitting"
                                        class="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-500 disabled:opacity-40">
                                    <span x-show="!submitting">Purge data</span>
                                    <span x-show="submitting" x-cloak>Purging…</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# ------------------------------ GeoIP ----------------------------- #}
    {% if config and config.sections.geoip %}
        <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">GeoIP</h2>
            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Provider, on-disk paths, and credential state. DB freshness comes from healthz; the trigger button on <code>refresh-geoip</code> is in the Jobs section above.</p>
            <dl class="mt-3 grid grid-cols-3 gap-2 text-sm">
                <dt class="text-slate-500 dark:text-slate-400">Provider</dt>
                <dd class="col-span-2 font-mono text-xs">{{ config.sections.geoip.GEOIP_PROVIDER|default('—') }}</dd>
                <dt class="text-slate-500 dark:text-slate-400">Country DB</dt>
                <dd class="col-span-2 font-mono text-xs">{{ config.sections.geoip.GEOIP_COUNTRY_DB|default('—') }}</dd>
                <dt class="text-slate-500 dark:text-slate-400">ASN DB</dt>
                <dd class="col-span-2 font-mono text-xs">{{ config.sections.geoip.GEOIP_ASN_DB|default('—') }}</dd>
                <dt class="text-slate-500 dark:text-slate-400">MaxMind key</dt>
                <dd class="col-span-2 font-mono text-xs">{{ config.sections.geoip.MAXMIND_LICENSE_KEY ? config.sections.geoip.MAXMIND_LICENSE_KEY : '(unset)' }}</dd>
                <dt class="text-slate-500 dark:text-slate-400">IPinfo token</dt>
                <dd class="col-span-2 font-mono text-xs">{{ config.sections.geoip.IPINFO_TOKEN ? config.sections.geoip.IPINFO_TOKEN : '(unset)' }}</dd>
            </dl>
        </section>
    {% endif %}
</div>
{% endblock %}