Polish ClawWatch preregistration flow

Author: codex

docs/app.js

@@ -6,8 +6,24 @@ const signOutButton = document.getElementById('google-signout-button');
 const statusText = document.getElementById('preregister-status');
 const resultBanner = document.getElementById('preregister-result');
 const preregisterSection = document.getElementById('preregister');
+const preregisterModal = document.getElementById('preregister-modal');
+const preregisterModalClose = document.getElementById('preregister-modal-close');
 
 let supabaseClient = null;
+let hasShownThankYou = false;
+
+function showThankYouModal() {
+  if (!preregisterModal || hasShownThankYou) return;
+  hasShownThankYou = true;
+  preregisterModal.hidden = false;
+  document.body.style.overflow = 'hidden';
+}
+
+function closeThankYouModal() {
+  if (!preregisterModal) return;
+  preregisterModal.hidden = true;
+  document.body.style.overflow = '';
+}
 
 function track(eventName, params = {}) {
   if (typeof window.gtag === 'function') {
@@ -69,13 +85,16 @@ function renderRegistered(user) {
   if (signOutButton) {
     signOutButton.hidden = false;
   }
-  setBanner('Interest saved. We will contact you when the install-ready release opens.', 'success');
+  setBanner("Thank you for your interest! We'll be back when the easy-to-install ClawWatch is here.", 'success');
 }
 
-async function ensureInterest(user) {
+async function ensureInterest(user, { showModal = false } = {}) {
   const metadata = user.user_metadata || {};
   if (metadata.clawwatch_interest_at) {
     renderRegistered(user);
+    if (showModal) {
+      showThankYouModal();
+    }
     return;
   }
 
@@ -104,6 +123,9 @@ async function ensureInterest(user) {
 
   track('clawwatch_preregister_complete');
   renderRegistered(data.user || user);
+  if (showModal) {
+    showThankYouModal();
+  }
   if (window.location.hash === '#preregister') {
     preregisterSection?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
@@ -114,10 +136,11 @@ async function startGoogleSignIn() {
   renderBusy('Redirecting to Google sign-in…');
   track('clawwatch_preregister_start');
 
-  const redirectTo = `${window.location.origin}${window.location.pathname}#preregister`;
-  const { error } = await supabaseClient.auth.signInWithOAuth({
+  const redirectTo = `${window.location.origin}${window.location.pathname}?preregister=complete#preregister`;
+  const { data, error } = await supabaseClient.auth.signInWithOAuth({
     provider: 'google',
     options: {
+      skipBrowserRedirect: true,
       redirectTo,
       queryParams: {
         prompt: 'select_account',
@@ -129,7 +152,34 @@ async function startGoogleSignIn() {
   if (error) {
     renderSignedOut();
     setBanner(error.message, 'error');
+    return;
+  }
+
+  const authUrl = data?.url;
+  if (!authUrl) {
+    renderSignedOut();
+    setBanner('Google sign-in could not be started.', 'error');
+    return;
+  }
+
+  const popup = window.open(authUrl, 'clawwatch-preregister', 'popup=yes,width=520,height=720');
+  if (!popup) {
+    renderSignedOut();
+    setBanner('Please allow popups for ClawWatch sign-in.', 'error');
+    return;
   }
+
+  const poll = window.setInterval(async () => {
+    if (!popup || popup.closed) {
+      window.clearInterval(poll);
+      const { data: sessionData } = await supabaseClient.auth.getSession();
+      if (sessionData.session?.user) {
+        await ensureInterest(sessionData.session.user, { showModal: true });
+      } else {
+        renderSignedOut();
+      }
+    }
+  }, 500);
 }
 
 async function signOut() {
@@ -154,22 +204,51 @@ async function init() {
 
   preregisterButton?.addEventListener('click', startGoogleSignIn);
   signOutButton?.addEventListener('click', signOut);
+  preregisterModalClose?.addEventListener('click', closeThankYouModal);
+  preregisterModal?.addEventListener('click', (event) => {
+    if (event.target?.dataset?.closeModal === 'true') {
+      closeThankYouModal();
+    }
+  });
+
+  window.addEventListener('message', async (event) => {
+    if (event.origin !== window.location.origin) return;
+    if (event.data?.type !== 'clawwatch-preregister-complete') return;
+    const { data: sessionData } = await supabaseClient.auth.getSession();
+    if (sessionData.session?.user) {
+      await ensureInterest(sessionData.session.user, { showModal: true });
+    }
+  });
 
   const { data, error } = await supabaseClient.auth.getSession();
   if (error) {
     setBanner(error.message, 'error');
     return;
   }
 
+  const preregComplete = new URLSearchParams(window.location.search).get('preregister') === 'complete';
+
+  if (preregComplete && window.opener) {
+    window.opener.postMessage({ type: 'clawwatch-preregister-complete' }, window.location.origin);
+  }
+
   if (data.session?.user) {
-    await ensureInterest(data.session.user);
+    await ensureInterest(data.session.user, { showModal: preregComplete });
   } else {
     renderSignedOut();
   }
 
+  if (preregComplete) {
+    const cleanUrl = `${window.location.origin}${window.location.pathname}${window.location.hash || ''}`;
+    window.history.replaceState({}, document.title, cleanUrl);
+    if (window.opener) {
+      window.setTimeout(() => window.close(), 120);
+    }
+  }
+
   supabaseClient.auth.onAuthStateChange(async (event, session) => {
     if (event === 'SIGNED_IN' && session?.user) {
-      await ensureInterest(session.user);
+      await ensureInterest(session.user, { showModal: true });
       return;
     }
 

docs/index.html

@@ -289,6 +289,14 @@ <h2>ClawWatch.app is a ThinkOff.io service</h2>
       <p>© 2026 ThinkOff Ecosystem</p>
     </footer>
   </div>
+  <div id="preregister-modal" class="modal-shell" hidden>
+    <div class="modal-backdrop" data-close-modal="true"></div>
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="preregister-modal-title">
+      <h2 id="preregister-modal-title">Thank you for your interest!</h2>
+      <p>We'll be back when the easy-to-install ClawWatch is here.</p>
+      <button id="preregister-modal-close" class="cta-primary modal-close-button" type="button">Close</button>
+    </div>
+  </div>
   <script type="module" src="/app.js"></script>
 </body>
 </html>

docs/styles.css

@@ -594,6 +594,50 @@ body.clawwatch-body {
   font-size: 0.95rem;
 }
 
+.modal-shell {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(4, 7, 15, 0.72);
+  backdrop-filter: blur(6px);
+}
+
+.modal-card {
+  position: relative;
+  z-index: 1;
+  width: min(92vw, 460px);
+  padding: 28px;
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(14, 18, 30, 0.98), rgba(10, 12, 22, 0.98));
+  border: 1px solid rgba(255,255,255,0.12);
+  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
+  text-align: center;
+}
+
+.modal-card h2 {
+  margin: 0 0 10px;
+  font-size: 1.8rem;
+  letter-spacing: -0.03em;
+}
+
+.modal-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.modal-close-button {
+  margin-top: 20px;
+  width: 100%;
+}
+
 @keyframes heroBreathe {
   0%, 100% { transform: translateY(0) scale(1); }
   50% { transform: translateY(-4px) scale(1.024); }