mteehan/vacuum-wall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

proxy: refactor modals and add cert selector options

Browse Source
This commit is contained in:
Mike Teehan
2026-06-27 23:59:12 +00:00
parent 835326311b
commit 80dd4e3272
1 changed files with 170 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/static/pages/proxy.js
+141 -44
View File
@@ -1,4 +1,5 @@
import { html, PageHeader, Badge, Empty, Table, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionCell, ConfirmDelete, certStatusBadge, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
import { openModal, formModal, closeModal } from '/static/hoover/components/modal.js?v=7';
// ---------------------------------------------------------------------------
// Cert lookup map from ACME state keyed by domain name
@@ -14,23 +15,58 @@ function certLookup(acmeData) {
}
// ---------------------------------------------------------------------------
// Add Domain modal — paths-based body
// Build cert select options from ACME certs array
// ---------------------------------------------------------------------------
const addDomain = QuickModal({
title: 'Add Proxy Domain',
fields: [
function buildCertOptions(certs) {
const opts = [
['', '(none)'],
['acme', 'acme — auto-issue'],
['selfsigned', 'selfsigned'],
['file', 'file — custom path'],
];
for (const c of (certs || [])) {
const days = c.expired
? 'Expired'
: `${c.days_remaining}d`;
opts.push([`acme|${c.domain}`, `acme: ${c.domain} (${days})`]);
}
return opts;
}
// ---------------------------------------------------------------------------
// Map cert select value to payload cert string
// ---------------------------------------------------------------------------
function certValueFromSelect(raw) {
if (raw === 'acme' || (raw && raw.startsWith('acme|'))) return 'acme';
if (raw === 'selfsigned' || raw === 'file') return raw;
return undefined;
}
// ---------------------------------------------------------------------------
// Add Domain modal — paths-based body with cert selector
// ---------------------------------------------------------------------------
function addDomain(state) {
const certs = state.acme ? (state.acme.data.certs || []) : [];
const certOptions = buildCertOptions(certs);
openModal((inner) => {
formModal(inner, 'Add Proxy Domain', [
{ label: 'Domain', id: 'p-domain', placeholder: 'example.com' },
{ label: 'Path', id: 'p-path', placeholder: '/' },
{ 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: () => {
{ label: 'Cert', id: 'p-cert', tag: 'select', options: certOptions },
], [
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal() },
{
label: 'Add',
cls: 'btn-primary',
action: 's',
handler: async () => {
const path = ($val('p-path') || '/').trim() || '/';
return {
const rawCert = $val('p-cert');
const body = {
domain: ($val('p-domain') || '').trim(),
paths: {
[path]: {
@@ -42,64 +78,125 @@ const addDomain = QuickModal({
headers: {},
},
},
cert: ($val('p-cert') || '').trim() || undefined,
cert: certValueFromSelect(rawCert),
};
},
validate: (b) => {
if (!b.domain) return 'Domain is required';
const p = b.paths ? Object.values(b.paths)[0] : {};
if (!body.domain) { toast('Domain is required', 'error'); return; }
const p = body.paths ? Object.values(body.paths)[0] : {};
const be = p && p.backend;
if (!be || !be.host || !be.port) return 'Host and port are required';
return null;
if (!be || !be.host || !be.port) { toast('Host and port are required', 'error'); return; }
const res = await apiFetch('/api/proxy/domains', { method: 'POST', body });
if (res.ok) {
toast('Domain added', 'success');
closeModal();
await Promise.all(['nginx', 'acme'].map(m => modelFetch(m)));
} else {
toast(res.error || 'Failed', 'error');
}
},
successMsg: 'Domain added',
},
refresh: ['nginx', 'acme'],
]);
const certSelect = document.getElementById('p-cert');
const domainInput = document.getElementById('p-domain');
if (certSelect && domainInput) {
certSelect.addEventListener('change', () => {
const val = certSelect.value;
if (val && val.startsWith('acme|')) {
domainInput.value = val.slice(5);
}
});
}
});
}
// ---------------------------------------------------------------------------
// Edit Domain modal — updates backend for the root path
// Edit Domain modal — updates backend for the root path, with cert selector
// ---------------------------------------------------------------------------
const editDomain = QuickModal({
title: (d) => 'Edit: ' + d.domain + ' ' + d.path,
fields: (d) => {
function editDomain(d, state) {
const certs = state.acme ? (state.acme.data.certs || []) : [];
const certOptions = buildCertOptions(certs);
let selectedCert = '';
if (d._cert) {
selectedCert = `acme|${d._cert.domain}`;
} else if (d.cert) {
selectedCert = d.cert;
}
const be = d.backend || {};
return [
openModal((inner) => {
formModal(inner, 'Edit: ' + d.domain + ' ' + d.path, [
{ label: 'Backend Host', id: 'pe-host', value: be.host || '' },
{ label: 'Backend Port', id: 'pe-port', type: 'number', value: be.port || '' },
{ label: 'Protocol', id: 'pe-proto', value: be.proto || 'http' },
{ label: 'Cert (optional)', id: 'pe-cert', value: d._cert || d.cert || '' },
];
},
submit: {
url: (d) => '/api/proxy/domains/' + enc(d.domain),
method: 'PUT',
body: (d) => ({
{ label: 'Cert', id: 'pe-cert', tag: 'select', options: certOptions },
], [
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal() },
{
label: 'Save',
cls: 'btn-primary',
action: 's',
handler: async () => {
const rawCert = $val('pe-cert');
const body = {
backend: {
host: ($val('pe-host') || '').trim(),
port: parseInt($val('pe-port')),
proto: ($val('pe-proto') || 'http').trim(),
},
cert: ($val('pe-cert') || '').trim() || undefined,
}),
validate: (b) => !b.backend || !b.backend.host || !b.backend.port ? 'Host and port are required' : null,
successMsg: 'Domain updated',
cert: certValueFromSelect(rawCert),
};
if (!body.backend || !body.backend.host || !body.backend.port) {
toast('Host and port are required', 'error');
return;
}
const res = await apiFetch('/api/proxy/domains/' + enc(d.domain), { method: 'PUT', body });
if (res.ok) {
toast('Domain updated', 'success');
closeModal();
await Promise.all(['nginx', 'acme'].map(m => modelFetch(m)));
} else {
toast(res.error || 'Failed', 'error');
}
},
refresh: ['nginx', 'acme'],
},
]);
const certSelect = inner.querySelector('#pe-cert');
if (certSelect) {
certSelect.value = selectedCert;
}
});
}
// ---------------------------------------------------------------------------
// Path detail row
// ---------------------------------------------------------------------------
function pathRow(d, certs, domainPaths) {
function pathRow(d, certs, domainPaths, state) {
const be = d.backend || {};
const cert = certs[d.domain];
const certBadge = cert
? certStatusBadge({
let certBadge, certTitle;
if (cert) {
certBadge = certStatusBadge({
daysRemaining: cert.days_remaining,
expired: cert.expired,
})
: Badge({ text: '—', variant: 'info' });
});
certTitle = 'ACME: ' + cert.domain;
} else if (d.cert === 'selfsigned') {
certBadge = Badge({ text: 'Self-signed', variant: 'warning' });
certTitle = 'Self-signed';
} else if (d.cert === 'file') {
certBadge = Badge({ text: 'File', variant: 'secondary' });
certTitle = 'File';
} else {
certBadge = Badge({ text: '—', variant: 'info' });
certTitle = 'No certificate';
}
const isWs = d.is_websocket;
const isMgmt = d.is_management;
@@ -121,7 +218,7 @@ function pathRow(d, certs, domainPaths) {
} else {
actions = ActionCell({
editLabel: 'Edit',
editClick: () => editDomain(d),
editClick: () => editDomain(d, state),
removeUrl: '/api/proxy/domains/' + enc(d.domain),
removeMessage: 'Remove ' + enc(d.domain) + ' ' + enc(d.path) + '?',
removeSuccess: 'Removed',
@@ -141,7 +238,7 @@ function pathRow(d, certs, domainPaths) {
<td>${be.port || '-'}</td>
<td><${Badge} text=${be.proto || 'http'} variant="info" /></td>
<td>${flagBadges}</td>
<td>${certBadge}</td>
<td title=${certTitle}>${certBadge}</td>
<td>${actions}</td>
</tr>`;
}
@@ -176,7 +273,7 @@ export default definePage({
_cert: certs[d.domain] || null,
}));
const rows = enriched.map(d => pathRow(d, certs, groups[d.domain]));
const rows = enriched.map(d => pathRow(d, certs, groups[d.domain], state));
const actions = ActionGroup(
html`<button class="btn btn-primary" onClick=${() => addDomain(state)}>Add Domain</button>`,