// Durable top-right authentication header and modal (Supabase-based) // Works standalone when pasted into Durable Head Code (function(){ if (window.__thgAuthInstalledV1) return; window.__thgAuthInstalledV1 = true; const AUTH_NAV = Object.assign({ profile: '/profile', dashboard: '/dashboard', settings: null }, window.AUTH_NAV || {}); const Z_BASE = 2147483000; window.authGate = window.authGate || {}; window.authGate.openLoginModal = function(opts){ (window.__thgOpenAuthModal || function(){ alert('Auth not ready'); })(opts||{}); }; function ready(fn){ if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',fn,{once:true});} else { fn(); } } function headerRoot(){ return document.querySelector('header, [role="banner"], [data-section="header"], .site-header, .Header, nav') || null; } // Instead of hiding legacy/login links, wire them to open the modal directly function hideLegacyAuthLinks(root){ var scope = (root || document); var selector = 'a[href="#login"], a[href="#signup"], [data-auth-open]'; scope.querySelectorAll(selector).forEach(function(el){ if (el.__thgAuthWired) return; el.__thgAuthWired = true; el.addEventListener('click', function(ev){ try { ev.preventDefault(); // Always open the modal directly; never click the header button, to avoid // accidentally toggling the account dropdown when the user is already signed in. var next = location.pathname + location.search; if (window.authGate && typeof window.authGate.openLoginModal === 'function') { window.authGate.openLoginModal({ next }); } else if (typeof window.__thgOpenAuthModal === 'function') { window.__thgOpenAuthModal({ next }); } } catch(_){ } }, { passive:false }); }); } function clamp(str, max){ if (!str) return ''; return str.length>max ? str.slice(0,max-1)+'…' : str; } function getInitials(user){ const meta = user?.user_metadata || {}; const full = (meta.full_name || meta.name || '').trim(); if (full) { const parts = full.split(/\s+/).filter(Boolean); const first = parts[0]?.[0] || ''; const last = parts.length>1 ? parts[parts.length-1][0] : ''; return (first+last || first || '').toUpperCase() || 'U'; } const email = (user?.email || '').trim(); return email ? email[0].toUpperCase() : 'U'; } function getDisplayName(user){ const meta = user?.user_metadata || {}; const name = (meta.full_name || meta.name || meta.username || '').trim(); return name || (user?.email || 'My Account'); } // Keep buyer-form email field in sync with header auth state (same-page or embedded) function lockBuyerEmailInBuyerForm(email){ try { const scope = document.getElementById('buyerForm') || document; const emailInput = scope && scope.querySelector('#buyerForm [name="email"], form#buyerForm input[name="email"]'); if (!emailInput) return; emailInput.value = email || ''; emailInput.setAttribute('data-session-email', email || ''); emailInput.readOnly = true; emailInput.setAttribute('aria-readonly','true'); emailInput.disabled = true; try { emailInput.setAttribute('autocomplete','off'); emailInput.setAttribute('autocapitalize','off'); emailInput.setAttribute('spellcheck','false'); } catch(_){} // create/update hidden mirror used for submission let hidden = document.getElementById('buyer-email-hidden'); if (!hidden){ hidden = document.createElement('input'); hidden.type='hidden'; hidden.name='email'; hidden.id='buyer-email-hidden'; emailInput.parentElement && emailInput.parentElement.appendChild(hidden); } hidden.value = email || ''; // prevent duplicate name submission if (emailInput.getAttribute('name')) { emailInput.setAttribute('data-original-name','email'); emailInput.removeAttribute('name'); } } catch(_){} } function unlockBuyerEmailInBuyerForm(){ try { const scope = document.getElementById('buyerForm') || document; const emailInput = scope && scope.querySelector('#buyerForm [data-session-email], form#buyerForm input[aria-readonly]'); if (!emailInput) return; try { emailInput.readOnly = false; emailInput.disabled = false; emailInput.removeAttribute('aria-readonly'); emailInput.removeAttribute('data-session-email'); } catch(_){} try { if (!emailInput.getAttribute('name')) emailInput.setAttribute('name', emailInput.getAttribute('data-original-name') || 'email'); } catch(_){} const hidden = document.getElementById('buyer-email-hidden'); if (hidden && hidden.parentElement) hidden.parentElement.removeChild(hidden); } catch(_){} } function setBuyerEmailLockFromUser(user){ try { if (user && user.email) lockBuyerEmailInBuyerForm(user.email); else unlockBuyerEmailInBuyerForm(); } catch(_){} } function createEl(tag, cls, attrs){ const el = document.createElement(tag); if (cls) el.className = cls; if (attrs) for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } function validateEmail(val){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val); } function ensureContainer(){ // First, try to use the SiteHeader's dedicated container let wrap = document.getElementById('site-header-auth-container'); if (wrap) { // ADD thg-auth-wrap class while PRESERVING the ID and any existing classes if (!wrap.classList.contains('thg-auth-wrap')) { wrap.classList.add('thg-auth-wrap'); } return wrap; } // Fallback: create wrapper in header or body (original behavior) wrap = document.querySelector('.thg-auth-wrap'); if (!wrap){ wrap = document.createElement('div'); wrap.className = 'thg-auth-wrap'; let hdr = headerRoot(); let parent = hdr || document.body; if (hdr) { const cs = getComputedStyle(hdr); if (cs.position === 'static') { hdr.style.position = 'relative'; } parent.appendChild(wrap); } else { wrap.classList.add('is-fixed'); parent.appendChild(wrap); } } return wrap; } function injectStyles(){ if (document.getElementById('thg-auth-styles')) return; const css = ` /* Auth wrapper - positioned by header or falls back to absolute */ .thg-auth-wrap{ display:flex; align-items:center; position:relative; z-index:${Z_BASE}; } /* When #site-header-auth-container exists, it's positioned by StaticHeaderHTML inline styles */ /* Fallback: absolute positioning when created dynamically outside SiteHeader */ .thg-auth-wrap:not(#site-header-auth-container){ position:absolute; top:14px; right:16px; } @media (min-width:1024px){ .thg-auth-wrap:not(#site-header-auth-container){ top:16px; right:24px; } } .thg-auth-wrap.is-fixed{ position:fixed; top:14px; right:16px; } /* Header button */ .thg-auth-btn{ appearance:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.9); border-radius:9999px;padding:8px 14px;font-weight:600;cursor:pointer;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:8px; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; } .thg-auth-btn:hover{background:rgba(255,255,255,.08)} .thg-auth-btn:focus-visible{ outline:2px solid #7dd3fc; outline-offset:2px; } .thg-auth-btn .thg-initial{ width:22px;height:22px;border-radius:9999px;background:#fff;color:#111;display:none;align-items:center;justify-content:center;font-weight:700;font-size:11px; } .thg-auth-btn.is-auth .thg-initial{ display:inline-flex; } .thg-auth-btn.is-auth::after{ content:""; display:inline-block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid rgba(255,255,255,.9); transition:transform .15s ease; transform-origin:center; } .thg-auth-btn[aria-expanded="true"].is-auth::after{ transform:rotate(180deg); } .thg-spinner{ width:14px;height:14px;border-radius:9999px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff; animation:thgspin .8s linear infinite; } @keyframes thgspin{ to{ transform:rotate(360deg); } } /* Account menu */ .thg-auth-menu{ position:absolute;top:calc(100% + 10px);right:0;min-width:280px;background:#0b0b0b;color:#fff; border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.45); visibility:hidden; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index:${Z_BASE+1}; } .thg-auth-menu[aria-hidden="false"]{ visibility:visible; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s; } .thg-auth-item{ display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#fff;cursor:pointer; } .thg-auth-item:hover{background:rgba(255,255,255,.08)} .thg-auth-item[tabindex]{outline:none} .thg-auth-item.is-header{ cursor:default;font-weight:700;opacity:.95; } .thg-auth-item.is-header:hover{background:transparent} .thg-auth-sep{ height:1px;background:rgba(255,255,255,.12);margin:6px 8px;border-radius:1px; } .thg-initial-lg{ width:28px;height:28px;border-radius:9999px;background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px; } .thg-name-wrap{ display:flex; flex-direction:column; min-width:0; } .thg-name{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px; } .thg-email{ opacity:.7; font-size:12px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:200px; } /* Modal */ .thg-auth-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:saturate(140%) blur(6px); display:flex; align-items:center; justify-content:center; z-index:${Z_BASE+2}; visibility:hidden; opacity:0; transition:opacity .18s ease, visibility 0s linear .18s; } .thg-auth-overlay[aria-hidden="false"]{ visibility:visible; opacity:1; transition:opacity .18s ease, visibility 0s linear 0s; } /* GLASSY DESIGN - Unified for both containers - matches Portal dropdown */ .thg-auth-modal{ width:100%; max-width:420px; background:rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(24px) saturate(1.8) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8) !important; color:#111 !important; border:1px solid rgba(255, 255, 255, 0.3) !important; border-radius:24px !important; box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.25), 0 0 0 1px rgba(212, 175, 55, 0.2) !important; transform:translateY(10px) scale(.98); opacity:0; transition:transform .18s ease, opacity .18s ease; position:relative; overflow:hidden; } .thg-auth-overlay[aria-hidden="false"] .thg-auth-modal{ transform:translateY(0) scale(1); opacity:1; } .thg-auth-modal::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; border-radius:24px 24px 0 0; background:linear-gradient(90deg, #d4af37, #1e40af); z-index:2; } .thg-auth-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(30,64,175,.12); position:relative; z-index:1; } .thg-auth-title{ font-weight:800; font-size:20px; color:#111 !important; } .thg-auth-close{ appearance:none; background:rgba(0,0,0,0.04); border:0; color:#64748b; cursor:pointer; font-weight:800; width:32px; height:32px; line-height:32px; border-radius:10px; transition:all 0.2s ease; } .thg-auth-close:hover{ background:rgba(0,0,0,0.08); color:#0f172a; } .thg-auth-body{ padding:16px 18px 18px; position:relative; z-index:1; } /* Tabs - glassy design with clear visibility */ .thg-tabs{ display:flex; gap:6px; background:rgba(30,64,175,.08) !important; padding:4px; border-radius:9999px; margin-bottom:16px; } .thg-tab{ flex:1; text-align:center; padding:8px 10px; border-radius:9999px; cursor:pointer; font-weight:700; color:#475569 !important; transition:all 0.2s ease; } .thg-tab[aria-selected="true"]{ background:#fff !important; color:#1e40af !important; box-shadow:0 2px 8px rgba(30,64,175,.15); } /* Fields - glassy design with clear visibility */ .thg-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; } .thg-field label{ font-size:12px; color:#111 !important; font-weight:600 !important; opacity:1 !important; } .thg-field label[for="thg-si-password"]::after{ content:" (optional — use Magic Link for fastest login)"; color:#64748b !important; font-weight:500; } .thg-input{ appearance:none; background:rgba(255,255,255,0.6) !important; backdrop-filter:blur(8px) !important; color:#111 !important; border:1px solid rgba(30,64,175,.2) !important; border-radius:10px; padding:10px 12px; transition:all 0.2s ease; } .thg-input::placeholder{ color:#64748b !important; } .thg-input:focus{ outline:2px solid #d4af37 !important; outline-offset:2px; background:rgba(255,255,255,0.8) !important; border-color:#1e40af !important; } /* Actions and links - clear visibility */ .thg-actions{ display:flex; justify-content:space-between; align-items:center; margin:6px 0 12px; } .thg-link{ background:none; border:0; color:#1e40af !important; cursor:pointer; font-size:13px; padding:0; font-weight:600; transition:color 0.2s ease; } .thg-link:hover{ color:#3b82f6 !important; } .thg-hint{ color:#64748b !important; font-size:12px; opacity:1 !important; } /* Primary CTA (yellow) - enhanced visibility */ .thg-btn-primary{ width:100%; appearance:none; background:linear-gradient(180deg,#f8d34a,#f0b90b,#c89200); color:#000000 !important; border:1px solid rgba(250, 204, 21, .9); border-radius:12px; padding:12px 14px; font-weight:900 !important; cursor:pointer; transition:transform .06s ease, box-shadow .06s ease, filter .12s ease; box-shadow:0 4px 0 rgba(250, 204, 21, .35); text-shadow:0 1px 3px rgba(255,255,255,0.5), 0 0 1px rgba(0,0,0,0.1); } .thg-btn-primary:hover{ filter:brightness(1.03); } .thg-btn-primary:active{ transform:translateY(1px); box-shadow:none; } /* OAuth / secondary buttons - glassy design */ .thg-oauth{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; } .thg-oauth-btn{ appearance:none; background:rgba(255,255,255,0.4) !important; backdrop-filter:blur(8px) !important; color:#111 !important; border:1px solid rgba(30,64,175,.2) !important; border-radius:12px; padding:12px 14px; cursor:pointer; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.2s ease; } .thg-oauth-btn:hover{ background:rgba(255,255,255,0.6) !important; border-color:#1e40af !important; } .thg-oauth-btn .g-icon{ width:18px; height:18px; } .thg-oauth-btn.google{ border-color:rgba(30,64,175,.3) !important; background:rgba(255,255,255,0.5) !important; } /* Errors, hints, loading - clear visibility on glassy background */ .thg-error{ background:rgba(239,68,68,.15) !important; color:#dc2626 !important; border:1px solid rgba(239,68,68,.4) !important; border-radius:10px; padding:10px 12px; font-size:13px; display:none; font-weight:600; } .thg-hint{ font-size:12px; color:#64748b !important; opacity:1 !important; } .thg-loading-bar{ height:2px; width:0; background:linear-gradient(90deg, #d4af37, #1e40af); border-radius:2px; transition:width .2s ease; } .thg-tagline{ color:#475569 !important; font-size:13px; margin:-4px 0 12px; font-weight:500; } /* Confirm dialog */ .thg-confirm{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:${Z_BASE+3}; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); visibility:hidden; opacity:0; transition:opacity .16s ease, visibility 0s linear .16s; } .thg-confirm[aria-hidden="false"]{ visibility:visible; opacity:1; transition:opacity .16s ease, visibility 0s linear 0s; } .thg-confirm-card{ width:100%; max-width:360px; background:#141414; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; box-shadow:0 24px 50px rgba(0,0,0,.5); } .thg-confirm-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; } .thg-btn{ appearance:none; border-radius:10px; padding:8px 12px; cursor:pointer; border:1px solid rgba(255,255,255,.15); background:#0f0f0f; color:#fff; } .thg-btn-danger{ background:#ef4444; border-color:#ef4444; color:#fff; } /* Responsive */ @media (max-width:480px){ .thg-auth-wrap{ top:10px; right:10px; } .thg-auth-modal{ width:calc(100% - 16px); margin:0 8px; } .thg-auth-menu{ right:8px; } } /* Hide auth button on mobile for ALL non-homepage pages */ @media (max-width: 880px) { /* This will be applied via JavaScript when on non-homepage pages */ .thg-auth-wrap.hide-on-mobile, .thg-auth-btn.hide-on-mobile, #site-header-auth-container.hide-on-mobile { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* tagline styling */ .thg-tagline{ color:#9ca3af; font-size:13px; margin:-4px 0 12px; } `; const style = document.createElement('style'); style.id = 'thg-auth-styles'; style.textContent = css; document.head.appendChild(style); } function createUI(){ const wrap = ensureContainer(); let btn = wrap.querySelector('.thg-auth-btn'); if (!btn){ btn = createEl('button', 'thg-auth-btn', { type:'button', 'aria-haspopup':'menu', 'aria-expanded':'false', 'aria-label':'Open account menu' }); const avatar = createEl('span', 'thg-initial'); avatar.textContent = 'U'; const label = document.createElement('span'); label.className = 'thg-label'; const spinner = createEl('span','thg-spinner',{'aria-hidden':'true'}); btn.appendChild(avatar); btn.appendChild(label); btn.appendChild(spinner); wrap.appendChild(btn); } let menu = wrap.querySelector('.thg-auth-menu'); if (!menu){ menu = createEl('div', 'thg-auth-menu', { id:'thg-auth-menu', role:'menu', 'aria-hidden':'true' }); menu.innerHTML = '

' + 'U' + '' + 'User' + 'email@example.com' + '' + '

' + '

Profile

' + '

Dashboard

' + (AUTH_NAV.settings ? '

Settings

' : '') + '

Logout

'; wrap.appendChild(menu); } btn.setAttribute('aria-controls','thg-auth-menu'); // Create inline login/signup modal overlay let overlay = document.querySelector('.thg-auth-overlay'); if (!overlay){ overlay = createEl('div','thg-auth-overlay',{'aria-hidden':'true','aria-modal':'true','role':'dialog'}); overlay.innerHTML = ''; document.body.appendChild(overlay); } // Logout confirmation dialog removed - logout happens directly let confirmEl = null; // Respect global flag to hide the header button completely try { if (window.AUTH_HIDE_HEADER === true || window.AUTH_NO_HEADER === true) { if (wrap) wrap.style.display = 'none'; } // Hide on mobile for ALL non-homepage pages function checkAndHideOnMobile() { if (typeof window === 'undefined' || !wrap) return; const pathname = window.location.pathname; const isRootPath = pathname === '/' || pathname === '' || pathname === '/index.html'; const hasHomepageClass = document.body.classList.contains('homepage-header'); const hasHeroPremium = document.querySelector('.hero-premium') !== null || document.querySelector('main.hero-premium') !== null; const isHomepage = isRootPath || hasHomepageClass || hasHeroPremium; const isMobile = window.innerWidth <= 880; const container = document.getElementById('site-header-auth-container'); // On mobile, hide on all pages except homepage if (isMobile && !isHomepage) { // Add hide class and set inline styles with important if (container) { container.classList.add('hide-on-mobile'); container.style.setProperty('display', 'none', 'important'); container.style.setProperty('visibility', 'hidden', 'important'); container.style.setProperty('opacity', '0', 'important'); container.style.setProperty('pointer-events', 'none', 'important'); } wrap.classList.add('hide-on-mobile'); wrap.style.setProperty('display', 'none', 'important'); wrap.style.setProperty('visibility', 'hidden', 'important'); wrap.style.setProperty('opacity', '0', 'important'); wrap.style.setProperty('pointer-events', 'none', 'important'); if (btn) { btn.classList.add('hide-on-mobile'); btn.style.setProperty('display', 'none', 'important'); btn.style.setProperty('visibility', 'hidden', 'important'); btn.style.setProperty('opacity', '0', 'important'); btn.style.setProperty('pointer-events', 'none', 'important'); } } else { // Remove hide class and restore styles only if not globally hidden if (container) container.classList.remove('hide-on-mobile'); wrap.classList.remove('hide-on-mobile'); if (btn) btn.classList.remove('hide-on-mobile'); // Only restore if not globally hidden and not on mobile non-homepage if (window.AUTH_HIDE_HEADER !== true && window.AUTH_NO_HEADER !== true) { if (!isMobile || isHomepage) { if (container) { container.style.removeProperty('display'); container.style.removeProperty('visibility'); container.style.removeProperty('opacity'); container.style.removeProperty('pointer-events'); } wrap.style.removeProperty('display'); wrap.style.removeProperty('visibility'); wrap.style.removeProperty('opacity'); wrap.style.removeProperty('pointer-events'); if (btn) { btn.style.removeProperty('display'); btn.style.removeProperty('visibility'); btn.style.removeProperty('opacity'); btn.style.removeProperty('pointer-events'); } } } } } // Check immediately checkAndHideOnMobile(); // Listen for resize events window.addEventListener('resize', checkAndHideOnMobile); // Listen for route changes (Next.js) const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function(...args) { originalPushState.apply(history, args); setTimeout(checkAndHideOnMobile, 0); }; history.replaceState = function(...args) { originalReplaceState.apply(history, args); setTimeout(checkAndHideOnMobile, 0); }; // Also check on popstate (back/forward) window.addEventListener('popstate', checkAndHideOnMobile); } catch(_){} return { wrap, btn, menu, overlay, confirmEl: null }; } const state = { user: null, loading: true, nextUrl: null, supabaseReady: false, sub: null }; function setButtonLoading(ui, isLoading){ const spinner = ui.btn.querySelector('.thg-spinner'); const label = ui.btn.querySelector('.thg-label'); if (isLoading){ ui.btn.classList.remove('is-auth'); /* Removed text change - only show spinner */ if (spinner) spinner.style.display = 'inline-block'; ui.btn.setAttribute('aria-expanded','false'); } else { if (spinner) spinner.style.display = 'none'; } } function render(ui){ const label = ui.btn.querySelector('.thg-label'); const avatar = ui.btn.querySelector('.thg-initial'); // Only show loading if actively loading AND supabase is ready (prevents unnecessary loading state) if (state.loading && state.supabaseReady){ setButtonLoading(ui, true); return; } setButtonLoading(ui, false); if (state.user && state.user.email){ const name = getDisplayName(state.user); ui.btn.classList.add('is-auth'); avatar.textContent = getInitials(state.user); label.textContent = clamp(name, 24); ui.btn.prepend(avatar); const initEl = ui.menu.querySelector('.thg-initial-lg'); const nameEl = ui.menu.querySelector('.thg-name'); const emailEl = ui.menu.querySelector('.thg-email'); if (initEl) initEl.textContent = getInitials(state.user); if (nameEl) nameEl.textContent = clamp(name, 28); if (emailEl) emailEl.textContent = clamp(state.user.email || '', 30); } else { ui.btn.classList.remove('is-auth'); ui.btn.setAttribute('aria-expanded','false'); label.textContent = 'Login / Signup'; avatar.textContent = 'U'; ui.btn.prepend(avatar); closeMenu(ui); } } function openMenu(ui){ if (!state.user) return; ui.menu.setAttribute('aria-hidden','false'); ui.btn.setAttribute('aria-expanded','true'); const items = ui.menu.querySelectorAll('.thg-auth-item[role="menuitem"]'); if (items[0]) setTimeout(function(){ items[0].focus(); }, 0); } function closeMenu(ui){ ui.menu.setAttribute('aria-hidden','true'); ui.btn.setAttribute('aria-expanded','false'); } function toggleMenu(ui){ const isHidden = ui.menu.getAttribute('aria-hidden') === 'true'; if (isHidden) openMenu(ui); else closeMenu(ui); } function showError(uiOverlay, msg){ const el = uiOverlay.querySelector('.thg-error'); if (!el) return; el.textContent = msg; el.style.display = 'block'; } function clearError(uiOverlay){ const el = uiOverlay.querySelector('.thg-error'); if (!el) return; el.textContent = ''; el.style.display = 'none'; } function setModalLoading(uiOverlay, loading){ const bar = uiOverlay.querySelector('.thg-loading-bar'); if (!bar) return; if (loading){ bar.style.width = '75%'; } else { bar.style.width = '0'; } } function showPanel(uiOverlay, id, title){ ['signin','signup','reset','update'].forEach(function(key){ const panel = uiOverlay.querySelector('#thg-panel-'+key); if (panel) panel.hidden = (key !== id); }); const tEl = uiOverlay.querySelector('#thg-auth-title'); if (tEl) tEl.textContent = title; clearError(uiOverlay); } function validateEmail(email){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } // Use inline modal instead of iframe function openAuthModal(ui, opts){ if (!ui.overlay) return; // FORCE REMOVE ALL NESTED CONTAINERS BEFORE OPENING MODAL const authGateModal = document.getElementById('authGateModal'); if (authGateModal) authGateModal.remove(); const portalPrompt = document.getElementById('thg-portal-login-prompt'); if (portalPrompt) portalPrompt.remove(); const iframes = document.querySelectorAll('iframe[id*="authGate"], iframe[src*="login_signup_glassdrop"]'); iframes.forEach(function(iframe) { if (iframe.parentElement) iframe.parentElement.remove(); }); const nestedAuth = document.querySelectorAll('.authgate-backdrop, .authgate-dialog, .authgate-frame-wrap'); nestedAuth.forEach(function(el) { if (el.parentElement) el.parentElement.remove(); }); state.nextUrl = opts?.next || null; ui.overlay.setAttribute('aria-hidden','false'); document.body.style.overflow = 'hidden'; showPanel(ui.overlay, 'signin', 'Sign in'); setTimeout(function(){ const el = ui.overlay.querySelector('#thg-si-email'); if (el) el.focus(); }, 0); } function closeAuthModal(ui){ if (!ui.overlay) return; ui.overlay.setAttribute('aria-hidden','true'); document.body.style.overflow = ''; } // Expose functions for external use (header.js, etc.) window.authGate = window.authGate || {}; window.authGate.openLoginModal = function(opts) { // Wait for UI to be ready if (window.__thgAuthUI && window.__thgAuthUI.overlay) { openAuthModal(window.__thgAuthUI, opts); } else { // Fallback: use __thgOpenAuthModal if available if (typeof window.__thgOpenAuthModal === 'function') { window.__thgOpenAuthModal(opts); } } }; window.authGate.closeLoginModal = function() { if (window.__thgAuthUI && window.__thgAuthUI.overlay) { closeAuthModal(window.__thgAuthUI); } }; // Set __thgOpenAuthModal to use inline modal window.__thgOpenAuthModal = function(opts) { if (window.__thgAuthUI && window.__thgAuthUI.overlay) { openAuthModal(window.__thgAuthUI, opts); } else { // Fallback if UI not ready yet setTimeout(function() { if (window.__thgAuthUI && window.__thgAuthUI.overlay) { openAuthModal(window.__thgAuthUI, opts); } }, 100); } }; // Logout confirmation removed - logout happens directly // Broadcast current auth state (email only) to child iframes, sibling tabs, and embedded forms function broadcastAuth(user){ var loggedIn = !!(user && user.email); try { window.__authGateLoggedIn = loggedIn; } catch(_) {} try { localStorage.setItem('__tharaga_magic_continue', JSON.stringify({ user: loggedIn ? { email: user.email } : null, ts: Date.now() })); } catch(_) {} try { var evtType = loggedIn ? 'THARAGA_AUTH_SUCCESS' : 'THARAGA_AUTH_SIGNED_OUT'; if ('BroadcastChannel' in window){ window.__thgAuthBC = window.__thgAuthBC || new BroadcastChannel('tharaga-auth'); window.__thgAuthBC.postMessage(loggedIn ? { type: evtType, user: { email: user.email } } : { type: evtType }); } } catch(_) {} try { var payload = loggedIn ? { type: 'THARAGA_AUTH_SUCCESS', user: { email: user.email } } : { type: 'THARAGA_AUTH_SIGNED_OUT' }; // Notify any embedded iframes (cross-origin safe via postMessage) var iframes = document.querySelectorAll('iframe'); for (var i=0;i