From 476fe39f50a61a85317ffbbeb2fb96ee07832a8d Mon Sep 17 00:00:00 2001
From: Joe Carstairs <me@joeac.net>
Date: Thu, 18 Dec 2025 10:59:46 +0000
Subject: define OtpDialog

---
 website/src/components/OtpDialog.astro | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 website/src/components/OtpDialog.astro

(limited to 'website/src/components/OtpDialog.astro')

diff --git a/website/src/components/OtpDialog.astro b/website/src/components/OtpDialog.astro
new file mode 100644
index 0000000..1fd5fe9
--- /dev/null
+++ b/website/src/components/OtpDialog.astro
@@ -0,0 +1,31 @@
+---
+---
+
+<script src="../scripts/otp-form-wc.ts"></script>
+<link rel="stylesheet" href="/css/otp.css" />
+
+<dialog class="otp-dialog">
+  <otp-form>
+    <form class="otp-form" class="otp-form">
+      <p>
+        I've sent a six-digit code to <span class="otp-recipient">your email address</span>.
+        Let me know what it is, so I can confirm this really is your email address. The
+        code will be valid <span class="otp-valid-until">for five minutes</span>.
+      </p>
+
+      <p hidden class="error"/>
+
+      <div class="otp-inputs">
+        <input maxlength="1" name="1" required autocapitalize="characters" autocomplete="one-time-code" aria-label="First digit of one-time passcode" autofocus>
+        <input maxlength="1" name="2" required autocapitalize="characters" autocomplete="one-time-code" aria-label="Second digit of one-time passcode">
+        <input maxlength="1" name="3" required autocapitalize="characters" autocomplete="one-time-code" aria-label="Third digit of one-time passcode">
+        <input maxlength="1" name="4" required autocapitalize="characters" autocomplete="one-time-code" aria-label="Fourth digit of one-time passcode">
+        <input maxlength="1" name="5" required autocapitalize="characters" autocomplete="one-time-code" aria-label="Fifth digit of one-time passcode">
+        <input maxlength="1" name="6" required autocapitalize="characters" autocomplete="one-time-code" aria-label="Sixth digit of one-time passcode">
+      </div>
+
+      <input type="submit" value="Verify">
+      <button disabled class="resend-button">Resend (60s)</button>
+    </form>
+  </otp-form>
+</dialog>
-- 
cgit v1.2.3