{% extends "layout.html" %}
{% set title = "Add a passkey" %}
{% block scripts %}<script type="module" src="/_/auth.js"></script>{% endblock %}
{% block content %}
<section class="auth-card">
  {% if invite %}
  <h1>{% if invite.kind == "new_user" %}Welcome, {{ invite.name }}{% else %}Add a passkey{% endif %}</h1>
  <p>{% if invite.kind == "new_user" %}Create a passkey to finish setting up your account (<code>{{ invite.id }}</code>).{% else %}This adds a passkey to <code>{{ invite.user }}</code>.{% endif %}
     This link works once and expires 30 minutes after it was made. To use another device, open this same page there.</p>
  <label class="field">
    <span>Name for this passkey</span>
    <input type="text" id="passkey-name" maxlength="60" placeholder="e.g. Laptop, Phone, YubiKey" autocomplete="off">
  </label>
  <button class="button button--primary" type="button" data-passkey-register data-token="{{ token }}">Create passkey</button>
  {% else %}
  <h1>Link expired</h1>
  <p>This link is invalid, already used or expired. Ask for a new one, or run <code>blog invite</code> on the server.</p>
  {% endif %}
  <p class="auth-status" role="status" aria-live="polite"></p>
</section>
{% endblock %}