{% extends 'base.html' %}

{% block content %}
<div class="reg-container">
  <form action="{% url 'accounts:verify_webauthn' %}" method="POST">{% csrf_token %}
    <input type="hidden" id="token_response" name="token_response">
    <h1 class="reg-title">MFA - Security key</h1>
    <p class="my-3" id="message">When you are ready to authenticate, press the button below.</p>
    <p id="footer" class="my-3">
      <a id="start" class="reg-btn-primary">Use security key</a>
      <a id="message_retry" class="reg-btn-primary" style="display:none;">Retry</a>
    </p>
  </form>
  {% for link, anchor_text in form.get_alternative_verification_links %}
  <p class="mb-3"><a href="{{ link }}">{{ anchor_text }}</a></p>
  {% endfor %}
</div>
{% endblock %}

{% block extrajs %}
{% if webauthn_challenge  %}
{{ webauthn_challenge|json_script:"webauthn-challenge" }}
<script nonce="{{ request.csp_nonce }}">
  function ab2str(buf) {
    return btoa(String.fromCharCode.apply(null, new Uint8Array(buf))).replace(/\//g, '_').replace(/\+/g, '-').replace(/=*$/, '');
  }

  function str2ab(enc) {
    var str = atob(enc.replace(/_/g, '/').replace(/-/g, '+'));
    var buf = new ArrayBuffer(str.length);
    var bufView = new Uint8Array(buf);
    for (var i=0, strLen=str.length; i < strLen; i++) {
      bufView[i] = str.charCodeAt(i);
    }
    return buf;
  }

  function getRequest() {
    var request = JSON.parse(document.getElementById("webauthn-challenge").textContent);
    request.challenge = str2ab(request.challenge);
    for (var i = 0; i < request.allowCredentials.length; i++) {
      request.allowCredentials[i].id = str2ab(request.allowCredentials[i].id);
    }
    return request;
  }

  function show_message (message, retry) {
    $("#footer").toggle(retry);
    $("#start").toggle(!retry);
    $("#message_retry").toggle(retry);
    $("#message").text(message);
  }

  function sign () {
    show_message("Waiting for security key…", false);
    navigator.credentials.get({
      publicKey: getRequest()
    }).then((credential) => {
      var r = credential.response;
      var data = {
        id: ab2str(credential.rawId),
        rawId: ab2str(credential.rawId),
        response: {
          authenticatorData: ab2str(r.authenticatorData),
          clientDataJSON: ab2str(r.clientDataJSON),
          signature: ab2str(r.signature),
          userHandle: ab2str(r.userHandle)
        },
        type: credential.type,
        authenticatorAttachment: credential.authenticatorAttachment
      };
      show_message("OK", false);
      document.getElementById('token_response').value = JSON.stringify(data);
      document.forms[0].submit();
    }, (reason) => {
      show_message("Authentication error: " + reason, true);
    });
  }

  $(document).ready(function(){
    var request = getRequest();
    if (request.allowCredentials.length > 0) {
      $("#start").click(function (event) {
        $(this).parent().hide();
        sign();
      });
      $("#message_retry").click(function (event) {
        event.preventDefault();
        sign();
      });
    }
  });
</script>
{% endif %}
{% endblock %}