Monorepo for Tangled
tangled.org
1{{ define "title" }}Complete signup · Tangled{{ 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 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 <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 />
37 <span class="text-sm text-gray-500 mt-1">
38 Your complete handle will be of the form <code>user.tngl.sh</code>.
39 </span>
40 </div>
41
42 <div class="flex flex-col">
43 <label for="password">Password</label>
44 <input
45 type="password"
46 id="password"
47 name="password"
48 tabindex="3"
49 required
50 class="text-lg md:text-base"
51 />
52 <span class="text-sm text-gray-500 mt-1">
53 Choose a strong password for your account.
54 </span>
55 </div>
56
57 <button
58 class="btn-create w-full my-2 mt-6 text-base"
59 type="submit"
60 id="complete-signup-button"
61 tabindex="4"
62 >
63 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
64 <span class="inline group-[.htmx-request]:hidden">Complete signup</span>
65 </button>
66 </form>
67 <p id="signup-error" class="error w-full"></p>
68 <p id="signup-msg" class="dark:text-white w-full"></p>
69{{ end }}