autopeering/web/frontend/peerings-new.html

211 lines
No EOL
9.9 KiB
HTML

{% extends 'base.html' %}
{% block content %}
<script>
function form_validate(form) {
console.log(form);
let msg = "<ul>";
// check wireguard pubkey
let wg_key = document.getElementById("peer-wgkey").value;
if (wg_key.length != 44 || wg_key.slice(-1) != "="){
msg += "<li>invalid Wireguard key</li>";
}
try {
window.atob(wg_key)
} catch (error) {
msg += "<li>invalid Wireguard key</li>";
}
// check endpoint
let endpoint_enabled = document.getElementById("peer-endpoint-enabled").checked;
let endpoint = document.getElementById("peer-endpoint").value;
if (endpoint_enabled) {
if (! endpoint) {
msg += "<li>endpoint enabled but non specified</li>";
} else if (isNaN(endpoint.split(":").at(-1))) {
msg += "<li>endpoint doesn't end with a (port)number</li>";
} else if (endpoint.split(":").length > 2 || endpoint.indexOf(".") == -1) {
msg += "<li>endpoint doesn't look like a ip address or fqdn</li>";
}
}
// check ip addresses
let ipv6ll_enabled = document.getElementById("peer-v6ll-enabled").checked;
let ipv4_enabled = document.getElementById("peer-v4-enabled").checked;
let ipv6_enabled = document.getElementById("peer-v6-enabled").checked;
let ipv6ll = document.getElementById("peer-v6ll").value;
let ipv4 = document.getElementById("peer-v4").value;
let ipv6 = document.getElementById("peer-v6").value;
if (!(ipv6ll_enabled || ipv4_enabled || ipv6_enabled)) {
msg += "<li>at least one ip type has to be enabled and specified</li>";
}
if (ipv6ll_enabled) {
if (! ipv6ll) {
msg += "<li>ipv6 LinkLocal enabled but non specified</li>";
} else if (!ipv6ll.startsWith("fe80::")) {
msg += "<li>ipv6 LinkLocal is no valid LinkLocal address</li>";
}
}
if (ipv4_enabled) {
if (! ipv4) {
msg += "<li>ipv4 enabled but non specified</li>";
} else if (!(ipv4.startsWith("172.2") || ipv4.startsWith("10.") || ipv4.startsWith("169.254")) ) {
msg += "<li>ipv4 is no valid dn42/neo/icvpn/LinkLocal address</li>";
}
}
if (ipv6_enabled) {
if (! ipv6) {
msg += "<li>ipv6 enabled but non specified</li>";
} else if (!ipv6.startsWith("fd")) {
msg += "<li>ipv6 is no valid fd00::/8 address</li>";
}
}
// if an error occured (= there is a msg) show that msg
if (msg != "<ul>") {
document.getElementById("peer-invalid-note").innerHTML = msg+"</ul>";
return false;
}
return true
}
// update exaple config when changing values
function update_from_endpoint() {
let example_config_peer_port = document.getElementById("example-config-peer-port");
let endpoint_enabled = document.getElementById("peer-endpoint-enabled").checked;
let endpoint = document.getElementById("peer-endpoint").value;
if (endpoint_enabled && endpoint && endpoint.split(":").length >= 2) {
example_config_peer_port.innerHTML = endpoint.split(":").at(-1);
return
}
example_config_peer_port.innerHTML = '2{{config["ASN"][-4:]}}'
}
function update_from_v6ll() {
let example_config_ip = document.getElementById("example-config-ipv6ll");
let example_config_peer_ip = document.getElementById("example-config-peer-ipv6ll");
let ip_enabled = document.getElementById("peer-v6ll-enabled").checked;
let ip = document.getElementById("peer-v6ll").value;
if (ip_enabled) {
example_config_ip.style.display = "";
example_config_peer_ip.innerHTML = ip;
} else {
example_config_ip.style.display = "none";
}
}
function update_from_v4() {
let example_config_ip = document.getElementById("example-config-ipv4");
let example_config_peer_ip = document.getElementById("example-config-peer-ipv4");
let ip_enabled = document.getElementById("peer-v4-enabled").checked;
let ip = document.getElementById("peer-v4").value;
if (ip_enabled) {
example_config_ip.style.display = "";
example_config_peer_ip.innerHTML = ip;
} else {
example_config_ip.style.display = "none";
}
}
function update_from_v6() {
let example_config_ip = document.getElementById("example-config-ipv6");
let example_config_peer_ip = document.getElementById("example-config-peer-ipv6");
let ip_enabled = document.getElementById("peer-v6-enabled").checked;
let ip = document.getElementById("peer-v6").value;
if (ip_enabled) {
example_config_ip.style.display = "";
example_config_peer_ip.innerHTML = ip;
} else {
example_config_ip.style.display = "none";
}
}
function on_load() {
update_from_v6ll();
update_from_v4();
update_from_v6();
}
document.onload = on_load;
</script>
<div>
{% for node in config["nodes"] %}
<a href="?node={{node}}">
<button {% if selected_node %}{% if selected_node == node %}class="button-selected"{% endif %}{% endif %} >
{{node}}
</button>
</a>
{% endfor %}
</div>
<form action="" method="post" class="flex" onsubmit="return form_validate(this)">
<div id="peer-invalid-note" style="background-color:red;"></div>
<table>
<tr>
<td><label for="peer-asn">Your ASN</label></td>
<td></td>
<td><input type="text" name="peer-asn" id="peer-asn" disabled="disabled" value="{{session['user-data']['asn']}}"></td>
</tr>
<tr>
<td><label for="peer-wgkey">your Wireguard Publickey</label></td>
<td></td>
<td><input type="text" name="peer-wgkey" id="peer-wgkey" maxlength="44" minlength="44" required></td>
</tr>
<tr>
<td><label for="peer-endpoint">your Endpoint</label></td>
<td><input type="checkbox" name="peer-endpoint-enabled" id="peer-endpoint-enabled" checked></td>
<td><input type="text" name="peer-endpoint" id="peer-endpoint" onchange="return update_from_endpoint()"></td>
</tr>
<tr>
<td><label for="peer-v6ll">your ipv6 LinkLocal</label></td>
<td><input type="checkbox" name="peer-v6ll-enabled" id="peer-v6ll-enabled" onchange="return update_from_v6ll()" checked></td>
<td><input type="text" name="peer-v6ll" id="peer-v6ll" onchange="return update_from_v6ll()"></td>
</tr>
<tr>
<td><label for="peer-v4">your ipv4</label></td>
<td><input type="checkbox" name="peer-v4-enabled" id="peer-v4-enabled"onchange="return update_from_v4()"></td>
<td><input type="text" name="peer-v4" id="peer-v4"onchange="return update_from_v4()"></td>
</tr>
<tr>
<td><label for="peer-v6">your ipv6</label></td>
<td><input type="checkbox" name="peer-v6-enabled" id="peer-v6-enabled"onchange="return update_from_v6()"></td>
<td><input type="text" name="peer-v6" id="peer-v6"onchange="return update_from_v6()"></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
<div class="example-config">
<p>wg-quick:</p>
<div id="node-wireguard">
<code>
[Interface] <br>
PrivateKey = &ltyour private key&gt <br>
ListenPort = <span id="example-config-peer-port">2{{config["ASN"][-4:]}}</span><br>
<span id="example-config-ipv4">PostUp = ip address add <span id="example-config-peer-ipv4">...</span>/32 peer <span id="example-config-node-ipv4">{% if selected_node %}{{config["nodes"][selected_node]["internal-v4"]}} {% else %} ... {% endif %}</span><br></span>
<span id="example-config-ipv6">PostUp = ip address add <span id="example-config-peer-ipv6">...</span>/128 peer <span id="example-config-node-ipv6">{% if selected_node %}{{config["nodes"][selected_node]["internal-v6"]}} {% else %} ... {% endif %}</span><br></span>
<span id="example-config-ipv6ll">PostUp = ip address add <span id="example-config-peer-ipv6ll">...</span>/128 peer <span id="example-config-node-ipv6ll">{% if selected_node %}{{config["nodes"][selected_node]["internal-v6ll"]}} {% else %} ... {% endif %}</span><br></span>
Table = off <br>
<br>
[Peer] <br>
PublicKey = <span class="exmple-config-node-pubkey">{% if selected_node %}{{config["nodes"][selected_node]["wg-key"]}}{% else %} ... {% endif %}</span><br>
Endpoint = <span class="exmple-config-node-endpoint">{% if selected_node %}{{config["nodes"][selected_node]["endpoint"]}}{% else %} ... {% endif %}</span>:<span class="example-config-node-port">{% if selected_node %}{% if session["user-data"]["asn"].startswith("AS424242") %}5{{session["user-data"]["asn"][-4:]}}{% else %} ... {% endif %}{% else %} ... {% endif %}</span><br>
AllowedIPs = <span class="example-config-node-v6ll">{% if selected_node %}{{config["nodes"][selected_node]["internal-v6ll"]}} {% else %} ... {% endif %}</span>,172.20.0.0/14,172.31.0.0/16,10.0.0.0/8,fd00::/8 <br>
</code>
</div>
<p>bird(2) config:</p>
<div id="peer-bird">
<code id="example-config-bird">
protocol bgp dn42_{{config["MNT"][:-4].lower()}} from dnpeers { <br>
&#9;neighbor {% if selected_node %}{{config["nodes"][selected_node]["internal-v6ll"]}} {% else %} ... {% endif %} as {{config["ASN"]}};<br>
&#9;interface "dn42_{{config["MNT"][:-4].lower()}}";<br>
} <br>
</code>
</div>
</div>
<script>
document.onload()
</script>
{% endblock %}