c5898bd9a4
When a user has both passkeys and TOTP configured, auto-trigger the passkey flow on login to save them from the password→TOTP path. Also add a "Use Passkey Instead" button on the TOTP verification page as an escape hatch for users who end up there. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
3.7 KiB
Plaintext
87 lines
3.7 KiB
Plaintext
<div class="mx-auto max-w-md">
|
|
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900">Two-Factor Authentication</h2>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
Enter the 6-digit code from your authenticator app to complete sign in.
|
|
</p>
|
|
</div>
|
|
|
|
<%= form_with url: totp_verification_path, method: :post, class: "space-y-6", data: {
|
|
controller: "form-submit-protection",
|
|
turbo: false
|
|
} do |form| %>
|
|
<%= hidden_field_tag :rd, params[:rd] if params[:rd].present? %>
|
|
<div>
|
|
<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700" %>
|
|
<%= text_field_tag :code,
|
|
nil,
|
|
placeholder: "000000",
|
|
maxlength: 8,
|
|
required: true,
|
|
autofocus: true,
|
|
autocomplete: "off",
|
|
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono sm:text-sm" %>
|
|
<p class="mt-2 text-xs text-gray-500">
|
|
Enter your 6-digit authenticator code or an 8-character backup code
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.submit "Verify",
|
|
data: { form_submit_protection_target: "submit" },
|
|
class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @user_has_webauthn %>
|
|
<div data-controller="webauthn" data-webauthn-check-url-value="/webauthn/check">
|
|
<input type="hidden" name="webauthn_email" value="<%= @pending_email %>">
|
|
<div class="mt-4">
|
|
<div class="relative my-4">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-white text-gray-500">Or</span>
|
|
</div>
|
|
</div>
|
|
<button type="button"
|
|
data-action="click->webauthn#authenticate"
|
|
class="w-full rounded-md px-3.5 py-2.5 bg-green-600 hover:bg-green-500 text-white font-medium cursor-pointer flex items-center justify-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
</svg>
|
|
Use Passkey Instead
|
|
</button>
|
|
<div data-webauthn-target="error" class="mt-2 text-sm text-red-600" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mt-6">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-white text-gray-500">Need help?</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Lost access to your authenticator?
|
|
</p>
|
|
<p class="mt-1 text-xs text-gray-500">
|
|
Contact an administrator for assistance.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<%= link_to "Cancel and sign in again", signin_path, class: "text-sm text-blue-600 hover:text-blue-500" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|