lewis.moe
Monorepo for Tangled
1{{ define "title" }} complete signup {{ end }}
2
3{{ define "content" }}
4 <form
5 class="mt-4 max-w-sm 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 />
20 <span class="text-sm text-gray-500 mt-1">
21 Enter the code sent to your email.
22 </span>
23 </div>
24
25 <div class="flex flex-col">
26 <label for="username">username</label>
27 <input
28 type="text"
29 id="username"
30 name="username"
31 tabindex="2"
32 required
33 placeholder="jason"
34 />
35 <span class="text-sm text-gray-500 mt-1">
36 Your complete handle will be of the form <code>user.tngl.sh</code>.
37 </span>
38 </div>
39
40 <div class="flex flex-col">
41 <label for="password">password</label>
42 <input
43 type="password"
44 id="password"
45 name="password"
46 tabindex="3"
47 required
48 />
49 <span class="text-sm text-gray-500 mt-1">
50 Choose a strong password for your account.
51 </span>
52 </div>
53
54 <button
55 class="btn-create w-full my-2 mt-6 text-base"
56 type="submit"
57 id="complete-signup-button"
58 tabindex="4"
59 >
60 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
61 <span class="inline group-[.htmx-request]:hidden">complete signup</span>
62 </button>
63 </form>
64 <p id="signup-error" class="error w-full"></p>
65 <p id="signup-msg" class="dark:text-white w-full"></p>
66{{ end }}