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