Update index.html

index.html

@@ -92,8 +92,13 @@
                 <div class="flex flex-col md:flex-row items-center gap-4">
                     <div class="flex-1">
                         <label for="apiKey" class="block text-sm font-medium text-blue-800 mb-1">Google Cloud API Key</label>
-                        <input type="password" id="apiKey" placeholder="Enter your Google Cloud API key" 
-                            class="api-key-input w-full px-4 py-2 border border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <div class="relative">
+                            <input type="password" id="apiKey" placeholder="Enter your Google Cloud API key" 
+                                class="api-key-input w-full px-4 py-2 pr-10 border border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <button type="button" id="toggleKeyVisibility" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                <i class="fas fa-eye" id="eyeIcon"></i>
+                            </button>
+                        </div>
                     </div>
                     <button id="saveKeyBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition whitespace-nowrap">
                         <i class="fas fa-save mr-2"></i> Save Key
@@ -115,6 +120,14 @@
                                 <li>Copy the generated API key and paste it above</li>
                                 <li>Optionally, restrict the key to Text-to-Speech API for security</li>
                             </ol>
+                            <div class="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded text-yellow-800">
+                                <p class="font-medium">⚠️ Important:</p>
+                                <ul class="mt-1 list-disc list-inside space-y-1">
+                                    <li>Make sure billing is enabled for your project</li>
+                                    <li>Copy ONLY the API key (no extra text)</li>
+                                    <li>If restricted, allow this domain: ${window.location.hostname}</li>
+                                </ul>
+                            </div>
                         </div>
                     </details>
                 </div>
@@ -307,6 +320,20 @@
                 
                 // Initialize AudioContext on user interaction
                 document.addEventListener('click', initAudioContext, { once: true });
+                
+                // API Key visibility toggle
+                const toggleKeyVisibility = document.getElementById('toggleKeyVisibility');
+                const eyeIcon = document.getElementById('eyeIcon');
+                
+                toggleKeyVisibility.addEventListener('click', () => {
+                    if (apiKeyInput.type === 'password') {
+                        apiKeyInput.type = 'text';
+                        eyeIcon.className = 'fas fa-eye-slash';
+                    } else {
+                        apiKeyInput.type = 'password';
+                        eyeIcon.className = 'fas fa-eye';
+                    }
+                });
             }
             
             function initAudioContext() {
@@ -345,72 +372,123 @@
                     saveKeyBtn.disabled = true;
                     
                     try {
-                        // Validate API key by making a simple request
-                        // Method 1: Try with header approach first
-                        let response;
+                        // Clean and validate the API key format
+                        const cleanApiKey = key.trim();
+                        
+                        // Basic validation of API key format
+                        if (!cleanApiKey || cleanApiKey.length < 10) {
+                            throw new Error('API key appears to be too short. Please verify you copied the complete key.');
+                        }
+                        
+                        // Check for common API key formats
+                        if (!cleanApiKey.match(/^[A-Za-z0-9_-]+$/)) {
+                            throw new Error('API key contains invalid characters. Please copy only the key without any extra text.');
+                        }
+                        
+                        // Multiple validation attempts with different methods
+                        let validationErrors = [];
+                        let validationSuccess = false;
+                        
+                        // Method 1: Header authentication with minimal request
                         try {
-                            response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=en-US&pageSize=1`, {
+                            console.log('Attempting validation with X-Goog-Api-Key header...');
+                            const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=en-US&pageSize=1`, {
                                 method: 'GET',
                                 headers: {
-                                    'X-Goog-Api-Key': key,
+                                    'X-Goog-Api-Key': cleanApiKey,
                                     'Accept': 'application/json',
                                 },
                                 mode: 'cors',
                                 cache: 'no-cache'
                             });
+                            
+                            if (response.ok) {
+                                validationSuccess = true;
+                                const data = await response.json();
+                                console.log('Header method successful:', data);
+                            } else {
+                                const errorText = await response.text();
+                                validationErrors.push(`Header method failed (${response.status}): ${errorText}`);
+                            }
                         } catch (headerError) {
-                            // Method 2: Fallback to URL parameter
-                            const testUrl = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(key)}&languageCode=en-US&pageSize=1`;
-                            response = await fetch(testUrl, {
-                                method: 'GET',
-                                headers: {
-                                    'Accept': 'application/json',
-                                },
-                                mode: 'cors',
-                                cache: 'no-cache'
-                            });
+                            console.error('Header method error:', headerError);
+                            validationErrors.push(`Header method failed: ${headerError.message}`);
+                        }
+                        
+                        // Method 2: URL parameter authentication if header failed
+                        if (!validationSuccess) {
+                            try {
+                                console.log('Attempting validation with URL parameter...');
+                                const testUrl = `https://texttospeech.googleapis.com/v1/voices?key=${encodeURIComponent(cleanApiKey)}&languageCode=en-US&pageSize=1`;
+                                const response = await fetch(testUrl, {
+                                    method: 'GET',
+                                    headers: {
+                                        'Accept': 'application/json',
+                                    },
+                                    mode: 'cors',
+                                    cache: 'no-cache'
+                                });
+                                
+                                if (response.ok) {
+                                    validationSuccess = true;
+                                    const data = await response.json();
+                                    console.log('URL parameter method successful:', data);
+                                } else {
+                                    const errorText = await response.text();
+                                    validationErrors.push(`URL parameter method failed (${response.status}): ${errorText}`);
+                                }
+                            } catch (urlError) {
+                                console.error('URL parameter method error:', urlError);
+                                validationErrors.push(`URL parameter method failed: ${urlError.message}`);
+                            }
                         }
                         
-                        if (response.ok) {
-                            apiKey = key;
-                            localStorage.setItem('googleTTSApiKey', key);
+                        if (validationSuccess) {
+                            apiKey = cleanApiKey;
+                            localStorage.setItem('googleTTSApiKey', cleanApiKey);
                             showToast('API key validated and saved successfully', 'success');
                             loadVoices();
                         } else {
-                            let errorMessage = 'API key validation failed';
-                            let details = '';
+                            // Show detailed validation errors
+                            console.error('All validation methods failed:', validationErrors);
                             
-                            try {
-                                const errorData = await response.json();
-                                errorMessage = errorData.error?.message || errorMessage;
-                                details = errorData.error?.details ? ` (${JSON.stringify(errorData.error.details)})` : '';
-                            } catch (e) {
-                                details = ` (HTTP ${response.status})`;
+                            let errorMessage = 'API key validation failed. ';
+                            if (validationErrors.some(err => err.includes('API_KEY_INVALID'))) {
+                                errorMessage += 'The API key is invalid or not recognized by Google.';
+                            } else if (validationErrors.some(err => err.includes('403'))) {
+                                errorMessage += 'Access denied - check billing and API enablement.';
+                            } else {
+                                errorMessage += 'Please check the key format and permissions.';
                             }
                             
-                            if (response.status === 403) {
-                                errorMessage = 'Access denied. Check: 1) API key validity, 2) Text-to-Speech API enabled, 3) Billing enabled, 4) Key restrictions';
-                            } else if (response.status === 400) {
-                                errorMessage = 'Bad request. API key format might be incorrect';
-                            } else if (response.status === 429) {
-                                errorMessage = 'Too many requests. Please wait a moment';
-                            }
+                            // Show comprehensive error details
+                            const errorDetails = `
+                                <div class="mt-3 text-xs text-gray-600 text-left">
+                                    <p class="font-medium mb-2">Validation attempts made:</p>
+                                    <ul class="list-disc list-inside space-y-1 mb-3">
+                                        ${validationErrors.map(err => `<li>${err}</li>`).join('')}
+                                    </ul>
+                                    
+                                    <p class="font-medium mb-2">API Key Checklist:</p>
+                                    <ol class="list-decimal list-inside space-y-1">
+                                        <li>✓ Copy ONLY the API key (no extra text or spaces)</li>
+                                        <li>✓ Go to Google Cloud Console → APIs & Services → Credentials</li>
+                                        <li>✓ Ensure Text-to-Speech API is enabled</li>
+                                        <li>✓ Verify billing is enabled for your project</li>
+                                        <li>✓ Check API key restrictions (if any)</li>
+                                        <li>✓ Try creating a new unrestricted key for testing</li>
+                                    </ol>
+                                    
+                                    <p class="mt-3 text-red-600 font-medium">Debug info: Key length: ${cleanApiKey.length}</p>
+                                </div>
+                            `;
                             
-                            showToast(errorMessage + details, 'error', 5000);
+                            // Create a modal or expandable section for the error
+                            showDetailedError(errorMessage, errorDetails);
                         }
                     } catch (error) {
-                        console.error('API key validation error:', error);
-                        let errorMessage = 'Failed to validate API key. ';
-                        
-                        if (error.message.includes('Failed to fetch')) {
-                            errorMessage += 'Please check your internet connection.';
-                        } else if (error.message.includes('CORS')) {
-                            errorMessage += 'CORS policy issue. Try with a different browser or disable extensions.';
-                        } else {
-                            errorMessage += error.message;
-                        }
-                        
-                        showToast(errorMessage, 'error', 5000);
+                        console.error('General API key validation error:', error);
+                        showToast(`Validation error: ${error.message}`, 'error', 5000);
                     } finally {
                         // Reset button state
                         saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
@@ -421,6 +499,30 @@
                 }
             });
             
+            // Helper function to show detailed errors
+            function showDetailedError(message, details) {
+                const errorModal = document.createElement('div');
+                errorModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+                errorModal.innerHTML = `
+                    <div class="bg-white rounded-lg p-6 max-w-2xl max-h-96 overflow-y-auto">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-lg font-semibold text-red-600">API Key Validation Failed</h3>
+                            <button class="text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.parentElement.remove()">
+                                <i class="fas fa-times text-xl"></i>
+                            </button>
+                        </div>
+                        <p class="text-gray-700 mb-4">${message}</p>
+                        ${details}
+                        <div class="mt-6 flex justify-end">
+                            <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" onclick="this.parentElement.parentElement.parentElement.remove()">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(errorModal);
+            }
+            
             // Load available voices from Google TTS
             async function loadVoices() {
                 if (!apiKey) {