kot.pink
1{{ define "user/completeSignup" }}
2 <!doctype html>
3 <html lang="en" class="dark:bg-gray-900">
4 <head>
5 <meta charset="UTF-8" />
6 <meta
7 name="viewport"
8 content="width=device-width, initial-scale=1.0"
9 />
10 <meta
11 property="og:title"
12 content="complete signup · tangled"
13 />
14 <meta
15 property="og:url"
16 content="https://tangled.org/complete-signup"
17 />
18 <meta
19 property="og:description"
20 content="complete your signup for tangled"
21 />
22 <script src="/static/htmx.min.js"></script>
23 <link rel="manifest" href="/pwa-manifest.json" />
24 <link
25 rel="stylesheet"
26 href="/static/tw.css?{{ cssContentHash }}"
27 type="text/css"
28 />
29 <title>complete signup · tangled</title>
30 </head>
31 <body class="flex items-center justify-center min-h-screen">
32 <main class="max-w-md px-6 -mt-4">
33 <h1 class="flex place-content-center text-2xl font-semibold italic dark:text-white" >
34 {{ template "fragments/logotype" }}
35 </h1>
36 <h2 class="text-center text-xl italic dark:text-white">
37 tightly-knit social coding.
38 </h2>
39 <form
40 class="mt-4 max-w-sm mx-auto flex flex-col gap-4"
41 hx-post="/signup/complete"
42 hx-swap="none"
43 hx-disabled-elt="#complete-signup-button"
44 >
45 <div class="flex flex-col">
46 <label for="code">verification code</label>
47 <input
48 type="text"
49 id="code"
50 name="code"
51 tabindex="1"
52 required
53 placeholder="tngl-sh-foo-bar"
54 />
55 <span class="text-sm text-gray-500 mt-1">
56 Enter the code sent to your email.
57 </span>
58 </div>
59
60 <div class="flex flex-col">
61 <label for="username">username</label>
62 <input
63 type="text"
64 id="username"
65 name="username"
66 tabindex="2"
67 required
68 placeholder="jason"
69 />
70 <span class="text-sm text-gray-500 mt-1">
71 Your complete handle will be of the form <code>user.tngl.sh</code>.
72 </span>
73 </div>
74
75 <div class="flex flex-col">
76 <label for="password">password</label>
77 <input
78 type="password"
79 id="password"
80 name="password"
81 tabindex="3"
82 required
83 />
84 <span class="text-sm text-gray-500 mt-1">
85 Choose a strong password for your account.
86 </span>
87 </div>
88
89 <button
90 class="btn-create w-full my-2 mt-6 text-base"
91 type="submit"
92 id="complete-signup-button"
93 tabindex="4"
94 >
95 <span>complete signup</span>
96 </button>
97 </form>
98 <p id="signup-error" class="error w-full"></p>
99 <p id="signup-msg" class="dark:text-white w-full"></p>
100 </main>
101 </body>
102 </html>
103{{ end }}