Move passkey login below the email sign-in form
The divider now sits between the email form and the passkey button, rather than between the passkey button and the form. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+3
-3
@@ -117,9 +117,9 @@ There is no password and no separate sign-up — `LoginView` is an email field
|
||||
and a "Send sign-in link" button (`POST /api/auth/magic-link`), for a new
|
||||
address or a returning one alike. On success it shows a "check your email"
|
||||
message; it does not sign the caller in itself. If the browser supports
|
||||
WebAuthn, a **"Log in with a passkey"** button sits above the form (see
|
||||
[Passkeys](#passkeys)) — that one *does* sign the caller in directly, no email
|
||||
round trip.
|
||||
WebAuthn, a **"Log in with a passkey"** button sits below the form, past a
|
||||
divider (see [Passkeys](#passkeys)) — that one *does* sign the caller in
|
||||
directly, no email round trip.
|
||||
|
||||
- `/verify-email?token=…` is the target for every magic link (sign-in and
|
||||
email-change confirmation both). `VerifyEmailView` POSTs the token via
|
||||
|
||||
@@ -55,15 +55,6 @@ async function onPasskeyLogin() {
|
||||
<section class="card">
|
||||
<h1>Log in</h1>
|
||||
|
||||
<template v-if="passkeySupported">
|
||||
<button type="button" class="btn-primary" :disabled="passkeySubmitting" @click="onPasskeyLogin">
|
||||
{{ passkeySubmitting ? 'Waiting for your passkey…' : 'Log in with a passkey' }}
|
||||
</button>
|
||||
<p v-if="passkeyError" class="form-error">{{ passkeyError }}</p>
|
||||
|
||||
<div class="divider"><span>or</span></div>
|
||||
</template>
|
||||
|
||||
<p class="muted">
|
||||
Enter your email and we'll send you a link to sign in — no password
|
||||
needed. New here? The same link creates your account.
|
||||
@@ -93,5 +84,14 @@ async function onPasskeyLogin() {
|
||||
{{ submitting ? 'Sending…' : 'Send sign-in link' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<template v-if="passkeySupported">
|
||||
<div class="divider"><span>or</span></div>
|
||||
|
||||
<button type="button" class="btn-primary" :disabled="passkeySubmitting" @click="onPasskeyLogin">
|
||||
{{ passkeySubmitting ? 'Waiting for your passkey…' : 'Log in with a passkey' }}
|
||||
</button>
|
||||
<p v-if="passkeyError" class="form-error">{{ passkeyError }}</p>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user