feat: iframe recovery overlay, timeout detection, and new tab authentication link for cross-origin access blocks
This commit is contained in:
bolbol
@@ -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