Inline host editing in hosts table · ad1b1b2

+329 -62
scripts/host_manager.pl
@@ -192,6 +192,10 @@ sub handle_client {
         my $name = $1;
         return send_file($client, ca_issued_cert_path($name), 'application/x-pem-file; charset=utf-8', "$name.crt");
     }
+    if ($method eq 'GET' && $path =~ m{\A/download/ca/key/([A-Za-z0-9_.-]+)\.key\z}) {
+        my $name = $1;
+        return send_file($client, ca_issued_key_path($name), 'application/x-pem-file; charset=utf-8', "$name.key");
+    }
 
     if ($method eq 'POST' && $path =~ m{^/api/}) {
         if ($path eq '/api/hosts/upsert') {
@@ -214,6 +218,14 @@ sub handle_client {
             my $payload = request_payload(\%headers, $body);
             return delete_vhost($client, $payload);
         }
+        if ($path eq '/api/vhosts/certificate') {
+            my $payload = request_payload(\%headers, $body);
+            return set_vhost_certificate($client, $payload);
+        }
+        if ($path eq '/api/vhosts/issue-certificate') {
+            my $payload = request_payload(\%headers, $body);
+            return issue_vhost_certificate($client, $payload);
+        }
         if ($path eq '/api/work-orders/confirm') {
             my $payload = request_payload(\%headers, $body);
             return confirm_work_order($client, $payload);
@@ -399,21 +411,117 @@ sub registry_payload {
     my ($registry) = @_;
     my $problems = analyze_hosts($registry->{hosts});
     my @hosts = map { host_payload($_) } @{ $registry->{hosts} };
+    my $dbh = dbh();
+    my @vhosts = vhost_payloads($dbh);
+    my @certificates = certificate_payloads($dbh);
     my $vhost_count = sum(map { scalar declared_vhost_names($_) } @{ $registry->{hosts} });
     return {
         version => $registry->{version},
         updated_at => $registry->{updated_at},
         policy => $registry->{policy},
         hosts => \@hosts,
+        vhosts => \@vhosts,
+        certificates => \@certificates,
         problems => $problems,
         counts => {
             hosts => scalar @{ $registry->{hosts} },
-            vhosts => $vhost_count,
+            vhosts => scalar(@vhosts) || $vhost_count,
             problems => scalar @$problems,
         },
     };
 }
 
+sub vhost_payloads {
+    my ($dbh) = @_;
+    my @rows;
+    my $sth = $dbh->prepare(<<'SQL');
+SELECT
+    v.vhost_fqdn,
+    v.host_fqdn,
+    v.status AS vhost_status,
+    v.certificate_id,
+    h.legacy_id,
+    h.hosts_ip,
+    h.dns_ip,
+    h.monitoring,
+    h.status AS host_status,
+    c.common_name,
+    c.not_after,
+    c.fingerprint_sha256,
+    c.status AS certificate_status
+FROM vhosts v
+JOIN hosts h ON h.fqdn = v.host_fqdn
+LEFT JOIN certificates c ON c.certificate_id = v.certificate_id
+WHERE v.status = 'active'
+ORDER BY v.vhost_fqdn
+SQL
+    $sth->execute;
+    while (my $row = $sth->fetchrow_hashref) {
+        my $cert_id = clean_scalar($row->{certificate_id} || '');
+        my %certificate = $cert_id ? (
+            id => $cert_id,
+            name => $cert_id,
+            common_name => clean_scalar($row->{common_name} || ''),
+            status => clean_scalar($row->{certificate_status} || ''),
+            not_after => clean_scalar($row->{not_after} || ''),
+            fingerprint_sha256 => clean_scalar($row->{fingerprint_sha256} || ''),
+            has_private_key => json_bool(-f ca_issued_key_path($cert_id) ? 1 : 0),
+        ) : ();
+        push @rows, {
+            vhost => $row->{vhost_fqdn},
+            vhost_fqdn => $row->{vhost_fqdn},
+            host_id => $row->{legacy_id} || '',
+            host_fqdn => $row->{host_fqdn},
+            ip => $row->{hosts_ip} || $row->{dns_ip} || '',
+            derived_aliases => short_alias_for_fqdn($row->{vhost_fqdn}) ? [ short_alias_for_fqdn($row->{vhost_fqdn}) ] : [],
+            monitoring => $row->{monitoring} || '',
+            status => $row->{host_status} || $row->{vhost_status} || '',
+            vhost_status => $row->{vhost_status} || '',
+            certificate_id => $cert_id,
+            certificate => $cert_id ? \%certificate : undef,
+        };
+    }
+    return @rows;
+}
+
+sub certificate_payloads {
+    my ($dbh) = @_;
+    my @certificates;
+    my $sth = $dbh->prepare('SELECT * FROM certificates WHERE status <> ? ORDER BY certificate_id');
+    $sth->execute('retired');
+    while (my $row = $sth->fetchrow_hashref) {
+        my $id = clean_scalar($row->{certificate_id} || '');
+        next unless $id;
+        push @certificates, {
+            id => $id,
+            name => $id,
+            host_fqdn => $row->{host_fqdn} || '',
+            common_name => $row->{common_name} || '',
+            subject => $row->{subject} || '',
+            issuer => $row->{issuer} || '',
+            serial => $row->{serial} || '',
+            status => $row->{status} || '',
+            not_before => $row->{not_before} || '',
+            not_after => $row->{not_after} || '',
+            fingerprint_sha256 => $row->{fingerprint_sha256} || '',
+            dns_names => [ certificate_dns_names($dbh, $id) ],
+            has_private_key => json_bool(-f ca_issued_key_path($id) ? 1 : 0),
+        };
+    }
+    return @certificates;
+}
+
+sub certificate_dns_names {
+    my ($dbh, $certificate_id) = @_;
+    my @names;
+    my $sth = $dbh->prepare('SELECT dns_name FROM certificate_dns_names WHERE certificate_id = ? ORDER BY dns_name');
+    $sth->execute($certificate_id);
+    while (my ($name) = $sth->fetchrow_array) {
+        push @names, $name;
+    }
+    return @names;
+}
+
 sub upsert_host {
     my ($client, $payload) = @_;
     my $id = clean_id($payload->{id} || '');
@@ -597,6 +705,82 @@ sub delete_vhost {
     return send_json($client, 200, { ok => json_bool(1), vhost_fqdn => $vhost, previous_host_fqdn => $current_fqdn });
 }
 
+sub set_vhost_certificate {
+    my ($client, $payload) = @_;
+    my $vhost = normalize_dns_name($payload->{vhost_fqdn} || '');
+    my $raw_certificate_id = clean_scalar($payload->{certificate_id} || $payload->{cert_id} || '');
+    my $certificate_id = clean_certificate_id($raw_certificate_id);
+    return send_json($client, 400, { error => 'invalid_vhost' }) unless name_is_vhost($vhost);
+    return send_json($client, 400, { error => 'invalid_certificate' })
+        if length($raw_certificate_id) && !length($certificate_id);
+
+    my $dbh = dbh();
+    return send_json($client, 404, { error => 'vhost_not_found' })
+        unless db_scalar($dbh, "SELECT COUNT(*) FROM vhosts WHERE vhost_fqdn = ? AND status = 'active'", $vhost);
+    if (length $certificate_id) {
+        return send_json($client, 400, { error => 'invalid_certificate' })
+            unless db_scalar($dbh, "SELECT COUNT(*) FROM certificates WHERE certificate_id = ? AND status <> 'retired'", $certificate_id);
+    }
+
+    my $now = iso_now();
+    $dbh->do(
+        'UPDATE vhosts SET certificate_id = ?, tls_mode = ?, updated_at = ? WHERE vhost_fqdn = ? AND status = ?',
+        undef,
+        length($certificate_id) ? $certificate_id : undef,
+        length($certificate_id) ? 'local-ca' : 'none',
+        $now,
+        $vhost,
+        'active',
+    );
+    set_schema_meta($dbh, 'registry_updated_at', $now);
+    return send_json($client, 200, { ok => json_bool(1), vhost_fqdn => $vhost, certificate_id => $certificate_id });
+}
+
+sub issue_vhost_certificate {
+    my ($client, $payload) = @_;
+    my $vhost = normalize_dns_name($payload->{vhost_fqdn} || '');
+    return send_json($client, 400, { error => 'invalid_vhost' }) unless name_is_vhost($vhost);
+
+    my $dbh = dbh();
+    my ($host_fqdn) = $dbh->selectrow_array(
+        "SELECT host_fqdn FROM vhosts WHERE vhost_fqdn = ? AND status = 'active'",
+        undef,
+        $vhost,
+    );
+    return send_json($client, 404, { error => 'vhost_not_found' }) unless $host_fqdn;
+
+    my @dns_names = unique_preserve(grep { length $_ } ($vhost, short_alias_for_fqdn($vhost)));
+    my $certificate_id = clean_certificate_id($vhost . '-' . strftime('%Y%m%d%H%M%S', localtime));
+    my $issued = eval {
+        ca_manager_output('issue', $certificate_id, @dns_names);
+        ca_manager_json('list-json');
+        with_transaction($dbh, sub {
+            my $now = iso_now();
+            $dbh->do(
+                "UPDATE vhosts SET certificate_id = ?, tls_mode = 'local-ca', updated_at = ? WHERE vhost_fqdn = ? AND status = 'active'",
+                undef,
+                $certificate_id,
+                $now,
+                $vhost,
+            );
+            set_schema_meta($dbh, 'registry_updated_at', $now);
+        });
+        1;
+    };
+    if (!$issued) {
+        return send_json($client, 409, { error => 'certificate_issue_failed', detail => clean_scalar($@ || '') });
+    }
+
+    my ($cert) = grep { ($_->{id} || '') eq $certificate_id } certificate_payloads($dbh);
+    return send_json($client, 200, {
+        ok => json_bool(1),
+        vhost_fqdn => $vhost,
+        host_fqdn => $host_fqdn,
+        certificate_id => $certificate_id,
+        certificate => $cert || { id => $certificate_id, name => $certificate_id, dns_names => \@dns_names },
+    });
+}
+
 sub analyze_hosts {
     my ($hosts) = @_;
     my @problems;
@@ -980,15 +1164,27 @@ sub ca_issued_cert_path {
     return ca_dir() . "/issued/$name.cert.pem";
 }
 
-sub ca_manager_json {
-    my ($command) = @_;
+sub ca_issued_key_path {
+    my ($name) = @_;
+    die "unsafe certificate name\n" unless $name =~ /\A[A-Za-z0-9_.-]+\z/;
+    return ca_dir() . "/issued/$name.key.pem";
+}
+
+sub ca_manager_output {
+    my (@args) = @_;
     my $script = ca_script_path();
     die "CA manager script is missing\n" unless -x $script;
     local $ENV{HOST_MANAGER_CA_DIR} = ca_dir();
-    open my $fh, '-|', $script, $command or die "Cannot run CA manager\n";
+    open my $fh, '-|', $script, @args or die "Cannot run CA manager\n";
     local $/;
     my $out = <$fh>;
     close $fh or die "CA manager failed\n";
+    return $out || '';
+}
+
+sub ca_manager_json {
+    my ($command) = @_;
+    my $out = ca_manager_output($command);
     $out ||= $command eq 'list-json' ? '[]' : '{}';
     sync_certificates_from_json($out) if $command eq 'list-json';
     return $out;
@@ -1443,6 +1639,13 @@ sub clean_id {
     return $value;
 }
 
+sub clean_certificate_id {
+    my ($value) = @_;
+    $value = clean_scalar($value);
+    return '' unless length $value;
+    return $value =~ /\A[A-Za-z0-9_.-]+\z/ ? $value : '';
+}
+
 sub clean_scalar {
     my ($value) = @_;
     $value = '' unless defined $value;
@@ -2853,9 +3056,11 @@ sub app_html {
     .vhost-host-select { width: 100%; max-width: 100%; min-height: 34px; }
     .vhost-inline-editor { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) auto; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: #fff; }
     .vhost-delete { color: var(--bad); }
-    .host-editor-panel { margin-top: 16px; }
-    .host-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-    .host-editor-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .host-inline-row td { padding: 0; background: #fff; }
+    .host-inline-editor-shell { background: #fff; }
+    .host-inline-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
+    .host-inline-editor-head h2 { margin: 0; font-size: 14px; }
+    .host-inline-editor-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
     .form-message { min-height: 18px; color: var(--muted); font-size: 13px; }
     .form-message.error { color: var(--bad); }
     .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -2867,8 +3072,8 @@ sub app_html {
       .host-tools { justify-content: flex-start; flex-wrap: wrap; }
       .host-tools input { max-width: none; }
       .vhost-inline-editor { grid-template-columns: 1fr; }
-      .host-editor-head { align-items: stretch; flex-direction: column; }
-      .host-editor-tools { justify-content: flex-start; }
+      .host-inline-editor-head { align-items: stretch; flex-direction: column; }
+      .host-inline-editor-tools { justify-content: flex-start; }
       .debug-controls { align-items: stretch; }
       .grid { grid-template-columns: 1fr; }
       table { min-width: 760px; }
@@ -2963,36 +3168,13 @@ sub app_html {
                   <th style="width: 150px">Roles</th>
                   <th style="width: 110px">Monitoring</th>
                   <th style="width: 90px">Status</th>
+                  <th style="width: 90px">Actions</th>
                 </tr>
               </thead>
               <tbody id="hosts"></tbody>
             </table>
           </div>
         </section>
-        <section class="panel host-editor-panel">
-          <div class="panel-head host-editor-head">
-            <h2 id="host-form-title">New host</h2>
-            <div class="host-editor-tools">
-              <button type="button" id="reset-host-form">Reset</button>
-            </div>
-          </div>
-          <form id="host-form" class="grid">
-            <label>ID<input name="id" required></label>
-            <label>FQDN<input name="fqdn" required></label>
-            <label>Status<select name="status"><option>active</option><option>planned</option><option>retired</option></select></label>
-            <label>IP<input name="ip" required></label>
-            <label class="span2">Aliases<textarea name="aliases"></textarea></label>
-            <label>Roles<input name="roles"></label>
-            <label>Sources<input name="sources"></label>
-            <label>Monitoring<select name="monitoring"><option>pending</option><option>enabled</option><option>disabled</option></select></label>
-            <label>Notes<input name="notes"></label>
-            <div id="host-form-message" class="span2 form-message" aria-live="polite"></div>
-            <div class="span2 form-actions">
-              <button class="primary" type="submit" id="save-host">Save host</button>
-              <button class="danger" type="button" id="delete-host">Delete host</button>
-            </div>
-          </form>
-        </section>
       </section>
 
       <section class="page" id="page-vhosts" data-page="vhosts" hidden>
@@ -3140,9 +3322,49 @@ sub app_html {
     let hostFormSnapshot = '';
     let hostFormBusy = false;
     let hostFormMode = 'new';
+    let hostEditorTarget = '';
 
     const $ = (id) => document.getElementById(id);
     const msg = (text) => { $('message').textContent = text || ''; };
+    const hostFormShell = document.createElement('div');
+    hostFormShell.id = 'host-form-shell';
+    hostFormShell.className = 'host-inline-editor-shell';
+    hostFormShell.hidden = true;
+    hostFormShell.innerHTML = `
+      <div class="host-inline-editor-head">
+        <h2 id="host-form-title">New host</h2>
+        <div class="host-inline-editor-tools">
+          <button type="button" id="cancel-host-form">Close</button>
+        </div>
+      </div>
+      <form id="host-form" class="grid">
+        <label>ID<input name="id" required></label>
+        <label>FQDN<input name="fqdn" required></label>
+        <label>Status<select name="status"><option>active</option><option>planned</option><option>retired</option></select></label>
+        <label>IP<input name="ip" required></label>
+        <label class="span2">Aliases<textarea name="aliases"></textarea></label>
+        <label>Roles<input name="roles"></label>
+        <label>Sources<input name="sources"></label>
+        <label>Monitoring<select name="monitoring"><option>pending</option><option>enabled</option><option>disabled</option></select></label>
+        <label>Notes<input name="notes"></label>
+        <div id="host-form-message" class="span2 form-message" aria-live="polite"></div>
+        <div class="span2 form-actions">
+          <button class="primary" type="submit" id="save-host">Save host</button>
+          <button class="danger" type="button" id="delete-host">Delete host</button>
+        </div>
+      </form>`;
+    const hostForm = hostFormShell.querySelector('#host-form');
+    const hostFormTitle = hostFormShell.querySelector('#host-form-title');
+    const hostFormMessage = hostFormShell.querySelector('#host-form-message');
+    const saveHostButton = hostFormShell.querySelector('#save-host');
+    const deleteHostButton = hostFormShell.querySelector('#delete-host');
+    const cancelHostButton = hostFormShell.querySelector('#cancel-host-form');
+    const hostEditorRow = document.createElement('tr');
+    hostEditorRow.className = 'host-inline-row';
+    const hostEditorCell = document.createElement('td');
+    hostEditorCell.colSpan = 7;
+    hostEditorRow.appendChild(hostEditorCell);
+    hostEditorCell.appendChild(hostFormShell);
     const PAGE_PATHS = {
       '/': 'overview',
       '/overview': 'overview',
@@ -3586,12 +3808,13 @@ sub app_html {
           const problems = state.problems.filter(p => p.host_id === h.id);
           const cls = problems.length ? 'warn' : 'ok';
           return `<tr data-id="${escapeHtml(h.id)}">
-            <td><button type="button" data-edit="${escapeHtml(h.id)}">${escapeHtml(h.id)}</button></td>
+            <td>${escapeHtml(h.id)}</td>
             <td>${escapeHtml(h.ip || '')}</td>
             <td>${renderNamePills(h)}</td>
             <td>${(h.roles || []).map(n => `<span class="pill">${escapeHtml(n)}</span>`).join('')}</td>
             <td><span class="pill ${cls}">${escapeHtml(h.monitoring || '')}</span></td>
             <td>${escapeHtml(h.status || '')}</td>
+            <td><button type="button" data-edit="${escapeHtml(h.id)}">Edit</button></td>
           </tr>`;
         }).join('');
       document.querySelectorAll('[data-edit]').forEach(button => button.addEventListener('click', () => {
@@ -3599,6 +3822,7 @@ sub app_html {
           if (!isAuthLost(e)) msg(e.message);
         });
       }));
+      mountHostEditor();
     }
 
     function renderNamePills(host) {
@@ -3747,44 +3971,87 @@ sub app_html {
       if (!await ensureAuthenticated('Autentifica-te inainte de editare.')) return;
       const host = state.hosts.find(h => h.id === id);
       if (!host) return;
+      if (!canSwitchHostEditor(id)) return;
       clearHostFormMessage();
       for (const key of ['id', 'fqdn', 'status', 'ip', 'monitoring', 'notes']) hostField(key).value = host[key] || '';
       hostField('aliases').value = (host.aliases || []).join('\n');
       hostField('roles').value = (host.roles || []).join(' ');
       hostField('sources').value = (host.sources || []).join(' ');
-      activateHostForm('Edit host', 'edit', 'fqdn');
+      activateHostForm(`Edit host ${host.id || ''}`.trim(), 'edit', id, 'fqdn');
     }
 
     async function newHost() {
       if (!await ensureAuthenticated('Autentifica-te inainte de adaugarea unui host.')) return;
-      resetHostForm(false, true);
+      if (!canSwitchHostEditor('__new__')) return;
+      resetHostForm(true);
+      activateHostForm('New host', 'new', '__new__', 'id');
     }
 
-    function activateHostForm(title, mode, focusField = 'id', scroll = true) {
+    function activateHostForm(title, mode, target, focusField = 'id', scroll = true) {
       hostFormMode = mode || 'new';
-      $('host-form-title').textContent = title || 'New host';
-      hostFormSnapshot = hostFormState();
+      hostEditorTarget = target || '';
+      hostFormTitle.textContent = title || 'New host';
       syncHostFormActions();
-      if (scroll) $('host-form').scrollIntoView({ block: 'start', behavior: 'smooth' });
+      renderHosts();
+      hostFormSnapshot = hostFormState();
+      if (scroll) hostEditorRow.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
       hostField(focusField).focus();
     }
 
-    function resetHostForm(force = false, scroll = false) {
+    function resetHostForm(force = false) {
       if (hostFormBusy && !force) return;
-      if (!force && hostFormDirty() && !confirm('Discard unsaved host changes?')) return;
-      $('host-form').reset();
+      hostForm.reset();
       clearHostFormMessage();
       hostField('status').value = 'active';
       hostField('monitoring').value = 'pending';
-      activateHostForm('New host', 'new', 'id', scroll);
+      hostFormSnapshot = force ? '' : hostFormState();
+    }
+
+    function closeHostForm(force = false) {
+      if (hostFormBusy && !force) return;
+      if (!force && hostFormDirty() && !confirm('Discard unsaved host changes?')) return;
+      hostEditorTarget = '';
+      hostFormMode = 'new';
+      hostFormSnapshot = '';
+      clearHostFormMessage();
+      syncHostFormActions();
+      mountHostEditor();
+    }
+
+    function canSwitchHostEditor(target) {
+      if (hostFormBusy) return false;
+      if (!hostEditorTarget) return true;
+      if (!hostFormDirty()) return true;
+      if (hostEditorTarget === target) return confirm('Discard unsaved host changes and reload this editor?');
+      return confirm('Discard unsaved host changes?');
+    }
+
+    function mountHostEditor() {
+      hostEditorRow.remove();
+      if (!hostEditorTarget) {
+        hostFormShell.hidden = true;
+        return;
+      }
+      hostEditorCell.colSpan = 7;
+      const tbody = $('hosts');
+      if (!tbody) return;
+      if (hostEditorTarget === '__new__') {
+        tbody.prepend(hostEditorRow);
+      } else {
+        const rows = Array.from(tbody.querySelectorAll('tr[data-id]'));
+        const targetRow = rows.find(row => row.dataset.id === hostEditorTarget);
+        if (targetRow) targetRow.after(hostEditorRow);
+        else tbody.prepend(hostEditorRow);
+      }
+      hostFormShell.hidden = false;
     }
 
     function hostField(name) {
-      return $('host-form').elements.namedItem(name);
+      return hostForm.elements.namedItem(name);
     }
 
     function hostFormState() {
-      return JSON.stringify(formObject($('host-form')));
+      return JSON.stringify(formObject(hostForm));
     }
 
     function hostFormDirty() {
@@ -3797,15 +4064,14 @@ sub app_html {
     }
 
     function syncHostFormActions() {
-      $('save-host').disabled = hostFormBusy;
-      $('delete-host').disabled = hostFormBusy || hostFormMode !== 'edit';
-      $('reset-host-form').disabled = hostFormBusy;
+      saveHostButton.disabled = hostFormBusy;
+      deleteHostButton.disabled = hostFormBusy || hostFormMode !== 'edit';
+      cancelHostButton.disabled = hostFormBusy;
     }
 
     function setHostFormMessage(text, isError = false) {
-      const message = $('host-form-message');
-      message.textContent = text || '';
-      message.classList.toggle('error', !!isError);
+      hostFormMessage.textContent = text || '';
+      hostFormMessage.classList.toggle('error', !!isError);
     }
 
     function clearHostFormMessage() {
@@ -4015,9 +4281,9 @@ sub app_html {
     $('debug-db-refresh').addEventListener('click', () => renderDebugDatabase().catch(e => {
       if (!isAuthLost(e)) msg(e.message);
     }));
-    $('reset-host-form').addEventListener('click', () => resetHostForm());
+    cancelHostButton.addEventListener('click', () => closeHostForm());
 
-    $('host-form').addEventListener('submit', async (event) => {
+    hostForm.addEventListener('submit', async (event) => {
       event.preventDefault();
       if (!await ensureAuthenticated('Autentifica-te inainte de salvare. Modificarile raman in formular.')) return;
       setHostFormBusy(true);
@@ -4034,9 +4300,9 @@ sub app_html {
           hostField('aliases').value = (host.aliases || []).join('\n');
           hostField('roles').value = (host.roles || []).join(' ');
           hostField('sources').value = (host.sources || []).join(' ');
-          activateHostForm('Edit host', 'edit', 'fqdn', false);
+          activateHostForm(`Edit host ${host.id || ''}`.trim(), 'edit', host.id || '', 'fqdn', false);
         } else {
-          resetHostForm(true, false);
+          closeHostForm(true);
         }
       } catch (e) {
         if (isAuthLost(e)) return;
@@ -4047,15 +4313,15 @@ sub app_html {
       }
     });
 
-    $('host-form').addEventListener('invalid', (event) => {
+    hostForm.addEventListener('invalid', (event) => {
       setHostFormMessage('Complete the required host fields before saving.', true);
     }, true);
 
-    $('host-form').addEventListener('input', () => {
-      if ($('host-form-message').classList.contains('error')) clearHostFormMessage();
+    hostForm.addEventListener('input', () => {
+      if (hostFormMessage.classList.contains('error')) clearHostFormMessage();
     });
 
-    $('delete-host').addEventListener('click', async () => {
+    deleteHostButton.addEventListener('click', async () => {
       const id = hostField('id').value;
       if (!id || !confirm(`Delete ${id}?`)) return;
       setHostFormBusy(true);
@@ -4064,7 +4330,7 @@ sub app_html {
         await api('/api/hosts/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }) });
         msg('host deleted');
         await refresh();
-        resetHostForm(true, false);
+        closeHostForm(true);
       } catch (e) {
         if (isAuthLost(e)) return;
         setHostFormMessage(e.message, true);
@@ -4074,7 +4340,8 @@ sub app_html {
       }
     });
 
-    resetHostForm(true, false);
+    resetHostForm(true);
+    closeHostForm(true);
 
     $('write-tsv').addEventListener('click', async () => {
       if (!confirm('Write config/local-hosts.tsv from the runtime registry?')) return;
