ajout de fonctionnalités

frontend/popout.html

@@ -174,6 +174,57 @@
 
     function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }
 
+    // ---- Login form for popout auth redirect ----
+    
+    function showLoginForm(vault, path) {
+      const loading = document.getElementById('loading');
+      loading.innerHTML = `
+        <div class="popout-login-card" style="text-align:center;max-width:360px;padding:24px;background:var(--bg-secondary);border-radius:8px;box-shadow:0 4px 12px var(--shadow-color)">
+          <div style="font-size:2rem;margin-bottom:8px">🔐</div>
+          <h3 style="margin:0 0 4px;color:var(--text-primary)">Authentification requise</h3>
+          <p style="margin:0 0 16px;color:var(--text-muted);font-size:0.85rem">Connectez-vous pour accéder à ce fichier</p>
+          <form id="popout-login-form" style="display:flex;flex-direction:column;gap:10px">
+            <input type="text" id="popout-username" placeholder="Nom d'utilisateur" required autocomplete="username"
+              style="padding:10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:0.9rem">
+            <input type="password" id="popout-password" placeholder="Mot de passe" required autocomplete="current-password"
+              style="padding:10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:0.9rem">
+            <div id="popout-login-error" style="color:var(--text-error,#e74c3c);font-size:0.8rem;display:none"></div>
+            <button type="submit" 
+              style="padding:10px;background:var(--accent-color,#2563eb);color:white;border:none;border-radius:6px;cursor:pointer;font-size:0.9rem">Se connecter</button>
+          </form>
+        </div>
+      `;
+      
+      document.getElementById('popout-login-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const username = document.getElementById('popout-username').value;
+        const password = document.getElementById('popout-password').value;
+        const errorEl = document.getElementById('popout-login-error');
+        
+        try {
+          const res = await fetch('/api/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password }),
+            credentials: 'include',
+          });
+          if (!res.ok) {
+            const err = await res.json();
+            errorEl.textContent = err.detail || 'Identifiants invalides';
+            errorEl.style.display = 'block';
+            return;
+          }
+          // Login successful — reload the page to try loading the file again
+          window.location.reload();
+        } catch (err) {
+          errorEl.textContent = 'Erreur réseau';
+          errorEl.style.display = 'block';
+        }
+      });
+    }
+
+    // ---- Outline / TOC Manager ----
+
     const OutlineManager = {
     /**
      * Slugify text to create valid IDs
@@ -183,7 +234,7 @@
         .toLowerCase()
         .normalize('NFD')
         .replace(/[\u0300-\u036f]/g, '')
-        .replace(/[^\w\s-]/g, '')
+        .replace(/[^\p{L}\p{N}\s-]/gu, '')
         .replace(/\s+/g, '-')
         .replace(/-+/g, '-')
         .trim() || 'heading';
@@ -598,6 +649,12 @@ const RightSidebarManager = {
         const response = await fetch(`/api/file/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`, {
           credentials: 'include'
         });
+        
+        if (response.status === 401) {
+          showLoginForm(vault, path);
+          return;
+        }
+        
         if (!response.ok) throw new Error("Erreur lors du chargement (Essayez de vous reconnecter sur le site principal)");
         
         const data = await response.json();
@@ -772,7 +829,12 @@ const RightSidebarManager = {
         }, 300);
 
       } catch (err) {
-        document.getElementById('loading').textContent = err.message;
+        // Check if this was an auth error from a later fetch
+        if (err.message && err.message.includes('401')) {
+          showLoginForm(vault, path);
+        } else {
+          document.getElementById('loading').textContent = err.message || 'Erreur de chargement';
+        }
       }
     }