autopeering/web/frontend/peerings-new.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 %}