Add access key status management to Admin UI (#8050)

* Add access key status management to Admin UI

- Add Status field to AccessKeyInfo struct
- Implement UpdateAccessKeyStatus API endpoint
- Add status dropdown in access keys modal
- Fix modal backdrop issue by using refreshAccessKeysList helper
- Status can be toggled between Active and Inactive

* Replace magic strings with constants for access key status

- Define AccessKeyStatusActive and AccessKeyStatusInactive constants in admin_data.go
- Define STATUS_ACTIVE and STATUS_INACTIVE constants in JavaScript
- Replace all hardcoded 'Active' and 'Inactive' strings with constants
- Update error messages to use constants for consistency

* Remove duplicate manageAccessKeys function definition

* Add security improvements to access key status management

- Add status validation in UpdateAccessKeyStatus to prevent invalid values
- Fix XSS vulnerability by replacing inline onchange with data attributes
- Add delegated event listener for status select changes
- Add URL encoding to API request path segments

weed/admin/view/app/object_store_users.templ

@@ -396,6 +396,10 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
 
     <!-- JavaScript for user management -->
     <script>
+        // Access key status constants
+        const STATUS_ACTIVE = 'Active';
+        const STATUS_INACTIVE = 'Inactive';
+
         document.addEventListener('DOMContentLoaded', function() {
             
             // Event delegation for user action buttons
@@ -432,6 +436,17 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
                 }
             });
 
+            // Event delegation for access key status changes
+            document.addEventListener('change', function(e) {
+                const statusSelect = e.target.closest('.access-key-status-select');
+                if (statusSelect) {
+                    const username = statusSelect.getAttribute('data-username');
+                    const accessKey = statusSelect.getAttribute('data-access-key');
+                    const newStatus = statusSelect.value;
+                    updateAccessKeyStatus(username, accessKey, newStatus);
+                }
+            });
+
             // Load policies for dropdowns
             loadPolicies();
             
@@ -973,7 +988,12 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
             user.access_keys.forEach(function(key) {
                 keysHtml += '<tr>';
                 keysHtml += '<td><code>' + escapeHtml(key.access_key) + '</code></td>';
-                keysHtml += '<td><span class="badge bg-success">Active</span></td>';
+                keysHtml += '<td>';
+                keysHtml += '<select class="form-select form-select-sm access-key-status-select" data-username="' + escapeHtml(user.username) + '" data-access-key="' + escapeHtml(key.access_key) + '" style="width: 110px;">';
+                keysHtml += '<option value="' + STATUS_ACTIVE + '" ' + (key.status === STATUS_ACTIVE || !key.status ? 'selected' : '') + '>' + STATUS_ACTIVE + '</option>';
+                keysHtml += '<option value="' + STATUS_INACTIVE + '" ' + (key.status === STATUS_INACTIVE ? 'selected' : '') + '>' + STATUS_INACTIVE + '</option>';
+                keysHtml += '</select>';
+                keysHtml += '</td>';
                 keysHtml += '<td>';
                 // Add "View Secret" button with data attributes
                 keysHtml += '<button class="btn btn-outline-secondary btn-sm me-2 view-secret-btn" data-access-key="' + escapeHtml(key.access_key) + '" data-secret-key="' + escapeHtml(key.secret_key) + '">';
@@ -1005,6 +1025,46 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
             return keysHtml;
         }
 
+        // Refresh access keys list content
+        async function refreshAccessKeysList(username) {
+            try {
+                const response = await fetch(`/api/users/${username}`);
+                if (response.ok) {
+                    const user = await response.json();
+                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);
+                }
+            } catch (error) {
+                console.error('Error refreshing access keys:', error);
+            }
+        }
+
+        // Update access key status
+        async function updateAccessKeyStatus(username, accessKey, status) {
+            try {
+                const response = await fetch(`/api/users/${encodeURIComponent(username)}/access-keys/${encodeURIComponent(accessKey)}/status`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ status: status })
+                });
+
+                if (response.ok) {
+                    showSuccessMessage('Access key status updated successfully');
+                    // Refresh access keys display without toggling modal
+                    refreshAccessKeysList(username);
+                } else {
+                    const error = await response.json();
+                    showErrorMessage('Failed to update access key status: ' + (error.error || 'Unknown error'));
+                    refreshAccessKeysList(username);
+                }
+            } catch (error) {
+                console.error('Error updating access key status:', error);
+                showErrorMessage('Failed to update access key status: ' + error.message);
+                refreshAccessKeysList(username);
+            }
+        }
+
         // Create new access key
         async function createAccessKey() {
             const username = document.getElementById('accessKeysUsername').textContent;
@@ -1029,11 +1089,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
                     showSuccessMessage('Access key created successfully');
                     
                     // Refresh access keys display
-                    const userResponse = await fetch(`/api/users/${username}`);
-                    if (userResponse.ok) {
-                        const user = await userResponse.json();
-                        document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);
-                    }
+                    refreshAccessKeysList(username);
                 } else {
                     const error = await response.json();
                     showErrorMessage('Failed to create access key: ' + (error.error || 'Unknown error'));
@@ -1056,11 +1112,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
                         showSuccessMessage('Access key deleted successfully');
                         
                         // Refresh access keys display
-                        const userResponse = await fetch(`/api/users/${username}`);
-                        if (userResponse.ok) {
-                            const user = await userResponse.json();
-                            document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);
-                        }
+                        refreshAccessKeysList(username);
                     } else {
                         const error = await response.json();
                         showErrorMessage('Failed to delete access key: ' + (error.error || 'Unknown error'));