4fb1cddb4c
This simplifies the loading and cleanup logic, while providing ubiquitous support across JS frameworks. Buttons can now be added in any way imaginable and still work without requiring additional initialization. The upside of this aproach is that it doesn't require a mutation observer nor a global click listener, and is supported by all browsers that also support passkeys.
31 lines
1.1 KiB
Plaintext
31 lines
1.1 KiB
Plaintext
<% @page_title = "Passkeys" %>
|
|
|
|
<% content_for :header do %>
|
|
<div class="header__actions header__actions--start">
|
|
<%= back_link_to "My profile", user_path(Current.user), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
|
|
</div>
|
|
|
|
<h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
|
|
<% end %>
|
|
|
|
<section class="panel panel--wide shadow center">
|
|
<p class="font-weight-medium margin-none-block-start">Passkeys let you sign in securely without a password or email code.</p>
|
|
|
|
<% if @passkeys.any? %>
|
|
<ul class="margin-none-block-start margin-block-end-double unpad">
|
|
<%= render partial: "my/passkeys/passkey", collection: @passkeys %>
|
|
</ul>
|
|
<% end %>
|
|
|
|
<footer>
|
|
<%= passkey_creation_button my_passkeys_path, options: @creation_options, class: "btn btn--link center txt-medium" do %>
|
|
<%= icon_tag "add" %>
|
|
<span>Register a passkey</span>
|
|
<% end %>
|
|
|
|
<p class="txt-small txt-subtle txt-balance margin-none-block-end">
|
|
Your browser will prompt you to create a passkey using your device's biometrics, PIN, or security key
|
|
</p>
|
|
</footer>
|
|
</section>
|