Zoraxy/web/components/utils.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Utilities</h2>
        <p>You might find these tools or information helpful when setting up your gateway server</p>
    </div>
    <div class="ui divider"></div>
    <div class="selfauthOnly">
        <h3>Account Management</h3>
        <p>Functions to help management the current account</p>
        <div class="ui basic segment">
            <h5><i class="chevron down icon"></i> Change Password</h5>
            <div class="ui form">
                <div class="field">
                    <label>Current Password</label>
                    <input type="password" name="oldPassword" placeholder="Current Password">
                </div>
                <div class="field">
                    <label>New Password</label>
                    <input type="password" name="newPassword" placeholder="New Password">
                </div>
                <div class="field">
                    <label>Confirm New Password</label>
                    <input type="password" name="confirmNewPassword" placeholder="Confirm New Password">
                </div>
                <button class="ui basic button" onclick="changePassword()"><i class="ui teal key icon"></i> Change Password</button>
            </div>

            <div id="passwordChangeSuccMsg" class="ui green message" style="display:none;">
                <i class="ui circle checkmark green icon "></i> Password Updated
            </div>
        </div>
        <div class="ui divider"></div>
    </div>
    <h3>Network Interfaces</h3>
    <p>Network Interface Card (NIC) currently installed on this host</p>
    <table id="network-interfaces-table" class="ui selectable inverted striped celled table">
		<thead>
			<tr>
				<th>Interface Name</th>
				<th>ID</th>
				<th>IP Address</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>

    <h3> IP Address to CIDR</h3>
    <p>No experience with CIDR notations? Here are some tools you can use to make setting up easier.</p>
    <div class="ui basic segment">
        <h5><i class="chevron down icon"></i> IP Range to CIDR Conversion</h5>
        <div class="ui message">
            <i class="info circle icon"></i> Note that the CIDR generated here covers additional IP address before or after the given range. If you need more details settings, please use CIDR with a smaller range and add additional IPs for detail range adjustment.
        </div>
        <div class="ui input">
            <input type="text" placeholder="Start IP" id="startIpInput">
        </div>
        <div class="ui input">
            <input type="text" placeholder="End IP" id="endIpInput">
        </div>
        <br>
        <button style="margin-top: 0.6em;" class="ui basic button" onclick="convertToCIDR()">Convert</button>
        <p>Results: <div id="cidrOutput">N/A</div></p>
    </div>

    <div class="ui basic segment">
        <h5><i class="chevron down icon"></i> CIDR to IP Range Conversion</h5>
        <div class="ui action input">
            <input type="text" placeholder="CIDR" id="cidrInput">
            <button class="ui basic button" onclick="convertToIPRange()">Convert</button>
        </div>
        <p>Results: <div id="ipRangeOutput">N/A</div></p>
    </div>
</div>
<script>

    /*
        Account Password utilities
    */

    $.get("/api/auth/userCount", function(data){
        if (data == 0){
            //Using external auth manager. Hide options
            $(".selfauthOnly").hide();
        }
    })

    function changePassword() {
        const oldPassword = document.getElementsByName('oldPassword')[0].value;
        const newPassword = document.getElementsByName('newPassword')[0].value;
        const confirmNewPassword = document.getElementsByName('confirmNewPassword')[0].value;
        
        $.ajax({
            type: "POST",
            url: "/api/auth/changePassword",
            data: {
                oldPassword: oldPassword,
                newPassword: newPassword,
                confirmPassword: confirmNewPassword,
            },
            success: function (data) {
                if (data.error != undefined){
                    alert(data.error);
                }else{
                    $("#passwordChangeSuccMsg").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
                    $('[name="oldPassword"]').val('');
                    $('[name="newPassword"]').val('');
                    $('[name="confirmNewPassword"]').val('');
                }
            },
            error: function (xhr, status, error) {
                alert("Error changing password: " + error);
            },
        });
    }

    /*
        NIC Info
    */

    function renderNICInfo(){
        $.get("/api/stats/listnic",function(data){
            var tbody = document.querySelector("#network-interfaces-table tbody");
            data.forEach(function(item) {
                var tr = document.createElement("tr");
                var name = document.createElement("td");
                name.textContent = item.Name;
                var id = document.createElement("td");
                id.textContent = item.ID;
                var ips = document.createElement("td");
                ips.innerHTML = item.IPs.join("<br>");
                tr.appendChild(name);
                tr.appendChild(id);
                tr.appendChild(ips);
                tbody.appendChild(tr);
            });
        });
    }
    renderNICInfo();

    /*
        IP Address Utilities
    */
    //events handler
    function convertToCIDR() {
      const startIp = document.getElementById('startIpInput').value.trim();
      const endIp = document.getElementById('endIpInput').value.trim();
      const cidrOutput = document.getElementById('cidrOutput');
      const cidr = ipRangeToCIDR(startIp, endIp);
      const ipRange = cidrToRange(cidr);
      cidrOutput.innerHTML = `CIDR: ${cidr} <br> (Cover range: ${ipRange[0]} to ${ipRange[1]})`;
    }

    // CIDR to IP Range Conversion
    function convertToIPRange() {
      const cidr = document.getElementById('cidrInput').value.trim();
      const ipRangeOutput = document.getElementById('ipRangeOutput');
      const ipRange = cidrToRange(cidr);
      ipRangeOutput.innerHTML = `Start IP: ${ipRange[0]}<br>End IP: ${ipRange[1]}`;
    }

    //Ip conversion function
    function cidrToRange(cidr) {
        var range = [2];
        cidr = cidr.split('/');
        var cidr_1 = parseInt(cidr[1])
        range[0] = long2ip((ip2long(cidr[0])) & ((-1 << (32 - cidr_1))));
        start = ip2long(range[0])
        range[1] = long2ip( start + Math.pow(2, (32 - cidr_1)) - 1);
        return range;
    }

    function ipRangeToCIDR(ipStart, ipEnd) {
        var start = ip2long(ipStart);
        var end = ip2long(ipEnd);
        var cidr = 32;

        while (start != end) {
            start >>= 1;
            end >>= 1;
            cidr--;
        }

        return ipStart + '/' + cidr;
    }

    function ip2long (argIP) {
        //  discuss at: https://locutus.io/php/ip2long/
        // original by: Waldo Malqui Silva (https://waldo.malqui.info)
        // improved by: Victor
        //  revised by: fearphage (https://my.opera.com/fearphage/)
        //  revised by: Theriault (https://github.com/Theriault)
        //    estarget: es2015
        //   example 1: ip2long('192.0.34.166')
        //   returns 1: 3221234342
        //   example 2: ip2long('0.0xABCDEF')
        //   returns 2: 11259375
        //   example 3: ip2long('255.255.255.256')
        //   returns 3: false
        let i = 0
        // PHP allows decimal, octal, and hexadecimal IP components.
        // PHP allows between 1 (e.g. 127) to 4 (e.g 127.0.0.1) components.
        const pattern = new RegExp([
            '^([1-9]\\d*|0[0-7]*|0x[\\da-f]+)',
            '(?:\\.([1-9]\\d*|0[0-7]*|0x[\\da-f]+))?',
            '(?:\\.([1-9]\\d*|0[0-7]*|0x[\\da-f]+))?',
            '(?:\\.([1-9]\\d*|0[0-7]*|0x[\\da-f]+))?$'
        ].join(''), 'i')
        argIP = argIP.match(pattern) // Verify argIP format.
        if (!argIP) {
            // Invalid format.
            return false
        }
        // Reuse argIP variable for component counter.
        argIP[0] = 0
        for (i = 1; i < 5; i += 1) {
            argIP[0] += !!((argIP[i] || '').length)
            argIP[i] = parseInt(argIP[i]) || 0
        }
        // Continue to use argIP for overflow values.
        // PHP does not allow any component to overflow.
        argIP.push(256, 256, 256, 256)
        // Recalculate overflow of last component supplied to make up for missing components.
        argIP[4 + argIP[0]] *= Math.pow(256, 4 - argIP[0])
        if (argIP[1] >= argIP[5] ||
            argIP[2] >= argIP[6] ||
            argIP[3] >= argIP[7] ||
            argIP[4] >= argIP[8]) {
            return false
        }
        return argIP[1] * (argIP[0] === 1 || 16777216) +
            argIP[2] * (argIP[0] <= 2 || 65536) +
            argIP[3] * (argIP[0] <= 3 || 256) +
            argIP[4] * 1
    }

    function long2ip (ip) {
        //  discuss at: https://locutus.io/php/long2ip/
        // original by: Waldo Malqui Silva (https://fayr.us/waldo/)
        //   example 1: long2ip( 3221234342 )
        //   returns 1: '192.0.34.166'
        if (!isFinite(ip)) {
            return false
        }
        return [ip >>> 24 & 0xFF, ip >>> 16 & 0xFF, ip >>> 8 & 0xFF, ip & 0xFF].join('.')
    }
</script>