auth"])', '.store-content', '.product-list', '.cart-content' ]; contentSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { // Skip if it's part of our auth system if (!element.id || !element.id.includes('ghl-auth')) { element.style.visibility = 'hidden'; element.setAttribute('data-ghl-hidden', 'true'); } }); }); } allowPageAccess() { // Restore scrolling document.body.style.overflow = ''; // Remove content blocker overlay const blocker = document.getElementById('ghl-content-blocker'); if (blocker) { blocker.remove(); } // Restore hidden content elements const hiddenElements = document.querySelectorAll('[data-ghl-hidden="true"]'); hiddenElements.forEach(element => { element.style.visibility = ''; element.removeAttribute('data-ghl-hidden'); }); // Remove auth modal if it exists const authOverlay = document.getElementById('ghl-auth-overlay'); if (authOverlay) { authOverlay.remove(); } } showLoginModal() { const overlay = document.createElement('div'); overlay.id = 'ghl-auth-overlay'; overlay.innerHTML = this.getLoginModalHTML(); document.body.appendChild(overlay); this.attachLoginEvents(); } showLogoutButton() { const logoutBtn = document.createElement('div'); logoutBtn.id = 'ghl-logout-btn'; logoutBtn.innerHTML = ''; document.body.appendChild(logoutBtn); // Add proper async event listener document.getElementById('ghl-logout-button').addEventListener('click', async (e) => { e.preventDefault(); e.stopPropagation(); const button = e.target; button.disabled = true; button.textContent = 'Logging out...'; try { await this.logout(); } catch (error) { console.error('Logout error:', error); location.reload(); } }); } getLoginModalHTML() { const rememberMeHtml = this.config.SHOW_REMEMBER_ME ? '' + '' + this.config.MESSAGES.REMEMBER_ME + '' : ''; return '

' + '

' + this.config.MESSAGES.TITLE + '

' + '' + '' + '' + '

' + '

'; } attachLoginEvents() { const form = document.getElementById('ghl-auth-form'); const submitBtn = document.getElementById('auth-submit'); const errorDiv = document.getElementById('auth-error'); const loadingDiv = document.getElementById('auth-loading'); form.addEventListener('submit', async (e) => { e.preventDefault(); const username = document.getElementById('auth-username').value.trim(); const password = document.getElementById('auth-password').value; const rememberMe = this.config.SHOW_REMEMBER_ME ? document.getElementById('auth-remember').checked : false; if (!username || !password) { this.showError('Please enter both username and password'); return; } // Show loading state submitBtn.disabled = true; submitBtn.textContent = 'Logging in...'; loadingDiv.style.display = 'block'; errorDiv.style.display = 'none'; try { const result = await this.login(username, password, rememberMe); if (result.success) { // Hide modal and allow page access this.allowPageAccess(); // Check if we're on login page and should redirect back if (this.isOnLoginPage() && this.hasReturnUrl()) { this.returnToOriginalPage(); } else { // Show logout button if staying on current page this.showLogoutButton(); } } else { this.showError(result.error || this.config.MESSAGES.LOGIN_FAILED); } } catch (error) { console.error('Login error:', error); this.showError(this.config.MESSAGES.LOGIN_FAILED); } finally { // Reset button state submitBtn.disabled = false; submitBtn.textContent = this.config.MESSAGES.LOGIN_BUTTON; loadingDiv.style.display = 'none'; } }); // Enter key support - handle both keypress and keydown for mobile compatibility const handleUsernameEnter = (e) => { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); document.getElementById('auth-password').focus(); } }; const handlePasswordEnter = (e) => { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); // Trigger form submission directly const submitEvent = new Event('submit', { bubbles: true, cancelable: true }); form.dispatchEvent(submitEvent); } }; // Add multiple event listeners for better mobile support const usernameField = document.getElementById('auth-username'); const passwordField = document.getElementById('auth-password'); usernameField.addEventListener('keypress', handleUsernameEnter); usernameField.addEventListener('keydown', handleUsernameEnter); passwordField.addEventListener('keypress', handlePasswordEnter); passwordField.addEventListener('keydown', handlePasswordEnter); } showError(message) { const errorDiv = document.getElementById('auth-error'); if (errorDiv) { errorDiv.textContent = message; errorDiv.style.display = 'block'; // Auto-hide after 5 seconds setTimeout(() => { errorDiv.style.display = 'none'; }, 5000); } } } // ============================================================================ // INITIALIZATION // ============================================================================ // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initAuth); } else { initAuth(); } async function initAuth() { // Create global instance for logout button window.ghlAuth = new GHLAuth(CONFIG); // Wait for initialization to complete await window.ghlAuth.init(); // Periodic token validation (every 5 minutes) setInterval(async () => { if (window.ghlAuth.isAuthenticated) { // Get current session data to validate token let sessionData = sessionStorage.getItem(window.ghlAuth.config.STORAGE_KEY) || localStorage.getItem(window.ghlAuth.config.STORAGE_KEY) || window.ghlAuth.getCookie(window.ghlAuth.config.STORAGE_KEY); if (sessionData) { try { const session = JSON.parse(sessionData); const isValid = await window.ghlAuth.validateToken(session.token); if (!isValid) { window.ghlAuth.clearSession(); alert(window.ghlAuth.config.MESSAGES.SESSION_EXPIRED); location.reload(); } } catch (error) { console.error('Periodic validation error:', error); window.ghlAuth.clearSession(); location.reload(); } } } }, 5 * 60 * 1000); } })();