Add form styles and tooltips to API key management interface

Author: ralyodio

public/css/api-keys.css

@@ -3,20 +3,19 @@
  * API Keys page specific styles
  */
 
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--spacing-lg);
+}
+
 /* API Keys container */
 .api-key-container {
   max-width: 100%;
   margin-bottom: 30px;
 }
 
-/* Page title */
-h1 {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--primary-color);
-  margin-bottom: var(--spacing-lg);
-}
-
 /* Dashboard tabs */
 .dashboard-tabs {
   display: flex;
@@ -52,6 +51,65 @@ h1 {
   margin-bottom: var(--spacing-xl);
 }
 
+/* Form styles */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-help {
+  margin-top: 5px;
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  background-color: var(--input-background);
+  color: var(--text-primary);
+  font-size: var(--font-size-md);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(224, 35, 55, 0.1);
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+}
+
+.btn:hover {
+  background-color: var(--primary-dark);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-dark);
+}
+
 /* Login prompt */
 .login-prompt {
   text-align: center;

public/js/components/api-key-manager.js

@@ -34,6 +34,13 @@ export class ApiKeyManager extends BaseComponent {
       h2 {
         margin-top: 0;
         margin-bottom: 20px;
+        color: var(--primary-color);
+      }
+      
+      h3 {
+        margin-top: 0;
+        margin-bottom: 15px;
+        color: var(--text-primary);
       }
       
       .api-key-form {
@@ -48,6 +55,12 @@ export class ApiKeyManager extends BaseComponent {
         margin-bottom: 15px;
       }
       
+      .form-help {
+        margin-top: 5px;
+        font-size: var(--font-size-sm);
+        color: var(--text-tertiary);
+      }
+      
       label {
         display: block;
         margin-bottom: 5px;
@@ -280,6 +293,7 @@ export class ApiKeyManager extends BaseComponent {
         <div class="form-group">
           <label for="key-name">API Key Name</label>
           <input type="text" id="key-name" placeholder="e.g., Production, Development, Testing" value="${this._newKeyName}">
+          <p class="form-help">Give your API key a descriptive name to identify its purpose.</p>
         </div>
         <button id="create-key-button" class="btn btn-primary" ${this._newKeyName.trim() === '' ? 'disabled' : ''}>Create API Key</button>
       </div>
@@ -300,6 +314,7 @@ export class ApiKeyManager extends BaseComponent {
       return `
         <div class="empty-state">
           <p>You don't have any API keys yet. Create one to get started.</p>
+          <p>API keys are used to authenticate your requests to our API endpoints.</p>
           <button id="create-empty-key-button" class="btn btn-primary">Create Your First API Key</button>
         </div>
       `;
@@ -329,10 +344,10 @@ export class ApiKeyManager extends BaseComponent {
                 <td>${this._formatDate(key.created_at)}</td>
                 <td>${key.last_used_at ? this._formatDate(key.last_used_at) : 'Never'}</td>
                 <td class="actions">
-                  <button class="toggle-button ${key.is_active ? 'active' : ''}" data-action="toggle" data-key-id="${key.id}">
+                  <button class="toggle-button ${key.is_active ? 'active' : ''}" data-action="toggle" data-key-id="${key.id}" title="${key.is_active ? 'Deactivate this API key' : 'Activate this API key'}">
                     ${key.is_active ? 'Deactivate' : 'Activate'}
                   </button>
-                  <button class="delete-button" data-action="delete" data-key-id="${key.id}">Delete</button>
+                  <button class="delete-button" data-action="delete" data-key-id="${key.id}" title="Delete this API key permanently">Delete</button>
                 </td>
               </tr>
             `).join('')}

public/views/api-keys.html

@@ -20,8 +20,6 @@
   <pf-header></pf-header>
 
   <div class="container">
-    <h1>API Key Management</h1>
-    
     <div class="dashboard-tabs">
       <button class="tab-button active" data-tab="manage">Manage Keys</button>
       <button class="tab-button" data-tab="docs">API Documentation</button>
@@ -78,7 +76,9 @@ <h2>Authentication Required</h2>
       // Set up tab switching
       const tabButtons = document.querySelectorAll('.tab-button');
       tabButtons.forEach(button => {
-        button.addEventListener('click', () => {
+        button.onclick = () => {
+          console.log('Tab button clicked:', button.dataset.tab);
+          
           // Remove active class from all buttons
           tabButtons.forEach(btn => btn.classList.remove('active'));
 
@@ -92,8 +92,15 @@ <h2>Authentication Required</h2>
 
           // Show selected tab content
           const tabId = button.dataset.tab;
-          document.getElementById(`${tabId}-tab`).style.display = 'block';
-        });
+          const tabContent = document.getElementById(`${tabId}-tab`);
+          
+          if (tabContent) {
+            tabContent.style.display = 'block';
+            console.log('Tab content displayed:', tabId);
+          } else {
+            console.error('Tab content not found:', tabId);
+          }
+        };
       });
 
       // Force refresh of the API key manager component