Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122{{ define "title" }}Login · Tangled{{ end }}
{{ define "content" }} {{ if .AddAccount }} <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"> <span class="py-1">{{ i "user-plus" "w-4 h-4" }}</span> <div> <h5 class="font-medium">Add another account</h5> <p class="text-sm">Sign in with a different account to add it to your account list.</p> </div> </div> {{ end }}
{{ if .Accounts }} <div class="my-4 border border-gray-200 dark:border-gray-700 rounded overflow-hidden"> <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <span class="text-xs text-gray-500 dark:text-gray-400 tracking-wide font-medium">Saved accounts</span> </div> <div class="divide-y divide-gray-200 dark:divide-gray-700"> {{ range .Accounts }} <div class="flex items-center justify-between px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> <button type="button" hx-post="/account/switch" hx-include="this" hx-swap="none" class="flex items-center gap-2 flex-1 text-left min-w-0" > {{ $returnUrl := (or $.ReturnUrl "/") }} <input type="hidden" name="did" value="{{ .Did }}"> <input type="hidden" name="return_url" value="{{ $returnUrl }}"> {{ template "user/fragments/pic" (list .Did "size-8") }} <div class="flex flex-col min-w-0"> <span class="text-sm font-medium dark:text-white truncate">{{ .Did | resolve | truncateAt30 }}</span> <span class="text-xs text-gray-500 dark:text-gray-400">Click to switch</span> </div> </button> <button type="button" hx-delete="/account/{{ .Did }}" hx-swap="none" class="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 flex-shrink-0 group-has-[.htmx-request]:hidden" title="Remove account" > {{ i "x" "w-4 h-4" }} </button> <span class="hidden group-has-[.htmx-request]:inline p-1 text-gray-400"> {{ i "loader-circle" "size-4 animate-spin" }} </span> </div> {{ end }} </div> </div> {{ end }}
<form class="mt-4 w-full max-w-lg mx-auto group" hx-post="/login" hx-swap="none" hx-disabled-elt="#login-button" > <div class="flex flex-col"> <label for="handle">Handle</label> <input autocapitalize="none" autocorrect="off" autocomplete="username" type="text" id="handle" inputmode="url" name="handle" tabindex="1" required placeholder="akshay.tngl.sh" value="{{ .Handle }}" class="text-lg md:text-base" /> <span class="text-sm text-gray-500 mt-1"> Use your <a href="https://atproto.com">AT Protocol</a> handle to log in. If you're unsure, this is likely your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account. </span> </div> <input type="hidden" name="return_url" value="{{ .ReturnUrl }}">
<button class="btn w-full my-2 mt-6 text-base" type="submit" id="login-button" tabindex="3" > {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} <span class="inline group-[.htmx-request]:hidden">Login</span> </button> </form> {{ if .ErrorCode }} <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"> <span class="py-1">{{ i "circle-alert" "w-4 h-4" }}</span> <div> <h5 class="font-medium">Login error</h5> <p class="text-sm"> {{ if eq .ErrorCode "access_denied" }} You have not authorized the app. {{ else if eq .ErrorCode "session" }} Server failed to create user session. {{ else if eq .ErrorCode "max_accounts" }} You have reached the maximum of 20 linked accounts. Please remove an account before adding a new one. {{ else }} Internal Server error. {{ end }} Please try again. </p> </div> </div> {{ end }} <p class="text-sm text-gray-500"> Don't have an account? <a href="/signup" class="underline">Create an account</a> on Tangled now! </p>
<p id="login-msg" class="error w-full"></p>{{ end }}