vacuum-wall/webui/static/pages/proxy.js

import { html, PageHeader, Badge, Empty, Table, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionCell, certStatusBadge, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';

const addDomain = QuickModal({
    title: 'Add Proxy Domain',
    fields: [
        { label: 'Domain', id: 'p-domain', placeholder: 'example.com' },
        { label: 'Backend Host', id: 'p-host', placeholder: '192.168.1.10' },
        { label: 'Backend Port', id: 'p-port', type: 'number', placeholder: '8080' },
        { label: 'Protocol', id: 'p-proto', placeholder: 'http or https' },
        { label: 'Cert (optional)', id: 'p-cert', placeholder: 'acme' },
    ],
    submit: {
        url: '/api/proxy/domains',
        body: () => ({
            domain: ($val('p-domain') || '').trim(),
            backend_host: ($val('p-host') || '').trim(),
            backend_port: parseInt($val('p-port')),
            backend_proto: ($val('p-proto') || 'http').trim() || 'http',
            cert: ($val('p-cert') || '').trim() || undefined,
        }),
        validate: (b) => !b.domain || !b.backend_host || !b.backend_port ? 'Domain, host, and port are required' : null,
        successMsg: 'Domain added',
    },
    refresh: ['nginx', 'acme'],
});

const editDomain = QuickModal({
    title: (d) => 'Edit: ' + d.domain,
    fields: (d) => [
        { label: 'Backend Host', id: 'pe-host', value: d.backend_host || '' },
        { label: 'Backend Port', id: 'pe-port', type: 'number', value: d.backend_port || '' },
        { label: 'Protocol', id: 'pe-proto', value: d.backend_proto || d.protocol || 'http' },
        { label: 'Cert (optional)', id: 'pe-cert', value: d.cert || '' },
    ],
    submit: {
        url: (d) => '/api/proxy/domains/' + enc(d.domain),
        method: 'PUT',
        body: () => ({
            backend_host: ($val('pe-host') || '').trim(),
            backend_port: parseInt($val('pe-port')),
            backend_proto: ($val('pe-proto') || 'http').trim(),
            cert: ($val('pe-cert') || '').trim() || undefined,
        }),
        validate: (b) => !b.backend_host || !b.backend_port ? 'Host and port are required' : null,
        successMsg: 'Domain updated',
    },
    refresh: ['nginx', 'acme'],
});

export default definePage({
    init() {
        return {
            nginx: getModel('nginx'),
            acme: getModel('acme'),
        };
    },
    render(state) {
        const guard = renderGuardMulti('Proxy', 'Nginx reverse proxy', state.nginx, state.acme);
        if (guard) return guard;

        const domains = state.nginx.data.domains || [];
        const rows = domains.map(d => {
            const certBadge = certStatusBadge({
                certStatus: d.cert_status,
                daysRemaining: d.days_remaining,
                expired: d.cert_status === 'expired',
            });

            return html`<tr key=${d.domain}>
                <td><strong>${esc(d.domain)}</strong></td>
                <td>${esc(d.backend_host || '-')}</td>
                <td>${d.backend_port || '-'}</td>
                <td><${Badge} text=${d.backend_proto || d.protocol || 'http'} variant="info" /></td>
                <td>${certBadge}</td>
                <${ActionCell}
                    editLabel="Edit" editClick=${() => editDomain(d)}
                    removeUrl=${'/api/proxy/domains/' + enc(d.domain)}
                    removeMessage=${'Remove proxy for ' + d.domain + '?'}
                    removeSuccess="Domain removed"
                    removeRefresh={['nginx', 'acme']}
                    removeLabel="Delete" />
            </tr>`;
        });

        const actions = ActionGroup(
            html`<button class="btn btn-primary" onClick=${() => addDomain(state)}>Add Domain</button>`,
            ActionButton({
                url: '/api/proxy/apply',
                successMsg: 'Nginx applied & reloaded',
                label: 'Apply',
                refresh: ['nginx', 'acme'],
            }),
        );

        return [
            PageHeader({ title: 'Proxy', subtitle: 'Nginx reverse proxy', actions }),
            rows.length
                ? Table({
                    columns: ['Domain', 'Backend Host', 'Port', 'Proto', 'Cert', 'Actions'],
                    rows,
                })
                : Empty({ text: 'No proxy domains configured. Add a domain to start terminating SSL.' }),
        ];
    },
});