You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.4 KiB
Plaintext
98 lines
3.4 KiB
Plaintext
{% 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 %}
|