{% extends "default.html" %}

{% set active_page = "setting" %}
{% block title %}Admin Authentication{% endblock %}
{% block head %}

  <script src="{{ url_for('static', filename='assets/js/vendors/base64.js') }}"></script>
  <script src="{{ url_for('static', filename='assets/js/vendors/webauthn.js') }}"></script>
{% endblock %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      <h1 class="h2">Admin Authentication Required</h1>
      <p>The next page requires admin-level authentication.</p>
      {% if hardware_required %}
        <div class="alert alert-info d-flex align-items-center" role="alert">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-shield-lock-fill me-2 flex-shrink-0" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 62.5 62.5 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.491-.595l.385-1.99A1.5 1.5 0 0 1 8 5"/>
          </svg>
          <div>
            <strong>Hardware security key required.</strong>
            Only physical keys (e.g. YubiKey) are accepted for admin access. Passkeys and platform authenticators will be rejected.
          </div>
        </div>
      {% else %}
        <p>Please use any registered security key (hardware or passkey) to proceed.</p>
      {% endif %}
      <form id="formVerifyKey" method="post">
        {{ fido_token_form.csrf_token }}
        {{ fido_token_form.sk_assertion(class="form-control", placeholder="") }}
        <div class="text-center mt-3">
          <button id="btnVerifyKey"
                  type="button"
                  class="btn btn-lg btn-danger"
                  onclick="verifyAdminKey();">Use your security key</button>
        </div>
      </form>
      <script>
        async function verifyAdminKey() {
          $("#btnVerifyKey").prop('disabled', true);
          $("#btnVerifyKey").text('Waiting for Security Key...');

          const credentialRequestOptions = transformCredentialRequestOptions(
            JSON.parse('{{webauthn_assertion_options|tojson|safe}}')
          );

          let assertion;
          try {
            assertion = await navigator.credentials.get({
              publicKey: credentialRequestOptions
            });
            if (assertion === null) throw new TypeError('Credential is null');
          } catch (err) {
            toastr.error("An error occurred when trying to verify your key.");
            $("#btnVerifyKey").prop('disabled', false);
            $("#btnVerifyKey").text('Use your security key');
            return console.error("Error when trying to get credential:", err);
          }

          const skAssertion = transformAssertionForServer(assertion);
          $('#sk_assertion').val(JSON.stringify(skAssertion));
          $('#formVerifyKey').submit();
        }

      </script>
    </div>
  </div>
{% endblock %}