{% extends "base.html" %}

{% block container %}
<div class="row centered-form">
  <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-1 col-md-offset-3">
    <div class="panel panel-default" style="width: 150%">
      
      <div class="panel-heading">
        <h3 class="panel-title">Token Verification</h3>
      </div>
      
      <div class="panel-body">
        <form action="{% url '2fa' %}" method="POST" role="form">
          {% csrf_token %}
          {{ form.non_field_errors }}
          {{ form.token.errors }}

          <div class="row">
            {{ form.token }}
          </div>

          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3">
              <a href="{% url 'token-sms' %}" class="btn btn-info btn-block action-btn">SMS</a>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
              <a href="{% url 'token-voice' %}" class="btn btn-info btn-block action-btn">Voice</a>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
              <a href="{% url 'token-onetouch' %}" class="btn btn-primary btn-block action-btn">Push Notification</a>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
              <input type="submit" value="Verify" class="btn btn-success btn-block">
            </div>
          </div>
        </form>
      </div>
    
    </div>
  </div>
</div>

<script>
  var pollingID = null;

  function initializeActionButtons() {
    $('.action-btn').click(function(ev){
      ev.preventDefault();
      var $button = $(ev.target);
      $.post($button.attr('href'), function(data) {
        console.log(data);
        if ($button.attr('href') === "{% url 'token-onetouch'%}") {
          pollingID = setInterval(oneTouchStatus, 5000);
        }
      }).fail(function(data){
        console.log('Error ', data);
      });
      return false;
    });

    function oneTouchStatus() {
      $.post("{% url 'onetouch-status' %}", function(data) {
        console.log("OneTouch Status: ", data);
        if (data === 'approved') {
          window.location.href = "{% url 'protected' %}";
        }
      }).fail(function(data){
        console.log("OneTouch Polling Status: ", data);
        alert("Something went wrong with the OneTouch polling");
        clearInterval(pollingID);
      });
    }
  }
  $(document).ready(initializeActionButtons);
</script>
{% endblock %}