feat: replace native confirm with custom modal to fix auto-close issue
This commit is contained in:
@@ -135,6 +135,28 @@
|
|||||||
<main class="{% if user %}py-10{% endif %}">
|
<main class="{% if user %}py-10{% endif %}">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</main>
|
</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 -->
|
||||||
<footer class="bg-white border-t border-gray-200 mt-auto">
|
<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
|
// 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>
|
</script>
|
||||||
|
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
|
|||||||
@@ -99,7 +99,7 @@
|
|||||||
<i class="fas fa-eye mr-1"></i>{{ t('servers.view') }}
|
<i class="fas fa-eye mr-1"></i>{{ t('servers.view') }}
|
||||||
</a>
|
</a>
|
||||||
<form method="POST" action="/servers/{{ server.id }}/delete" class="inline" id="delete-form-{{ server.id }}">
|
<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') }}
|
<i class="fas fa-trash mr-1"></i>{{ t('servers.delete') }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -455,8 +455,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.stopImmediatePropagation();
|
e.stopImmediatePropagation();
|
||||||
const confirmResult = confirm('Удалить протокол и всех его клиентов?');
|
const confirmed = await showConfirmModal('Удалить протокол и всех его клиентов?', 'Удаление протокола');
|
||||||
if (!confirmResult) return;
|
if (!confirmed) return;
|
||||||
const slug = btn.getAttribute('data-slug');
|
const slug = btn.getAttribute('data-slug');
|
||||||
const m = document.getElementById('uninstallSpMsg');
|
const m = document.getElementById('uninstallSpMsg');
|
||||||
m.textContent = '';
|
m.textContent = '';
|
||||||
|
|||||||
Reference in New Issue
Block a user