Add API management in the settings page

jay-bman725 · jay-bman725 · commit c6b78ffb3a6a · 2025-06-06T20:41:39.000-05:00
diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,39 @@
 # Changelog
 **All dates are in YYYY/MM/DD (Year-Month-Day)**
 
+## [1.4.0] - 2025-06-06
+
+### Added
+- **API Key Management in Settings**: Complete API key management functionality within the settings modal
+  - Current API key status display showing whether an API key is configured
+  - Change API Key button that redirects to the main API key input section
+  - Remove API Key button with confirmation dialog for secure key removal
+  - Real-time status updates when API key state changes
+- **Enhanced Settings Modal**: Expanded settings with dedicated API Key Management section
+  - Visual status indicators (✅ configured, ❌ not configured, 🔄 checking)
+  - Responsive button layout for API key actions
+  - Professional styling with danger button for removal action
+- **Backend API Key Operations**: New IPC handlers for comprehensive API key management
+  - `get-api-key-status`: Check if API key exists without exposing the actual key
+  - `remove-api-key`: Securely delete API key file and clear OpenAI instance
+  - Enhanced error handling and logging for all API key operations
+
+### Enhanced
+- **User Experience**: Streamlined API key management workflow
+  - Users can now manage their API key entirely from the settings without navigating away
+  - Clear visual feedback for all API key operations
+  - Confirmation dialogs prevent accidental key removal
+- **Security**: Improved API key handling
+  - API key status checking without exposing sensitive data
+  - Secure removal process that clears both file storage and memory
+  - Better separation of concerns between status checking and key access
+
+### Technical
+- Added `updateApiKeyStatus()`, `changeApiKeyFromSettings()`, and `removeApiKeyFromSettings()` methods
+- Extended preload.js with `getApiKeyStatus` and `removeApiKey` functions
+- Enhanced main.js with secure API key management IPC handlers
+- Improved error handling and user feedback throughout the API key lifecycle
+
 ## [1.3.0] - 2025-06-06
 
 ### Added
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "autocaption",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Automatic caption generation app using OpenAI Whisper",
   "main": "src/main.js",
   "scripts": {
diff --git a/src/app.js b/src/app.js
@@ -134,6 +134,10 @@ class AutoCaptionApp {
         document.getElementById('manual-check-updates-btn').addEventListener('click', () => this.checkForUpdates());
         document.getElementById('show-debug-logs-btn').addEventListener('click', () => this.openDebugLogs());
 
+        // API Key Management in Settings
+        document.getElementById('settings-change-api-key-btn').addEventListener('click', () => this.changeApiKeyFromSettings());
+        document.getElementById('settings-remove-api-key-btn').addEventListener('click', () => this.removeApiKeyFromSettings());
+
         // Theme selection
         document.getElementById('theme-select').addEventListener('change', (e) => {
             this.setTheme(e.target.value);
@@ -454,6 +458,9 @@ class AutoCaptionApp {
         
         // Update last check info
         this.updateLastCheckInfo();
+        
+        // Check and update API key status
+        await this.updateApiKeyStatus();
     }
 
     closeSettings() {
@@ -1085,6 +1092,92 @@ class AutoCaptionApp {
             console.error('Error finishing onboarding:', error);
         }
     }
+
+    // API Key Management in Settings
+    async updateApiKeyStatus() {
+        const statusDisplay = document.getElementById('settings-api-key-status');
+        const indicator = document.getElementById('settings-api-key-indicator');
+        
+        try {
+            const result = await window.electronAPI.getApiKeyStatus();
+            if (result.success && result.hasApiKey) {
+                statusDisplay.classList.remove('not-configured');
+                statusDisplay.classList.add('configured');
+                indicator.textContent = '✅ API Key Configured';
+            } else {
+                statusDisplay.classList.remove('configured');
+                statusDisplay.classList.add('not-configured');
+                indicator.textContent = '❌ No API Key Set';
+            }
+        } catch (error) {
+            console.error('Error checking API key status:', error);
+            statusDisplay.classList.remove('configured');
+            statusDisplay.classList.add('not-configured');
+            indicator.textContent = '⚠️ Error checking status';
+        }
+    }
+
+    async changeApiKeyFromSettings() {
+        // Close settings modal
+        this.closeSettings();
+        
+        // Show the main API key section
+        this.showApiKeySection();
+        
+        // Focus on the input
+        document.getElementById('api-key-input').focus();
+    }
+
+    async removeApiKeyFromSettings() {
+        const button = document.getElementById('settings-remove-api-key-btn');
+        const originalText = button.innerHTML;
+        
+        // Show confirmation dialog
+        const confirmed = confirm('Are you sure you want to remove your API key? You will need to enter it again to use the application.');
+        
+        if (!confirmed) {
+            return;
+        }
+        
+        // Show loading state
+        button.innerHTML = '<span>🔄 Removing...</span>';
+        button.disabled = true;
+        
+        try {
+            const result = await window.electronAPI.removeApiKey();
+            if (result.success) {
+                // Update API key status
+                this.apiKeySet = false;
+                await this.updateApiKeyStatus();
+                
+                // Show success message briefly
+                button.innerHTML = '<span>✅ Removed</span>';
+                
+                // Reset UI to show API key section
+                setTimeout(() => {
+                    this.closeSettings();
+                    this.showApiKeySection();
+                    
+                    // Show status message
+                    const statusDiv = document.getElementById('api-key-status');
+                    this.showStatus(statusDiv, '🗑️ API key removed. Please enter a new one to continue.', 'error');
+                }, 1000);
+            } else {
+                button.innerHTML = '<span>❌ Failed</span>';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    button.disabled = false;
+                }, 2000);
+            }
+        } catch (error) {
+            console.error('Error removing API key:', error);
+            button.innerHTML = '<span>❌ Error</span>';
+            setTimeout(() => {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }, 2000);
+        }
+    }
 }
 
 // Initialize the app when the DOM is loaded
diff --git a/src/index.html b/src/index.html
@@ -259,6 +259,26 @@ <h3>🎨 Appearance</h3>
                                 <p class="setting-description">Choose your preferred theme. System Default will follow your system's theme settings.</p>
                             </div>
                         </div>
+                        <div class="setting-group">
+                            <h3>🔑 API Key Management</h3>
+                            <div class="setting-item">
+                                <label class="setting-label">Current API Key Status</label>
+                                <div id="settings-api-key-status" class="api-key-status-display">
+                                    <span id="settings-api-key-indicator">🔄 Checking...</span>
+                                </div>
+                                <p class="setting-description">Manage your OpenAI API key used for transcription.</p>
+                            </div>
+                            <div class="setting-item">
+                                <div class="api-key-actions">
+                                    <button id="settings-change-api-key-btn" class="btn btn-secondary">
+                                        <span>🔄 Change API Key</span>
+                                    </button>
+                                    <button id="settings-remove-api-key-btn" class="btn btn-outline btn-danger">
+                                        <span>🗑️ Remove API Key</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                         <div class="setting-group">
                             <h3>🔄 Updates</h3>
                             <div class="setting-item">
@@ -279,7 +299,7 @@ <h3>🔄 Updates</h3>
                         <div class="setting-group">
                             <h3>ℹ️ About</h3>
                             <div class="setting-item">
-                                <p><strong>Version:</strong> 1.3.0</p>
+                                <p><strong>Version:</strong> 1.4.0</p>
                                 <p><strong>Made with ❤️ by Jay</strong></p>
                                 <p>Using OpenAI Whisper for AI-powered transcription</p>
                             </div>
diff --git a/src/main.js b/src/main.js
@@ -107,7 +107,7 @@ let openai;
 let updateCheckInterval;
 
 // Current app version
-const CURRENT_VERSION = '1.3.0';
+const CURRENT_VERSION = '1.4.0';
 const UPDATE_CHECK_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/version';
 const CHANGELOG_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/changelog.md';
 
@@ -476,6 +476,40 @@ ipcMain.handle('set-api-key', async (event, apiKey) => {
   }
 });
 
+// Get API key status
+ipcMain.handle('get-api-key-status', async () => {
+  try {
+    const apiKey = await loadApiKey();
+    return { 
+      success: true, 
+      hasApiKey: apiKey !== null && apiKey !== undefined && apiKey.trim().length > 0 
+    };
+  } catch (error) {
+    logger.error('Error checking API key status:', error);
+    return { success: false, error: error.message };
+  }
+});
+
+// Remove API key
+ipcMain.handle('remove-api-key', async () => {
+  try {
+    logger.info('Removing API key');
+    // Remove the API key file
+    if (fs.existsSync(apiKeyFile)) {
+      await fsPromises.unlink(apiKeyFile);
+      logger.info('API key file removed successfully');
+    }
+    
+    // Clear the OpenAI instance
+    openai = null;
+    
+    return { success: true };
+  } catch (error) {
+    logger.error('Error removing API key:', error);
+    return { success: false, error: error.message };
+  }
+});
+
 ipcMain.handle('select-audio-file', async () => {
   logger.info('Opening file selection dialog');
   const result = await dialog.showOpenDialog(mainWindow, {
diff --git a/src/preload.js b/src/preload.js
@@ -2,6 +2,8 @@ const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('electronAPI', {
   setApiKey: (apiKey) => ipcRenderer.invoke('set-api-key', apiKey),
+  getApiKeyStatus: () => ipcRenderer.invoke('get-api-key-status'),
+  removeApiKey: () => ipcRenderer.invoke('remove-api-key'),
   selectAudioFile: () => ipcRenderer.invoke('select-audio-file'),
   transcribeAudio: (filePath) => ipcRenderer.invoke('transcribe-audio', filePath),
   saveSrtFile: (srtContent) => ipcRenderer.invoke('save-srt-file', srtContent),
diff --git a/src/styles.css b/src/styles.css
@@ -973,6 +973,75 @@ footer {
     transition: color 0.3s ease;
 }
 
+/* API Key Management Styles */
+.api-key-status-display {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: var(--status-loading-bg);
+    border: 2px solid var(--loading-border);
+    margin-bottom: 8px;
+    transition: all 0.3s ease;
+}
+
+.api-key-status-display.configured {
+    background: var(--status-success-bg);
+    border-color: var(--success-border);
+}
+
+.api-key-status-display.not-configured {
+    background: var(--status-error-bg);
+    border-color: var(--error-border);
+}
+
+.api-key-status-display span {
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.api-key-status-display.configured span {
+    color: var(--status-success-text);
+}
+
+.api-key-status-display.not-configured span {
+    color: var(--status-error-text);
+}
+
+.api-key-status-display span {
+    color: var(--status-loading-text);
+}
+
+.api-key-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.btn-danger {
+    background: transparent;
+    color: #ef4444;
+    border: 2px solid #ef4444;
+    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
+}
+
+.btn-danger:hover {
+    background: #ef4444;
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+@media (max-width: 600px) {
+    .api-key-actions {
+        flex-direction: column;
+    }
+    
+    .api-key-actions .btn {
+        width: 100%;
+    }
+}
+
 /* Update Modal Styles */
 .update-modal-content {
     max-width: 700px;
diff --git a/version b/version
@@ -1 +1 @@
-1.3.0
+1.4.0

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "autocaption",`
`3`		`- "version": "1.3.0",`
	`3`	`+ "version": "1.4.0",`
`4`	`4`	`"description": "Automatic caption generation app using OpenAI Whisper",`
`5`	`5`	`"main": "src/main.js",`
`6`	`6`	`"scripts": {`