Collect watch details for ClawWatch preregistration

Author: codex

docs/app.js

@@ -8,6 +8,8 @@ const resultBanner = document.getElementById('preregister-result');
 const preregisterSection = document.getElementById('preregister');
 const preregisterModal = document.getElementById('preregister-modal');
 const preregisterModalClose = document.getElementById('preregister-modal-close');
+const watchModelInputs = Array.from(document.querySelectorAll('input[name="watch-model"]'));
+const feedbackInput = document.getElementById('preregister-feedback');
 
 let supabaseClient = null;
 let hasShownThankYou = false;
@@ -45,6 +47,24 @@ function clearBanner() {
   delete resultBanner.dataset.tone;
 }
 
+function getFormState() {
+  return {
+    watchModels: watchModelInputs.filter((input) => input.checked).map((input) => input.value),
+    feedback: feedbackInput?.value.trim() || ''
+  };
+}
+
+function applyFormState(metadata = {}) {
+  const selected = Array.isArray(metadata.clawwatch_watch_models) ? metadata.clawwatch_watch_models : [];
+  const selectedSet = new Set(selected);
+  watchModelInputs.forEach((input) => {
+    input.checked = selectedSet.has(input.value);
+  });
+  if (feedbackInput) {
+    feedbackInput.value = typeof metadata.clawwatch_feedback === 'string' ? metadata.clawwatch_feedback : '';
+  }
+}
+
 function renderSignedOut() {
   clearBanner();
   if (statusText) {
@@ -76,36 +96,41 @@ function renderBusy(message) {
 function renderRegistered(user) {
   const email = user.email || 'your Google account';
   if (statusText) {
-    statusText.textContent = `You are registered for ClawWatch install updates as ${email}.`;
+    statusText.textContent = `You are registered for ClawWatch install updates as ${email}. You can update your watch details below any time.`;
   }
   if (preregisterButton) {
-    preregisterButton.disabled = true;
-    preregisterButton.innerHTML = '<span class="google-mark">✓</span><span>You are on the list</span>';
+    preregisterButton.disabled = false;
+    preregisterButton.innerHTML = '<span class="google-mark">✓</span><span>Update my interest details</span>';
   }
   if (signOutButton) {
     signOutButton.hidden = false;
   }
   setBanner("Thank you for your interest! We'll be back when the easy-to-install ClawWatch is here.", 'success');
 }
 
-async function ensureInterest(user, { showModal = false } = {}) {
+async function ensureInterest(user, { showModal = false, forceUpdate = false } = {}) {
   const metadata = user.user_metadata || {};
-  if (metadata.clawwatch_interest_at) {
+  if (metadata.clawwatch_interest_at && !forceUpdate) {
+    applyFormState(metadata);
     renderRegistered(user);
     if (showModal) {
       showThankYouModal();
     }
     return;
   }
 
-  renderBusy('Saving your ClawWatch preregistration…');
+  const { watchModels, feedback } = getFormState();
+  renderBusy(metadata.clawwatch_interest_at ? 'Updating your ClawWatch details…' : 'Saving your ClawWatch preregistration…');
 
   const { data, error } = await supabaseClient.auth.updateUser({
     data: {
       clawwatch_interest: true,
-      clawwatch_interest_at: new Date().toISOString(),
+      clawwatch_interest_at: metadata.clawwatch_interest_at || new Date().toISOString(),
       clawwatch_interest_source: window.location.host,
-      clawwatch_interest_status: 'preregistered'
+      clawwatch_interest_status: 'preregistered',
+      clawwatch_watch_models: watchModels,
+      clawwatch_has_watch: watchModels.length > 0 && !watchModels.includes('no-watch-yet'),
+      clawwatch_feedback: feedback
     }
   });
 
@@ -122,6 +147,7 @@ async function ensureInterest(user, { showModal = false } = {}) {
   }
 
   track('clawwatch_preregister_complete');
+  applyFormState(data.user?.user_metadata || metadata);
   renderRegistered(data.user || user);
   if (showModal) {
     showThankYouModal();
@@ -182,6 +208,15 @@ async function startGoogleSignIn() {
   }, 500);
 }
 
+async function handlePreregisterAction() {
+  const { data } = await supabaseClient.auth.getSession();
+  if (data.session?.user) {
+    await ensureInterest(data.session.user, { showModal: true, forceUpdate: true });
+    return;
+  }
+  await startGoogleSignIn();
+}
+
 async function signOut() {
   const { error } = await supabaseClient.auth.signOut();
   if (error) {
@@ -202,7 +237,7 @@ async function init() {
     }
   });
 
-  preregisterButton?.addEventListener('click', startGoogleSignIn);
+  preregisterButton?.addEventListener('click', handlePreregisterAction);
   signOutButton?.addEventListener('click', signOut);
   preregisterModalClose?.addEventListener('click', closeThankYouModal);
   preregisterModal?.addEventListener('click', (event) => {
@@ -233,6 +268,7 @@ async function init() {
   }
 
   if (data.session?.user) {
+    applyFormState(data.session.user.user_metadata || {});
     await ensureInterest(data.session.user, { showModal: preregComplete });
   } else {
     renderSignedOut();
@@ -248,6 +284,7 @@ async function init() {
 
   supabaseClient.auth.onAuthStateChange(async (event, session) => {
     if (event === 'SIGNED_IN' && session?.user) {
+      applyFormState(session.user.user_metadata || {});
       await ensureInterest(session.user, { showModal: true });
       return;
     }

docs/index.html

@@ -142,6 +142,19 @@ <h2>Signal that you want one-tap ClawWatch installs</h2>
             <h3>Open source now. Install-button version next.</h3>
             <p>ClawWatch is already real and open source, but getting it onto a fresh watch still means compiling the app and using developer mode.</p>
             <p>We are building the version every watch owner can install with a button. Tap below to signal your interest and we will let you know when it is ready.</p>
+            <div class="preregister-form">
+              <fieldset class="preregister-fieldset">
+                <legend>Do you already have a watch? Select all that apply.</legend>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="galaxy-watch"> <span>Galaxy Watch</span></label>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="pixel-watch"> <span>Pixel Watch</span></label>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="apple-watch"> <span>Apple Watch</span></label>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="garmin"> <span>Garmin</span></label>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="other-wear-os"> <span>Other Wear OS watch</span></label>
+                <label class="preregister-check"><input type="checkbox" name="watch-model" value="no-watch-yet"> <span>No watch yet</span></label>
+              </fieldset>
+              <label class="preregister-feedback-label" for="preregister-feedback">Anything you want from ClawWatch?</label>
+              <textarea id="preregister-feedback" class="preregister-feedback" rows="4" placeholder="Tell us what watch you have, what you want to do with ClawWatch, or any feedback for the install-ready version."></textarea>
+            </div>
             <p id="preregister-status" class="preregister-status">
               Sign in with Google and we will mark your account for the future install-ready ClawWatch release.
             </p>

docs/styles.css

@@ -457,6 +457,60 @@ body.clawwatch-body {
   line-height: 1.75;
 }
 
+.preregister-form {
+  display: grid;
+  gap: 16px;
+  margin: 20px 0 18px;
+}
+
+.preregister-fieldset {
+  margin: 0;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(255,255,255,0.1);
+  background: rgba(255,255,255,0.03);
+}
+
+.preregister-fieldset legend,
+.preregister-feedback-label {
+  color: #eef4ff;
+  font-weight: 700;
+  font-size: 0.98rem;
+}
+
+.preregister-fieldset legend {
+  padding: 0 8px;
+}
+
+.preregister-check {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  color: var(--muted);
+}
+
+.preregister-check input {
+  accent-color: #f28c1b;
+}
+
+.preregister-feedback {
+  width: 100%;
+  min-height: 110px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(255,255,255,0.12);
+  background: rgba(255,255,255,0.04);
+  color: var(--text);
+  font: inherit;
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.preregister-feedback::placeholder {
+  color: rgba(162, 172, 192, 0.78);
+}
+
 .preregister-points {
   display: flex;
   flex-wrap: wrap;