feat: iframe recovery overlay, timeout detection, and new tab authentication link for cross-origin access blocks
This commit is contained in:
bolbol
@@ -167,10 +167,49 @@
|
||||
|
||||
<!-- 2. Embedded Iframe View (Used exclusively for DSH Dialogue and DSH Files) -->
|
||||
<div id="hub-iframe-wrapper" class="hub-iframe-wrapper" style="display: none;">
|
||||
<!-- Top Iframe Bar -->
|
||||
<div class="hub-iframe-topbar">
|
||||
<div class="hub-iframe-url-pill">
|
||||
<span class="hub-status-dot online"></span>
|
||||
<span id="hub-iframe-target-label">Instance DSH</span>
|
||||
</div>
|
||||
<div class="hub-iframe-topbar-actions">
|
||||
<a id="btn-iframe-external" href="#" target="_blank" rel="noopener noreferrer" class="hub-btn-iframe-action" title="Ouvrir dans un nouvel onglet">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
|
||||
<span>Ouvrir dans un nouvel onglet ↗</span>
|
||||
</a>
|
||||
<button id="btn-iframe-reload" class="hub-btn-iframe-action" type="button" title="Recharger le cadre">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
<span>Recharger</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hub-loader" class="hub-loader-overlay">
|
||||
<div class="hub-spinner"></div>
|
||||
<p style="font-size: 0.85rem; color: var(--hub-text-secondary);">Connexion à l'instance...</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Recovery Notice Banner (Appears if session is expired or frame blocked) -->
|
||||
<div id="hub-iframe-auth-notice" class="hub-iframe-auth-notice" style="display: none;">
|
||||
<div class="hub-auth-notice-content">
|
||||
<span class="hub-auth-notice-icon">🔒</span>
|
||||
<div class="hub-auth-notice-text">
|
||||
<strong>Cadre bloqué ou session Cloudflare requise ?</strong>
|
||||
<span>Si la connexion est refusée par votre navigateur (X-Frame-Options), connectez-vous dans un nouvel onglet puis rechargez.</span>
|
||||
</div>
|
||||
<div class="hub-auth-notice-buttons">
|
||||
<a id="btn-auth-notice-open" href="#" target="_blank" rel="noopener noreferrer" class="hub-btn-auth-action">
|
||||
S'authentifier dans un onglet ↗
|
||||
</a>
|
||||
<button id="btn-auth-notice-reload" type="button" class="hub-btn-auth-reload">
|
||||
Recharger
|
||||
</button>
|
||||
<button id="btn-auth-notice-dismiss" type="button" class="hub-btn-auth-dismiss" title="Masquer">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
id="workspace-iframe"
|
||||
class="hub-workspace-iframe"
|
||||
|
||||
@@ -919,10 +919,164 @@ body, html {
|
||||
.hub-iframe-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hub-iframe-topbar {
|
||||
height: 36px;
|
||||
background-color: var(--hub-bg-sidebar);
|
||||
border-bottom: 1px solid var(--hub-border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
flex-shrink: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hub-iframe-url-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--hub-text-secondary);
|
||||
}
|
||||
|
||||
.hub-iframe-topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hub-btn-iframe-action {
|
||||
background: var(--hub-bg-card);
|
||||
border: 1px solid var(--hub-border-subtle);
|
||||
color: var(--hub-text-secondary);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--hub-radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.hub-btn-iframe-action:hover {
|
||||
color: var(--hub-text-primary);
|
||||
border-color: var(--hub-border-medium);
|
||||
background: var(--hub-bg-card-hover);
|
||||
}
|
||||
|
||||
/* Auth Recovery Notice */
|
||||
.hub-iframe-auth-notice {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.95));
|
||||
border: 1px solid rgba(99, 102, 241, 0.4);
|
||||
border-radius: var(--hub-radius-md);
|
||||
padding: 0.6rem 1rem;
|
||||
z-index: 20;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
animation: slideDownNotice 0.25s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDownNotice {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.hub-auth-notice-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hub-auth-notice-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hub-auth-notice-text {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.hub-auth-notice-text strong {
|
||||
font-size: 0.8rem;
|
||||
color: #e0e7ff;
|
||||
}
|
||||
|
||||
.hub-auth-notice-text span {
|
||||
font-size: 0.72rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.hub-auth-notice-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hub-btn-auth-action {
|
||||
background: var(--hub-accent-current);
|
||||
color: #ffffff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--hub-radius-sm);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hub-btn-auth-action:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hub-btn-auth-reload {
|
||||
background: transparent;
|
||||
border: 1px solid var(--hub-border-medium);
|
||||
color: var(--hub-text-primary);
|
||||
font-size: 0.72rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--hub-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.hub-btn-auth-reload:hover {
|
||||
background: var(--hub-bg-card-hover);
|
||||
}
|
||||
|
||||
.hub-btn-auth-dismiss {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--hub-text-muted);
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hub-btn-auth-dismiss:hover {
|
||||
color: var(--hub-text-primary);
|
||||
}
|
||||
|
||||
.hub-workspace-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
+60
-1
@@ -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>';
|
||||
|
||||
Reference in New Issue
Block a user