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 rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
12 <title>login</title>
13 </head>
14 <body class="flex items-center justify-center min-h-screen">
15 <main class="max-w-7xl px-6 -mt-4">
16 <h1 class="text-center text-2xl font-semibold italic dark:text-white">
17 tangled
18 </h1>
19 <h2 class="text-center text-xl italic dark:text-white">
20 tightly-knit social coding.
21 </h2>
22 <form
23 class="w-full mt-4"
24 hx-post="/login"
25 hx-swap="none"
26 hx-disabled-elt="this"
27 >
28 <div class="flex flex-col">
29 <label for="handle">handle</label>
30 <input
31 type="text"
32 id="handle"
33 name="handle"
34 tabindex="1"
35 required
36 />
37 <span class="text-xs text-gray-500 mt-1">
38 You need to use your
39 <a href="https://bsky.app">Bluesky</a> handle to log
40 in.
41 </span>
42 </div>
43
44 <div class="flex flex-col mt-2">
45 <label for="app_password">app password</label>
46 <input
47 type="password"
48 id="app_password"
49 name="app_password"
50 tabindex="2"
51 required
52 />
53 <span class="text-xs text-gray-500 mt-1">
54 Generate an app password
55 <a
56 href="https://bsky.app/settings/app-passwords"
57 target="_blank"
58 >here</a
59 >.
60 </span>
61 </div>
62
63 <button
64 class="btn w-full my-2 mt-6"
65 type="submit"
66 id="login-button"
67 tabindex="3"
68 >
69 <span>login</span>
70 </button>
71 </form>
72 <p class="text-sm text-gray-500">
73 Join our <a href="https://chat.tangled.sh">Discord</a> or IRC channel:
74 <a href="https://web.libera.chat/#tangled"
75 ><code>#tangled</code> on Libera Chat</a
76 >.
77 </p>
78 <p id="login-msg" class="error w-full"></p>
79 </main>
80 </body>
81 </html>
82{{ end }}