kot.pink
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 name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta property="og:title" content="login · tangled" />
8 <meta property="og:url" content="https://tangled.org/login" />
9 <meta property="og:description" content="login to for tangled" />
10 <script src="/static/htmx.min.js"></script>
11 <link rel="manifest" href="/pwa-manifest.json" />
12 <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
13 <title>login · tangled</title>
14 </head>
15 <body class="flex items-center justify-center min-h-screen">
16 <main class="max-w-md px-7 mt-4">
17 <h1 class="flex place-content-center text-3xl font-semibold italic dark:text-white" >
18 {{ template "fragments/logotype" }}
19 </h1>
20 <h2 class="text-center text-xl italic dark:text-white">
21 tightly-knit social coding.
22 </h2>
23 <form
24 class="mt-4"
25 hx-post="/login"
26 hx-swap="none"
27 hx-disabled-elt="#login-button"
28 >
29 <div class="flex flex-col">
30 <label for="handle">handle</label>
31 <input
32 autocapitalize="none"
33 autocorrect="off"
34 autocomplete="username"
35 type="text"
36 id="handle"
37 name="handle"
38 tabindex="1"
39 required
40 placeholder="akshay.tngl.sh"
41 />
42 <span class="text-sm text-gray-500 mt-1">
43 Use your <a href="https://atproto.com">AT Protocol</a>
44 handle to log in. If you're unsure, this is likely
45 your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
46 </span>
47 </div>
48 <input type="hidden" name="return_url" value="{{ .ReturnUrl }}">
49
50 <button
51 class="btn w-full my-2 mt-6 text-base "
52 type="submit"
53 id="login-button"
54 tabindex="3"
55 >
56 <span>login</span>
57 </button>
58 </form>
59 {{ if .ErrorCode }}
60 <div class="flex gap-2 my-2 bg-red-50 dark:bg-red-900 border border-red-500 rounded drop-shadow-sm px-3 py-2 text-red-500 dark:text-red-300">
61 <span class="py-1">{{ i "circle-alert" "w-4 h-4" }}</span>
62 <div>
63 <h5 class="font-medium">Login error</h5>
64 <p class="text-sm">
65 {{ if eq .ErrorCode "access_denied" }}
66 You have not authorized the app.
67 {{ else if eq .ErrorCode "session" }}
68 Server failed to create user session.
69 {{ else }}
70 Internal Server error.
71 {{ end }}
72 Please try again.
73 </p>
74 </div>
75 </div>
76 {{ end }}
77 <p class="text-sm text-gray-500">
78 Don't have an account? <a href="/signup" class="underline">Create an account</a> on Tangled now!
79 </p>
80
81 <p id="login-msg" class="error w-full"></p>
82 </main>
83 </body>
84 </html>
85{{ end }}