alice.pds.demo.boltless.dev
This repository has no description
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>
author
oppiliappan
committer
Tangled
date
(Jul 21, 2026, 10:57 AM +0300)
commit
49023336
4902333687b5069d37120cf9f05c223cd0294582
parent
91cfc400
91cfc4000af8154c4a331828b1864f6c4224c59c
change-id
szumoptm
szumoptmwzmpsrqxlyolnrpvpxqzxxnz
+30
-14
+1
-1
appview/pages/templates/layouts/loginbase.html
+1
-1
appview/pages/templates/layouts/loginbase.html
+27
-11
appview/pages/templates/user/completeSignup.html
+27
-11
appview/pages/templates/user/completeSignup.html
···
2
2
3
3
{{ define "content" }}
4
4
<form
5
-
class="mt-4 max-w-sm mx-auto flex flex-col gap-4 group"
5
+
class="mt-4 w-full max-w-lg mx-auto flex flex-col gap-4 group"
6
6
hx-post="/signup/complete"
7
7
hx-swap="none"
8
8
hx-disabled-elt="#complete-signup-button"
···
25
25
26
26
<div class="flex flex-col">
27
27
<label for="username">Username</label>
28
-
<input
29
-
type="text"
30
-
id="username"
31
-
name="username"
32
-
tabindex="2"
33
-
required
34
-
placeholder="jason"
35
-
class="text-lg md:text-base"
36
-
/>
28
+
<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">
29
+
<input
30
+
type="text"
31
+
id="username"
32
+
name="username"
33
+
tabindex="2"
34
+
required
35
+
placeholder="jason"
36
+
autocapitalize="none"
37
+
autocorrect="off"
38
+
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"
39
+
/>
40
+
<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>
41
+
</div>
37
42
<span class="text-sm text-gray-500 mt-1">
38
-
Your complete handle will be of the form <code>user.tngl.sh</code>.
43
+
Your complete handle will be <code id="handle-preview">user{{ const.PdsUserDomain }}</code>.
39
44
</span>
40
45
</div>
41
46
···
66
71
</form>
67
72
<p id="signup-error" class="error w-full"></p>
68
73
<p id="signup-msg" class="dark:text-white w-full"></p>
74
+
75
+
<script>
76
+
(function () {
77
+
const input = document.getElementById("username");
78
+
const preview = document.getElementById("handle-preview");
79
+
const domain = "{{ const.PdsUserDomain }}";
80
+
input.addEventListener("input", function () {
81
+
preview.textContent = (input.value || "user") + domain;
82
+
});
83
+
})();
84
+
</script>
69
85
{{ end }}
+2
-2
appview/pages/templates/user/signup.html
+2
-2
appview/pages/templates/user/signup.html
···
6
6
7
7
{{ define "content" }}
8
8
<form
9
-
class="mt-4 max-w-sm mx-auto group"
9
+
class="mt-4 w-full max-w-lg mx-auto group"
10
10
hx-post="/signup"
11
11
hx-swap="none"
12
12
hx-disabled-elt="#signup-button"
···
32
32
<div class="w-full mt-4 text-center">
33
33
<div class="cf-turnstile" data-sitekey="{{ .CloudflareSiteKey }}" data-size="flexible"></div>
34
34
</div>
35
-
<button class="btn text-base w-full my-2 mt-6" type="submit" id="signup-button" tabindex="7" >
35
+
<button class="btn text-base w-full my-2" type="submit" id="signup-button" tabindex="7" >
36
36
{{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
37
37
<span class="inline group-[.htmx-request]:hidden">Join now</span>
38
38
</button>