Replace onclick with addEventListener for consistent event handling in components

Author: ralyodio

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

@@ -316,7 +316,6 @@ export class ApiKeyManager extends BaseComponent {
         <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>
       `;
     }
@@ -397,54 +396,48 @@ export class ApiKeyManager extends BaseComponent {
     // Create key button
     const createKeyButton = this.$('#create-key-button');
     if (createKeyButton) {
-      createKeyButton.onclick = () => this._createApiKey();
-    }
-    
-    // Create empty key button (when no keys exist)
-    const createEmptyKeyButton = this.$('#create-empty-key-button');
-    if (createEmptyKeyButton) {
-      createEmptyKeyButton.onclick = () => {
-        this._newKeyName = 'My First API Key';
-        this._createApiKey();
-      };
+      createKeyButton.addEventListener((e) => {
+        this._createApiKey()
+      })
     }
+  
 
     // Key name input
     const keyNameInput = this.$('#key-name');
     if (keyNameInput) {
-      keyNameInput.oninput = (e) => {
+      keyNameInput.addEventListener('input', (e) => {
         this._newKeyName = e.target.value;
         this.render();
-      };
+      });
 
       // Also handle Enter key press
-      keyNameInput.onkeydown = (e) => {
+      keyNameInput.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && this._newKeyName.trim() !== '') {
           this._createApiKey();
         }
-      };
+      });
     }
 
     // Copy key button
     const copyKeyButton = this.$('#copy-key-button');
     if (copyKeyButton) {
-      copyKeyButton.onclick = () => this._copyToClipboard();
+      copyKeyButton.addEventListener('click', () => this._copyToClipboard());
     }
 
     // Done button
     const doneButton = this.$('#done-button');
     if (doneButton) {
-      doneButton.onclick = () => {
+      doneButton.addEventListener('click', () => {
         this._newKeyValue = null;
         this._newKeyName = '';
         this.render();
-      };
+      });
     }
 
     // Toggle and delete buttons
     const apiKeysTable = this.$('.api-keys-table');
     if (apiKeysTable) {
-      apiKeysTable.onclick = (e) => {
+      apiKeysTable.addEventListener('click', (e) => {
         const button = e.target.closest('button');
         if (!button) return;
 
@@ -461,7 +454,7 @@ export class ApiKeyManager extends BaseComponent {
             this._deleteApiKey(keyId);
           }
         }
-      };
+      });
     }
   }
 

public/js/components/language-switcher.js

@@ -204,12 +204,12 @@ class LanguageSwitcher extends HTMLElement {
 
     if (dropdownButton && dropdownContent) {
       // Use direct onclick assignment for more reliable event handling in Shadow DOM
-      dropdownButton.onclick = (e) => {
+      dropdownButton.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         console.log('Language dropdown button clicked');
         dropdownContent.classList.toggle('show');
-      };
+      });
 
       // Close dropdown when clicking outside
       // We need a different approach for Shadow DOM
@@ -235,7 +235,7 @@ class LanguageSwitcher extends HTMLElement {
       const dropdownItems = this.shadowRoot.querySelectorAll('.dropdown-item');
       dropdownItems.forEach(item => {
         // Use direct onclick assignment
-        item.onclick = (e) => {
+        item.addEventListener('click', (e) => {
           e.preventDefault();
           e.stopPropagation();
           const lang = item.getAttribute('data-lang');

public/js/components/pf-header.js

@@ -405,30 +405,30 @@ class PfHeader extends HTMLElement {
     // Add event listeners for theme toggle buttons (both desktop and mobile)
     const themeToggles = this.shadowRoot.querySelectorAll('.theme-toggle');
     themeToggles.forEach(toggle => {
-      toggle.onclick = () => {
+      toggle.addEventListener('click', () => {
         this.toggleTheme();
-      };
+      });
     });
 
     // Add event listener for hamburger menu toggle
     const hamburgerMenu = this.shadowRoot.querySelector('.hamburger-menu');
     const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
     if (hamburgerMenu && mobileMenu) {
-      hamburgerMenu.onclick = () => {
+      hamburgerMenu.addEventListener('click', () => {
         hamburgerMenu.classList.toggle('active');
         mobileMenu.classList.toggle('active');
         // Prevent scrolling when mobile menu is open
         document.body.style.overflow = hamburgerMenu.classList.contains('active') ? 'hidden' : '';
-      };
+      });
 
       // Close mobile menu when clicking on a link
       const mobileLinks = mobileMenu.querySelectorAll('a');
       mobileLinks.forEach(link => {
-        link.onclick = () => {
+        link.addEventListener('click', () => {
           hamburgerMenu.classList.remove('active');
           mobileMenu.classList.remove('active');
           document.body.style.overflow = '';
-        };
+        });
       });
     }
 
@@ -679,11 +679,11 @@ class PfHeader extends HTMLElement {
             const mobileLogoutLink = mobileMenu.querySelector('.mobile-logout-link');
             if (mobileLogoutLink) {
               // Use direct onclick assignment
-              mobileLogoutLink.onclick = (e) => {
+              mobileLogoutLink.addEventListener('click', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.logout();
-              };
+              });
             } else {
               console.error('Mobile logout link not found after insertion');
             }
@@ -703,12 +703,12 @@ class PfHeader extends HTMLElement {
 
       if (dropdownButton && dropdownMenu) {
         // Use direct onclick assignment for more reliable event handling
-        dropdownButton.onclick = (e) => {
+        dropdownButton.addEventListener('click', (e) => {
           e.preventDefault();
           e.stopPropagation();
           console.log('Dropdown button clicked, toggling show class');
           dropdownMenu.classList.toggle('show');
-        };
+        });
 
         // Set up document click handler if not already done
         if (!this._documentClickHandler) {
@@ -743,12 +743,12 @@ class PfHeader extends HTMLElement {
       const logoutButton = navLinks.querySelector('.logout-button');
       if (logoutButton) {
         // Use direct onclick assignment
-        logoutButton.onclick = (e) => {
+        logoutButton.addEventListener('click', (e) => {
           e.preventDefault();
           e.stopPropagation();
           console.log('Logout button clicked');
           this.logout();
-        };
+        });
       }
     } else {
       // User is not logged in