A new update to the dev branch

src/static/js/configuration.js

@@ -618,7 +618,7 @@ let peers = [];
                             $("#add_peer_form").trigger("reset");
                             $add_peer.removeAttribute("disabled");
                             $add_peer.innerHTML = "Save";
-                            configurations.showToast($new_add_amount.val() + " peers added successful!");
+                            showToast($new_add_amount.val() + " peers added successful!");
                             configurations.addModal().toggle();
                         }
                     }
@@ -671,7 +671,7 @@ let peers = [];
                         configurations.deleteBulkModal().toggle();
                     }
                     configurations.loadPeers($('#search_peer_textbox').val());
-                    configurations.showToast(`Deleted ${peer_ids.length} peers`)
+                    showToast(`Deleted ${peer_ids.length} peers`)
                     $("#delete_peer").removeAttr("disabled").html("Delete");
                 }
             }
@@ -847,30 +847,6 @@ let peers = [];
         document.querySelector("#enable_preshare_key").value = keys.presharedKey;
     }
 
-    /**
-     * Show toast
-     * @param msg
-     */
-    let numberToast = 0;
-    function showToast(msg) {
-        $(".toastContainer").append(
-            `<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
-				<div class="toast-header">
-					<strong class="mr-auto">WGDashboard</strong>
-					<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="toast-body">${msg}</div>
-				<div class="toast-progressbar"></div>
-			</div>` )
-        $(`#${numberToast}-toast`).toast('show');
-        $(`#${numberToast}-toast .toast-body`).html(msg);
-        $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
-        $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
-        numberToast++;
-    }
-
     /**
      * Update peer's refresh interval
      * @param res
@@ -980,7 +956,23 @@ let peers = [];
 
     function getConfigurationDetails() {
         function done(res){
-            console.log(res);
+            console.log(res.data);
+            $("#editConfigurationName").text(configuration_name);
+            $("#editConfigurationAddress").text(res.data.Address);
+            $("#editConfigurationPrivateKey").text(res.data.PrivateKey);
+            $("#editConfigurationListenPort").val(res.data.ListenPort);
+            if (res.data.PostUp){
+                $("#editConfigurationPostUp").val(res.data.PostUp)
+            }
+            if (res.data.PostDown){
+                $("#editConfigurationPostDown").val(res.data.PostDown)
+            }
+            if (res.data.PreUp){
+                $("#editConfigurationPreUp").val(res.data.PreUp)
+            }
+            if (res.data.PreDown){
+                $("#editConfigurationPreDown").val(res.data.PreDown)
+            }
         }
         ajaxGetJSON(`/api/getConfigurationInfo?configName=${configuration_name}`, done)
     }

src/static/js/configurationTool.js

@@ -122,6 +122,35 @@ $editConfiguration.on("click", function(){
     configurations.configurationEditModal().toggle();
 });
 
+$saveConfiguration = $("#editConfigurationBtn");
+$saveConfiguration.on("click", function(){
+    $(this).html("Saving...")
+    $(this).siblings().hide();
+    $(this).attr("disabled", "disabled");
+
+    let data = {
+        "configurationName": configurations.getConfigurationName(),
+        "ListenPort": $("#editConfigurationListenPort").val(),
+        "PostUp": $("#editConfigurationPostUp").val(),
+        "PostDown": $("#editConfigurationPostDown").val(),
+        "PreDown": $("#editConfigurationPreDown").val(),
+        "PreUp": $("#editConfigurationPreUp").val(),
+    }
+    function done(res){
+        console.log(res);
+        $saveConfiguration.removeAttr("disabled");
+        if (res.status){
+            configurations.configurationEditModal().toggle();
+            configurations.loadPeers("");
+            showToast("Configuration saved");
+        }else{
+            showToast(res.reason);
+        }
+        $saveConfiguration.html("Save");
+        $saveConfiguration.siblings().show();
+    }
+    ajaxPostJSON("/api/saveConfiguration", data, done);
+})
 
 /**
  * ==========
@@ -150,9 +179,9 @@ $(".toggle--switch").on("change", function(){
     }).done(function(res){
         if (res.status){
             if (status){
-                configurations.showToast(`${id} is running.`)
+                showToast(`${id} is running.`)
             }else{
-                configurations.showToast(`${id} is stopped.`)
+                showToast(`${id} is stopped.`)
             }
         }else{
             if (status){
@@ -160,7 +189,7 @@ $(".toggle--switch").on("change", function(){
             }else{
                 ele.prop("checked", true)
             }
-            configurations.showToast(res.reason);
+            showToast(res.reason, true);
             $(".index-alert").removeClass("d-none").text(`Configuration toggle failed. Please check the following error message:\n${res.message}`);
         }
         ele.removeClass("waiting");
@@ -283,7 +312,7 @@ $add_peer.addEventListener("click", function() {
                         $("#add_peer_form").trigger("reset");
                         $add_peer.removeAttribute("disabled");
                         $add_peer.innerHTML = "Save";
-                        configurations.showToast("Add peer successful!");
+                        showToast("Add peer successful!");
                         configurations.addModal().toggle();
                     }
                 }
@@ -447,12 +476,12 @@ $body.on("click", ".btn-lock-peer", function() {
     configurations.toggleAccess($(this).data('peer-id'), configurations.getConfigurationName());
     if ($(this).hasClass("lock")) {
         console.log($(this).data("peer-name"))
-        configurations.showToast(`Enabled ${$(this).children().data("peer-name")}`)
+        showToast(`Enabled ${$(this).children().data("peer-name")}`)
         $(this).removeClass("lock")
         $(this).children().tooltip('hide').attr('data-original-title', 'Peer enabled. Click to disable peer.').tooltip('show');
     } else {
         // Currently unlocked
-        configurations.showToast(`Disabled ${$(this).children().data("peer-name")}`)
+        showToast(`Disabled ${$(this).children().data("peer-name")}`)
         $(this).addClass("lock");
         $(this).children().tooltip('hide').attr('data-original-title', 'Peer disabled. Click to enable peer.').tooltip('show');
     }
@@ -706,12 +735,12 @@ $body.on("click", ".display_mode", function() {
         Array($(".peer_list").children()).forEach(function(child) {
             $(child).removeClass().addClass("col-12");
         });
-        configurations.showToast("Displaying as List");
+        showToast("Displaying as List");
     } else {
         Array($(".peer_list").children()).forEach(function(child) {
             $(child).removeClass().addClass("col-sm-6 col-lg-4");
         });
-        configurations.showToast("Displaying as Grids");
+        showToast("Displaying as Grids");
     }
 });
 
@@ -891,9 +920,9 @@ $("#download_all_peers").on("click", function() {
         success: function(res) {
             if (res.peers.length > 0) {
                 window.wireguard.generateZipFiles(res);
-                configurations.showToast("Peers' zip file download successful!");
+                showToast("Peers' zip file download successful!");
             } else {
-                configurations.showToast("Oops! There are no peer can be download.");
+                showToast("Oops! There are no peer can be download.");
             }
         }
     });

src/static/js/index.js

@@ -1,4 +1,3 @@
-let numberToast = 0;
 let emptyInputFeedback = "Can't leave empty";
 $('[data-toggle="tooltip"]').tooltip()
 let $add_configuration = $("#add_configuration");
@@ -19,25 +18,6 @@ addConfigurationModal.on("hidden.bs.modal", function(){
     $(".addConfigurationAvailableIPs").text("N/A");
 });
 
-function showToast(msg){
-    $(".toastContainer").append(
-        `<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
-            <div class="toast-header">
-                <strong class="mr-auto">WGDashboard</strong>
-                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="toast-body">${msg}</div>
-            <div class="toast-progressbar"></div>
-        </div>` );
-    $(`#${numberToast}-toast`).toast('show');
-    $(`#${numberToast}-toast .toast-body`).html(msg);
-    $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
-    $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
-    numberToast++;
-}
-
 $(".toggle--switch").on("change", function(){
     $(this).addClass("waiting").attr("disabled", "disabled");
     let id = $(this).data("conf-id");
@@ -59,6 +39,7 @@ $(".toggle--switch").on("change", function(){
             }
         }else{
             ele.parents().children(".card-message").html(`<pre class="index-alert">Configuration toggle failed. Please check the following error message:<br><code>${res.message}</code></pre>`)
+            showToast(`${id} toggled failed.`, true);
             if (status){
                 ele.prop("checked", false)
             }else{
@@ -70,8 +51,18 @@ $(".toggle--switch").on("change", function(){
 });
 
 $(".sb-home-url").addClass("active");
+
 $(".card-body").on("click", function(handle){
     if ($(handle.target).attr("class") !== "toggleLabel" && $(handle.target).attr("class") !== "toggle--switch") {
+        let c = $(".card");
+        for (let i of c){
+            if (i != $(this).parent()[0]){
+                $(i).css("transition", "ease-in-out 0.3s").css("opacity", "0.5")
+            }
+        }
+        
+
+
         window.open($(this).find("a").attr("href"), "_self");
     }
 });

src/static/js/settings.js

@@ -0,0 +1,60 @@
+$(".sb-settings-url").addClass("active")
+$(".confirm_modal").click(function () {
+    $(".app_new_ip").html($("#app_ip")[0].value)
+    $(".app_new_port").html($("#app_port")[0].value)
+})
+
+$(".confirm_restart").click(function () {
+    $(".cancel_restart").remove()
+    countdown = 7;
+    $.post('/update_app_ip_port', $('.update_app_ip_port').serialize())
+    url = $("#app_ip")[0].value + ":" + $("#app_port")[0].value;
+    $(".confirm_restart").attr("disabled", "disabled")
+    setInterval(function () {
+        if (countdown === 0) {
+            window.location.replace("http://" + url);
+        }
+        $(".confirm_restart").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+});
+
+$(".change_path").click(function () {
+    $(this).attr("disabled", "disabled");
+    countdown = 5;
+    setInterval(function () {
+        if (countdown === 0) {
+            location.reload()
+        }
+        $(".change_path").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+    $.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize())
+});
+
+$(".bottomNavSettings").addClass("active");
+
+
+$(".theme-switch-btn").on("click", function(){
+    if (!$(this).hasClass("active")){
+        let theme = $(this).data("theme");
+        $(".theme-switch-btn").removeClass("active");
+        $(this).addClass("active");
+        $.ajax({
+            method: "POST",
+            url: "/api/settings/setTheme",
+            headers: {"Content-Type": "application/json"},
+            data: JSON.stringify({"theme": theme})
+        }).done(function(res){
+            if (res.status == true){
+                if (theme == "light"){
+                    $("#darkThemeCSS").remove();
+                    showToast("Switched to light theme");
+                }else{
+                    $("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');
+                    showToast("Switched to dark theme");
+                }
+            }
+        });
+    }
+});

src/static/js/settings.min.js

@@ -0,0 +1 @@
+$(".sb-settings-url").addClass("active");$(".confirm_modal").click(function(){$(".app_new_ip").html($("#app_ip")[0].value);$(".app_new_port").html($("#app_port")[0].value)});$(".confirm_restart").click(function(){$(".cancel_restart").remove();countdown=7;$.post("/update_app_ip_port",$(".update_app_ip_port").serialize());url=$("#app_ip")[0].value+":"+$("#app_port")[0].value;$(".confirm_restart").attr("disabled","disabled");setInterval(function(){if(countdown===0){window.location.replace("http://"+url)}$(".confirm_restart").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3)});$(".change_path").click(function(){$(this).attr("disabled","disabled");countdown=5;setInterval(function(){if(countdown===0){location.reload()}$(".change_path").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3);$.post("/update_wg_conf_path",$(".update_wg_conf_path").serialize())});$(".bottomNavSettings").addClass("active");$(".theme-switch-btn").on("click",function(){if(!$(this).hasClass("active")){let theme=$(this).data("theme");$(".theme-switch-btn").removeClass("active");$(this).addClass("active");$.ajax({method:"POST",url:"/api/settings/setTheme",headers:{"Content-Type":"application/json"},data:JSON.stringify({theme:theme})}).done(function(res){if(res.status==true){if(theme=="light"){$("#darkThemeCSS").remove();showToast("Switched to light theme")}else{$("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');showToast("Switched to dark theme")}}})}});

src/static/js/tools.js

@@ -64,4 +64,27 @@ $(".send_traceroute").on("click", function (){
             $("#traceroute_modal .form-control").removeAttr("disabled");
         }
     });
-});
+});
+let numberToast = 0;
+function showToast(msg, isDanger = false) {
+    $(".toastContainer").append(
+        `<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger ? 'text-danger':''}">${msg}</div>
+            <div class="toast-progressbar ${isDanger ? 'bg-danger':''}"></div>
+        </div>` )
+    $(`#${numberToast}-toast`).toast('show');
+    $(`#${numberToast}-toast .toast-body`).html(msg);
+    $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
+    $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
+    let i = numberToast;
+    setTimeout(function(){
+        $(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")
+    }, 4500)
+    numberToast++;
+}

src/static/js/tools.min.js

@@ -1 +1,10 @@
-$(".ip_dropdown").on("change",function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").on("change",function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");let html='<tr><th scope="row">Address</th><td>'+res.address+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res.is_alive+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res.package_sent+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res.package_received+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res.package_loss+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");res.forEach(ele=>$(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+"</th><td>"+ele.ip+"</td><td>"+ele.avg_rtt+"</td><td>"+ele.min_rtt+"</td><td>"+ele.max_rtt+"</td></tr>"));$(".send_traceroute").removeAttr("disabled").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})});
+$(".ip_dropdown").on("change",function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").on("change",function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");let html='<tr><th scope="row">Address</th><td>'+res.address+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res.is_alive+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res.package_sent+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res.package_received+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res.package_loss+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");res.forEach(ele=>$(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+"</th><td>"+ele.ip+"</td><td>"+ele.avg_rtt+"</td><td>"+ele.min_rtt+"</td><td>"+ele.max_rtt+"</td></tr>"));$(".send_traceroute").removeAttr("disabled").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})});let numberToast=0;function showToast(msg,isDanger=false){$(".toastContainer").append(`<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger?"text-danger":""}">${msg}</div>
+            <div class="toast-progressbar ${isDanger?"bg-danger":""}"></div>
+        </div>`);$(`#${numberToast}-toast`).toast("show");$(`#${numberToast}-toast .toast-body`).html(msg);$(`#${numberToast}-toast .toast-progressbar`).css("transition",`width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data("delay")}ms cubic-bezier(0, 0, 0, 0)`);$(`#${numberToast}-toast .toast-progressbar`).css("width","0px");let i=numberToast;setTimeout(function(){$(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")},4500);numberToast++}