{% extends "base.html" %}
{% load static %}
{% block head %}
    <style>
    #two-factor-steps {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 15px;
}
    .row{
        margin: 0px;
    }
    </style>
    <script src="{% static 'mfa/js/u2f-api.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function addToken() {
                data=JSON.parse('{{ token|safe }}')
                console.log(data)
                u2f.register(data.appId,data.registerRequests,data.registeredKeys,function (response) {
                    $.ajax({
                        "url":"{% url 'bind_u2f' %}",method:"POST",
                        data:{"csrfmiddlewaretoken":"{{ csrf_token }}","response":JSON.stringify(response)},
                        success:function (data) {
                            if (data == "OK")
                            {
                                alert("Your device is added successfully.")
                                window.location.href="{{ redirect_html }}"
                            }
                        }
                    })
                },5000)
            })

    </script>
{% endblock %}
{% block content %}
      <br/>
    <br/>
    <div class="container">
        <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
            <div class="row" align="center">
                <h4>Adding Security Key</h4>
            </div>
    <div class="row">
    <p style="color: green">Your secure Key should be flashing now, please press on button.</p>

    </div>
        </div>
    </div>
    {% include "modal.html" %}
{% endblock %}