Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586{{ define "title" }}Complete signup · Tangled{{ end }}
{{ define "content" }} <form class="mt-4 w-full max-w-lg mx-auto flex flex-col gap-4 group" hx-post="/signup/complete" hx-swap="none" hx-disabled-elt="#complete-signup-button" > <div class="flex flex-col"> <label for="code">Verification code</label> <input type="text" id="code" name="code" tabindex="1" required placeholder="tngl-sh-foo-bar" class="text-lg md:text-base" /> <span class="text-sm text-gray-500 mt-1"> Enter the code sent to your email. </span> </div>
<div class="flex flex-col"> <label for="username">Username</label> <div class="flex items-stretch rounded border border-gray-200 dark:border-gray-600 overflow-hidden focus-within:ring-1 focus-within:ring-blue-500 dark:bg-gray-700 mt-1"> <input type="text" id="username" name="username" tabindex="2" required placeholder="jason" autocapitalize="none" autocorrect="off" class="flex-1 px-2 py-1.5 bg-transparent dark:text-white border-0 focus:outline-none focus:ring-0 min-w-0 text-lg md:text-base" /> <span class="px-2 py-1.5 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-300 select-none whitespace-nowrap border-l border-gray-200 dark:border-gray-600 content-center">{{ const.PdsUserDomain }}</span> </div> <span class="text-sm text-gray-500 mt-1"> Your complete handle will be <code id="handle-preview">user{{ const.PdsUserDomain }}</code>. </span> </div>
<div class="flex flex-col"> <label for="password">Password</label> <input type="password" id="password" name="password" tabindex="3" required class="text-lg md:text-base" /> <span class="text-sm text-gray-500 mt-1"> Choose a strong password for your account. </span> </div>
<button class="btn-create w-full my-2 mt-6 text-base" type="submit" id="complete-signup-button" tabindex="4" > {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} <span class="inline group-[.htmx-request]:hidden">Complete signup</span> </button> </form> <p id="signup-error" class="error w-full"></p> <p id="signup-msg" class="dark:text-white w-full"></p>
<script> (function () { const input = document.getElementById("username"); const preview = document.getElementById("handle-preview"); const domain = "{{ const.PdsUserDomain }}"; input.addEventListener("input", function () { preview.textContent = (input.value || "user") + domain; }); })(); </script>{{ end }}