Spaces:

ernestmindres
/

Nexus

Sleeping

App Files Files Community

ernestmindres commited on Oct 19, 2025

Commit

d5e2cee

verified ·

1 Parent(s): 94ffd9f

Update templates/api_key.html

Browse files

Files changed (1) hide show

templates/api_key.html +261 -334

templates/api_key.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nexus | Clés API - Pro</title>
     <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet"
@@ -22,387 +22,314 @@
             cursor: pointer;
             font-size: 24px;
             transition: color 0.2s;
-            position: fixed;
             top: 1rem;
             right: 1rem;
-            z-index: 50;
         }
         /* Définir les Variables de Thème */
-        :root {
-            --color-bg-primary: #f7f7f7;
-            --color-bg-secondary: #ffffff;
-            --color-text-primary: #1f2937;
-            --color-text-secondary: #4b5563;
-            --color-border: #e5e7eb;
-            --color-accent: #3b82f6; /* Bleu par défaut */
         }
-        /* Thème sombre (Dark Mode) */
-        .dark {
-            --color-bg-primary: #111827;
-            --color-bg-secondary: #1f2937;
-            --color-text-primary: #f9fafb;
-            --color-text-secondary: #d1d5db;
-            --color-border: #374151;
-            --color-accent: #60a5fa; /* Bleu plus clair pour le dark mode */
         }
-        /* Classes Tailwind surchargées pour le thème */
-        .bg-theme-primary { background-color: var(--color-bg-primary); }
-        .bg-theme-secondary { background-color: var(--color-bg-secondary); }
-        .text-theme-primary { color: var(--color-text-primary); }
-        .text-theme-secondary { color: var(--color-text-secondary); }
-        .border-theme-border { border-color: var(--color-border); }
-        .text-theme-accent { color: var(--color-accent); }
-        .hover\:bg-theme-accent-hover:hover { background-color: #3b82f6; } /* Réajuster au besoin pour le dark mode */
-        /* Sidebar Responsive */
-        #sidebar { transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
-        #sidebar.open { transform: translateX(0); }
-        @media (min-width: 1024px) { #sidebar { transform: translateX(0) !important; } }
     </style>
 </head>
-<body class="bg-theme-primary text-theme-primary min-h-screen transition-colors-theme">
-    <button id="theme-switch" class="theme-switch text-theme-primary">
-        <span class="material-symbols-rounded">light_mode</span>
     </button>
-    <nav id="sidebar" class="fixed top-0 left-0 h-full w-72 bg-theme-secondary border-r border-theme-border p-4 z-40 lg:z-10 transition-colors-theme lg:shadow-xl">
-        <div class="flex items-center space-x-2 mb-8">
-            <img src="https://i.imgur.com/7Gn3toV.png" alt="Logo Nexus" class="w-8 h-8">
-            <h1 class="text-xl font-bold text-theme-primary">Nexus.</h1>
         </div>
-        <ul class="space-y-2">
-            <li><a href="{{ url_for('user_bp.tableau_de_bord') }}" class="flex items-center p-3 rounded-lg text-theme-secondary hover:bg-gray-700/5 transition-colors-theme">
-                <span class="material-symbols-rounded mr-3">dashboard</span> Tableau de bord
-            </a></li>
-            <li><a href="#" class="flex items-center p-3 rounded-lg bg-gray-700/10 text-theme-accent font-semibold transition-colors-theme">
-                <span class="material-symbols-rounded mr-3">key</span> Clés API
-            </a></li>
-            <li><a href="{{ url_for('user_bp.profil') }}" class="flex items-center p-3 rounded-lg text-theme-secondary hover:bg-gray-700/5 transition-colors-theme">
-                <span class="material-symbols-rounded mr-3">settings</span> Paramètres du compte
-            </a></li>
-        </ul>
-        <div class="mt-8 pt-4 border-t border-theme-border">
-            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 rounded-lg text-red-500 hover:bg-red-500/10 transition-colors-theme">
-                <span class="material-symbols-rounded mr-3">logout</span> Déconnexion
             </a>
         </div>
-    </nav>
-    <button id="sidebar-toggle" class="fixed top-4 left-4 z-50 p-2 lg:hidden bg-theme-secondary rounded-lg border border-theme-border text-theme-primary transition-colors-theme">
-        <span class="material-symbols-rounded">menu</span>
-    </button>
-    <main class="lg:pl-72 pt-20 p-4 sm:p-6 lg:p-8">
-        <header class="mb-8">
-            <h1 class="text-3xl font-bold text-theme-primary">Gestion des Clés API</h1>
-            <p class="text-theme-secondary mt-1">Créez, gérez et révoquez vos clés d'accès à l'API Nexus.</p>
         </header>
-        <div id="status-message" class="mb-6 p-3 rounded-lg text-sm hidden" role="alert"></div>
-        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 p-4 bg-theme-secondary border border-theme-border rounded-lg shadow-sm">
-            <p class="text-theme-secondary mb-3 sm:mb-0">
-                <span class="font-semibold text-theme-primary">{{ user.api_keys | length }}</span> / {{ max_keys }} clés utilisées.
-            </p>
-            {% set current_keys = user.api_keys | length %}
-            {% set keys_limit = max_keys %}
-            <button
-                id="generate-key-btn"
-                class="w-full sm:w-auto flex items-center justify-center px-4 py-2 bg-theme-accent text-white font-semibold rounded-lg transition duration-150 hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
-                {% if current_keys >= keys_limit %}disabled{% endif %}>
-                <span class="material-symbols-rounded mr-2">add</span>
-                Générer une nouvelle clé
-            </button>
-        </div>
-        <div class="overflow-x-auto bg-theme-secondary rounded-lg shadow-xl border border-theme-border">
-            <table class="min-w-full divide-y divide-theme-border">
-                <thead class="bg-gray-50/5 dark:bg-gray-800/20">
-                    <tr>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-theme-secondary uppercase tracking-wider">
-                            Clé API
-                        </th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-theme-secondary uppercase tracking-wider hidden sm:table-cell">
-                            Créée le
-                        </th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-theme-secondary uppercase tracking-wider">
-                            Statut
-                        </th>
-                        <th scope="col" class="relative px-6 py-3">
-                            <span class="sr-only">Actions</span>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-theme-border">
-                    {% if not user.api_keys %}
-                        <tr>
-                            <td colspan="4" class="px-6 py-4 whitespace-nowrap text-sm text-center text-theme-secondary">
-                                Aucune clé API trouvée. Générez-en une pour commencer.
-                            </td>
-                        </tr>
-                    {% else %}
-                        {% for key_obj in user.api_keys %}
-                            <tr id="key-row-{{ loop.index }}" class="hover:bg-gray-50/5 dark:hover:bg-gray-800/10 transition-colors">
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-theme-primary">
-                                    <div class="flex items-center space-x-2">
-                                        <span id="display-key-{{ loop.index }}" class="w-48 overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer"
-                                              data-full-key="{{ key_obj.key }}"
-                                              data-masked="true">
-                                            {{ key_obj.key[:4] }}_{{ "*" * 10 }}...
-                                        </span>
-                                        <button onclick="toggleKeyVisibility(this, '{{ key_obj.key }}', {{ loop.index }})"
-                                                class="text-theme-accent p-1 rounded-full hover:bg-gray-500/10 transition duration-150"
-                                                title="Afficher la clé complète">
-                                            <span class="material-symbols-rounded text-base">visibility_off</span>
-                                        </button>
-                                        <button onclick="copyKey('{{ key_obj.key }}')"
-                                                class="text-theme-accent p-1 rounded-full hover:bg-gray-500/10 transition duration-150"
-                                                title="Copier la clé">
-                                            <span class="material-symbols-rounded text-base">content_copy</span>
-                                        </button>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-theme-secondary hidden sm:table-cell">
-                                    <span id="created-at-{{ loop.index }}" data-iso-date="{{ key_obj.created_at }}">
-                                        </span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    {% if key_obj.status == 'active' %}
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">
-                                            Active
-                                        </span>
-                                    {% else %}
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800/30 dark:text-red-300">
-                                            Inactive
-                                        </span>
-                                    {% endif %}
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                    <button onclick="deleteApiKey('{{ key_obj.key }}')"
-                                            class="text-red-500 hover:text-red-700 dark:hover:text-red-300 transition duration-150 p-2 rounded-full hover:bg-red-500/10"
-                                            title="Supprimer la clé">
-                                        <span class="material-symbols-rounded text-lg">delete</span>
-                                    </button>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                    {% endif %}
-                </tbody>
-            </table>
         </div>
-    </main>
-    <script>
-        // DOM Elements
-        const themeSwitch = document.getElementById('theme-switch');
-        const sidebarToggle = document.getElementById('sidebar-toggle');
-        const sidebar = document.getElementById('sidebar');
-        const statusMessage = document.getElementById('status-message');
-        const generateBtn = document.getElementById('generate-key-btn');
-        const maxKeys = {{ max_keys }};
-        const currentKeys = {{ user.api_keys | length }};
-        // --- Fonctions Utilitaires ---
-        /**
-         * Formate une date ISO 8601 en chaîne lisible.
-         * @param {string} isoString - La date au format ISO.
-         * @returns {string} Date formatée.
-         */
-        function formatDate(isoString) {
-            try {
-                const date = new Date(isoString);
-                // Configuration pour le format français
-                const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-                return date.toLocaleDateString('fr-FR', options);
-            } catch (e) {
-                return isoString; // Retourne l'original en cas d'erreur
             }
         }
-        /**
-         * Affiche un message de statut (Succès ou Erreur).
-         * @param {string} message - Le message à afficher.
-         * @param {string} type - 'success' ou 'error'.
-         */
-        function showStatus(message, type) {
-            statusMessage.textContent = message;
-            statusMessage.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800', 'dark:bg-green-800/30', 'dark:text-green-300', 'dark:bg-red-800/30', 'dark:text-red-300');
-            if (type === 'success') {
-                statusMessage.classList.add('bg-green-100', 'text-green-800', 'dark:bg-green-800/30', 'dark:text-green-300');
             } else {
-                statusMessage.classList.add('bg-red-100', 'text-red-800', 'dark:bg-red-800/30', 'dark:text-red-300');
             }
-            // Masquer le message après 5 secondes
-            setTimeout(() => {
-                statusMessage.classList.add('hidden');
-            }, 5000);
-        }
-        // --- Logique de la Page ---
-        // 1. Logique du Thème (Conservée)
-        const currentTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.className = currentTheme;
-        if (currentTheme === 'dark') {
-            themeSwitch.querySelector('.material-symbols-rounded').textContent = 'light_mode';
-        } else {
-            themeSwitch.querySelector('.material-symbols-rounded').textContent = 'dark_mode';
-        }
-        themeSwitch.addEventListener('click', () => {
-            let theme = document.documentElement.classList.contains('dark') ? 'light' : 'dark';
-            document.documentElement.className = theme;
-            localStorage.setItem('theme', theme);
-            if (theme === 'dark') {
-                themeSwitch.querySelector('.material-symbols-rounded').textContent = 'light_mode';
-            } else {
-                themeSwitch.querySelector('.material-symbols-rounded').textContent = 'dark_mode';
-            }
         });
-        // 2. Logique de la Sidebar sur mobile (Conservée)
         sidebarToggle.addEventListener('click', () => {
             sidebar.classList.toggle('open');
         });
-        // 3. Logique de Déconnexion (Conservée)
         const logoutHandler = async (e) => {
             e.preventDefault();
             window.location.href = document.getElementById('logout-button-sidebar').href;
         };
         document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
-        // 4. Logique de Copie de la Clé
-        async function copyKey(key) {
-            try {
-                // Utilise l'API du presse-papiers moderne
-                await navigator.clipboard.writeText(key);
-                showStatus('Clé API copiée dans le presse-papiers !', 'success');
-            } catch (err) {
-                // Fallback (e.g., pour HTTP non sécurisé ou anciens navigateurs)
-                const textArea = document.createElement("textarea");
-                textArea.value = key;
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    showStatus('Clé API copiée (méthode de secours) !', 'success');
-                } catch (err) {
-                    showStatus('Erreur : Impossible de copier la clé automatiquement.', 'error');
-                }
-                document.body.removeChild(textArea);
-            }
-        }
-        // 5. Logique Afficher/Masquer la Clé
-        function toggleKeyVisibility(btnElement, fullKey, index) {
-            const displaySpan = document.getElementById(`display-key-${index}`);
-            const isMasked = displaySpan.getAttribute('data-masked') === 'true';
-            if (isMasked) {
-                // Afficher la clé
-                displaySpan.textContent = fullKey;
-                btnElement.querySelector('.material-symbols-rounded').textContent = 'visibility';
-                btnElement.setAttribute('title', 'Masquer la clé');
-                displaySpan.setAttribute('data-masked', 'false');
-            } else {
-                // Masquer la clé (NXS_****************...)
-                displaySpan.textContent = fullKey.substring(0, 4) + '_' + "*".repeat(10) + '...';
-                btnElement.querySelector('.material-symbols-rounded').textContent = 'visibility_off';
-                btnElement.setAttribute('title', 'Afficher la clé complète');
-                displaySpan.setAttribute('data-masked', 'true');
-            }
-        }
-        // 6. Logique de GÉNÉRATION d'une nouvelle clé
-        generateBtn.addEventListener('click', async () => {
-            generateBtn.disabled = true;
-            generateBtn.textContent = 'Génération...';
-            try {
-                const response = await fetch('{{ url_for("user_bp.api_key_generate") }}', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
-                });
-                const data = await response.json();
-                if (response.ok && response.status === 201) {
-                    showStatus(data.message || 'Clé créée avec succès ! Rechargement de la page...', 'success');
-                    // Recharger la page pour mettre à jour la liste complète
-                    setTimeout(() => window.location.reload(), 1500);
-                } else {
-                    showStatus(data.message || "Erreur lors de la génération de la clé.", 'error');
-                }
-            } catch (error) {
-                showStatus("Erreur réseau: Impossible de contacter le serveur.", 'error');
-            } finally {
-                // Rétablir le bouton en cas d'échec seulement (il sera rechargé en cas de succès)
-                if (!generateBtn.disabled) {
-                    generateBtn.textContent = 'Générer une nouvelle clé';
-                    if (currentKeys < maxKeys) { // S'assurer qu'il n'est pas réactivé si la limite est atteinte
-                        generateBtn.disabled = false;
-                    }
-                }
-            }
-        });
-        // 7. Logique de SUPPRESSION d'une clé
-        async function deleteApiKey(key) {
-            // Phase 3 : Confirmation de Suppression (UX)
-            if (!confirm(`Êtes-vous sûr de vouloir supprimer la clé se terminant par ...${key.slice(-4)} ? Cette action est irréversible et annulera toutes les requêtes API l'utilisant.`)) {
-                return;
-            }
-            try {
-                const response = await fetch('{{ url_for("user_bp.api_key_delete") }}', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ key: key })
-                });
-                const data = await response.json();
-                if (response.ok) {
-                    showStatus(data.message || 'Clé API supprimée avec succès ! Rechargement de la page...', 'success');
-                    // Recharger la page pour mettre à jour la liste complète
-                    setTimeout(() => window.location.reload(), 1500);
-                } else {
-                    showStatus(data.message || "Erreur lors de la suppression de la clé.", 'error');
-                }
-            } catch (error) {
-                showStatus("Erreur réseau: Impossible de contacter le serveur pour la suppression.", 'error');
-            }
-        }
-        // 8. Initialisation : Formatage des dates au chargement
-        document.querySelectorAll('[data-iso-date]').forEach(element => {
-            const isoDate = element.getAttribute('data-iso-date');
-            element.textContent = formatDate(isoDate);
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus| Clés API - Pro</title>
     <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet"
             cursor: pointer;
             font-size: 24px;
             transition: color 0.2s;
+            position: fixed; /* Reste fixe même si le reste défile */
             top: 1rem;
             right: 1rem;
+            z-index: 50; /* Doit être au-dessus de tout */
         }
         /* Définir les Variables de Thème */
+        /* Mode Sombre (Défaut) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --bg-sidebar: #1E1E1E; /* Sidebar aussi foncée que les cartes */
+            --bg-sidebar-active: #2C2C2C;
+            --border-sidebar: #383838;
+            --text-color: #FFFFFF;
+            --text-secondary: #D1D5DB;
+            --text-link: #3B82F6;
+            --text-link-hover: #60A5FA;
+            --input-bg: #2C2C2C;
+            --input-border: #4B5563;
+            --input-text-key: #6EE7B7; /* Vert clair pour la clé */
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #451A03; /* Orange très sombre */
+            --warning-border: #78350F;
+            --warning-text: #FBBF24;
         }
+        /* Mode Clair */
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --bg-sidebar: #FFFFFF;
+            --bg-sidebar-active: #F3F4F6;
+            --border-sidebar: #D1D5DB;
+            --text-color: #000000;
+            --text-secondary: #4B5563;
+            --text-link: #1D4ED8;
+            --text-link-hover: #3B82F6;
+            --input-bg: #FFFFFF;
+            --input-border: #D1D5DB;
+            --input-text-key: #059669; /* Vert foncé pour la clé */
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #FEF3C7; /* Jaune très clair */
+            --warning-border: #FBBF24;
+            --warning-text: #92400E;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .bg-sidebar-var { background-color: var(--bg-sidebar); }
+        .border-sidebar-var { border-color: var(--border-sidebar); }
+        .text-color-var { color: var(--text-color); }
+        .text-secondary-var { color: var(--text-secondary); }
+        .text-link-var { color: var(--text-link); }
+        .hover\:text-link-hover-var:hover { color: var(--text-link-hover); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-input-var { border-color: var(--input-border); }
+        .text-input-key-var { color: var(--input-text-key); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        .bg-sidebar-active-var { background-color: var(--bg-sidebar-active); }
+        .bg-warning-var { background-color: var(--warning-bg); }
+        .border-warning-var { border-color: var(--warning-border); }
+        .text-warning-var { color: var(--warning-text); }
+        /* Style pour les boutons et cartes carrés (Artboard) */
+        .btn-square, .card-square {
+            border-radius: 0; /* Supprime l'arrondi */
+        }
+        /* Styles spécifiques pour le chargement/spinner */
+        .spinner {
+            border-top-color: var(--primary-color); /* Utiliser la couleur primaire pour le spinner */
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Style pour la Sidebar - FIXE et complète */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            transform: translateX(-100%);
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 30;
+            height: 100vh;
         }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        /* Sur les grands écrans (lg), la sidebar est statique et toujours visible */
+        @media (min-width: 1024px) {
+            .sidebar {
+                transform: translateX(0) !important;
+                position: fixed; /* Changement : Rendre la sidebar fixe sur grand écran */
+                height: 100vh;
+            }
+        }
+        /* Conteneur principal pour décaler le contenu sur les grands écrans (lg) */
+        /* La marge doit correspondre à la largeur de la sidebar (w-64) */
+        @media (min-width: 1024px) {
+            .main-content {
+                margin-left: 256px;
+            }
+        }
     </style>
 </head>
+<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>
+    <aside id="sidebar" class="sidebar w-64 bg-sidebar-var border-r border-sidebar-var p-6 lg:block transition-colors-theme">
+        <div class="flex items-center mb-10">
+            <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+            <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
         </div>
+        <nav class="space-y-3">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <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>
+            <a href="{{ url_for('user_bp.api_logs') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">list_alt</span>
+                <span class="ml-3">Logs d'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">logout</span>
+                <span class="ml-3">Déconnexion</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>
+    <div id="main-content" class="main-content p-8 transition-colors-theme">
+        <header class="lg:hidden flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                 <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+                <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
+            </div>
+            <button id="sidebar-toggle" class="p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">menu</span>
+            </button>
         </header>
+        <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Gestion des Clés API</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="p-4 mb-4 text-sm rounded-lg {{ 'bg-red-800 text-red-300' if category == 'error' or category == 'danger' else 'bg-green-800 text-green-300' }} border border-transparent" role="alert">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <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">Votre Clé d'Accès Principale</h2>
+            <p class="text-secondary-var mb-6 transition-colors-theme">Utilisez cette clé pour authentifier vos requêtes auprès de l'API ErnestMind Nexus.</p>
+            <div class="flex items-center space-x-4 mb-6">
+                <input id="api-key-display"
+                       type="text"
+                       readonly
+                       class="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="{{ user.api_key if user and user.api_key else 'Clé API non trouvée. Réinitialisez-la.' }}">
+                <button id="copy-btn" class="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-sidebar-var pt-4 transition-colors-theme">
+                <button id="regenerate-btn" class="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 la Clé
+                    <div id="spinner" class="spinner w-4 h-4 border-2 rounded-full ml-2 hidden" style="border-bottom-color: transparent;"></div>
+                </button>
+                <p id="status-message" class="text-sm text-input-key-var font-medium transition-colors-theme"></p>
+            </div>
         </div>
+        <div class="mt-8 p-4 bg-warning-var border border-warning-border-var rounded-lg text-warning-text-var transition-colors-theme">
+            <h3 class="font-bold flex items-center">
+                <span class="material-symbols-rounded mr-2">warning</span>
+                Attention Sécurité
+            </h3>
+            <p class="text-sm mt-2">La clé API est un mot de passe pour vos applications. Ne la partagez jamais publiquement et traitez-la comme une information confidentielle.</p>
+        </div>
+    </div>
+    <script>
+        // Logique du thème (copiée de inscription.html)
+        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();
+        });
+        // Logique pour la copie de la clé API
+        const copyBtn = document.getElementById('copy-btn');
+        const apiKeyDisplay = document.getElementById('api-key-display');
+        const statusMessage = document.getElementById('status-message');
+        const regenerateBtn = document.getElementById('regenerate-btn');
+        const spinner = document.getElementById('spinner');
+        // 1. Fonctionnalité de Copie
+        copyBtn.addEventListener('click', () => {
+            apiKeyDisplay.select();
+            apiKeyDisplay.setSelectionRange(0, 99999); /* Pour les mobiles */
+            document.execCommand('copy');
+            // Afficher le message de statut
+            statusMessage.textContent = 'Clé copiée !';
+            setTimeout(() => {
+                statusMessage.textContent = '';
+            }, 3000);
         });
+        // 2. Logique de la Sidebar sur mobile
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const sidebar = document.getElementById('sidebar');
         sidebarToggle.addEventListener('click', () => {
             sidebar.classList.toggle('open');
         });
+        // 3. Logique de REGÉNÉRATION (Message de démo)
+        regenerateBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // Simuler une action pour l'utilisateur
+            statusMessage.textContent = 'Fonction de régénération en cours de développement. Veuillez revenir plus tard.';
+            setTimeout(() => {
+                statusMessage.textContent = '';
+            }, 4000);
+        });
+        // 4. 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>