From 14eda839bcaf9fe87a7c623d355bf98e816b539d Mon Sep 17 00:00:00 2001
From: infosave2007 <urevich55@gmail.com>
Date: Fri, 23 Jan 2026 19:08:41 +0300
Subject: [PATCH] feat: replace native confirm with custom modal to fix
 auto-close issue

---
 templates/layout.twig        | 74 ++++++++++++++++++++++++++++++++++++
 templates/servers/index.twig |  2 +-
 templates/servers/view.twig  |  4 +-
 3 files changed, 77 insertions(+), 3 deletions(-)

diff --git a/templates/layout.twig b/templates/layout.twig
index 2d8d7af..dab87d1 100644
--- a/templates/layout.twig
+++ b/templates/layout.twig
@@ -135,6 +135,28 @@
     <main class="{% if user %}py-10{% endif %}">
         {% block content %}{% endblock %}
     </main>
+    <!-- Custom Confirmation Modal -->
+    <div id="confirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-[9999]" style="display:none;">
+        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div class="mt-3 text-center">
+                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
+                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
+                </div>
+                <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4" id="confirmModalTitle">Подтверждение</h3>
+                <div class="mt-2 px-7 py-3">
+                    <p class="text-sm text-gray-500" id="confirmModalMessage">Вы уверены?</p>
+                </div>
+                <div class="items-center px-4 py-3 flex justify-center gap-4">
+                    <button id="confirmModalCancel" class="px-4 py-2 bg-gray-200 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
+                        Отмена
+                    </button>
+                    <button id="confirmModalOk" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
+                        Удалить
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <!-- Footer -->
     <footer class="bg-white border-t border-gray-200 mt-auto">
@@ -174,6 +196,58 @@
                 // Form will submit normally, dropdown will close on page reload
             }
         });
+
+        // Custom confirmation modal function (replaces native confirm)
+        window.showConfirmModal = function(message, title) {
+            return new Promise((resolve) => {
+                const modal = document.getElementById('confirmModal');
+                const titleEl = document.getElementById('confirmModalTitle');
+                const msgEl = document.getElementById('confirmModalMessage');
+                const okBtn = document.getElementById('confirmModalOk');
+                const cancelBtn = document.getElementById('confirmModalCancel');
+                
+                if (!modal) {
+                    // Fallback to native confirm if modal not found
+                    resolve(confirm(message));
+                    return;
+                }
+                
+                titleEl.textContent = title || 'Подтверждение';
+                msgEl.textContent = message || 'Вы уверены?';
+                
+                modal.style.display = 'flex';
+                modal.classList.remove('hidden');
+                
+                function cleanup() {
+                    modal.style.display = 'none';
+                    modal.classList.add('hidden');
+                    okBtn.removeEventListener('click', onOk);
+                    cancelBtn.removeEventListener('click', onCancel);
+                    modal.removeEventListener('click', onBackdrop);
+                }
+                
+                function onOk() {
+                    cleanup();
+                    resolve(true);
+                }
+                
+                function onCancel() {
+                    cleanup();
+                    resolve(false);
+                }
+                
+                function onBackdrop(e) {
+                    if (e.target === modal) {
+                        cleanup();
+                        resolve(false);
+                    }
+                }
+                
+                okBtn.addEventListener('click', onOk);
+                cancelBtn.addEventListener('click', onCancel);
+                modal.addEventListener('click', onBackdrop);
+            });
+        };
     </script>
 
     {% block scripts %}{% endblock %}
diff --git a/templates/servers/index.twig b/templates/servers/index.twig
index c8a6264..2a64018 100644
--- a/templates/servers/index.twig
+++ b/templates/servers/index.twig
@@ -99,7 +99,7 @@
               <i class="fas fa-eye mr-1"></i>{{ t('servers.view') }}
             </a>
             <form method="POST" action="/servers/{{ server.id }}/delete" class="inline" id="delete-form-{{ server.id }}">
-              <button type="button" class="text-red-600 hover:text-red-900" onclick="event.stopPropagation(); if(confirm('{{ t('message.confirm') }} Delete server {{ server.name }}?')) { document.getElementById('delete-form-{{ server.id }}').submit(); }">
+              <button type="button" class="text-red-600 hover:text-red-900" onclick="(async()=>{ event.stopPropagation(); if(await showConfirmModal('Удалить сервер {{ server.name }}?', 'Удаление сервера')) { document.getElementById('delete-form-{{ server.id }}').submit(); } })()">
                 <i class="fas fa-trash mr-1"></i>{{ t('servers.delete') }}
               </button>
             </form>
diff --git a/templates/servers/view.twig b/templates/servers/view.twig
index 014ad0e..0521138 100644
--- a/templates/servers/view.twig
+++ b/templates/servers/view.twig
@@ -455,8 +455,8 @@ document.addEventListener('DOMContentLoaded', function() {
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
-      const confirmResult = confirm('Удалить протокол и всех его клиентов?');
-      if (!confirmResult) return;
+      const confirmed = await showConfirmModal('Удалить протокол и всех его клиентов?', 'Удаление протокола');
+      if (!confirmed) return;
       const slug = btn.getAttribute('data-slug');
       const m = document.getElementById('uninstallSpMsg');
       m.textContent = '';