signup.templ
1package pages
2
3templ Signup(e string) {
4 @Layout() {
5 <div id="form" class="flex flex-col p-10 md:p-50 md:max-w-2/3 mx-auto">
6 <form class="space-y-4 md:space-y-6" hx-encoding="multipart/form-data" hx-post="/signup" hx-swap="outerHTML" hx-target="#form">
7 <div>
8 <label
9 for="user"
10 class="block text-sm font-medium"
11 >
12 Email
13 </label>
14 <div class="italic text-gray-600 text-sm mb-2">Email is not required but you won't be able to reset your password without it.</div>
15 <input
16 type="email"
17 name="user"
18 id="user"
19 autoCapitalize="off"
20 autoComplete="off"
21 class="bg-white border border-gray-300 text-gray-900 rounded-lg focus:ring-(--color-orange) focus:border-(--color-orange) block w-full p-2.5"
22 />
23 </div>
24 <div>
25 <label
26 for="handle"
27 class="block text-sm font-medium"
28 >
29 Handle
30 </label>
31 <div class="italic text-gray-600 text-sm mb-2">
32 <span>Your handle will appear on your public routes. You can change it later but it must be unique. Allowed characters: </span>
33 <span class="not-italic font-mono">A-Z a-z 0-9 . _ @ - [] ! </span>
34 <span>and at least 3 letters long.</span>
35 </div>
36 <input
37 type="text"
38 name="handle"
39 id="handle"
40 autoCapitalize="off"
41 autoComplete="off"
42 class="bg-white border border-gray-300 text-gray-900 rounded-lg focus:ring-(--color-orange) focus:border-(--color-orange) block w-full p-2.5"
43 />
44 </div>
45 <div>
46 <label for="password" class="block mb-2 text-sm font-medium">
47 Password
48 </label>
49 <input
50 type="password"
51 name="password"
52 id="password"
53 autoCapitalize="off"
54 autoComplete="off"
55 class="bg-white border border-gray-300 text-gray-900 rounded-lg focus:ring-(--color-orange) focus:border-(--color-orange) block w-full p-2.5"
56 />
57 </div>
58 <button
59 class="w-full text-white bg-[var(--color-orange)] focus:ring-4 focus:outline-none focus:ring-[var(--color-blue)] font-medium rounded-lg text-sm px-5 py-2.5"
60 type="submit"
61 >
62 Sign up
63 </button>
64 if e != "" {
65 <div class="bg-red-300 text-[var(--color-red)] px-4 py-2 rounded-sm">{ e } </div>
66 }
67 <div>
68 Already have an account?
69 <a
70 role="button"
71 class="text-[var(--color-blue)] cursor-pointer underline decoration-dotted"
72 href="/login"
73 >
74 Log in
75 </a>
76 </div>
77 </form>
78 </div>
79 @HTMX()
80 }
81}
