{% extends "base" %}

{% block content %}

<script src="/static/js/qrcode.min.js"></script>

<section id="contact" class="">
  <div class="container">
    <header>
      <h2>Add A Peer</h2>
    </header>
    <p class="peer-text">Use this form to generate a new peer configuration and keys.</p>
    <p class="peer-text">When you're ready, use the below config to setup a new VPN connection from your device.</p>
    <p class="peer-text">Input a name and an IP address for this peer to use within the server's network:<br><strong>{% if state.network %}{{ state.network }}{% else %}not defined{% endif %}</strong></p>
    <br><p>Refresh the page to get new keys generated.</p>
    <form id="peer-form" action="/save-peer-config" method="post">
      <input type="text" name="name" id="input-name" placeholder="Enter a name for the peer">
      <input type="text" name="ipaddr" id="input-ipaddr" placeholder="Enter an IP address for the peer">
    </form>
    <br>
    <pre id="peer-config" class="code"></pre>
    <div id="qrcode"></div>
    <div id="command-result"></div>
    <button type="submit" id="save-peer">Save Peer</button>
  </div>
</section>

<script type="text/javascript">
var input_peer_name = document.getElementById('input-name');
var input_ip_address = document.getElementById('input-ipaddr');
var peer_config_element = document.getElementById('peer-config');
var qr_code_element = document.getElementById('qrcode');
var button_save_peer = document.getElementById('save-peer');
var text_command_result = document.getElementById('command-result');
var current_text = input_ip_address.value;
var qr_code = new QRCode(qr_code_element, {
    text: get_templated(current_text),
    colorDark : "#7d2220",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
var timeout = null;

function get_templated(ip_addr){
  var peer_config = `[Interface]
PrivateKey = {{ privkey }}
Address = ${ip_addr}/32
DNS = {{ state.dns }}

[Peer]
PublicKey = {{ state.pubkey }}
AllowedIPs = 0.0.0.0/0
Endpoint = {{ state.endpoint }}:{{ state.port }}
PersistentKeepalive = 21`;
  return peer_config;
}

function save_peer(){
  var xmlhttp = new XMLHttpRequest();
  var data = JSON.stringify({
    "name": input_peer_name.value,
    "ipaddr": input_ip_address.value,
    "pubkey": "{{ pubkey }}",
  });
  xmlhttp.open("post", "/save-peer");
  xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var json = JSON.parse(xmlhttp.responseText);
      text_command_result.innerHTML = "Peer added successfully! I should check for connections...until that happens, just get redirected to home page.";
      button_save_peer.style.visibility = "hidden";
      setTimeout(function(){window.location="/";}, 3000);
    }
  };
  xmlhttp.send(data);
}

function update_meta(){
  var new_text = input_ip_address.value;
  if (new_text==current_text) return; else current_text=new_text;
  var peer_config = get_templated(current_text);
  peer_config_element.innerHTML = peer_config;
  qr_code.clear();
  qr_code.makeCode(peer_config);
}

function eventHandler(){
  if(timeout) clearTimeout(timeout);
  timeout=setTimeout(update_meta, 50);
}

input_ip_address.onkeydown=input_ip_address.onkeyup=input_ip_address.onclick=eventHandler;
button_save_peer.onclick=save_peer;
peer_config_element.innerHTML = get_templated(current_text);
</script>

{% endblock content %}