login.templ
1package pages
2
3templ Login(e string) {
4 @Layout() {
5 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
6 <div id="form" class="flex flex-col p-10 md:p-50 md:max-w-1/2 mx-auto">
7 <form class="space-y-4 md:space-y-6" hx-encoding="multipart/form-data" hx-post="/login" hx-swap="outerHTML" hx-target="#form">
8 <div>
9 <label
10 for="user"
11 class="block text-sm font-medium mb-2"
12 >
13 Email or Handle
14 </label>
15 <input
16 type="text"
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 for="password" class="block mb-2 text-sm font-medium">
26 Password
27 </label>
28 <input
29 type="password"
30 name="password"
31 id="password"
32 autoCapitalize="off"
33 autoComplete="off"
34 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"
35 />
36 </div>
37 <button
38 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"
39 type="submit"
40 >
41 Login
42 </button>
43 if e != "" {
44 <div class="bg-red-300 text-[var(--color-red)] px-4 py-2 rounded-sm">{ e } </div>
45 }
46 <div>
47 Don't have an account?
48 <a
49 role="button"
50 class="text-[var(--color-blue)] cursor-pointer underline decoration-dotted"
51 href="/signup"
52 >
53 Sign up
54 </a>
55 </div>
56 </form>
57 </div>
58 }
59}
