foxwitch.net
1{{ define "user/login" }}
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 <script src="/static/htmx.min.js"></script>
11 <link
12 rel="stylesheet"
13 href="/static/tw.css?{{ cssContentHash }}"
14 type="text/css"
15 />
16 <title>login</title>
17 </head>
18 <body class="flex items-center justify-center min-h-screen">
19 <main class="max-w-md px-6 -mt-4">
20 <h1
21 class="text-center text-2xl font-semibold italic dark:text-white"
22 >
23 tangled
24 </h1>
25 <h2 class="text-center text-xl italic dark:text-white">
26 tightly-knit social coding.
27 </h2>
28 <form
29 class="mt-4 max-w-sm mx-auto"
30 hx-post="/login"
31 hx-swap="none"
32 hx-disabled-elt="#login-button"
33 >
34 <div class="flex flex-col">
35 <label for="handle">handle</label>
36 <input
37 type="text"
38 id="handle"
39 name="handle"
40 tabindex="1"
41 required
42 />
43 <span class="text-sm text-gray-500 mt-1">
44 Use your
45 <a href="https://bsky.app">Bluesky</a> handle to log
46 in. You will then be redirected to your PDS to
47 complete authentication.
48 </span>
49 </div>
50
51 <button
52 class="btn w-full my-2 mt-6"
53 type="submit"
54 id="login-button"
55 tabindex="3"
56 >
57 <span>login</span>
58 </button>
59 </form>
60 <p class="text-sm text-gray-500">
61 Join our <a href="https://chat.tangled.sh">Discord</a> or
62 IRC channel:
63 <a href="https://web.libera.chat/#tangled"
64 ><code>#tangled</code> on Libera Chat</a
65 >.
66 </p>
67 <p id="login-msg" class="error w-full"></p>
68 </main>
69 </body>
70 </html>
71{{ end }}