Refactor visibility toggle: Remove toggleApiKeyVisibility function and update related button in modals

static/js/checkpoints.js

@@ -1,5 +1,4 @@
 import { appCore } from './core.js';
-import { toggleApiKeyVisibility } from './managers/SettingsManager.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
 import { createPageControls } from './components/controls/index.js';
@@ -19,7 +18,6 @@ class CheckpointsPageManager {
         // Minimal set of functions that need to remain global
         window.confirmDelete = confirmDelete;
         window.closeDeleteModal = closeDeleteModal;
-        window.toggleApiKeyVisibility = toggleApiKeyVisibility;
         
         // Add loadCheckpoints function to window for FilterManager compatibility
         window.checkpointManager = {

static/js/loras.js

@@ -4,7 +4,6 @@ import { showLoraModal, toggleShowcase, scrollToTop } from './components/loraMod
 import { updateCardsForBulkMode } from './components/LoraCard.js';
 import { bulkManager } from './managers/BulkManager.js';
 import { DownloadManager } from './managers/DownloadManager.js';
-import { toggleApiKeyVisibility } from './managers/SettingsManager.js';
 import { moveManager } from './managers/MoveManager.js';
 import { LoraContextMenu } from './components/ContextMenu.js';
 import { createPageControls } from './components/controls/index.js';
@@ -34,7 +33,6 @@ class LoraPageManager {
         window.showLoraModal = showLoraModal;
         window.confirmDelete = confirmDelete;
         window.closeDeleteModal = closeDeleteModal;
-        window.toggleApiKeyVisibility = toggleApiKeyVisibility;
         window.downloadManager = this.downloadManager;
         window.moveManager = moveManager;
         window.toggleShowcase = toggleShowcase;

static/js/managers/SettingsManager.js

@@ -50,6 +50,11 @@ export class SettingsManager {
             observer.observe(settingsModal, { attributes: true });
         }
         
+        // Add event listeners for all toggle-visibility buttons
+        document.querySelectorAll('.toggle-visibility').forEach(button => {
+            button.addEventListener('click', () => this.toggleInputVisibility(button));
+        });
+        
         this.initialized = true;
     }
 
@@ -271,6 +276,19 @@ export class SettingsManager {
         }
     }
 
+    toggleInputVisibility(button) {
+        const input = button.parentElement.querySelector('input');
+        const icon = button.querySelector('i');
+        
+        if (input.type === 'password') {
+            input.type = 'text';
+            icon.className = 'fas fa-eye-slash';
+        } else {
+            input.type = 'password';
+            icon.className = 'fas fa-eye';
+        }
+    }
+
     async reloadContent() {
         if (this.currentPage === 'loras') {
             // Reload the loras without updating folders
@@ -387,17 +405,3 @@ export class SettingsManager {
 
 // Create singleton instance
 export const settingsManager = new SettingsManager();
-
-// Helper function for toggling API key visibility
-export function toggleApiKeyVisibility(button) {
-    const input = button.parentElement.querySelector('input');
-    const icon = button.querySelector('i');
-    
-    if (input.type === 'password') {
-        input.type = 'text';
-        icon.className = 'fas fa-eye-slash';
-    } else {
-        input.type = 'password';
-        icon.className = 'fas fa-eye';
-    }
-}

static/js/recipes.js

@@ -4,7 +4,6 @@ import { ImportManager } from './managers/ImportManager.js';
 import { RecipeCard } from './components/RecipeCard.js';
 import { RecipeModal } from './components/RecipeModal.js';
 import { getCurrentPageState } from './state/index.js';
-import { toggleApiKeyVisibility } from './managers/SettingsManager.js';
 import { getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
 
 class RecipeManager {
@@ -67,7 +66,6 @@ class RecipeManager {
         // Only expose what's needed for the page
         window.recipeManager = this;
         window.importManager = this.importManager;
-        window.toggleApiKeyVisibility = toggleApiKeyVisibility;
     }
     
     _checkCustomFilter() {

templates/components/modals.html

@@ -30,7 +30,7 @@
                                 value="{{ settings.get('civitai_api_key', '') }}"
                                 onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
                                 onkeydown="if(event.key === 'Enter') { this.blur(); }" />
-                            <button class="toggle-visibility" onclick="toggleApiKeyVisibility(this)">
+                            <button class="toggle-visibility">
                                 <i class="fas fa-eye"></i>
                             </button>
                         </div>