alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}Login · Tangled{{ end }}
2
3{{ define "content" }}
4 {{ if .AddAccount }}
5 <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">
6 <span class="py-1">{{ i "user-plus" "w-4 h-4" }}</span>
7 <div>
8 <h5 class="font-medium">Add another account</h5>
9 <p class="text-sm">Sign in with a different account to add it to your account list.</p>
10 </div>
11 </div>
12 {{ end }}
13
14 {{ if .Accounts }}
15 <div class="my-4 border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
16 <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
17 <span class="text-xs text-gray-500 dark:text-gray-400 tracking-wide font-medium">Saved accounts</span>
18 </div>
19 <div class="divide-y divide-gray-200 dark:divide-gray-700">
20 {{ range .Accounts }}
21 <div class="flex items-center justify-between px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 group">
22 <button
23 type="button"
24 hx-post="/account/switch"
25 hx-include="this"
26 hx-swap="none"
27 class="flex items-center gap-2 flex-1 text-left min-w-0"
28 >
29 {{ $returnUrl := (or $.ReturnUrl "/") }}
30 <input type="hidden" name="did" value="{{ .Did }}">
31 <input type="hidden" name="return_url" value="{{ $returnUrl }}">
32 {{ template "user/fragments/pic" (list .Did "size-8") }}
33 <div class="flex flex-col min-w-0">
34 <span class="text-sm font-medium dark:text-white truncate">{{ .Did | resolve | truncateAt30 }}</span>
35 <span class="text-xs text-gray-500 dark:text-gray-400">Click to switch</span>
36 </div>
37 </button>
38 <button
39 type="button"
40 hx-delete="/account/{{ .Did }}"
41 hx-swap="none"
42 class="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 flex-shrink-0 group-has-[.htmx-request]:hidden"
43 title="Remove account"
44 >
45 {{ i "x" "w-4 h-4" }}
46 </button>
47 <span class="hidden group-has-[.htmx-request]:inline p-1 text-gray-400">
48 {{ i "loader-circle" "size-4 animate-spin" }}
49 </span>
50 </div>
51 {{ end }}
52 </div>
53 </div>
54 {{ end }}
55
56 <form
57 class="mt-4 group"
58 hx-post="/login"
59 hx-swap="none"
60 hx-disabled-elt="#login-button"
61 >
62 <div class="flex flex-col">
63 <label for="handle">Handle</label>
64 <input
65 autocapitalize="none"
66 autocorrect="off"
67 autocomplete="username"
68 type="text"
69 id="handle"
70 inputmode="url"
71 name="handle"
72 tabindex="1"
73 required
74 placeholder="akshay.tngl.sh"
75 class="text-lg md:text-base"
76 />
77 <span class="text-sm text-gray-500 mt-1">
78 Use your <a href="https://atproto.com">AT Protocol</a>
79 handle to log in. If you're unsure, this is likely
80 your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
81 </span>
82 </div>
83 <input type="hidden" name="return_url" value="{{ .ReturnUrl }}">
84
85 <button
86 class="btn w-full my-2 mt-6 text-base"
87 type="submit"
88 id="login-button"
89 tabindex="3"
90 >
91 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
92 <span class="inline group-[.htmx-request]:hidden">Login</span>
93 </button>
94 </form>
95 {{ if .ErrorCode }}
96 <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">
97 <span class="py-1">{{ i "circle-alert" "w-4 h-4" }}</span>
98 <div>
99 <h5 class="font-medium">Login error</h5>
100 <p class="text-sm">
101 {{ if eq .ErrorCode "access_denied" }}
102 You have not authorized the app.
103 {{ else if eq .ErrorCode "session" }}
104 Server failed to create user session.
105 {{ else if eq .ErrorCode "max_accounts" }}
106 You have reached the maximum of 20 linked accounts. Please remove an account before adding a new one.
107 {{ else }}
108 Internal Server error.
109 {{ end }}
110 Please try again.
111 </p>
112 </div>
113 </div>
114 {{ end }}
115 <p class="text-sm text-gray-500">
116 Don't have an account? <a href="/signup" class="underline">Create an account</a> on Tangled now!
117 </p>
118
119 <p id="login-msg" class="error w-full"></p>
120{{ end }}