We use them together in the same way in all pages, so it makes sense to combine them into a single component.
54 lines
2.5 KiB
Plaintext
54 lines
2.5 KiB
Plaintext
<% @page_title = "Setup Security Key" %>
|
|
|
|
<%== render("components/page_header", locals: { title: "My Account" }) %>
|
|
|
|
<main>
|
|
<div class="max-w-screen-xl pb-6 lg:pb-16">
|
|
<div class="overflow-hidden rounded-lg bg-white shadow">
|
|
<div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-x lg:divide-y-0">
|
|
<%== render("account/submenu") %>
|
|
<div class="divide-y divide-gray-200 lg:col-span-8 xl:col-span-9 2xl:col-span-10 pb-10">
|
|
<div class="px-4 py-6 sm:p-6 lg:pb-8 space-y-4">
|
|
<h2 class="text-lg font-medium leading-6 text-gray-900">Setup Security Key</h2>
|
|
<form
|
|
action="/<%= rodauth.webauthn_setup_route %>"
|
|
role="form"
|
|
method="POST"
|
|
id="webauthn-setup-form"
|
|
data-credential-options="<%= (cred = rodauth.new_webauthn_credential).as_json.to_json %>"
|
|
>
|
|
<%== rodauth.webauthn_setup_additional_form_tags %>
|
|
<%== rodauth.csrf_tag("/" + rodauth.webauthn_setup_route) %>
|
|
<%== render("components/form/hidden", locals: { name: rodauth.webauthn_setup_challenge_param, value: cred.challenge }) %>
|
|
<%== render(
|
|
"components/form/hidden",
|
|
locals: {
|
|
name: rodauth.webauthn_setup_challenge_hmac_param,
|
|
value: rodauth.compute_hmac(cred.challenge)
|
|
}
|
|
) %>
|
|
<input id="webauthn-setup" class="hidden" type="text" name="<%= rodauth.webauthn_setup_param %>" value="" hidden/>
|
|
<div class="mt-6 grid grid-cols-6 gap-6">
|
|
<div class="col-span-6 sm:col-span-3 xl:col-span-2">
|
|
<%== render("components/form/text", locals: { name: "name", label: "Key Name", attributes: { required: true } }) %>
|
|
</div>
|
|
<% if rodauth.two_factor_modifications_require_password? %>
|
|
<div class="col-span-6 sm:col-span-3 xl:col-span-2">
|
|
<%== render("components/rodauth/password_field") %>
|
|
</div>
|
|
<% end %>
|
|
<div class="col-span-6">
|
|
<div id="webauthn-setup-button">
|
|
<%== render("components/form/submit_button", locals: { text: rodauth.webauthn_setup_button }) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="<%= "#{rodauth.webauthn_js_host}#{rodauth.webauthn_setup_js_path}" %>"></script>
|