Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-09-08 04:31:14 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Feature adding and UI adjustment

Browse Source 
Added Preshared-Key to all configuration
This commit is contained in:
Donald Cheng Hong Zou
2021-12-29 12:17:44 -05:00
parent f9e4fafe9f
commit f2750de153
6 changed files with 426 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/templates/configuration.html
View File

@@ -8,7 +8,7 @@
{% include "sidebar.html" %}
<div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
<div class="form-group">
<input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="" style="display: none">
<input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="">
</div>
</div>
<div id="config_body">
@@ -21,8 +21,8 @@
<h1 class="mb-3"><samp id="conf_name">{{ title }}</samp></h1>
</div>
<div class="col">
<small class="text-muted"><strong>ACTION</strong></small><br>
<div id="conf_status_btn"></div>
<small class="text-muted"><strong>SWITCH</strong></small><br>
<div id="conf_status_btn" class="info_loading"></div>
<div class="spinner-border text-primary" role="status" style="display: none; margin-top: 10px">
<span class="sr-only">Loading...</span>
</div>
@@ -30,23 +30,23 @@
<div class="w-100"></div>
<div class="col">
<small class="text-muted"><strong>STATUS</strong></small>
<h6 style="text-transform: uppercase;" id="conf_status"></h6>
<h6 style="text-transform: uppercase;" id="conf_status" class="info_loading"></h6>
</div>
<div class="col">
<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
<h6 style="text-transform: uppercase;" id="conf_connected_peers"></h6>
<h6 style="text-transform: uppercase;" id="conf_connected_peers" class="info_loading"></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
<h6 style="text-transform: uppercase;" id="conf_total_data_usage"></h6>
<h6 style="text-transform: uppercase;" id="conf_total_data_usage" class="info_loading"></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>TOTAL RECEIVED</strong></small>
<h6 style="text-transform: uppercase;" id="conf_total_data_received"></h6>
<h6 style="text-transform: uppercase;" id="conf_total_data_received" class="info_loading"></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>TOTAL SENT</strong></small>
<h6 style="text-transform: uppercase;" id="conf_total_data_sent"></h6>
<h6 style="text-transform: uppercase;" id="conf_total_data_sent" class="info_loading"></h6>
</div>
<div class="w-100"></div>
<div class="col-sm">
@@ -54,15 +54,15 @@
<strong>PUBLIC KEY</strong>
<strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong>
</small>
<h6><samp class="key" id="conf_public_key"></samp></h6>
<h6 class="info_loading"><samp class="key" id="conf_public_key"></samp></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>LISTEN PORT</strong></small>
<h6 style="text-transform: uppercase;"><samp id="conf_listen_port"></samp></h6>
<h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_listen_port"></samp></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>ADDRESS</strong></small>
<h6 style="text-transform: uppercase;"><samp id="conf_address"></samp></h6>
<h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_address"></samp></h6>
</div>
</div>
</div>
@@ -100,7 +100,7 @@
</div>
</div>
</div>
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal">
<button type="button" class="btn btn-primary add_btn">
<i class="bi bi-plus-circle-fill" style=""></i> Add Peer
</button>
</div>
@@ -134,7 +134,7 @@
<label for="private_key">Private Key</label>
</div>
<div class="input-group">
<input type="text" class="form-control" id="private_key" aria-describedby="public_key">
<input type="text" class="form-control" id="private_key" aria-describedby="private_key">
<div class="input-group-append">
<button type="button" class="btn btn-danger" id="re_generate_key"><i class="bi bi-arrow-repeat"></i></button>
</div>
@@ -179,6 +179,12 @@
<div class="form-group">
<label for="new_add_keep_alive">Persistent keepalive</label>
<input type="text" class="form-control" id="new_add_keep_alive" value="{{ keep_alive }}">
</div>
</div>
<div class="col-sm">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="enable_preshare_key" name="enable_preshare_key" value="enable_psk">
<label class="form-check-label" for="enable_preshare_key">Use Pre-shared Key</label>
</div>
</div>
</div>
@@ -233,10 +239,14 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="mb-3">
<label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
<input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
<a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
</div>
<div>
<label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
<input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
<a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
<label for="peer_preshared_key_textbox" class="form-label">Pre-Shared Key</label>
<input type="text" class="form-control" id="peer_preshared_key_textbox">
</div>
<hr>
@@ -307,7 +317,7 @@
<div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;">
<div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">Wireguard Dashboard</strong>
<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>
@@ -319,35 +329,16 @@
{% include "tools.html" %}
</body>
{% include "footer.html" %}
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
<script>
function roundN(value, digits) {
var tenToN = 10 ** digits;
return /*Math.trunc*/(Math.round(value * tenToN)) / tenToN;
}
let load_timeout;
let load_interval = 0;
var conf_name = "{{ conf_data['name'] }}"
let conf_name = "{{ conf_data['name'] }}"
$(".sb-"+conf_name+"-url").addClass("active");
// Progress Bar
let bar = $(".progress-bar")
function startProgressBar(){
bar.css("width","0%")
bar.css("opacity", "100")
bar.css("background", "rgb(255,69,69)")
bar.css("background", "linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)")
bar.css("width","25%")
setTimeout(function(){
stillLoadingProgressBar();
},300)
}
function stillLoadingProgressBar(){
bar.css("transition", "3s ease-in-out")
bar.css("width", "75%")
}
function endProgressBar(){
bar.css("transition", "0.3s ease-in-out")
bar.css("width","100%")
setTimeout(function(){
bar.css("opacity", "0")
},250)
}
function load_data(search){
startProgressBar()
let result = '';
@@ -382,22 +373,35 @@
$("#conf_status").html(response["status"]+'<span class="dot dot-'+response["status"]+'"></span>');
$("#conf_connected_peers").html(response["running_peer"]);
$("#conf_total_data_usage").html(response["total_data_usage"][0]+" GB");
$("#conf_total_data_received").html(response["total_data_usage"][1]+" GB");
$("#conf_total_data_sent").html(response["total_data_usage"][2]+" GB");
$("#conf_total_data_usage").html(response["total_data_usage"][0] +" GB");
$("#conf_total_data_received").html(response["total_data_usage"][2] +" GB");
$("#conf_total_data_sent").html(response["total_data_usage"][1]+" GB");
$("#conf_public_key").html(response["public_key"]);
$("#conf_listen_port").html(response["listen_port"] === "" ? "N/A":response["listen_port"]);
$("#conf_address").html(response["conf_address"]);
$(".info h6").removeClass("info_loading");
$("#conf_status_btn").removeClass("info_loading")
if (response["peer_data"].length === 0){
$(".peer_list").html('<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>');
}else{
let display_mode = response["peer_display_mode"] === "list" ? "col-12" : "col-sm-6 col-lg-4";
response["peer_data"].forEach(function(peer){
let total_r = 0;
let total_s = 0;
for (let i = 0; i < peer["traffic"].length; i++){
total_r += peer["traffic"][i]["total_receive"];
total_s += peer["traffic"][i]["total_sent"];
}
let spliter = '<div class="w-100"></div>';
let peer_name = '<div class="col-sm"><h4>'+ (peer["name"] === "" ? "Untitled" : peer["name"]) +'</h4></div>';
let peer_status = '<div class="col-6"><small class="text-muted"><strong>STATUS</strong></small> <h6 style="text-transform: uppercase;" class="mb-2 h6-dot-'+peer["status"]+'"><span class="dot dot-'+peer["status"]+'" style="margin-left: 0 !important;margin-top: 5px"></span></h6></div>'
let peer_transfer = '<div class="col-6 peer_data_group" style="text-align: right"> <small class="text-muted"><strong>TRANSFER</strong></small> <p class="text-primary" style="text-transform: uppercase; margin-bottom: 0;"><small><i class="bi bi-arrow-down-right"></i>'+peer["total_receive"]+' GB</small></p> <p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> '+peer["total_sent"]+' GB</small></p> </div>'
let peer_name =
'<div class="col-sm display" style="display: flex; align-items: center; margin-bottom: 0.2rem">' +
'<h5 style="margin: 0;">'+ (peer["name"] === "" ? "Untitled" : peer["name"]) +'</h5>' +
'<h6 style="text-transform: uppercase; margin: 0; margin-left: auto !important;"><span class="dot dot-'+peer["status"]+'" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left" title="Peer Running"></span></h6>' +
'</div>';
let peer_transfer = '<div class="col-12 peer_data_group" style="text-align: right; display: flex; margin-bottom: 0.5rem"><p class="text-primary" style="text-transform: uppercase; margin-bottom: 0; margin-right: 1rem"><small><i class="bi bi-arrow-down-right"></i> '+ roundN(peer["total_receive"] + total_r, 4) +' GB</small></p> <p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> '+ roundN(peer["total_sent"] + total_s, 4) +' GB</small></p> </div>'
let peer_key = '<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer["id"]+'</samp></h6></div>';
let peer_allowed_ip = '<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer["allowed_ip"]+'</h6></div>';
let peer_latest_handshake = '<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer['latest_handshake']+'</h6> </div>';
@@ -413,7 +417,6 @@
'<div class="row">'
+ peer_name
+ spliter
+ peer_status
+ peer_transfer
+ peer_key
+ peer_allowed_ip
@@ -437,17 +440,16 @@
}
}
{#$("#config_body").html(response);#}
$("#search_peer_textbox").css("display", "block")
$(".dot.dot-running").attr("title","Peer Running").tooltip();
$(".dot.dot-stopped").attr("title","Peer Stopped").tooltip();
{#$("#search_peer_textbox").css("display", "block")#}
endProgressBar()
}
})
}
$(function(){
load_data($('#search_peer_textbox').val());
{#setInterval(function(){#}
{# load_data($('#search_peer_textbox').val());#}
{#}, {{dashboard_refresh_interval}})#}
});
</script>
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
</html>

15
src/templates/index.html
View File

@@ -14,12 +14,12 @@
<p class="text-muted">You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".</p>
{% endif %}
{% for i in conf%}
<div class="card mt-3">
<div class="card mt-3 conf_card">
<div class="card-body">
<div class="row">
<div class="col card-col">
<small class="text-muted"><strong>CONFIGURATION</strong></small>
<a href="/configuration/{{i['conf']}}">
<a href="/configuration/{{i['conf']}}" class="conf_link">
<h6 class="card-title" style="margin:0 !important;">{{i['conf']}}</h6>
</a>
</div>
@@ -51,11 +51,18 @@
</body>
{% include "footer.html" %}
<script>
$('.switch').click(function() {
$('.switch').on("click", function() {
$(this).siblings($(".spinner-border")).css("display", "inline-block")
$(this).remove()
location.replace("/switch/"+$(this).attr('id'))
});
$(".sb-home-url").addClass("active")
$(".sb-home-url").addClass("active");
$(".card-body").on("click", function(handle){
if ($(handle.target).attr("class") !== "bi bi-toggle2-off" && $(handle.target).attr("class") !== "bi bi-toggle2-on") {
window.open($(this).find("a").attr("href"), "_self");
}
})
</script>
</html>

2
src/templates/qrcode.html
View File

@@ -1 +1 @@
{{ qrcode("[Interface]\nPrivateKey = "+i['private_key']+"\nAddress = "+i['allowed_ip']+"\nMTU = "+i['mtu']+"\nDNS = "+i['DNS']+"\n\n[Peer]\nPublicKey = "+i['public_key']+"\nAllowedIPs = "+i['endpoint_allowed_ip']+"\nPersistentKeepalive = "+i['keepalive']+"\nEndpoint = "+i['endpoint']) }}
{{ qrcode(i) }}