From 3a7b694c83bbb9926a251081e97b92ba3fbb0c25 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Sun, 19 Jul 2026 10:34:13 +0100
Subject: [PATCH] appview/signup: improve copy in signup form

- the username field now explicity has a `.tngl.sh` suffix to indicate
  the provisioned user handle
- an autoupdating hint below the handle field that shows the user their
  full handle `Your handle will be <input>.tngl.sh`

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../pages/templates/layouts/loginbase.html    |  2 +-
 .../pages/templates/user/completeSignup.html  | 38 +++++++++++++------
 appview/pages/templates/user/signup.html      |  4 +-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/appview/pages/templates/layouts/loginbase.html b/appview/pages/templates/layouts/loginbase.html
index 70a14200..f7666aff 100644
--- a/appview/pages/templates/layouts/loginbase.html
+++ b/appview/pages/templates/layouts/loginbase.html
@@ -1,6 +1,6 @@
 {{ define "mainLayout" }}
   <div class="w-full h-screen flex items-center justify-center bg-white dark:bg-transparent">
-    <main class="max-w-md px-7 mt-4">
+    <main id="main" class="w-full max-w-md px-7 mt-4">
       {{ template "logo" }}
       {{ block "content" . }}{{ end }}
     </main>
diff --git a/appview/pages/templates/user/completeSignup.html b/appview/pages/templates/user/completeSignup.html
index 978faa2c..ac83fe61 100644
--- a/appview/pages/templates/user/completeSignup.html
+++ b/appview/pages/templates/user/completeSignup.html
@@ -2,7 +2,7 @@
 
 {{ define "content" }}
   <form
-      class="mt-4 max-w-sm mx-auto flex flex-col gap-4 group"
+      class="mt-4 w-full max-w-lg mx-auto flex flex-col gap-4 group"
       hx-post="/signup/complete"
       hx-swap="none"
       hx-disabled-elt="#complete-signup-button"
@@ -25,17 +25,22 @@
 
       <div class="flex flex-col">
           <label for="username">Username</label>
-          <input
-              type="text"
-              id="username"
-              name="username"
-              tabindex="2"
-              required
-              placeholder="jason"
-              class="text-lg md:text-base"
-          />
+          <div class="flex items-stretch rounded border border-gray-200 dark:border-gray-600 overflow-hidden focus-within:ring-1 focus-within:ring-blue-500 dark:bg-gray-700 mt-1">
+              <input
+                  type="text"
+                  id="username"
+                  name="username"
+                  tabindex="2"
+                  required
+                  placeholder="jason"
+                  autocapitalize="none"
+                  autocorrect="off"
+                  class="flex-1 px-2 py-1.5 bg-transparent dark:text-white border-0 focus:outline-none focus:ring-0 min-w-0 text-lg md:text-base"
+              />
+              <span class="px-2 py-1.5 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-300 select-none whitespace-nowrap border-l border-gray-200 dark:border-gray-600 content-center">{{ const.PdsUserDomain }}</span>
+          </div>
           <span class="text-sm text-gray-500 mt-1">
-              Your complete handle will be of the form <code>user.tngl.sh</code>.
+              Your complete handle will be <code id="handle-preview">user{{ const.PdsUserDomain }}</code>.
           </span>
       </div>
 
@@ -66,4 +71,15 @@
   </form>
   <p id="signup-error" class="error w-full"></p>
   <p id="signup-msg" class="dark:text-white w-full"></p>
+
+  <script>
+    (function () {
+      const input = document.getElementById("username");
+      const preview = document.getElementById("handle-preview");
+      const domain = "{{ const.PdsUserDomain }}";
+      input.addEventListener("input", function () {
+        preview.textContent = (input.value || "user") + domain;
+      });
+    })();
+  </script>
 {{ end }}
diff --git a/appview/pages/templates/user/signup.html b/appview/pages/templates/user/signup.html
index f2e8ca1f..722d1e71 100644
--- a/appview/pages/templates/user/signup.html
+++ b/appview/pages/templates/user/signup.html
@@ -6,7 +6,7 @@
 
 {{ define "content" }}
   <form
-      class="mt-4 max-w-sm mx-auto group"
+      class="mt-4 w-full max-w-lg mx-auto group"
       hx-post="/signup"
       hx-swap="none"
       hx-disabled-elt="#signup-button"
@@ -32,7 +32,7 @@
     <div class="w-full mt-4 text-center">
       <div class="cf-turnstile" data-sitekey="{{ .CloudflareSiteKey }}" data-size="flexible"></div>
     </div>
-    <button class="btn text-base w-full my-2 mt-6" type="submit" id="signup-button" tabindex="7" >
+    <button class="btn text-base w-full my-2" type="submit" id="signup-button" tabindex="7" >
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
       <span class="inline group-[.htmx-request]:hidden">Join now</span>
     </button>
-- 
2.51.2