{% extends "kleides_mfa/device_create_form.html" %}

{% load i18n static %}

{% block extra_js %}{{ block.super }}
<script src="{% static 'js/base64url-arraybuffer.js' %}"></script>
<script src="{% static 'js/cbor.js' %}"></script>
<script type="text/javascript">
jQuery(function ($) {
    var try_again_button = $('<button class="btn btn-primary" type="button"/>')
        .text('{{ _('Try again')|escapejs }}')
        .on('click', register_start)
        .wrap('<div/>');
    try_again_button.parent().appendTo('#kleides-mfa-form');

    function register_start() {
        try_again_button.hide();
        fetch('{% url "otp_u2f:register" %}', {
            method: 'POST',
            headers: {'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()}
        }).then(function (response) {
            if (response.ok) return response.text();
            throw new Error('Failed to get registration challenge');
        }).then(B64_AB.decode).then(CBOR.decode).then(function (options) {
            return navigator.credentials.create(options);
        }).then(function (attestation) {
            var form = document.getElementById('kleides-mfa-form');
            form.otp_token.value = B64_AB.encode(CBOR.encode({
              'attestationObject': new Uint8Array(attestation.response.attestationObject),
              'clientDataJSON': new Uint8Array(attestation.response.clientDataJSON)
            }));
            form.submit();
        }).catch(function (error) {
            $('#u2f-registration-error').show();
            try_again_button.show();
            console.debug(error);
        });
    }

    if (!window.PublicKeyCredential) {
        $('#u2f-support-warning').toggle(true);
    } else if ($('#kleides-mfa-form').find('.alert').length > 0) {
        try_again_button.show();
    } else {
        register_start();
    }
});
</script>
{% endblock extra_js %}

{% block form_description %}
<div id='u2f-registration-error' class='alert alert-danger' style='display: none;'>
{% trans 'Unable to register U2F device. Reload the page to try again.' %}
</div>
<div id='u2f-timeout' class='alert alert-danger' style='display: none;'>
{% trans 'Timeout while waiting for U2F response. Reload the page to try again.' %}
</div>

<div id='u2f-already-registered' class='alert alert-warning' style='display: none;'>
{% trans 'This U2F device is already registered for this account.' %}
</div>

<div id='u2f-support-warning' style='display: none;'>
<div class='alert alert-danger'>
{% trans 'You must be using a compatible browser to use a U2F security key.' %}
</div>
<p>
{% blocktrans %}
The following browsers currently support the use of web authentication security keys:
<ul>
<li>Firefox, version 60 and later.</li>
<li>Chrome, version 67 and later.</li>
<li>Edge, version 18 and later.</li>
<li>Opera, version 54 and later.</li>
<li>Safari, version 13 and later.</li>
</ul>
{% endblocktrans %}
</p>
</div>

<p>
{% trans 'Connect your U2F device and press the button to add it to your account.' %}
</p>
{% endblock form_description %}