delete functionality on instances page

static/css/instances.css

@@ -191,4 +191,62 @@
 
 .modal-footer button {
     margin-left: 0.5rem;
+}
+
+/* Infrastructure Tools Styles */
+.infrastructure-tools .btn {
+    transition: all 0.3s ease;
+    border-radius: 12px;
+    min-height: 100px;
+    text-decoration: none;
+}
+
+.infrastructure-tools .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    text-decoration: none;
+}
+
+.infrastructure-tools .btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.infrastructure-tools .btn:disabled:hover {
+    transform: none;
+    box-shadow: none;
+}
+
+.infrastructure-tools .btn-outline-primary:hover {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+}
+
+.infrastructure-tools .btn-outline-success:hover {
+    background-color: #198754;
+    border-color: #198754;
+    color: white;
+}
+
+.infrastructure-tools .btn-outline-info:hover {
+    background-color: #0dcaf0;
+    border-color: #0dcaf0;
+    color: white;
+}
+
+.infrastructure-tools .btn-outline-warning:hover {
+    background-color: #ffc107;
+    border-color: #ffc107;
+    color: #000;
+}
+
+.infrastructure-tools .btn i {
+    transition: transform 0.3s ease;
+}
+
+.infrastructure-tools .btn:hover i {
+    transform: scale(1.1);
 } 

static/js/instances.js

@@ -1,4 +1,3 @@
-
 // Modal instances
 let addInstanceModal;
 let editInstanceModal;
@@ -1025,8 +1024,8 @@ async function verifyConnections() {
                 'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
             },
             body: JSON.stringify({
-                url: '{{ portainer_settings.url if portainer_settings else "" }}',
-                api_key: '{{ portainer_settings.api_key if portainer_settings else "" }}'
+                url: window.portainerSettings?.url || '',
+                api_key: window.portainerSettings?.api_key || ''
             })
         });
 
@@ -1060,9 +1059,9 @@ async function verifyConnections() {
                 'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
             },
             body: JSON.stringify({
-                url: '{{ nginx_settings.url if nginx_settings else "" }}',
-                username: '{{ nginx_settings.username if nginx_settings else "" }}',
-                password: '{{ nginx_settings.password if nginx_settings else "" }}'
+                url: window.nginxSettings?.url || '',
+                username: window.nginxSettings?.username || '',
+                password: window.nginxSettings?.password || ''
             })
         });
 
@@ -1094,8 +1093,8 @@ async function loadRepositories() {
     const branchSelect = document.getElementById('giteaBranchSelect');
     
     try {
-        const gitSettings = JSON.parse('{{ git_settings|tojson|safe }}');
-        if (!gitSettings || !gitSettings.url || !gitSettings.token) {
+        const gitSettings = window.gitSettings || {};
+        if (!gitSettings.url || !gitSettings.token) {
             throw new Error('No Git settings found. Please configure Git in the settings page.');
         }
         
@@ -1144,8 +1143,8 @@ async function loadBranches(repoId) {
     const branchSelect = document.getElementById('giteaBranchSelect');
     
     try {
-        const gitSettings = JSON.parse('{{ git_settings|tojson|safe }}');
-        if (!gitSettings || !gitSettings.url || !gitSettings.token) {
+        const gitSettings = window.gitSettings || {};
+        if (!gitSettings.url || !gitSettings.token) {
             throw new Error('No Git settings found. Please configure Git in the settings page.');
         }
 
@@ -1727,18 +1726,52 @@ function showDeleteInstanceModal(instanceId) {
 
 async function confirmDeleteInstance() {
     if (!deleteInstanceId) return;
+    
     const csrfToken = document.querySelector('input[name="csrf_token"]').value;
+    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+    
     try {
+        // Show loading state
+        const originalText = confirmDeleteBtn.innerHTML;
+        confirmDeleteBtn.disabled = true;
+        confirmDeleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Deleting...';
+        
         const response = await fetch(`/instances/${deleteInstanceId}`, {
             method: 'DELETE',
             headers: {
                 'X-CSRF-Token': csrfToken
             }
         });
-        if (!response.ok) throw new Error('Failed to delete instance');
-        deleteInstanceModal.hide();
-        location.reload();
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to delete instance');
+        }
+        
+        // Show success message
+        confirmDeleteBtn.innerHTML = '<i class="fas fa-check me-1"></i>Deleted Successfully';
+        confirmDeleteBtn.className = 'btn btn-success';
+        
+        // Hide modal after a short delay
+        setTimeout(() => {
+            deleteInstanceModal.hide();
+            location.reload();
+        }, 1500);
+        
     } catch (error) {
+        // Show error state
+        confirmDeleteBtn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i>Error';
+        confirmDeleteBtn.className = 'btn btn-danger';
+        
+        // Show error message
         alert('Error deleting instance: ' + error.message);
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            confirmDeleteBtn.disabled = false;
+            confirmDeleteBtn.innerHTML = '<i class="fas fa-trash me-1"></i>Delete Instance';
+            confirmDeleteBtn.className = 'btn btn-danger';
+        }, 3000);
     }
 }