feat: iframe recovery overlay, timeout detection, and new tab authentication link for cross-origin access blocks

2026-08-21 00:06:51 +01:00
parent 554a25b746
commit 8d5c409655
3 changed files with 253 additions and 1 deletions
@@ -175,24 +175,83 @@ document.addEventListener('DOMContentLoaded', () => {
    }
  }

+  // Iframe Recovery Elements
+  const iframeExternalBtn = document.getElementById('btn-iframe-external');
+  const iframeReloadBtn = document.getElementById('btn-iframe-reload');
+  const iframeTargetLabel = document.getElementById('hub-iframe-target-label');
+  const iframeAuthNotice = document.getElementById('hub-iframe-auth-notice');
+  const btnAuthNoticeOpen = document.getElementById('btn-auth-notice-open');
+  const btnAuthNoticeReload = document.getElementById('btn-auth-notice-reload');
+  const btnAuthNoticeDismiss = document.getElementById('btn-auth-notice-dismiss');
+
+  let currentIframeUrl = '';
+  let iframeLoadTimeout = null;
+
  function showNativeChatView() {
    nativeChatLayout.style.display = 'flex';
    iframeWrapper.style.display = 'none';
+    if (iframeLoadTimeout) clearTimeout(iframeLoadTimeout);
+    if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
    if (iframe) iframe.src = 'about:blank';
  }

  function showIframeView(url) {
    nativeChatLayout.style.display = 'none';
-    iframeWrapper.style.display = 'block';
+    iframeWrapper.style.display = 'flex';
+    currentIframeUrl = url;
+
+    const isFiles = url.includes('files-hub');
+    if (iframeTargetLabel) {
+      iframeTargetLabel.textContent = isFiles 
+        ? 'Explorateur de Fichiers (files-hub.yesminedor.tn)' 
+        : 'Dialogue DeepSeek Harness (dsh-hub.yesminedor.tn)';
+    }
+
+    if (iframeExternalBtn) iframeExternalBtn.href = url;
+    if (btnAuthNoticeOpen) btnAuthNoticeOpen.href = url;
+    if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
+
    if (loader) loader.classList.remove('hidden');
+
+    if (iframeLoadTimeout) clearTimeout(iframeLoadTimeout);
+    iframeLoadTimeout = setTimeout(() => {
+      if (loader) loader.classList.add('hidden');
+      if (iframeAuthNotice) iframeAuthNotice.style.display = 'block';
+    }, 4500);
+
    if (iframe) {
      iframe.src = url;
      iframe.onload = () => {
        if (loader) loader.classList.add('hidden');
+        try {
+          if (iframe.contentDocument && iframe.contentDocument.title.toLowerCase().includes('cloudflare')) {
+            if (iframeAuthNotice) iframeAuthNotice.style.display = 'block';
+          }
+        } catch (e) {
+          // Cross-origin restriction (expected under Access redirect)
+        }
      };
    }
  }

+  if (iframeReloadBtn) {
+    iframeReloadBtn.addEventListener('click', () => {
+      if (currentIframeUrl) showIframeView(currentIframeUrl);
+    });
+  }
+
+  if (btnAuthNoticeReload) {
+    btnAuthNoticeReload.addEventListener('click', () => {
+      if (currentIframeUrl) showIframeView(currentIframeUrl);
+    });
+  }
+
+  if (btnAuthNoticeDismiss) {
+    btnAuthNoticeDismiss.addEventListener('click', () => {
+      if (iframeAuthNotice) iframeAuthNotice.style.display = 'none';
+    });
+  }
+
  // Load Conversations List
  async function loadConversations() {
    convList.innerHTML = '<div class="hub-conv-loading" style="padding: 1rem; color: var(--hub-text-muted); font-size: 0.75rem; text-align: center;">Chargement...</div>';