2020-10-18 07:10:13 +02:00
< html >
2021-08-14 23:13:16 +02:00
{% with title=title%}
{% include "header.html"%}
{% endwith %}
2020-10-18 07:10:13 +02:00
< body >
2021-05-04 07:32:34 +02:00
{% include "navbar.html" %}
2020-10-18 07:10:13 +02:00
< div class = "container-fluid" >
2021-05-04 07:32:34 +02:00
{% include "sidebar.html" %}
2021-08-14 23:13:16 +02:00
< 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" >
< / div >
< / div >
< div id = "config_body" >
< / div >
2020-10-18 07:10:13 +02:00
< / div >
2020-12-26 06:17:42 +01:00
< div class = "modal fade" id = "add_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
2020-10-23 07:31:10 +02:00
aria-labelledby="staticBackdropLabel" aria-hidden="true">
2021-08-06 05:15:50 +02:00
< div class = "modal-dialog modal-dialog-centered modal-lg" >
2020-10-23 07:31:10 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Add a new peer< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2020-12-27 05:42:41 +01:00
< div id = "add_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2021-07-02 19:23:04 +02:00
< form id = "add_peer_form" >
2021-08-05 06:45:15 +02:00
< div class = "alert alert-warning" role = "alert" style = "font-size: 0.8rem" >
To generate QR code for this new peer, you need to provide the private key, or use the generated key. If you don't need the QR code, simply remove the private key and insert your existed public key.
< / div >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
< div >
< label for = "private_key" > Private Key< / label >
2021-08-05 06:45:15 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< div class = "input-group" >
< input type = "text" class = "form-control" id = "private_key" aria-describedby = "public_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 >
2021-08-05 06:45:15 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< / div >
2020-10-23 07:31:10 +02:00
< div class = "form-group" >
2021-08-05 06:45:15 +02:00
< label for = "public_key" > Public Key < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "public_key" aria-describedby = "public_key" disabled >
2020-10-23 07:31:10 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< div class = "row" >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
< div class = "form-group" >
< label for = "new_add_name" > Name< / label >
< input type = "text" class = "form-control" id = "new_add_name" >
< / div >
< / div >
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
< label for = "allowed_ips" > Allowed IPs < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "allowed_ips" >
< / div >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
2021-08-14 23:13:16 +02:00
< label for = "new_add_DNS" > DNS< / label >
< input type = "text" class = "form-control" id = "new_add_DNS" value = "{{ DNS }}" >
2021-08-06 05:15:50 +02:00
< / div >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
2021-08-14 23:13:16 +02:00
< label for = "new_add_endpoint_allowed_ip" > Endpoint Allowed IPs< / label >
< input type = "text" class = "form-control" id = "new_add_endpoint_allowed_ip" value = "{{ endpoint_allowed_ip }}" >
2021-08-06 05:15:50 +02:00
< / div >
< / div >
< / div >
2020-10-23 07:31:10 +02:00
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-primary" id = "save_peer" conf_id = {{conf_data['name']}} > Save< / button >
< / div >
< / div >
< / div >
< / div >
2020-12-26 06:17:42 +01:00
< div class = "modal fade" id = "delete_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Are you sure to delete this peer?< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2020-12-27 05:42:41 +01:00
< div id = "remove_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2020-12-26 06:17:42 +01:00
< h6 > This action is not reversible.< / h6 >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > No< / button >
< button type = "button" class = "btn btn-danger" id = "delete_peer" conf_id = {{conf_data['name']}} peer_id = "" > Yes< / button >
< / div >
< / div >
< / div >
< / div >
2021-04-03 02:48:00 +02:00
< div class = "modal fade" id = "setting_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
2021-08-06 05:15:50 +02:00
< div class = "modal-dialog modal-dialog-centered modal-lg" >
2021-04-03 02:48:00 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "peer_name" > < / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2021-08-06 05:15:50 +02:00
< div id = "setting_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "mb-3" >
< label for = "peer_name_textbox" class = "form-label" > Name< / label >
< input type = "text" class = "form-control" id = "peer_name_textbox" placeholder = "" >
< / div >
2021-08-06 05:15:50 +02:00
< 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 class = "mb-3" >
< label for = "peer_allowed_ip_textbox" class = "form-label" > Allowed IPs < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_allowed_ip_textbox" >
2021-04-03 02:48:00 +02:00
2021-08-06 05:15:50 +02:00
< / div >
< div class = "mb-3" >
< label for = "peer_DNS_textbox" class = "form-label" > DNS < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_DNS_textbox" >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "mb-3" >
< label for = "peer_endpoint_allowed_ips" class = "form-label" > Endpoint Allowed IPs < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_endpoint_allowed_ips" >
2021-04-03 02:48:00 +02:00
< / div >
2021-08-14 23:13:16 +02:00
2021-04-03 02:48:00 +02:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
2021-08-06 05:15:50 +02:00
< button type = "button" class = "btn btn-primary" id = "save_peer_setting" conf_id = {{conf_data['name']}} peer_id = "" > Save< / button >
2021-04-03 02:48:00 +02:00
< / div >
< / div >
< / div >
< / div >
2021-08-05 06:45:15 +02:00
< div class = "modal fade" id = "qrcode_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "peer_name" > QR Code< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< img src = "" id = "qrcode_img" style = "width: 100%" >
< / div >
< / div >
< / div >
< / div >
2021-04-03 02:48:00 +02:00
< 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 >
< button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "toast-body" >
< / div >
< / div >
< / div >
2021-05-14 00:00:40 +02:00
{% include "tools.html" %}
2020-10-18 07:10:13 +02:00
< / body >
2021-05-05 03:26:40 +02:00
{% include "footer.html" %}
2021-04-03 02:48:00 +02:00
< script >
2021-08-14 23:13:16 +02:00
var 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()
2021-04-03 02:48:00 +02:00
$.ajax({
method: "GET",
2021-08-14 23:13:16 +02:00
url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
2021-04-03 02:48:00 +02:00
headers:{
"Content-Type": "application/json"
},
success: function (response){
$("#config_body").html(response);
2021-08-14 23:13:16 +02:00
{#$("[refresh-interval={{ dashboard_refresh_interval }}]").addClass("active")#}
$("#search_peer_textbox").css("display", "block")
if (bar.css("width") !== "0%"){
endProgressBar()
}
2021-04-03 02:48:00 +02:00
}
})
}
$(document).ready(function(){
2021-08-14 23:13:16 +02:00
load_data($('#search_peer_textbox').val());
2021-04-03 02:48:00 +02:00
setInterval(function(){
2021-08-14 23:13:16 +02:00
load_data($('#search_peer_textbox').val());
2021-05-14 00:00:40 +02:00
}, {{dashboard_refresh_interval}})
2021-04-03 02:48:00 +02:00
});
2021-05-14 00:00:40 +02:00
$("body").on("click", ".update_interval", function(){
$.ajax({
method:"POST",
data: "interval="+$(this).attr("refresh-interval"),
url: "/update_dashboard_refresh_interval",
success: function (res){
location.reload()
}
})
});
$("body").on("click", ".refresh", function (){
2021-08-14 23:13:16 +02:00
load_data($('#search_peer_textbox').val());
2021-05-14 00:00:40 +02:00
});
2021-04-03 02:48:00 +02:00
< / script >
2021-08-14 23:13:16 +02:00
< script src = "{{ url_for('static',filename='js/configuration.js') }}" > < / script >
2020-10-23 07:31:10 +02:00
< / html >
