From e75232641179e5135a37dee13e775a38ba098a71 Mon Sep 17 00:00:00 2001
From: sync-test <dev@traceworks.com>
Date: Fri, 14 Aug 2026 03:58:31 +0530
Subject: [PATCH] feat: wire the coming-soon waitlist form to POST
 /api/waitlist

Backend endpoint already deployed (nxtgauge-backend-rust
apps/users/src/handlers/waitlist.rs, routed through the gateway).

- ingress.yaml: route /api on nxtgauge.com and www.nxtgauge.com to
  nxtgauge-rust-gateway:9100, same 'more specific paths first' pattern
  nxtgauge-frontend-solid's ingress already uses - the coming-soon
  page is a static nginx site with no backend of its own.
- index.html: handleSubmit now actually awaits the fetch instead of
  unconditionally showing success after a commented-out example call.
  Disables the submit button while in flight, added a form-error state
  for a failed request (was previously just documented, not wired).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../base/configmap-html.yaml                  | 36 +++++++++++++------
 apps/nxtgauge-coming-soon/base/ingress.yaml   | 18 ++++++++++
 coming-soon/index.html                        | 36 +++++++++++++------
 3 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/apps/nxtgauge-coming-soon/base/configmap-html.yaml b/apps/nxtgauge-coming-soon/base/configmap-html.yaml
index de9bd8c..7b38799 100644
--- a/apps/nxtgauge-coming-soon/base/configmap-html.yaml
+++ b/apps/nxtgauge-coming-soon/base/configmap-html.yaml
@@ -172,6 +172,11 @@ data:
           font-size: 14px; font-weight: 600; color: #4ade80;
           animation: fadeIn 0.4s ease;
         }
+        .form-error {
+          display: none;
+          font-size: 13px; font-weight: 500; color: #f87171;
+          margin-top: 8px;
+        }
         @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
 
         /* ── Footer ──────────────────────────────────────────────────── */
@@ -247,6 +252,7 @@ data:
         </form>
         <p class="form-note" id="formNote">No spam. We'll only email when we launch.</p>
         <p class="form-success" id="successMsg">✓ You're on the list! We'll reach out when we go live.</p>
+        <p class="form-error" id="errorMsg">Something went wrong. Please try again.</p>
       </main>
 
       <!-- Footer -->
@@ -259,23 +265,31 @@ data:
       </footer>
 
       <script>
-        function handleSubmit(e) {
+        async function handleSubmit(e) {
           e.preventDefault();
           const email = document.getElementById('emailInput').value.trim();
           if (!email) return;
 
-          document.getElementById('notifyForm').style.display = 'none';
-          document.getElementById('formNote').style.display = 'none';
-          document.getElementById('successMsg').style.display = 'block';
+          const submitBtn = document.querySelector('#notifyForm button[type="submit"]');
+          const errorMsg = document.getElementById('errorMsg');
+          errorMsg.style.display = 'none';
+          submitBtn.disabled = true;
 
-          // Wire to your backend — example:
-          // fetch('/api/waitlist', {
-          //   method: 'POST',
-          //   headers: { 'Content-Type': 'application/json' },
-          //   body: JSON.stringify({ email })
-          // });
+          try {
+            const res = await fetch('/api/waitlist', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ email }),
+            });
+            if (!res.ok) throw new Error('Request failed');
 
-          console.log('Waitlist signup:', email);
+            document.getElementById('notifyForm').style.display = 'none';
+            document.getElementById('formNote').style.display = 'none';
+            document.getElementById('successMsg').style.display = 'block';
+          } catch (err) {
+            errorMsg.style.display = 'block';
+            submitBtn.disabled = false;
+          }
         }
       </script>
 
diff --git a/apps/nxtgauge-coming-soon/base/ingress.yaml b/apps/nxtgauge-coming-soon/base/ingress.yaml
index a1b2d33..046c436 100644
--- a/apps/nxtgauge-coming-soon/base/ingress.yaml
+++ b/apps/nxtgauge-coming-soon/base/ingress.yaml
@@ -17,6 +17,17 @@ spec:
     - host: nxtgauge.com
       http:
         paths:
+          # More specific paths must come first — Traefik matches the
+          # longest prefix. /api routes to the Rust gateway directly (the
+          # coming-soon page is a static nginx site with no backend of its
+          # own — see the "Notify Me" waitlist form's fetch('/api/waitlist')).
+          - path: /api
+            pathType: Prefix
+            backend:
+              service:
+                name: nxtgauge-rust-gateway
+                port:
+                  number: 9100
           - path: /
             pathType: Prefix
             backend:
@@ -27,6 +38,13 @@ spec:
     - host: www.nxtgauge.com
       http:
         paths:
+          - path: /api
+            pathType: Prefix
+            backend:
+              service:
+                name: nxtgauge-rust-gateway
+                port:
+                  number: 9100
           - path: /
             pathType: Prefix
             backend:
diff --git a/coming-soon/index.html b/coming-soon/index.html
index 46ad1bd..edef559 100644
--- a/coming-soon/index.html
+++ b/coming-soon/index.html
@@ -169,6 +169,11 @@
       font-size: 14px; font-weight: 600; color: #4ade80;
       animation: fadeIn 0.4s ease;
     }
+    .form-error {
+      display: none;
+      font-size: 13px; font-weight: 500; color: #f87171;
+      margin-top: 8px;
+    }
     @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
 
     /* ── Footer ──────────────────────────────────────────────────── */
@@ -244,6 +249,7 @@
     </form>
     <p class="form-note" id="formNote">No spam. We'll only email when we launch.</p>
     <p class="form-success" id="successMsg">✓ You're on the list! We'll reach out when we go live.</p>
+    <p class="form-error" id="errorMsg">Something went wrong. Please try again.</p>
   </main>
 
   <!-- Footer -->
@@ -256,23 +262,31 @@
   </footer>
 
   <script>
-    function handleSubmit(e) {
+    async function handleSubmit(e) {
       e.preventDefault();
       const email = document.getElementById('emailInput').value.trim();
       if (!email) return;
 
-      document.getElementById('notifyForm').style.display = 'none';
-      document.getElementById('formNote').style.display = 'none';
-      document.getElementById('successMsg').style.display = 'block';
+      const submitBtn = document.querySelector('#notifyForm button[type="submit"]');
+      const errorMsg = document.getElementById('errorMsg');
+      errorMsg.style.display = 'none';
+      submitBtn.disabled = true;
 
-      // Wire to your backend — example:
-      // fetch('/api/waitlist', {
-      //   method: 'POST',
-      //   headers: { 'Content-Type': 'application/json' },
-      //   body: JSON.stringify({ email })
-      // });
+      try {
+        const res = await fetch('/api/waitlist', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        });
+        if (!res.ok) throw new Error('Request failed');
 
-      console.log('Waitlist signup:', email);
+        document.getElementById('notifyForm').style.display = 'none';
+        document.getElementById('formNote').style.display = 'none';
+        document.getElementById('successMsg').style.display = 'block';
+      } catch (err) {
+        errorMsg.style.display = 'block';
+        submitBtn.disabled = false;
+      }
     }
   </script>