Spaces:

ernestmindres
/

Nexus

Sleeping

App Files Files Community

ernestmindres commited on Oct 31, 2025

Commit

8263001

verified ·

1 Parent(s): 6c21a43

Update templates/api_key.html

Browse files

Files changed (1) hide show

templates/api_key.html +181 -153

templates/api_key.html CHANGED Viewed

@@ -142,7 +142,7 @@
 <body class="bg-page-var text-color-var min-h-screen transition-colors-theme">
-    <button id="theme-toggle" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
         <span class="material-symbols-rounded">dark_mode</span>
     </button>
@@ -157,7 +157,7 @@
                 <span class="material-symbols-rounded">dashboard</span>
                 <span class="ml-3">Dashboard</span>
             </a>
-            <a href="{{ url_for('user_bp.api_key') }}" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
                 <span class="material-symbols-rounded">key</span>
                 <span class="ml-3">Clés API</span>
             </a>
@@ -172,8 +172,8 @@
         </nav>
         <div class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme">
-             <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user else 'Chargement...' }}</span></p>
-             <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user else 'Chargement...' }}</span></p>
         </div>
     </aside>
@@ -210,15 +210,19 @@
                 <span class="material-symbols-rounded mr-2">warning</span>
                 Attention Sécurité
             </h3>
-            <p class="text-sm mt-2">Chacune de vos **5 clés API** est un mot de passe pour vos applications. Ne les partagez jamais publiquement et traitez-les comme des informations confidentielles. Régénérez immédiatement une clé si vous suspectez un risque.</p>
         </div>
         <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
             <h2 class="text-xl font-semibold mb-4 text-color-var transition-colors-theme">Vos Clés d'Accès API (5 Clés Disponibles)</h2>
             <p class="text-secondary-var mb-6 transition-colors-theme">Chaque clé peut être utilisée pour authentifier vos requêtes auprès de l'API Nexus. Régénérez une clé si elle est compromise.</p>
-            {% for index in range(5) %}
-                {% set api_key_value = user.api_keys[index] if user and user.api_keys and user.api_keys|length > index else 'NXS_API_KEY_' ~ (index + 1) ~ '_NON_DISPONIBLE' %}
                 <div id="key-block-{{ index }}" class="key-block space-y-4 mb-4 p-4 border border-input-var rounded-lg bg-input-var/50 transition-colors-theme">
                     <h3 class="text-lg font-medium text-color-var transition-colors-theme">Clé API n°{{ index + 1 }}</h3>
@@ -227,16 +231,17 @@
                                type="text"
                                readonly
                                class="api-key-input flex-grow bg-input-var border border-input-var text-input-key-var p-3 rounded-lg font-mono text-sm break-all focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme"
-                               value="{{ api_key_value }}">
-                        <button data-key-index="{{ index }}" class="copy-btn bg-primary-color-var hover:bg-primary-hover-var text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center btn-square transition-colors-theme">
                             <span class="material-symbols-rounded">content_copy</span>
                             <span class="ml-2 hidden sm:inline">Copier</span>
                         </button>
                     </div>
                     <div class="flex items-center justify-between border-t border-input-var pt-4 transition-colors-theme">
-                        <button data-key-index="{{ index }}" class="regenerate-btn text-sm text-red-500 hover:text-red-400 transition duration-200 flex items-center font-medium transition-colors-theme">
                             <span class="material-symbols-rounded text-lg mr-1">refresh</span>
                             Régénérer cette Clé
                             <div id="spinner-{{ index }}" class="spinner w-4 h-4 border-2 rounded-full ml-2 hidden" style="border-bottom-color: transparent;"></div>
@@ -245,163 +250,186 @@
                     </div>
                 </div>
             {% endfor %}
-            </div>
         </div>
-    <script>
-        // Logique du thème (conservée)
-        const themeToggle = document.getElementById('theme-toggle');
-        const html = document.documentElement;
-        const updateIcon = () => {
-            const icon = themeToggle.querySelector('.material-symbols-rounded');
-            if (html.classList.contains('light')) {
-                icon.textContent = 'light_mode';
-            } else {
-                icon.textContent = 'dark_mode';
-            }
-        };
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            html.classList.remove('dark');
-            html.classList.add('light');
         } else {
-            // Par défaut, nous nous assurons que 'dark' est appliqué s'il n'y a pas de thème enregistré
-            html.classList.add('dark');
-            html.classList.remove('light');
         }
-        updateIcon();
-        themeToggle.addEventListener('click', () => {
-            if (html.classList.contains('dark')) {
-                html.classList.remove('dark');
-                html.classList.add('light');
-                localStorage.setItem('theme', 'light');
-            } else {
-                html.classList.remove('light');
-                html.classList.add('dark');
-                localStorage.setItem('theme', 'dark');
-            }
-            updateIcon();
         });
-        // 1. Logique de la carte d'avertissement masquable
-        const warningCard = document.getElementById('security-warning-card');
-        const dismissButton = document.getElementById('dismiss-warning');
-        // Vérifier le statut dans le localStorage au chargement
-        if (localStorage.getItem('api_key_warning_dismissed') === 'true') {
-            if (warningCard) {
-                warningCard.style.display = 'none';
-            }
         }
-        // Gérer le clic sur le bouton de fermeture
-        if (dismissButton) {
-            dismissButton.addEventListener('click', () => {
-                if (warningCard) {
-                    warningCard.style.display = 'none';
-                    // Sauvegarder l'état dans le localStorage
-                    localStorage.setItem('api_key_warning_dismissed', 'true');
-                }
-            });
-        }
-        // 2. Logique pour la copie des clés API - MISE À JOUR pour 5 clés (fonctionne car sélecteurs génériques)
-        document.querySelectorAll('.copy-btn').forEach(button => {
-            button.addEventListener('click', (e) => {
-                const index = e.currentTarget.getAttribute('data-key-index');
-                const apiKeyDisplay = document.getElementById(`api-key-display-${index}`);
-                const statusMessage = document.getElementById(`status-message-${index}`);
-                if (apiKeyDisplay) {
-                    // Pour le mode de démo, on s'assure que le contenu est 'sélectionnable' même s'il est readonly
-                    apiKeyDisplay.select();
-                    apiKeyDisplay.setSelectionRange(0, 99999); /* Pour les mobiles */
-                    // L'utilisation de document.execCommand('copy') est obsolète mais souvent supportée.
-                    // Pour une meilleure compatibilité future, on pourrait utiliser l'API Clipboard
-                    navigator.clipboard.writeText(apiKeyDisplay.value).then(() => {
-                        statusMessage.textContent = 'Clé copiée !';
-                        setTimeout(() => {
-                            statusMessage.textContent = '';
-                        }, 3000);
-                    }).catch(err => {
-                        // Fallback pour les anciens navigateurs
-                        document.execCommand('copy');
-                        statusMessage.textContent = 'Clé copiée (via fallback) !';
-                        setTimeout(() => {
-                            statusMessage.textContent = '';
-                        }, 3000);
-                    });
-                }
-            });
         });
-        // 3. Logique de la Sidebar sur mobile (conservée)
-        const sidebarToggle = document.getElementById('sidebar-toggle');
-        const sidebar = document.getElementById('sidebar');
-        sidebarToggle.addEventListener('click', () => {
-            sidebar.classList.toggle('open');
         });
-        // 4. Logique de REGÉNÉRATION (Message de démo) - MISE À JOUR pour 5 clés (fonctionne car sélecteurs génériques)
-        document.querySelectorAll('.regenerate-btn').forEach(button => {
-            button.addEventListener('click', (e) => {
-                e.preventDefault();
-                const index = e.currentTarget.getAttribute('data-key-index');
-                const statusMessage = document.getElementById(`status-message-${index}`);
-                const spinner = document.getElementById(`spinner-${index}`);
-                // Pour la prochaine étape (backend), ce code sera mis à jour avec un appel fetch()
-                // Démarrer le spinner
-                spinner.classList.remove('hidden');
-                // Simuler une action
-                statusMessage.textContent = `Régénération de la Clé n°${parseInt(index) + 1} en cours...`;
-                // Ici, il faudra un appel `fetch` vers POST /api/regenerate-api-key
-                // Exemple (Futur Code) :
-                /* fetch('/api/regenerate-api-key', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ key_index: parseInt(index) }) // 0, 1, 2, 3, 4
-                })
-                .then(response => response.json())
-                .then(data => {
-                    // MAJ du champ avec data.new_key
-                    // ...
-                })
-                .finally(() => {
-                    spinner.classList.add('hidden');
-                    // ...
                 });
-                */
-                // Message de démo temporaire
-                setTimeout(() => {
-                    statusMessage.textContent = 'Fonction de régénération en cours de développement (OK pour le Front-end).';
-                    spinner.classList.add('hidden');
-                    setTimeout(() => {
-                        statusMessage.textContent = '';
-                    }, 4000);
-                }, 2000);
-            });
         });
-        // 5. Logique de Déconnexion (Conservée)
-        const logoutHandler = async (e) => {
-            e.preventDefault();
-            // La déconnexion est maintenant gérée par la route Flask directe
-            window.location.href = document.getElementById('logout-button-sidebar').href;
-        };
-        // On attache l'événement à la déconnexion dans la sidebar.
-        document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
-    </script>
-</body>
-</html>

 <body class="bg-page-var text-color-var min-h-screen transition-colors-theme">
+    <button id="theme-switch" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
         <span class="material-symbols-rounded">dark_mode</span>
     </button>
                 <span class="material-symbols-rounded">dashboard</span>
                 <span class="ml-3">Dashboard</span>
             </a>
+            <a href="{{ url_for('user_bp.cle_api') }}" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
                 <span class="material-symbols-rounded">key</span>
                 <span class="ml-3">Clés API</span>
             </a>
         </nav>
         <div class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme">
+              <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user else 'Chargement...' }}</span></p>
+              <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user else 'Chargement...' }}</span></p>
         </div>
     </aside>
                 <span class="material-symbols-rounded mr-2">warning</span>
                 Attention Sécurité
             </h3>
+            <p class="text-sm mt-2">Chacune de vos 5 clés API est un mot de passe pour vos applications. Ne les partagez jamais publiquement et traitez-les comme des informations confidentielles. Régénérez immédiatement une clé si vous suspectez un risque.</p>
         </div>
         <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
             <h2 class="text-xl font-semibold mb-4 text-color-var transition-colors-theme">Vos Clés d'Accès API (5 Clés Disponibles)</h2>
             <p class="text-secondary-var mb-6 transition-colors-theme">Chaque clé peut être utilisée pour authentifier vos requêtes auprès de l'API Nexus. Régénérez une clé si elle est compromise.</p>
+            {% set api_keys = [user.get('api_key'), user.get('api_key_2'), user.get('api_key_3'), user.get('api_key_4'), user.get('api_key_5')] %}
+            {% for key_value in api_keys %}
+                {% set index = loop.index0 %}
+                {% set display_value = key_value if key_value else 'Non générée (ou plan Free)' %}
                 <div id="key-block-{{ index }}" class="key-block space-y-4 mb-4 p-4 border border-input-var rounded-lg bg-input-var/50 transition-colors-theme">
                     <h3 class="text-lg font-medium text-color-var transition-colors-theme">Clé API n°{{ index + 1 }}</h3>
                                type="text"
                                readonly
                                class="api-key-input flex-grow bg-input-var border border-input-var text-input-key-var p-3 rounded-lg font-mono text-sm break-all focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme"
+                               value="{{ display_value }}">
+                        <button data-key-index="{{ index }}" class="copy-btn bg-primary-color-var hover:bg-primary-hover-var text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center btn-square transition-colors-theme"
+                            data-clipboard-target="#api-key-display-{{ index }}">
                             <span class="material-symbols-rounded">content_copy</span>
                             <span class="ml-2 hidden sm:inline">Copier</span>
                         </button>
                     </div>
                     <div class="flex items-center justify-between border-t border-input-var pt-4 transition-colors-theme">
+                        <button data-key-index="{{ index }}" class="regenerate-btn text-sm text-red-500 hover:text-red-400 transition duration-200 flex items-center font-medium transition-colors-theme" {% if not key_value %}disabled{% endif %}>
                             <span class="material-symbols-rounded text-lg mr-1">refresh</span>
                             Régénérer cette Clé
                             <div id="spinner-{{ index }}" class="spinner w-4 h-4 border-2 rounded-full ml-2 hidden" style="border-bottom-color: transparent;"></div>
                     </div>
                 </div>
             {% endfor %}
+        </div>
         </div>
+<script>
+    // 1. Logique du mode sombre/clair (CORRIGÉE)
+    const themeSwitch = document.getElementById('theme-switch');
+    const htmlElement = document.documentElement; // Référence à l'élément <html>
+    // Fonction pour appliquer le thème
+    function applyTheme(theme) {
+        // Ajoute la classe 'light' si le thème est 'light', sinon ajoute 'dark'
+        if (theme === 'light') {
+            htmlElement.classList.add('light');
+            htmlElement.classList.remove('dark');
+            // MÀJ de l'icône vers 'dark_mode' (lune) quand le mode est 'light'
+            themeSwitch.innerHTML = '<span class="material-symbols-rounded">dark_mode</span>';
         } else {
+            htmlElement.classList.add('dark');
+            htmlElement.classList.remove('light');
+            // MÀJ de l'icône vers 'light_mode' (soleil) quand le mode est 'dark'
+            themeSwitch.innerHTML = '<span class="material-symbols-rounded">light_mode</span>';
         }
+        localStorage.setItem('theme', theme);
+    }
+    // Initialisation du thème
+    // Le thème par défaut est 'dark' si localStorage est vide ou si le système préfère le dark
+    const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    applyTheme(savedTheme);
+    // Événement de bascule
+    themeSwitch.addEventListener('click', () => {
+        // Détermine le nouveau thème basé sur la présence de la classe 'dark' sur <html>
+        const currentTheme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        applyTheme(newTheme);
+    });
+    // Logique de bascule de la sidebar pour mobile/tablette (CORRIGÉE : Ajout de la bascule 'open')
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+    // Le mainContent n'a pas besoin de la classe 'sidebar-open' pour le style actuel
+    // const mainContent = document.getElementById('main-content');
+    if (sidebarToggle && sidebar) {
+        sidebarToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('open'); // Bascule de la classe 'open'
         });
+    }
+    // FIN de la Logique du mode sombre/clair et Sidebar
+    // --- Logique d'affichage et d'interaction des Clés API (MISE À JOUR) ---
+    // 2. Logique d'avertissement de sécurité (conservée)
+    const warningCard = document.getElementById('security-warning-card');
+    const dismissButton = document.getElementById('dismiss-warning');
+    if (warningCard && dismissButton) {
+        // Afficher si non masqué précédemment
+        if (localStorage.getItem('dismissed_warning') !== 'true') {
+            warningCard.style.display = 'block';
+        } else {
+             warningCard.style.display = 'none';
         }
+        dismissButton.addEventListener('click', () => {
+            warningCard.style.display = 'none';
+            // Stocker dans le localStorage pour masquer lors des prochaines visites
+            localStorage.setItem('dismissed_warning', 'true');
         });
+    }
+    // 3. Logique de Copie (MISE À JOUR)
+    const copyButtons = document.querySelectorAll('.copy-btn');
+    copyButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Récupère l'ID de l'input à copier
+            const targetId = button.getAttribute('data-clipboard-target').substring(1);
+            const apiKeyInput = document.getElementById(targetId);
+            const apiKey = apiKeyInput.value.trim();
+            const index = button.getAttribute('data-key-index');
+            const statusMessage = document.getElementById(`status-message-${index}`);
+            if (apiKey === 'Non générée (ou plan Free)' || apiKey.includes('NON_DISPONIBLE')) {
+                statusMessage.textContent = 'Erreur: Aucune clé à copier.';
+                setTimeout(() => { statusMessage.textContent = ''; }, 3000);
+                return;
+            }
+            // Copie au presse-papiers
+            navigator.clipboard.writeText(apiKey).then(() => {
+                statusMessage.textContent = 'Clé API copiée !';
+                statusMessage.classList.add('text-green-500');
+                setTimeout(() => {
+                    statusMessage.textContent = '';
+                    statusMessage.classList.remove('text-green-500');
+                }, 3000);
+            }).catch(err => {
+                statusMessage.textContent = 'Échec de la copie.';
+                statusMessage.classList.add('text-red-500');
+                console.error('Échec de la copie:', err);
+                setTimeout(() => {
+                    statusMessage.textContent = '';
+                    statusMessage.classList.remove('text-red-500');
+                }, 3000);
+            });
         });
+    });
+    // 4. Logique de Régénération (MISE À JOUR)
+    const regenerateButtons = document.querySelectorAll('.regenerate-btn');
+    regenerateButtons.forEach(button => {
+        button.addEventListener('click', async (e) => {
+            e.preventDefault();
+            const index = button.getAttribute('data-key-index'); // Récupère l'index (0 à 4)
+            const apiKeyInput = document.getElementById(`api-key-display-${index}`);
+            const statusMessage = document.getElementById(`status-message-${index}`);
+            const spinner = document.getElementById(`spinner-${index}`);
+            // Affichage de l'indicateur de chargement
+            statusMessage.textContent = 'Régénération en cours...';
+            statusMessage.classList.remove('text-green-500', 'text-red-500');
+            statusMessage.classList.add('text-input-key-var');
+            spinner.classList.remove('hidden');
+            button.disabled = true;
+            try {
+                // Envoi de l'index de la clé (0 à 4) au backend Flask
+                const response = await fetch('/api/regenerate-api-key', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ key_index: parseInt(index) })
                 });
+                const data = await response.json();
+                if (data.success) {
+                    // MÀJ de la valeur affichée avec la nouvelle clé
+                    apiKeyInput.value = data.new_key;
+                    statusMessage.textContent = data.message;
+                    statusMessage.classList.add('text-green-500');
+                    button.disabled = false; // Réactive le bouton
+                } else {
+                    statusMessage.textContent = `Erreur: ${data.message}`;
+                    statusMessage.classList.add('text-red-500');
+                    // Le bouton reste désactivé ou est réactivé selon l'erreur
+                    if (apiKeyInput.value.includes('NON_DISPONIBLE')) {
+                         button.disabled = true;
+                    } else {
+                         button.disabled = false;
+                    }
+                }
+            } catch (error) {
+                statusMessage.textContent = 'Erreur réseau lors de la régénération.';
+                statusMessage.classList.add('text-red-500');
+                console.error('Erreur de régénération:', error);
+                button.disabled = false;
+            } finally {
+                spinner.classList.add('hidden');
+                // Nettoyage du message de statut après un délai
+                setTimeout(() => {
+                    statusMessage.textContent = '';
+                    statusMessage.classList.remove('text-green-500', 'text-red-500', 'text-input-key-var');
+                }, 4000);
+            }
         });
+    });
+    // 5. Logique de Déconnexion (Conservée)
+    const logoutHandler = async (e) => {
+        e.preventDefault();
+        // La déconnexion est maintenant gérée par la route Flask directe
+        window.location.href = document.getElementById('logout-button-sidebar').href;
+    };
+    // On attache l'événement à la déconnexion dans la sidebar.
+    document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
+</script>