From 6bf0c16862baf284cc13276f3bac93311b51f217 Mon Sep 17 00:00:00 2001
From: Chris Lu <chris.lu@gmail.com>
Date: Thu, 8 Jan 2026 18:44:36 -0800
Subject: [PATCH] fix admin copy text functions

---
 weed/admin/static/js/admin.js                 | 56 +++++++++++++++----
 weed/admin/view/app/service_accounts.templ    | 42 ++++++++++----
 weed/admin/view/app/service_accounts_templ.go |  2 +-
 3 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/weed/admin/static/js/admin.js b/weed/admin/static/js/admin.js
index 805445024..5d74f6e40 100644
--- a/weed/admin/static/js/admin.js
+++ b/weed/admin/static/js/admin.js
@@ -660,14 +660,46 @@ function formatDate(date) {
     return new Date(date).toLocaleString();
 }
 
-// Copy text to clipboard
-function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(() => {
-        showAlert('success', 'Copied to clipboard!');
-    }).catch(err => {
-        console.error('Failed to copy text: ', err);
+// Copy text to clipboard with fallback for non-secure contexts
+function adminCopyToClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(() => {
+            showAlert('success', 'Copied to clipboard!');
+        }).catch(err => {
+            console.error('Failed to copy text: ', err);
+            fallbackCopyText(text);
+        });
+    } else {
+        fallbackCopyText(text);
+    }
+}
+
+function fallbackCopyText(text) {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+
+    // Ensure textArea is not visible but part of the DOM
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    textArea.style.top = "0";
+    document.body.appendChild(textArea);
+
+    textArea.focus();
+    textArea.select();
+
+    try {
+        const successful = document.execCommand('copy');
+        if (successful) {
+            showAlert('success', 'Copied to clipboard!');
+        } else {
+            showAlert('danger', 'Failed to copy to clipboard');
+        }
+    } catch (err) {
+        console.error('Fallback copy failed: ', err);
         showAlert('danger', 'Failed to copy to clipboard');
-    });
+    }
+
+    document.body.removeChild(textArea);
 }
 
 // Dashboard refresh functionality
@@ -2359,7 +2391,7 @@ function createAccessKeysManagementContent(accessKeys) {
                         <tr>
                             <td>
                                 <code>${key.access_key}</code>
-                                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('${key.access_key}')">
+                                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="adminCopyToClipboard('${key.access_key}')">
                                     <i class="fas fa-copy"></i>
                                 </button>
                             </td>
@@ -2454,7 +2486,7 @@ function showSecretKey(accessKey, secretKey) {
             <label class="form-label"><strong>Access Key:</strong></label>
             <div class="input-group">
                 <input type="text" class="form-control" value="${accessKey}" readonly>
-                <button class="btn btn-outline-secondary" onclick="copyToClipboard('${accessKey}')">
+                <button class="btn btn-outline-secondary" onclick="adminCopyToClipboard('${accessKey}')">
                     <i class="fas fa-copy"></i>
                 </button>
             </div>
@@ -2463,7 +2495,7 @@ function showSecretKey(accessKey, secretKey) {
             <label class="form-label"><strong>Secret Key:</strong></label>
             <div class="input-group">
                 <input type="text" class="form-control" value="${secretKey}" readonly>
-                <button class="btn btn-outline-secondary" onclick="copyToClipboard('${secretKey}')">
+                <button class="btn btn-outline-secondary" onclick="adminCopyToClipboard('${secretKey}')">
                     <i class="fas fa-copy"></i>
                 </button>
             </div>
@@ -2487,7 +2519,7 @@ function showNewAccessKeyModal(accessKeyData) {
             <label class="form-label"><strong>Access Key:</strong></label>
             <div class="input-group">
                 <input type="text" class="form-control" value="${accessKeyData.access_key}" readonly>
-                <button class="btn btn-outline-secondary" onclick="copyToClipboard('${accessKeyData.access_key}')">
+                <button class="btn btn-outline-secondary" onclick="adminCopyToClipboard('${accessKeyData.access_key}')">
                     <i class="fas fa-copy"></i>
                 </button>
             </div>
@@ -2496,7 +2528,7 @@ function showNewAccessKeyModal(accessKeyData) {
             <label class="form-label"><strong>Secret Key:</strong></label>
             <div class="input-group">
                 <input type="text" class="form-control" value="${accessKeyData.secret_key}" readonly>
-                <button class="btn btn-outline-secondary" onclick="copyToClipboard('${accessKeyData.secret_key}')">
+                <button class="btn btn-outline-secondary" onclick="adminCopyToClipboard('${accessKeyData.secret_key}')">
                     <i class="fas fa-copy"></i>
                 </button>
             </div>
diff --git a/weed/admin/view/app/service_accounts.templ b/weed/admin/view/app/service_accounts.templ
index df7e1956d..5c85ac3ce 100644
--- a/weed/admin/view/app/service_accounts.templ
+++ b/weed/admin/view/app/service_accounts.templ
@@ -270,7 +270,7 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
                             <label class="form-label fw-bold">AWS_ACCESS_KEY_ID</label>
                             <div class="input-group">
                                 <input type="text" class="form-control font-monospace" id="displayAccessKey" readonly>
-                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard(event, 'displayAccessKey')">
+                                <button class="btn btn-outline-secondary" type="button" onclick="copyCredentialToClipboard(this, 'displayAccessKey')">
                                     <i class="fas fa-copy"></i> Copy
                                 </button>
                             </div>
@@ -280,7 +280,7 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
                             <label class="form-label fw-bold">AWS_SECRET_ACCESS_KEY</label>
                             <div class="input-group">
                                 <input type="text" class="form-control font-monospace" id="displaySecretKey" readonly>
-                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard(event, 'displaySecretKey')">
+                                <button class="btn btn-outline-secondary" type="button" onclick="copyCredentialToClipboard(this, 'displaySecretKey')">
                                     <i class="fas fa-copy"></i> Copy
                                 </button>
                             </div>
@@ -474,27 +474,25 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
             setTimeout(() => window.location.reload(), 500);
         }
 
-        function copyToClipboard(event, elementId) {
+        function copyCredentialToClipboard(button, elementId) {
             const element = document.getElementById(elementId);
+            const textToCopy = element.value;
             
             // Use modern Clipboard API if available
-            if (navigator.clipboard) {
-                 navigator.clipboard.writeText(element.value).then(() => {
-                     // Success feedback could be added here
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                 navigator.clipboard.writeText(textToCopy).then(() => {
+                     showSuccessMessage('Copied to clipboard!');
                  }).catch(err => {
                      console.warn('Clipboard API failed:', err);
                      // Fallback
-                     element.select();
-                     document.execCommand('copy');
+                     fallbackCopyTextToClipboard(element);
                  });
             } else {
-                // Fallback for older browsers
-                element.select();
-                document.execCommand('copy');
+                // Fallback for older browsers or non-secure contexts
+                fallbackCopyTextToClipboard(element);
             }
             
             // Visual feedback
-            const button = event.target.closest('button');
             const originalHTML = button.innerHTML;
             
             button.innerHTML = '<i class="fas fa-check"></i>';
@@ -508,6 +506,26 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
             }, 1000);
         }
 
+        function fallbackCopyTextToClipboard(element) {
+            element.select();
+            element.setSelectionRange(0, 99999); // For mobile devices
+            
+            try {
+                const successful = document.execCommand('copy');
+                if (successful) {
+                    showSuccessMessage('Copied to clipboard!');
+                } else {
+                    showErrorMessage('Failed to copy to clipboard');
+                }
+            } catch (err) {
+                console.error('Fallback copy failed:', err);
+                showErrorMessage('Failed to copy to clipboard');
+            }
+            
+            // Clear selection
+            window.getSelection().removeAllRanges();
+        }
+
 
         function createSADetailsContent(sa) {
             // Create DOM elements safely to prevent XSS
diff --git a/weed/admin/view/app/service_accounts_templ.go b/weed/admin/view/app/service_accounts_templ.go
index 3ac8392b2..d4fa05b5e 100644
--- a/weed/admin/view/app/service_accounts_templ.go
+++ b/weed/admin/view/app/service_accounts_templ.go
@@ -272,7 +272,7 @@ func ServiceAccounts(data dash.ServiceAccountsData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</select> <small class=\"form-text text-muted\">The service account will inherit permissions from this user</small></div><div class=\"mb-3\"><label for=\"description\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"description\" name=\"description\" rows=\"2\" placeholder=\"What is this service account used for?\"></textarea></div><div class=\"mb-3\"><label for=\"expiration\" class=\"form-label\">Expiration (optional)</label> <input type=\"datetime-local\" class=\"form-control\" id=\"expiration\" name=\"expiration\"> <small class=\"form-text text-muted\">Leave empty for no expiration</small></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateServiceAccount()\">Create</button></div></div></div></div><!-- Service Account Details Modal --><div class=\"modal fade\" id=\"saDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-robot me-2\"></i>Service Account Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"saDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Credentials Display Modal --><div class=\"modal fade\" id=\"credentialsModal\" tabindex=\"-1\" role=\"dialog\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header bg-success text-white\"><h5 class=\"modal-title\"><i class=\"fas fa-check-circle me-2\"></i>Service Account Created Successfully</h5></div><div class=\"modal-body\"><div class=\"alert alert-warning\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <strong>Important:</strong> This is the only time you will see the secret access key. Please save it securely.</div><div class=\"mb-4\"><h6 class=\"text-muted mb-3\">AWS CLI Configuration</h6><p class=\"text-muted small\">Use these credentials to configure AWS CLI or SDKs:</p><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_ACCESS_KEY_ID</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displayAccessKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyToClipboard(event, 'displayAccessKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_SECRET_ACCESS_KEY</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displaySecretKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyToClipboard(event, 'displaySecretKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div></div><div class=\"bg-light p-3 rounded\"><h6 class=\"text-muted mb-2\">Example AWS CLI Usage:</h6><div class=\"font-monospace small\"><div>export AWS_ACCESS_KEY_ID=<span id=\"exampleAccessKey\"></span></div><div>export AWS_SECRET_ACCESS_KEY=<span id=\"exampleSecretKey\"></span></div><div>export AWS_ENDPOINT_URL=http://localhost:8333</div><div class=\"mt-2\"># List buckets</div><div>aws s3 ls</div><div class=\"mt-2\"># Upload a file</div><div>aws s3 cp myfile.txt s3://mybucket/</div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"closeCredentialsModal()\"><i class=\"fas fa-check me-1\"></i>I have saved the credentials</button></div></div></div></div><!-- JavaScript for service account management --><script>\n        document.addEventListener('DOMContentLoaded', function() {\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const saId = button.getAttribute('data-sa-id');\n                \n                switch (action) {\n                    case 'show-sa-details':\n                        showSADetails(saId);\n                        break;\n                    case 'toggle-sa-status':\n                        toggleSAStatus(saId, button.getAttribute('data-current-status'));\n                        break;\n                    case 'delete-sa':\n                        deleteSA(saId);\n                        break;\n                }\n            });\n        });\n\n        async function showSADetails(id) {\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`);\n                if (response.ok) {\n                    const sa = await response.json();\n                    document.getElementById('saDetailsContent').innerHTML = createSADetailsContent(sa);\n                    const modal = new bootstrap.Modal(document.getElementById('saDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load service account details');\n                }\n            } catch (error) {\n                console.error('Error loading service account details:', error);\n                showErrorMessage('Failed to load service account details');\n            }\n        }\n\n        async function toggleSAStatus(id, currentStatus) {\n            const newStatus = currentStatus === 'Active' ? 'Inactive' : 'Active';\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`, {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ status: newStatus })\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage(`Service account ${newStatus === 'Active' ? 'activated' : 'deactivated'}`);\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update status: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating status:', error);\n                showErrorMessage('Failed to update status: ' + error.message);\n            }\n        }\n\n        async function deleteSA(id) {\n            if (confirm('Are you sure you want to delete this service account? This action cannot be undone.')) {\n                try {\n                    const response = await fetch(`/api/service-accounts/${id}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Service account deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting service account:', error);\n                    showErrorMessage('Failed to delete: ' + error.message);\n                }\n            }\n        }\n\n        async function handleCreateServiceAccount() {\n            const form = document.getElementById('createSAForm');\n            const formData = new FormData(form);\n            \n            const saData = {\n                parent_user: formData.get('parent_user'),\n                description: formData.get('description')\n            };\n            \n            // Handle expiration if set\n            const expiration = formData.get('expiration');\n            if (expiration) {\n                // Validate the date before using it\n                const date = new Date(expiration);\n                const now = new Date();\n                \n                if (isNaN(date.getTime())) {\n                    showErrorMessage('Invalid expiration date format');\n                    return;\n                }\n                \n                // Ensure expiration is in the future\n                if (date <= now) {\n                    showErrorMessage('Expiration date must be in the future');\n                    return;\n                }\n                \n                saData.expiration = date.toISOString();\n            }\n            \n            try {\n                const response = await fetch('/api/service-accounts', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify(saData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Hide create modal\n                    const createModal = bootstrap.Modal.getInstance(document.getElementById('createServiceAccountModal'));\n                    createModal.hide();\n                    form.reset();\n                    \n                    // Show credentials if returned\n                    if (result.service_account && result.service_account.secret_access_key) {\n                        showCredentials(result.service_account);\n                    } else {\n                        showSuccessMessage('Service account created successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    }\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create service account: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating service account:', error);\n                showErrorMessage('Failed to create service account: ' + error.message);\n            }\n        }\n\n        function showCredentials(serviceAccount) {\n            // Populate the credentials modal\n            document.getElementById('displayAccessKey').value = serviceAccount.access_key_id;\n            document.getElementById('displaySecretKey').value = serviceAccount.secret_access_key;\n            document.getElementById('exampleAccessKey').textContent = serviceAccount.access_key_id;\n            document.getElementById('exampleSecretKey').textContent = serviceAccount.secret_access_key;\n            \n            // Show the modal\n            const credentialsModal = new bootstrap.Modal(document.getElementById('credentialsModal'));\n            credentialsModal.show();\n        }\n\n        function closeCredentialsModal() {\n            const modal = bootstrap.Modal.getInstance(document.getElementById('credentialsModal'));\n            modal.hide();\n            // Reload to show the new service account in the list\n            setTimeout(() => window.location.reload(), 500);\n        }\n\n        function copyToClipboard(event, elementId) {\n            const element = document.getElementById(elementId);\n            \n            // Use modern Clipboard API if available\n            if (navigator.clipboard) {\n                 navigator.clipboard.writeText(element.value).then(() => {\n                     // Success feedback could be added here\n                 }).catch(err => {\n                     console.warn('Clipboard API failed:', err);\n                     // Fallback\n                     element.select();\n                     document.execCommand('copy');\n                 });\n            } else {\n                // Fallback for older browsers\n                element.select();\n                document.execCommand('copy');\n            }\n            \n            // Visual feedback\n            const button = event.target.closest('button');\n            const originalHTML = button.innerHTML;\n            \n            button.innerHTML = '<i class=\"fas fa-check\"></i>';\n            button.classList.remove('btn-outline-secondary');\n            button.classList.add('btn-success');\n            \n            setTimeout(() => {\n                button.innerHTML = originalHTML;\n                button.classList.remove('btn-success');\n                button.classList.add('btn-outline-secondary');\n            }, 1000);\n        }\n\n\n        function createSADetailsContent(sa) {\n            // Create DOM elements safely to prevent XSS\n            const container = document.createElement('div');\n            container.className = 'row';\n            \n            // Basic Information column\n            const col1 = document.createElement('div');\n            col1.className = 'col-md-6';\n            \n            const h6_1 = document.createElement('h6');\n            h6_1.className = 'text-muted';\n            h6_1.textContent = 'Basic Information';\n            col1.appendChild(h6_1);\n            \n            const table1 = document.createElement('table');\n            table1.className = 'table table-sm';\n            \n            // ID row\n            const idRow = document.createElement('tr');\n            idRow.innerHTML = '<td><strong>ID:</strong></td><td><code></code></td>';\n            idRow.querySelector('code').textContent = sa.id || '';\n            table1.appendChild(idRow);\n            \n            // Parent User row\n            const parentRow = document.createElement('tr');\n            parentRow.innerHTML = '<td><strong>Parent User:</strong></td><td></td>';\n            parentRow.querySelectorAll('td')[1].textContent = sa.parent_user || '';\n            table1.appendChild(parentRow);\n            \n            // Access Key row\n            const keyRow = document.createElement('tr');\n            keyRow.innerHTML = '<td><strong>Access Key:</strong></td><td><code></code></td>';\n            keyRow.querySelector('code').textContent = sa.access_key_id || '';\n            table1.appendChild(keyRow);\n            \n            // Status row\n            const statusRow = document.createElement('tr');\n            const statusTd1 = document.createElement('td');\n            statusTd1.innerHTML = '<strong>Status:</strong>';\n            const statusTd2 = document.createElement('td');\n            const statusBadge = document.createElement('span');\n            statusBadge.className = sa.status === 'Active' ? 'badge bg-success' : 'badge bg-secondary';\n            statusBadge.textContent = sa.status || 'Unknown';\n            statusTd2.appendChild(statusBadge);\n            statusRow.appendChild(statusTd1);\n            statusRow.appendChild(statusTd2);\n            table1.appendChild(statusRow);\n            \n            col1.appendChild(table1);\n            container.appendChild(col1);\n            \n            // Details column\n            const col2 = document.createElement('div');\n            col2.className = 'col-md-6';\n            \n            const h6_2 = document.createElement('h6');\n            h6_2.className = 'text-muted';\n            h6_2.textContent = 'Details';\n            col2.appendChild(h6_2);\n            \n            const table2 = document.createElement('table');\n            table2.className = 'table table-sm';\n            \n            // Description row\n            const descRow = document.createElement('tr');\n            descRow.innerHTML = '<td><strong>Description:</strong></td><td></td>';\n            descRow.querySelectorAll('td')[1].textContent = sa.description || 'Not set';\n            table2.appendChild(descRow);\n            \n            // Created row\n            const createdRow = document.createElement('tr');\n            createdRow.innerHTML = '<td><strong>Created:</strong></td><td></td>';\n            try {\n                createdRow.querySelectorAll('td')[1].textContent = new Date(sa.create_date).toLocaleString();\n            } catch (e) {\n                createdRow.querySelectorAll('td')[1].textContent = 'Invalid date';\n            }\n            table2.appendChild(createdRow);\n            \n            // Expiration row\n            const expRow = document.createElement('tr');\n            expRow.innerHTML = '<td><strong>Expires:</strong></td><td></td>';\n            expRow.querySelectorAll('td')[1].textContent = sa.expiration || 'Never';\n            table2.appendChild(expRow);\n            \n            col2.appendChild(table2);\n            container.appendChild(col2);\n            \n            return container.outerHTML;\n        }\n\n\n        function showSuccessMessage(message) {\n            showToast(message, 'success');\n        }\n\n        function showErrorMessage(message) {\n            showToast(message, 'danger');\n        }\n\n        function showToast(message, type) {\n            // Create toast container if it doesn't exist\n            let toastContainer = document.getElementById('toastContainer');\n            if (!toastContainer) {\n                toastContainer = document.createElement('div');\n                toastContainer.id = 'toastContainer';\n                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';\n                toastContainer.style.zIndex = '9999';\n                document.body.appendChild(toastContainer);\n            }\n\n            // Create toast element\n            const toastId = 'toast-' + Date.now();\n            const toastHTML = `\n                <div id=\"${toastId}\" class=\"toast align-items-center text-white bg-${type} border-0\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n                    <div class=\"d-flex\">\n                        <div class=\"toast-body\">\n                            ${escapeHtml(message)}\n                        </div>\n                        <button type=\"button\" class=\"btn-close btn-close-white me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n                    </div>\n                </div>\n            `;\n            \n            toastContainer.insertAdjacentHTML('beforeend', toastHTML);\n            const toastElement = document.getElementById(toastId);\n            const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 5000 });\n            toast.show();\n            \n            // Remove toast element after it's hidden\n            toastElement.addEventListener('hidden.bs.toast', () => {\n                toastElement.remove();\n            });\n        }\n\n        function escapeHtml(text) {\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</select> <small class=\"form-text text-muted\">The service account will inherit permissions from this user</small></div><div class=\"mb-3\"><label for=\"description\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"description\" name=\"description\" rows=\"2\" placeholder=\"What is this service account used for?\"></textarea></div><div class=\"mb-3\"><label for=\"expiration\" class=\"form-label\">Expiration (optional)</label> <input type=\"datetime-local\" class=\"form-control\" id=\"expiration\" name=\"expiration\"> <small class=\"form-text text-muted\">Leave empty for no expiration</small></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateServiceAccount()\">Create</button></div></div></div></div><!-- Service Account Details Modal --><div class=\"modal fade\" id=\"saDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-robot me-2\"></i>Service Account Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"saDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Credentials Display Modal --><div class=\"modal fade\" id=\"credentialsModal\" tabindex=\"-1\" role=\"dialog\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header bg-success text-white\"><h5 class=\"modal-title\"><i class=\"fas fa-check-circle me-2\"></i>Service Account Created Successfully</h5></div><div class=\"modal-body\"><div class=\"alert alert-warning\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <strong>Important:</strong> This is the only time you will see the secret access key. Please save it securely.</div><div class=\"mb-4\"><h6 class=\"text-muted mb-3\">AWS CLI Configuration</h6><p class=\"text-muted small\">Use these credentials to configure AWS CLI or SDKs:</p><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_ACCESS_KEY_ID</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displayAccessKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displayAccessKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_SECRET_ACCESS_KEY</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displaySecretKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displaySecretKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div></div><div class=\"bg-light p-3 rounded\"><h6 class=\"text-muted mb-2\">Example AWS CLI Usage:</h6><div class=\"font-monospace small\"><div>export AWS_ACCESS_KEY_ID=<span id=\"exampleAccessKey\"></span></div><div>export AWS_SECRET_ACCESS_KEY=<span id=\"exampleSecretKey\"></span></div><div>export AWS_ENDPOINT_URL=http://localhost:8333</div><div class=\"mt-2\"># List buckets</div><div>aws s3 ls</div><div class=\"mt-2\"># Upload a file</div><div>aws s3 cp myfile.txt s3://mybucket/</div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"closeCredentialsModal()\"><i class=\"fas fa-check me-1\"></i>I have saved the credentials</button></div></div></div></div><!-- JavaScript for service account management --><script>\n        document.addEventListener('DOMContentLoaded', function() {\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const saId = button.getAttribute('data-sa-id');\n                \n                switch (action) {\n                    case 'show-sa-details':\n                        showSADetails(saId);\n                        break;\n                    case 'toggle-sa-status':\n                        toggleSAStatus(saId, button.getAttribute('data-current-status'));\n                        break;\n                    case 'delete-sa':\n                        deleteSA(saId);\n                        break;\n                }\n            });\n        });\n\n        async function showSADetails(id) {\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`);\n                if (response.ok) {\n                    const sa = await response.json();\n                    document.getElementById('saDetailsContent').innerHTML = createSADetailsContent(sa);\n                    const modal = new bootstrap.Modal(document.getElementById('saDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load service account details');\n                }\n            } catch (error) {\n                console.error('Error loading service account details:', error);\n                showErrorMessage('Failed to load service account details');\n            }\n        }\n\n        async function toggleSAStatus(id, currentStatus) {\n            const newStatus = currentStatus === 'Active' ? 'Inactive' : 'Active';\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`, {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ status: newStatus })\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage(`Service account ${newStatus === 'Active' ? 'activated' : 'deactivated'}`);\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update status: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating status:', error);\n                showErrorMessage('Failed to update status: ' + error.message);\n            }\n        }\n\n        async function deleteSA(id) {\n            if (confirm('Are you sure you want to delete this service account? This action cannot be undone.')) {\n                try {\n                    const response = await fetch(`/api/service-accounts/${id}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Service account deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting service account:', error);\n                    showErrorMessage('Failed to delete: ' + error.message);\n                }\n            }\n        }\n\n        async function handleCreateServiceAccount() {\n            const form = document.getElementById('createSAForm');\n            const formData = new FormData(form);\n            \n            const saData = {\n                parent_user: formData.get('parent_user'),\n                description: formData.get('description')\n            };\n            \n            // Handle expiration if set\n            const expiration = formData.get('expiration');\n            if (expiration) {\n                // Validate the date before using it\n                const date = new Date(expiration);\n                const now = new Date();\n                \n                if (isNaN(date.getTime())) {\n                    showErrorMessage('Invalid expiration date format');\n                    return;\n                }\n                \n                // Ensure expiration is in the future\n                if (date <= now) {\n                    showErrorMessage('Expiration date must be in the future');\n                    return;\n                }\n                \n                saData.expiration = date.toISOString();\n            }\n            \n            try {\n                const response = await fetch('/api/service-accounts', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify(saData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Hide create modal\n                    const createModal = bootstrap.Modal.getInstance(document.getElementById('createServiceAccountModal'));\n                    createModal.hide();\n                    form.reset();\n                    \n                    // Show credentials if returned\n                    if (result.service_account && result.service_account.secret_access_key) {\n                        showCredentials(result.service_account);\n                    } else {\n                        showSuccessMessage('Service account created successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    }\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create service account: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating service account:', error);\n                showErrorMessage('Failed to create service account: ' + error.message);\n            }\n        }\n\n        function showCredentials(serviceAccount) {\n            // Populate the credentials modal\n            document.getElementById('displayAccessKey').value = serviceAccount.access_key_id;\n            document.getElementById('displaySecretKey').value = serviceAccount.secret_access_key;\n            document.getElementById('exampleAccessKey').textContent = serviceAccount.access_key_id;\n            document.getElementById('exampleSecretKey').textContent = serviceAccount.secret_access_key;\n            \n            // Show the modal\n            const credentialsModal = new bootstrap.Modal(document.getElementById('credentialsModal'));\n            credentialsModal.show();\n        }\n\n        function closeCredentialsModal() {\n            const modal = bootstrap.Modal.getInstance(document.getElementById('credentialsModal'));\n            modal.hide();\n            // Reload to show the new service account in the list\n            setTimeout(() => window.location.reload(), 500);\n        }\n\n        function copyCredentialToClipboard(button, elementId) {\n            const element = document.getElementById(elementId);\n            const textToCopy = element.value;\n            \n            // Use modern Clipboard API if available\n            if (navigator.clipboard && navigator.clipboard.writeText) {\n                 navigator.clipboard.writeText(textToCopy).then(() => {\n                     showSuccessMessage('Copied to clipboard!');\n                 }).catch(err => {\n                     console.warn('Clipboard API failed:', err);\n                     // Fallback\n                     fallbackCopyTextToClipboard(element);\n                 });\n            } else {\n                // Fallback for older browsers or non-secure contexts\n                fallbackCopyTextToClipboard(element);\n            }\n            \n            // Visual feedback\n            const originalHTML = button.innerHTML;\n            \n            button.innerHTML = '<i class=\"fas fa-check\"></i>';\n            button.classList.remove('btn-outline-secondary');\n            button.classList.add('btn-success');\n            \n            setTimeout(() => {\n                button.innerHTML = originalHTML;\n                button.classList.remove('btn-success');\n                button.classList.add('btn-outline-secondary');\n            }, 1000);\n        }\n\n        function fallbackCopyTextToClipboard(element) {\n            element.select();\n            element.setSelectionRange(0, 99999); // For mobile devices\n            \n            try {\n                const successful = document.execCommand('copy');\n                if (successful) {\n                    showSuccessMessage('Copied to clipboard!');\n                } else {\n                    showErrorMessage('Failed to copy to clipboard');\n                }\n            } catch (err) {\n                console.error('Fallback copy failed:', err);\n                showErrorMessage('Failed to copy to clipboard');\n            }\n            \n            // Clear selection\n            window.getSelection().removeAllRanges();\n        }\n\n\n        function createSADetailsContent(sa) {\n            // Create DOM elements safely to prevent XSS\n            const container = document.createElement('div');\n            container.className = 'row';\n            \n            // Basic Information column\n            const col1 = document.createElement('div');\n            col1.className = 'col-md-6';\n            \n            const h6_1 = document.createElement('h6');\n            h6_1.className = 'text-muted';\n            h6_1.textContent = 'Basic Information';\n            col1.appendChild(h6_1);\n            \n            const table1 = document.createElement('table');\n            table1.className = 'table table-sm';\n            \n            // ID row\n            const idRow = document.createElement('tr');\n            idRow.innerHTML = '<td><strong>ID:</strong></td><td><code></code></td>';\n            idRow.querySelector('code').textContent = sa.id || '';\n            table1.appendChild(idRow);\n            \n            // Parent User row\n            const parentRow = document.createElement('tr');\n            parentRow.innerHTML = '<td><strong>Parent User:</strong></td><td></td>';\n            parentRow.querySelectorAll('td')[1].textContent = sa.parent_user || '';\n            table1.appendChild(parentRow);\n            \n            // Access Key row\n            const keyRow = document.createElement('tr');\n            keyRow.innerHTML = '<td><strong>Access Key:</strong></td><td><code></code></td>';\n            keyRow.querySelector('code').textContent = sa.access_key_id || '';\n            table1.appendChild(keyRow);\n            \n            // Status row\n            const statusRow = document.createElement('tr');\n            const statusTd1 = document.createElement('td');\n            statusTd1.innerHTML = '<strong>Status:</strong>';\n            const statusTd2 = document.createElement('td');\n            const statusBadge = document.createElement('span');\n            statusBadge.className = sa.status === 'Active' ? 'badge bg-success' : 'badge bg-secondary';\n            statusBadge.textContent = sa.status || 'Unknown';\n            statusTd2.appendChild(statusBadge);\n            statusRow.appendChild(statusTd1);\n            statusRow.appendChild(statusTd2);\n            table1.appendChild(statusRow);\n            \n            col1.appendChild(table1);\n            container.appendChild(col1);\n            \n            // Details column\n            const col2 = document.createElement('div');\n            col2.className = 'col-md-6';\n            \n            const h6_2 = document.createElement('h6');\n            h6_2.className = 'text-muted';\n            h6_2.textContent = 'Details';\n            col2.appendChild(h6_2);\n            \n            const table2 = document.createElement('table');\n            table2.className = 'table table-sm';\n            \n            // Description row\n            const descRow = document.createElement('tr');\n            descRow.innerHTML = '<td><strong>Description:</strong></td><td></td>';\n            descRow.querySelectorAll('td')[1].textContent = sa.description || 'Not set';\n            table2.appendChild(descRow);\n            \n            // Created row\n            const createdRow = document.createElement('tr');\n            createdRow.innerHTML = '<td><strong>Created:</strong></td><td></td>';\n            try {\n                createdRow.querySelectorAll('td')[1].textContent = new Date(sa.create_date).toLocaleString();\n            } catch (e) {\n                createdRow.querySelectorAll('td')[1].textContent = 'Invalid date';\n            }\n            table2.appendChild(createdRow);\n            \n            // Expiration row\n            const expRow = document.createElement('tr');\n            expRow.innerHTML = '<td><strong>Expires:</strong></td><td></td>';\n            expRow.querySelectorAll('td')[1].textContent = sa.expiration || 'Never';\n            table2.appendChild(expRow);\n            \n            col2.appendChild(table2);\n            container.appendChild(col2);\n            \n            return container.outerHTML;\n        }\n\n\n        function showSuccessMessage(message) {\n            showToast(message, 'success');\n        }\n\n        function showErrorMessage(message) {\n            showToast(message, 'danger');\n        }\n\n        function showToast(message, type) {\n            // Create toast container if it doesn't exist\n            let toastContainer = document.getElementById('toastContainer');\n            if (!toastContainer) {\n                toastContainer = document.createElement('div');\n                toastContainer.id = 'toastContainer';\n                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';\n                toastContainer.style.zIndex = '9999';\n                document.body.appendChild(toastContainer);\n            }\n\n            // Create toast element\n            const toastId = 'toast-' + Date.now();\n            const toastHTML = `\n                <div id=\"${toastId}\" class=\"toast align-items-center text-white bg-${type} border-0\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n                    <div class=\"d-flex\">\n                        <div class=\"toast-body\">\n                            ${escapeHtml(message)}\n                        </div>\n                        <button type=\"button\" class=\"btn-close btn-close-white me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n                    </div>\n                </div>\n            `;\n            \n            toastContainer.insertAdjacentHTML('beforeend', toastHTML);\n            const toastElement = document.getElementById(toastId);\n            const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 5000 });\n            toast.show();\n            \n            // Remove toast element after it's hidden\n            toastElement.addEventListener('hidden.bs.toast', () => {\n                toastElement.remove();\n            });\n        }\n\n        function escapeHtml(text) {\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}