alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}Complete signup · Tangled{{ end }}
2
3{{ define "content" }}
4 <form
5 class="mt-4 w-full max-w-lg mx-auto flex flex-col gap-4 group"
6 hx-post="/signup/complete"
7 hx-swap="none"
8 hx-disabled-elt="#complete-signup-button"
9 >
10 <div class="flex flex-col">
11 <label for="code">Verification code</label>
12 <input
13 type="text"
14 id="code"
15 name="code"
16 tabindex="1"
17 required
18 placeholder="tngl-sh-foo-bar"
19 class="text-lg md:text-base"
20 />
21 <span class="text-sm text-gray-500 mt-1">
22 Enter the code sent to your email.
23 </span>
24 </div>
25
26 <div class="flex flex-col">
27 <label for="username">Username</label>
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>
42 <span class="text-sm text-gray-500 mt-1">
43 Your complete handle will be <code id="handle-preview">user{{ const.PdsUserDomain }}</code>.
44 </span>
45 </div>
46
47 <div class="flex flex-col">
48 <label for="password">Password</label>
49 <input
50 type="password"
51 id="password"
52 name="password"
53 tabindex="3"
54 required
55 class="text-lg md:text-base"
56 />
57 <span class="text-sm text-gray-500 mt-1">
58 Choose a strong password for your account.
59 </span>
60 </div>
61
62 <button
63 class="btn-create w-full my-2 mt-6 text-base"
64 type="submit"
65 id="complete-signup-button"
66 tabindex="4"
67 >
68 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
69 <span class="inline group-[.htmx-request]:hidden">Complete signup</span>
70 </button>
71 </form>
72 <p id="signup-error" class="error w-full"></p>
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>
85{{ end }}