GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace dialog elements with divs to fix modal auto-open issue

Browse source 
- Converted all dialog elements to regular divs
- Using CSS class 'open' instead of native dialog open attribute
- Added openModal() and closeModal() functions
- Simplified modal CSS and JavaScript
- Modals now fully controlled via class toggle
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-03 18:34:37 -03:00
parent 927ee4013c
commit a542141d42
1 changed files with 49 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
ui/suite/settings/index.html
View file

@ -246,7 +246,7 @@
<button class="btn-primary" <button class="btn-primary"
hx-post="/api/user/security/2fa/enable" hx-post="/api/user/security/2fa/enable"
hx-target="#2fa-modal-content" hx-target="#2fa-modal-content"
hx-on::after-request="document.getElementById('2fa-modal').showModal()" hx-on::after-request="openModal('2fa-modal')"
onclick="event.stopPropagation()"> onclick="event.stopPropagation()">
Enable 2FA Enable 2FA
</button> </button>
@ -662,7 +662,7 @@
<div class="setting-card"> <div class="setting-card">
<div class="card-header"> <div class="card-header">
<h2>API Keys</h2> <h2>API Keys</h2>
<button class="btn-primary btn-sm" onclick="event.stopPropagation(); closeAllModals(); document.getElementById('create-api-key-modal').showModal()"> <button class="btn-primary btn-sm" onclick="event.stopPropagation(); openModal('create-api-key-modal')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line> <line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line> <line x1="5" y1="12" x2="19" y2="12"></line>
@ -684,7 +684,7 @@
<div class="setting-card"> <div class="setting-card">
<div class="card-header"> <div class="card-header">
<h2>Webhooks</h2> <h2>Webhooks</h2>
<button class="btn-primary btn-sm" onclick="event.stopPropagation(); closeAllModals(); document.getElementById('add-webhook-modal').showModal()"> <button class="btn-primary btn-sm" onclick="event.stopPropagation(); openModal('add-webhook-modal')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line> <line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line> <line x1="5" y1="12" x2="19" y2="12"></line>
@ -833,7 +833,7 @@
</div> </div>
<div class="danger-content"> <div class="danger-content">
<p>Once you delete your account, there is no going back. Please be certain.</p> <p>Once you delete your account, there is no going back. Please be certain.</p>
<button class="btn-danger" onclick="event.stopPropagation(); closeAllModals(); document.getElementById('delete-account-modal').showModal()"> <button class="btn-danger" onclick="event.stopPropagation(); openModal('delete-account-modal')">
Delete My Account Delete My Account
</button> </button>
</div> </div>
@ -874,7 +874,7 @@
<div class="setting-card"> <div class="setting-card">
<div class="card-header"> <div class="card-header">
<h2>Payment Method</h2> <h2>Payment Method</h2>
<button class="btn-primary btn-sm" onclick="event.stopPropagation(); closeAllModals(); document.getElementById('add-payment-modal').showModal()"> <button class="btn-primary btn-sm" onclick="event.stopPropagation(); openModal('add-payment-modal')">
Add Method Add Method
</button> </button>
</div> </div>
@ -941,11 +941,11 @@
</div> </div>
<!-- 2FA Modal --> <!-- 2FA Modal -->
<dialog id="2fa-modal" class="modal"> <div id="2fa-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>Enable Two-Factor Authentication</h2> <h2>Enable Two-Factor Authentication</h2>
<button type="button" class="close-btn" onclick="document.getElementById('2fa-modal').close()"> <button type="button" class="close-btn" onclick="closeModal('2fa-modal')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
@ -956,14 +956,14 @@
<!-- Content loaded via HTMX --> <!-- Content loaded via HTMX -->
</div> </div>
</div> </div>
</dialog> </div>
<!-- Create API Key Modal --> <!-- Create API Key Modal -->
<dialog id="create-api-key-modal" class="modal"> <div id="create-api-key-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>Create API Key</h2> <h2>Create API Key</h2>
<button type="button" class="close-btn" onclick="document.getElementById('create-api-key-modal').close()"> <button type="button" class="close-btn" onclick="closeModal('create-api-key-modal')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
@ -996,19 +996,19 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn-secondary" onclick="document.getElementById('create-api-key-modal').close()">Cancel</button> <button type="button" class="btn-secondary" onclick="closeModal('create-api-key-modal')">Cancel</button>
<button type="submit" class="btn-primary">Create Key</button> <button type="submit" class="btn-primary">Create Key</button>
</div> </div>
</form> </form>
</div> </div>
</dialog> </div>
<!-- Add Webhook Modal --> <!-- Add Webhook Modal -->
<dialog id="add-webhook-modal" class="modal"> <div id="add-webhook-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>Add Webhook</h2> <h2>Add Webhook</h2>
<button type="button" class="close-btn" onclick="document.getElementById('add-webhook-modal').close()"> <button type="button" class="close-btn" onclick="closeModal('add-webhook-modal')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
@ -1041,19 +1041,19 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn-secondary" onclick="document.getElementById('add-webhook-modal').close()">Cancel</button> <button type="button" class="btn-secondary" onclick="closeModal('add-webhook-modal')">Cancel</button>
<button type="submit" class="btn-primary">Add Webhook</button> <button type="submit" class="btn-primary">Add Webhook</button>
</div> </div>
</form> </form>
</div> </div>
</dialog> </div>
<!-- Delete Account Modal --> <!-- Delete Account Modal -->
<dialog id="delete-account-modal" class="modal"> <div id="delete-account-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>Delete Account</h2> <h2>Delete Account</h2>
<button type="button" class="close-btn" onclick="document.getElementById('delete-account-modal').close()"> <button type="button" class="close-btn" onclick="closeModal('delete-account-modal')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
@ -1081,20 +1081,20 @@
<input type="password" name="password" required> <input type="password" name="password" required>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn-secondary" onclick="document.getElementById('delete-account-modal').close()">Cancel</button> <button type="button" class="btn-secondary" onclick="closeModal('delete-account-modal')">Cancel</button>
<button type="submit" class="btn-danger">Delete My Account</button> <button type="submit" class="btn-danger">Delete My Account</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</dialog> </div>
<!-- Add Payment Method Modal --> <!-- Add Payment Method Modal -->
<dialog id="add-payment-modal" class="modal"> <div id="add-payment-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>Add Payment Method</h2> <h2>Add Payment Method</h2>
<button type="button" class="close-btn" onclick="document.getElementById('add-payment-modal').close()"> <button type="button" class="close-btn" onclick="closeModal('add-payment-modal')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
@ -1104,7 +1104,7 @@
<form hx-post="/api/user/billing/payment-methods" <form hx-post="/api/user/billing/payment-methods"
hx-target="#payment-methods" hx-target="#payment-methods"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-on::after-request="document.getElementById('add-payment-modal').close()"> hx-on::after-request="closeModal('add-payment-modal')">
<div class="form-group"> <div class="form-group">
<label>Card Number</label> <label>Card Number</label>
<input type="text" name="card_number" required placeholder="1234 5678 9012 3456" maxlength="19"> <input type="text" name="card_number" required placeholder="1234 5678 9012 3456" maxlength="19">
@ -1126,12 +1126,12 @@
</label> </label>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn-secondary" onclick="document.getElementById('add-payment-modal').close()">Cancel</button> <button type="button" class="btn-secondary" onclick="closeModal('add-payment-modal')">Cancel</button>
<button type="submit" class="btn-primary">Add Card</button> <button type="submit" class="btn-primary">Add Card</button>
</div> </div>
</form> </form>
</div> </div>
</dialog> </div>
<style> <style>
.settings-layout { .settings-layout {
@ -1709,9 +1709,7 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; background: rgba(0, 0, 0, 0.7);
max-height: 100%;
background: transparent;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -1721,14 +1719,10 @@
justify-content: center; justify-content: center;
} }
.modal[open] { .modal.open {
display: flex; display: flex;
} }
.modal::backdrop {
background: rgba(0, 0, 0, 0.7);
}
.modal-content { .modal-content {
background: var(--surface, #1a1a24); background: var(--surface, #1a1a24);
border-radius: 16px; border-radius: 16px;
@ -1936,49 +1930,42 @@
</button> </button>
<script> <script>
// Close all open modals // Open a modal by ID
function closeAllModals() { function openModal(id) {
document.querySelectorAll('dialog.modal').forEach(modal => { closeAllModals();
if (modal.open) { var modal = document.getElementById(id);
modal.close(); if (modal) {
modal.classList.add('open');
} }
});
} }
// Force close all modals immediately on script load // Close a modal by ID
(function() { function closeModal(id) {
document.querySelectorAll('dialog.modal').forEach(modal => { var modal = document.getElementById(id);
modal.removeAttribute('open'); if (modal) {
if (modal.open) { modal.classList.remove('open');
modal.close();
} }
}
// Close all open modals
function closeAllModals() {
document.querySelectorAll('.modal').forEach(function(modal) {
modal.classList.remove('open');
}); });
})(); }
// Initialize modal behavior // Initialize modal behavior
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Force close all modals on page load // Close all modals on page load
closeAllModals(); closeAllModals();
// Close modal when clicking on backdrop (outside modal-content) // Close modal when clicking on backdrop (outside modal-content)
document.querySelectorAll('dialog.modal').forEach(modal => { document.querySelectorAll('.modal').forEach(function(modal) {
// Ensure modal is closed initially
modal.removeAttribute('open');
modal.addEventListener('click', function(e) { modal.addEventListener('click', function(e) {
// Only close if clicking directly on the dialog backdrop, not on modal-content
if (e.target === modal) { if (e.target === modal) {
modal.close(); modal.classList.remove('open');
} }
}); });
// Prevent clicks inside modal-content from closing
const modalContent = modal.querySelector('.modal-content');
if (modalContent) {
modalContent.addEventListener('click', function(e) {
e.stopPropagation();
});
}
}); });
// Close modals with Escape key // Close modals with Escape key
@ -1989,24 +1976,6 @@
}); });
}); });
// Also close modals after HTMX requests complete (in case server returns something weird)
document.addEventListener('htmx:afterRequest', function(e) {
// Don't auto-close if the request was specifically meant to open a modal
if (!e.detail.elt.hasAttribute('data-opens-modal')) {
// Small delay to let intentional modal opens happen first
setTimeout(function() {
// Check if more than one modal is open and close extras
const openModals = document.querySelectorAll('dialog.modal[open]');
if (openModals.length > 1) {
// Keep only the last one open
for (let i = 0; i < openModals.length - 1; i++) {
openModals[i].close();
}
}
}, 100);
}
});
function showSection(sectionId, element) { function showSection(sectionId, element) {
// Hide all sections // Hide all sections
document.querySelectorAll('.settings-section').forEach(section => { document.querySelectorAll('.settings-section').forEach(section => {