source: Klonkt/src/views/pages/paid-passkey.ejs@ 9a00f28

<section class="pk">
  <div class="pk-card">
    <div class="pk-ic">🔑</div>
    <h1 class="pk-h1"><%= t('ppk.h') %></h1>
    <p class="pk-sub">
      <%= t('ppk.sub') %>
    </p>
    <button type="button" id="pk-go" class="pk-btn"><%= t('ppk.make') %></button>
    <p id="pk-status" class="pk-status" hidden></p>
  </div>
</section>

<script src="/assets/vendor/simplewebauthn-browser.umd.min.js"></script>
<script>
(function () {
  var options = <%- optionsJson %>;
  var blob = "<%= regBlob %>";
  var I = { unsupported: "<%= t('ppk.unsupported') %>", follow: "<%= t('ppk.follow') %>", done: "<%= t('ppk.done') %>", failed: "<%= t('ppk.failed') %>", cancelled: "<%= t('ppk.cancelled') %>", error: "<%= t('pgate.error') %>" };
  var postUrl = "<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase ? siteUrlBase : '') %>/<%= postSlug %>";
  var btn = document.getElementById('pk-go');
  var status = document.getElementById('pk-status');
  function say(msg, err) { status.hidden = false; status.textContent = msg; status.classList.toggle('is-err', !!err); }

  if (!window.SimpleWebAuthnBrowser || !window.PublicKeyCredential) {
    btn.disabled = true;
    say(I.unsupported, true);
    return;
  }
  btn.addEventListener('click', function () {
    btn.disabled = true;
    say(I.follow);
    window.SimpleWebAuthnBrowser.startRegistration({ optionsJSON: options })
      .then(function (response) {
        return fetch('/paid/register', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ response: response, blob: blob }),
        });
      })
      .then(function (r) { return r.json(); })
      .then(function (j) {
        if (j && j.ok) { say(I.done); setTimeout(function () { location.href = postUrl; }, 900); }
        else { btn.disabled = false; say(I.failed.replace('{err}', (j && j.error) || '?'), true); }
      })
      .catch(function (e) { btn.disabled = false; say(e && e.name === 'NotAllowedError' ? I.cancelled : I.error, true); });
  });
})();
</script>

<style>
  .pk { max-width: 480px; margin: 0 auto; padding: 56px 18px; text-align: center; }
  .pk-card { border: 1px solid color-mix(in srgb, var(--ink,#000) 16%, transparent); border-radius: 18px; padding: 34px 26px; }
  .pk-ic { font-size: 40px; margin-bottom: 8px; }
  .pk-h1 { font-size: 24px; margin: 0 0 6px; }
  .pk-sub { opacity: .85; line-height: 1.6; margin: 0 0 20px; }
  .pk-btn { padding: 12px 24px; border: none; border-radius: 10px; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; font: inherit; font-weight: 600; cursor: pointer; }
  .pk-btn:disabled { opacity: .6; cursor: default; }
  .pk-status { margin: 14px 0 0; opacity: .9; }
  .pk-status.is-err { color: #c0392b; }
</style>