lewis.moe
Monorepo for Tangled
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
24 {{ if .AddAccount }}
25 <div class="flex gap-2 my-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-300 dark:border-sky-800 rounded px-3 py-2 text-blue-600 dark:text-blue-300">
26 <span class="py-1">{{ i "user-plus" "w-4 h-4" }}</span>
27 <div>
28 <h5 class="font-medium">Add another account</h5>
29 <p class="text-sm">Sign in with a different account to add it to your account list.</p>
30 </div>
31 </div>
32 {{ end }}
33
34 {{ if and .LoggedInUser .LoggedInUser.Accounts }}
35 {{ $accounts := .LoggedInUser.Accounts }}
36 {{ if $accounts }}
37 <div class="my-4 border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
38 <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
39 <span class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide font-medium">Saved accounts</span>
40 </div>
41 <div class="divide-y divide-gray-200 dark:divide-gray-700">
42 {{ range $accounts }}
43 <div class="flex items-center justify-between px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
44 <button
45 type="button"
46 hx-post="/account/switch"
47 hx-vals='{"did": "{{ .Did }}"}'
48 hx-swap="none"
49 class="flex items-center gap-2 flex-1 text-left min-w-0"
50 >
51 <img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full h-8 w-8 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
52 <div class="flex flex-col min-w-0">
53 <span class="text-sm font-medium dark:text-white truncate">{{ .Did | resolve | truncateAt30 }}</span>
54 <span class="text-xs text-gray-500 dark:text-gray-400">Click to switch</span>
55 </div>
56 </button>
57 <button
58 type="button"
59 hx-delete="/account/{{ .Did }}"
60 hx-swap="none"
61 class="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 flex-shrink-0"
62 title="Remove account"
63 >
64 {{ i "x" "w-4 h-4" }}
65 </button>
66 </div>
67 {{ end }}
68 </div>
69 </div>
70 {{ end }}
71 {{ end }}
72
73 <form
74 class="mt-4"
75 hx-post="/login"
76 hx-swap="none"
77 hx-disabled-elt="#login-button"
78 >
79 <div class="flex flex-col">
80 <label for="handle">handle</label>
81 <input
82 autocapitalize="none"
83 autocorrect="off"
84 autocomplete="username"
85 type="text"
86 id="handle"
87 name="handle"
88 tabindex="1"
89 required
90 placeholder="akshay.tngl.sh"
91 />
92 <span class="text-sm text-gray-500 mt-1">
93 Use your <a href="https://atproto.com">AT Protocol</a>
94 handle to log in. If you're unsure, this is likely
95 your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
96 </span>
97 </div>
98 <input type="hidden" name="return_url" value="{{ .ReturnUrl }}">
99 <input type="hidden" name="add_account" value="{{ if .AddAccount }}true{{ end }}">
100
101 <button
102 class="btn w-full my-2 mt-6 text-base "
103 type="submit"
104 id="login-button"
105 tabindex="3"
106 >
107 <span>login</span>
108 </button>
109 </form>
110 {{ if .ErrorCode }}
111 <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">
112 <span class="py-1">{{ i "circle-alert" "w-4 h-4" }}</span>
113 <div>
114 <h5 class="font-medium">Login error</h5>
115 <p class="text-sm">
116 {{ if eq .ErrorCode "access_denied" }}
117 You have not authorized the app.
118 {{ else if eq .ErrorCode "session" }}
119 Server failed to create user session.
120 {{ else if eq .ErrorCode "max_accounts" }}
121 You have reached the maximum of 20 linked accounts. Please remove an account before adding a new one.
122 {{ else }}
123 Internal Server error.
124 {{ end }}
125 Please try again.
126 </p>
127 </div>
128 </div>
129 {{ end }}
130 <p class="text-sm text-gray-500">
131 Don't have an account? <a href="/signup" class="underline">Create an account</a> on Tangled now!
132 </p>
133
134 <p id="login-msg" class="error w-full"></p>
135 </main>
136 </body>
137 </html>
138{{ end }}