Form Accessibility and UX
Open index.html
and make sure your login form looks like:
<form id="formLogin" onsubmit="Auth.login(event)">
<fieldset>
<label for="login_email">E-mail</label>
<input placeholder="email" id="login_email"
required autocomplete="webauthn username">
<section hidden id="login_section_password">
<label for="login_password">Password</label>
<input type="password" id="login_password"
autocomplete="webauthn current-password">
</section>
<section hidden id="login_section_webauthn">
<a href="#" class="navlink" onclick="Auth.webAuthnLogin(); event.preventDefault">Log in with your Authenticator</a>
</section>
</fieldset>
<button>Continue</button>
<p>
<a href="/register" class="navlink">Register a new account instead</a>
</p>
</form>
Also, the registration form like:
<form id="formRegister" onsubmit="Auth.register(event)">
<fieldset>
<label for="register_name">Name</label>
<input placeholder="Name" id="register_name"
required autocomplete="name">
<label for="register_email">E-mail (your username)</label>
<input placeholder="Email" id="register_email"
required type="email" autocomplete="username">
<label for="register_password">Your Password</label>
<input type="password" id="register_password"
required autocomplete="new-password">
</fieldset>
<button>Register Account</button>
</form>