// Add custom elements to Clerk modal const onAuthRoute = //(sign-in|sign-up)/.test(window.location.pathname) if (!onAuthRoute) { return } window.addCustomModalElements = function() { // Try multiple selectors for Clerk modal const modal = document.querySelector('.cl-card') || document.querySelector('.cl-modalContent') || document.querySelector('[data-clerk-modal]') || document.querySelector('.cl-signIn-root') || document.querySelector('.cl-signUp-root'); if (!modal) { // Modal not found - this is normal when no modal is open return; } // Modal found, proceed with customization // Add logo at the top of the card if (!modal.querySelector('.custom-logo')) { const logoContainer = document.createElement('div'); logoContainer.className = 'custom-logo text-center mb-3'; logoContainer.innerHTML = `

`; modal.insertBefore(logoContainer, modal.firstChild); } // Check if elements already exist if (modal.querySelector('.custom-passwordless-banner')) { return; } // Find the form element const form = modal.querySelector('.cl-form'); if (!form) return; // Create passwordless banner const banner = document.createElement('div'); banner.className = 'custom-passwordless-banner'; banner.textContent = '✨ No passwords needed! We\'ll send a secure code to your email.'; // Create context-aware sign-up/sign-in link const authLink = document.createElement('div'); authLink.className = 'custom-signup-link'; // Determine context based on current page or modal content const isSignUpContext = window.location.pathname.includes('/sign-up') || modal.querySelector('h1')?.textContent?.toLowerCase().includes('create') || modal.querySelector('h1')?.textContent?.toLowerCase().includes('sign up') || document.title.toLowerCase().includes('sign up'); if (isSignUpContext) { // On sign-up page/modal, show "Already have an account? Sign in" authLink.innerHTML = 'Already have an account? '; authLink.addEventListener('click', () => { const closeBtn = document.querySelector('.cl-modalCloseButton'); if (closeBtn) { closeBtn.click(); setTimeout(() => { window.location.href = '/sign-in'; }, 300); } }); } else { // On sign-in page/modal, show "Don't have an account? Sign up" authLink.innerHTML = 'Don\'t have an account? '; authLink.addEventListener('click', () => { const closeBtn = document.querySelector('.cl-modalCloseButton'); if (closeBtn) { closeBtn.click(); setTimeout(() => { window.location.href = '/sign-up'; }, 300); } }); } // Create back to home button const backButton = document.createElement('div'); backButton.className = 'custom-back-button text-center mt-4'; backButton.innerHTML = ` ← Back to home `; // Add elements after the form form.parentNode.insertBefore(banner, form.nextSibling); form.parentNode.insertBefore(authLink, banner.nextSibling); form.parentNode.insertBefore(backButton, authLink.nextSibling); } // Run when DOM is ready (auth routes only) if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', window.addCustomModalElements); } else { // Delay initial check to allow Clerk to load setTimeout(window.addCustomModalElements, 100); } // Enhanced modal detection with multiple strategies let modalCheckInterval; // Strategy 1: MutationObserver for DOM changes const observer = new MutationObserver((mutations) => { let shouldCheck = false; mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === 1) { // Element node // Check for various Clerk modal selectors const clerkSelectors = [ 'cl-modalBackdrop', 'cl-card', 'cl-modalContent', 'cl-signIn-root', 'cl-signUp-root', 'cl-modal' ]; const hasClerkModal = clerkSelectors.some(selector => (node.classList && node.classList.contains(selector)) || (node.querySelector && node.querySelector('.' + selector)) ); if (hasClerkModal) { shouldCheck = true; } } }); } }); if (shouldCheck) { // Clear any existing interval if (modalCheckInterval) clearInterval(modalCheckInterval); // Try multiple times with optimized delays setTimeout(window.addCustomModalElements, 100); setTimeout(window.addCustomModalElements, 300); setTimeout(window.addCustomModalElements, 600); } }); observer.observe(document.body, { childList: true, subtree: true }); // Strategy 2: Periodic check for modal (fallback) - less frequent modalCheckInterval = setInterval(() => { const modal = document.querySelector('.cl-card, .cl-modalContent, .cl-signIn-root, .cl-signUp-root'); if (modal && !modal.querySelector('.custom-passwordless-banner')) { window.addCustomModalElements(); // Clear interval once modal is found and processed clearInterval(modalCheckInterval); } }, 2000); // Strategy 3: Listen for Clerk events if available if (window.Clerk) { window.Clerk.addListener('modal:opened', () => { setTimeout(window.addCustomModalElements, 100); }); }