From d59de720c55d4875b7f346b1ed74c5af3f49973d Mon Sep 17 00:00:00 2001
From: SW <janvete@gmail.com>
Date: Thu, 1 Oct 2026 14:28:17 +0200
Subject: [PATCH] fix: replace native dialog element with div-based modal to
 fix stuck dialogs

---
 templates/allocation_detail.html           | 14 +++----
 templates/fragments/allocations_table.html | 14 +++----
 templates/index.html                       | 43 ++++++++++++----------
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/templates/allocation_detail.html b/templates/allocation_detail.html
index a11bcef..f1585f6 100644
--- a/templates/allocation_detail.html
+++ b/templates/allocation_detail.html
@@ -108,19 +108,19 @@
 </section>
 {% endif %}
 
-<dialog id="release-modal" class="modal-overlay" style="display:none;">
-  <div class="modal">
+<div id="release-modal" class="modal-overlay" style="display:none;" onclick="if (event.target === this) this.style.display='none';">
+  <div class="modal" onclick="event.stopPropagation();">
     <h2 class="modal-title">Release subnet {{ allocation.cidr }}</h2>
     <form method="post" action="/allocations/{{ allocation.id }}/release" class="modal-body" id="release-form">
       <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
       <p class="small">The subnet will be marked as <span class="status released">released</span> and its address space will become available again via the first-fit algorithm. The record remains in history.</p>
       <label for="release-note">Release note *</label>
       <textarea id="release-note" name="release_note" rows="3" required minlength="3" maxlength="500"></textarea>
+      <div class="modal-actions">
+        <button type="button" class="btn btn-secondary" onclick="document.getElementById('release-modal').style.display='none'">Cancel</button>
+        <button type="submit" class="btn btn-danger">Release</button>
+      </div>
     </form>
-    <div class="modal-actions">
-      <button type="button" class="btn btn-secondary" onclick="document.getElementById('release-modal').style.display='none'">Cancel</button>
-      <button type="submit" class="btn btn-danger" form="release-form">Release</button>
-    </div>
   </div>
-</dialog>
+</div>
 {% endblock %}
diff --git a/templates/fragments/allocations_table.html b/templates/fragments/allocations_table.html
index 0c22895..41c7aaf 100644
--- a/templates/fragments/allocations_table.html
+++ b/templates/fragments/allocations_table.html
@@ -38,21 +38,21 @@
 
 {% for a in allocations %}
 {% if a.status == "active" || a.status == "reserved" %}
-<dialog id="release-modal-{{ a.id }}" class="modal-overlay" style="display:none;">
-  <div class="modal">
+<div id="release-modal-{{ a.id }}" class="modal-overlay" style="display:none;" onclick="if (event.target === this) this.style.display='none';">
+  <div class="modal" onclick="event.stopPropagation();">
     <h2 class="modal-title">Release subnet {{ a.cidr }}</h2>
     <form method="post" action="/allocations/{{ a.id }}/release" class="modal-body" id="release-form-{{ a.id }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
       <p class="small">The subnet will be marked as <span class="status released">released</span> and its address space will become available again. The record remains in history.</p>
       <label for="release-note-{{ a.id }}">Release note *</label>
       <textarea id="release-note-{{ a.id }}" name="release_note" rows="3" required minlength="3" maxlength="500"></textarea>
+      <div class="modal-actions">
+        <button type="button" class="btn btn-secondary" onclick="document.getElementById('release-modal-{{ a.id }}').style.display='none'">Cancel</button>
+        <button type="submit" class="btn btn-danger">Release</button>
+      </div>
     </form>
-    <div class="modal-actions">
-      <button type="button" class="btn btn-secondary" onclick="document.getElementById('release-modal-{{ a.id }}').style.display='none'">Cancel</button>
-      <button type="submit" class="btn btn-danger" form="release-form-{{ a.id }}">Release</button>
-    </div>
   </div>
-</dialog>
+</div>
 {% endif %}
 {% endfor %}
 
diff --git a/templates/index.html b/templates/index.html
index c90c3a1..649f9b2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -85,8 +85,8 @@
   </div>
 </section>
 
-<dialog id="allocate-modal" class="modal-overlay" style="display:none;">
-  <div class="modal">
+<div id="allocate-modal" class="modal-overlay" style="display:none;" onclick="if (event.target === this) closeAllocateModal();">
+  <div class="modal" onclick="event.stopPropagation();">
     <h2 class="modal-title">Confirm subnet allocation</h2>
     <form method="post" action="/allocations" class="modal-body" id="allocate-form">
       <input type="hidden" name="pool_slug" id="modal-pool-slug">
@@ -123,13 +123,14 @@
 
       <label for="ticket">Ticket / reference</label>
       <input type="text" id="ticket" name="ticket" maxlength="100">
+
+      <div class="modal-actions">
+        <button type="button" class="btn btn-secondary" onclick="closeAllocateModal()">Cancel</button>
+        <button type="submit" class="btn">Confirm allocation</button>
+      </div>
     </form>
-    <div class="modal-actions">
-      <button type="button" class="btn btn-secondary" onclick="closeAllocateModal()">Cancel</button>
-      <button type="submit" class="btn" form="allocate-form">Confirm allocation</button>
-    </div>
   </div>
-</dialog>
+</div>
 
 <script>
   const poolData = {
@@ -155,20 +156,24 @@
     document.getElementById('modal-pool-name').textContent = poolData[slug].name;
     document.getElementById('modal-prefix-display').textContent = '/' + prefixLength;
 
-    const resp = await fetch('/partials/pools/' + slug + '/preview?prefix_length=' + prefixLength);
-    const html = await resp.text();
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
+    try {
+      const resp = await fetch('/partials/pools/' + slug + '/preview?prefix_length=' + prefixLength);
+      const html = await resp.text();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
 
-    const cidr = doc.getElementById('preview-cidr')?.textContent || '–';
-    const addressCount = doc.getElementById('preview-address-count')?.textContent || '–';
-    const usableHosts = doc.getElementById('preview-usable-hosts')?.textContent || '–';
-    const warning = doc.getElementById('preview-warning')?.textContent || '';
+      const cidr = doc.getElementById('preview-cidr')?.textContent || '–';
+      const addressCount = doc.getElementById('preview-address-count')?.textContent || '–';
+      const usableHosts = doc.getElementById('preview-usable-hosts')?.textContent || '–';
+      const warning = doc.getElementById('preview-warning')?.textContent || '';
 
-    document.getElementById('modal-cidr').textContent = cidr;
-    document.getElementById('modal-address-count').textContent = addressCount;
-    document.getElementById('modal-usable-hosts').textContent = usableHosts;
-    document.getElementById('modal-warning').textContent = warning;
+      document.getElementById('modal-cidr').textContent = cidr;
+      document.getElementById('modal-address-count').textContent = addressCount;
+      document.getElementById('modal-usable-hosts').textContent = usableHosts;
+      document.getElementById('modal-warning').textContent = warning;
+    } catch (e) {
+      document.getElementById('modal-warning').textContent = 'Could not load preview.';
+    }
 
     modal.style.display = 'flex';
   }