this repo has no description
tangled.org
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 <meta
11 property="og:title"
12 content="login · tangled"
13 />
14 <meta
15 property="og:url"
16 content="https://tangled.sh/login"
17 />
18 <meta
19 property="og:description"
20 content="login to or sign up for tangled"
21 />
22 <script src="/static/htmx.min.js"></script>
23 <link
24 rel="stylesheet"
25 href="/static/tw.css?{{ cssContentHash }}"
26 type="text/css"
27 />
28 <title>login or sign up · tangled</title>
29 </head>
30 <body class="flex items-center justify-center min-h-screen">
31 <main class="max-w-md px-6 -mt-4">
32 <h1
33 class="text-center text-2xl font-semibold italic dark:text-white"
34 >
35 tangled
36 </h1>
37 <h2 class="text-center text-xl italic dark:text-white">
38 tightly-knit social coding.
39 </h2>
40 <form
41 class="mt-4 max-w-sm mx-auto"
42 hx-post="/login"
43 hx-swap="none"
44 hx-disabled-elt="#login-button"
45 >
46 <div class="flex flex-col">
47 <label for="handle">handle</label>
48 <input
49 type="text"
50 id="handle"
51 name="handle"
52 tabindex="1"
53 required
54 placeholder="foo.tngl.sh"
55 />
56 <span class="text-sm text-gray-500 mt-1">
57 Use your <a href="https://atproto.com">ATProto</a>
58 handle to log in. If you're unsure, this is likely
59 your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
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 <hr class="my-4">
73 <p class="text-sm text-gray-500 mt-4">
74 Alternatively, you may create an account on Tangled below. You will
75 get a <code>user.tngl.sh</code> handle.
76 </p>
77
78 <details class="group">
79
80 <summary
81 class="btn cursor-pointer w-full mt-4 flex items-center justify-center gap-2"
82 >
83 create an account
84
85 <div class="group-open:hidden flex">{{ i "arrow-right" "w-4 h-4" }}</div>
86 <div class="hidden group-open:flex">{{ i "arrow-down" "w-4 h-4" }}</div>
87 </summary>
88 <form
89 class="mt-4 max-w-sm mx-auto"
90 hx-post="/signup"
91 hx-swap="none"
92 hx-disabled-elt="#signup-button"
93 >
94 <div class="flex flex-col mt-2">
95 <label for="email">email</label>
96 <input
97 type="email"
98 id="email"
99 name="email"
100 tabindex="4"
101 required
102 placeholder="jason@bourne.co"
103 />
104 </div>
105 <span class="text-sm text-gray-500 mt-1">
106 You will receive an email with a code. Enter that, along with your
107 desired username and password in the next page to complete your registration.
108 </span>
109 <button
110 class="btn w-full my-2 mt-6"
111 type="submit"
112 id="signup-button"
113 tabindex="7"
114 >
115 <span>sign up</span>
116 </button>
117 </form>
118 </details>
119 <p class="text-sm text-gray-500 mt-6">
120 Join our <a href="https://chat.tangled.sh">Discord</a> or
121 IRC channel:
122 <a href="https://web.libera.chat/#tangled"
123 ><code>#tangled</code> on Libera Chat</a
124 >.
125 </p>
126 <p id="login-msg" class="error w-full"></p>
127 </main>
128 </body>
129 </html>
130{{ end }}