fix admin copy text functions

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>

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