wasdf

src/components/verifier/SoonHero.astro

@@ -1,4 +1,5 @@
 ---
+import Toast from '../Toast.astro';
 import { localePath, t, type Lang } from '../../i18n/ui';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
@@ -59,7 +60,18 @@ const ridges = Array.from({ length: rows }, (_, r) => {
       <p class="shero__lead">{s.lead}</p>
     </div>
 
-    <form class="signup hud-frame" id="notify" action="/notify" method="post" lang={lang} aria-labelledby="notify-title">
+    <form
+      class="signup hud-frame"
+      id="notify"
+      action="/notify"
+      method="post"
+      lang={lang}
+      aria-labelledby="notify-title"
+      data-notify
+      data-sent={n.status.sent}
+      data-invalid={n.status.invalid}
+      data-failed={n.status.failed}
+    >
       <div class="signup__head">
         <h2 id="notify-title" class="signup__title">{n.title}</h2>
         <p class="signup__body">{n.body}</p>
@@ -79,6 +91,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
         <label for="notify-consent">{n.consent} <a href={localePath(lang, '/privacy')}>{n.privacy}</a></label>
       </div>
       <button class="button signup__submit" type="submit">{n.submit}</button>
+      <noscript><p class="signup__status">{n.noscript}</p></noscript>
     </form>
 
     <!-- Status strip: the menu bar's HUD language, set along the foot of the hero. -->
@@ -92,6 +105,8 @@ const ridges = Array.from({ length: rows }, (_, r) => {
       ))}
     </dl>
   </div>
+
+  <Toast for="notify" labels={n.toast} />
 </section>
 
 <style>
@@ -199,6 +214,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     color: var(--ink-muted);
   }
   .signup__consent input { width: 1.1em; height: 1.1em; margin: 0.15em 0 0; accent-color: var(--paper); }
+  .signup__status { font-size: var(--step-small); line-height: var(--leading-small); }
   .signup__consent a { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }
 
   /* Readout: stacked on small screens, one strip of cells on wide ones. */
@@ -262,3 +278,11 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     .readout__cell--head { place-content: center; text-align: center; }
   }
 </style>
+
+<script>
+  // Sends in place and answers in the toast, like the contact form; see scripts/send-form.ts.
+  // Without scripting the server refuses the post and redirects to /notify/error.
+  import { sendInPlace } from '../../scripts/send-form';
+  const form = document.querySelector<HTMLFormElement>('[data-notify]');
+  if (form) sendInPlace(form);
+</script>