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
|
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"
|
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
|
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
|
WebAuthn, a **"Log in with a passkey"** button sits below the form, past a
|
||||||
[Passkeys](#passkeys)) — that one *does* sign the caller in directly, no email
|
divider (see [Passkeys](#passkeys)) — that one *does* sign the caller in
|
||||||
round trip.
|
directly, no email round trip.
|
||||||
|
|
||||||
- `/verify-email?token=…` is the target for every magic link (sign-in and
|
- `/verify-email?token=…` is the target for every magic link (sign-in and
|
||||||
email-change confirmation both). `VerifyEmailView` POSTs the token via
|
email-change confirmation both). `VerifyEmailView` POSTs the token via
|
||||||
|
|||||||
@@ -55,15 +55,6 @@ async function onPasskeyLogin() {
|
|||||||
<section class="card">
|
<section class="card">
|
||||||
<h1>Log in</h1>
|
<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">
|
<p class="muted">
|
||||||
Enter your email and we'll send you a link to sign in — no password
|
Enter your email and we'll send you a link to sign in — no password
|
||||||
needed. New here? The same link creates your account.
|
needed. New here? The same link creates your account.
|
||||||
@@ -93,5 +84,14 @@ async function onPasskeyLogin() {
|
|||||||
{{ submitting ? 'Sending…' : 'Send sign-in link' }}
|
{{ submitting ? 'Sending…' : 'Send sign-in link' }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</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>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user