83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
{#
|
|
"hidden" is used to include both login and register forms in main.html while only showing either/or
|
|
#}
|
|
|
|
<div id="login-form" class="login-register" {{ "hidden" if hidden }}>
|
|
<form
|
|
data-loading-disable
|
|
hx-trigger="submit throttle:1s"
|
|
hx-post="/auth/login/webauthn/options">
|
|
<fieldset>
|
|
<label for="webauthn-login">Who is going to login?</label>
|
|
<input type="text" id="webauthn-login" name="login"
|
|
autocomplete="webauthn"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
required>
|
|
<small>You will be asked for your passkey.</small>
|
|
</fieldset>
|
|
<fieldset>
|
|
<button type="submit" id="authenticate">Login</button>
|
|
</fieldset>
|
|
<hr>
|
|
<section>
|
|
❔ <a href="" class="no-text-decoration" hx-on:click="event.preventDefault();document.getElementById('auth-options').toggleAttribute('hidden')">Other authentication options</a>
|
|
<div id="auth-options" hidden>
|
|
<hr>
|
|
<p>Use an alternative authentication method:</p>
|
|
<ol>
|
|
<li>
|
|
<a href="#" class="no-text-decoration" id="token-authentication"
|
|
hx-post="/auth/login/request/start"
|
|
hx-target="#body-main"
|
|
hx-swap="innerHTML">
|
|
Send a login request to this user, if logged in
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="no-text-decoration"
|
|
_="on click
|
|
halt the event
|
|
set value of #token-login to value of #webauthn-login
|
|
take @hidden from <form/> in #login-form for closest <form/>
|
|
end">Use a terminal to confirm a generated token
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
<form
|
|
data-loading-disable
|
|
hx-trigger="submit throttle:1s"
|
|
hx-target="#login-form"
|
|
hx-post="/auth/login/token" hidden>
|
|
<fieldset>
|
|
<label for="token-login">Who is going to login?</label>
|
|
<input type="text" id="token-login" name="login"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
required>
|
|
</fieldset>
|
|
<button type="submit">
|
|
Start authentication
|
|
</button>
|
|
<p>
|
|
A token will be generated and needs to be validated via command line:
|
|
<code class="pointer" hx-on:click="!window.s?s=this.textContent:null;navigator.clipboard.writeText(s);this.textContent='Copied';setTimeout(()=>{this.textContent=s}, 1000)">./ctrl -t</code>
|
|
</p>
|
|
<hr>
|
|
<p>
|
|
<a href="#"
|
|
_="on click
|
|
halt the event
|
|
set value of #webauthn-login to value of #token-login
|
|
take @hidden from <form/> in #login-form for closest <form/>
|
|
end">↩ Back to <mark>passkey</mark> authentication
|
|
</a>
|
|
</p>
|
|
</form>
|
|
</div>
|