mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-07 00:10:13 +01:00
262 lines
8.6 KiB
HTML
262 lines
8.6 KiB
HTML
<html>
|
|
|
|
{% include "header.html" %}
|
|
|
|
<body>
|
|
{% include "navbar.html" %}
|
|
<div class="container-fluid">
|
|
{% include "sidebar.html" %}
|
|
<div id="config_body">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="add_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">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">
|
|
<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>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="public_key">Public Key</label>
|
|
<input type="text" class="form-control" id="public_key" aria-describedby="public_key">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="allowed_ips">Allowed IPs</label>
|
|
<input type="text" class="form-control" id="allowed_ips">
|
|
</div>
|
|
</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>
|
|
<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">
|
|
<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>
|
|
<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>
|
|
|
|
<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="">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<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">
|
|
|
|
<div class="mb-3">
|
|
<label for="peer_name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="peer_name_textbox" placeholder="">
|
|
</div>
|
|
</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_name" conf_id={{conf_data['name']}} peer_id="">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</body>
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
|
|
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
|
|
crossorigin="anonymous"></script>
|
|
<script>
|
|
$(".sb-{{conf_data['name']}}-url").addClass("active");
|
|
|
|
|
|
function load_data(){
|
|
$.ajax({
|
|
method: "GET",
|
|
url: "/get_config/"+"{{conf_data['name']}}",
|
|
headers:{
|
|
"Content-Type": "application/json"
|
|
},
|
|
async:false,
|
|
success: function (response){
|
|
$("#config_body").html(response);
|
|
$.ajax({
|
|
url: "{{ url_for('static',filename='bootstrap4-toggle.min.js') }}",
|
|
dataType: "script",
|
|
cache: true
|
|
});
|
|
}
|
|
})
|
|
}
|
|
$(document).ready(function(){
|
|
load_data();
|
|
setInterval(function(){
|
|
load_data();
|
|
}, 15000)
|
|
});
|
|
</script>
|
|
<script>
|
|
$("body").on("click", ".switch", function (){
|
|
if ($(this).prop('checked') === true){
|
|
if (confirm('Are you sure you want to turn off this connection?')){
|
|
location.replace("/switch/"+$(this).attr('id'))
|
|
}
|
|
}
|
|
else{
|
|
location.replace("/switch/"+$(this).attr('id'))
|
|
}
|
|
})
|
|
$("#save_peer").click(function(){
|
|
if ($("#allowed_ips") != "" && $("#public_key") != ""){
|
|
var conf = $(this).attr('conf_id')
|
|
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/add_peer/"+conf,
|
|
headers:{
|
|
"Content-Type": "application/json"
|
|
},
|
|
data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
|
|
success: function (response){
|
|
if(response != "true"){
|
|
$("#add_peer_alert").html(response+$("#add_peer_alert").html());
|
|
$("#add_peer_alert").removeClass("d-none");
|
|
}
|
|
else{
|
|
location.reload();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
$("body").on("click", ".btn-delete-peer", function(){
|
|
var peer_id = $(this).attr("id");
|
|
$("#delete_peer").attr("peer_id", peer_id);
|
|
})
|
|
|
|
$(".btn-delete-peer").click(function(){
|
|
|
|
});
|
|
|
|
$("#delete_peer").click(function(){
|
|
var peer_id = $(this).attr("peer_id");
|
|
var config = $(this).attr("conf_id");
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/remove_peer/"+config,
|
|
headers:{
|
|
"Content-Type": "application/json"
|
|
},
|
|
data: JSON.stringify({"action": "delete", "peer_id": peer_id}),
|
|
success: function (response){
|
|
if(response != "true"){
|
|
$("#remove_peer_alert").html(response+$("#add_peer_alert").html());
|
|
$("#remove_peer_alert").removeClass("d-none");
|
|
}
|
|
else{
|
|
location.reload();
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
|
|
var myModal = new bootstrap.Modal(document.getElementById('setting_modal'), {
|
|
keyboard: false
|
|
})
|
|
$("body").on("click", ".btn-setting-peer", function(){
|
|
myModal.toggle();
|
|
var peer_id = $(this).attr("id");
|
|
$("#save_peer_name").attr("peer_id", peer_id);
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/get_peer_name/"+$("#setting_modal").attr("conf_id"),
|
|
headers:{
|
|
"Content-Type": "application/json"
|
|
},
|
|
data: JSON.stringify({"id": peer_id}),
|
|
success: function(response){
|
|
if (response == ""){
|
|
$("#setting_modal .peer_name").html("Untitled Peer");
|
|
$("#peer_name_textbox").val("")
|
|
}else{
|
|
$("#setting_modal .peer_name").html(response);
|
|
$("#peer_name_textbox").val(response)
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
$("#save_peer_name").click(function (){
|
|
var peer_id = $(this).attr("peer_id");
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/save_peer_name/"+"{{conf_data['name']}}",
|
|
headers:{
|
|
"Content-Type": "application/json"
|
|
},
|
|
data: JSON.stringify({id: peer_id, name: $("#peer_name_textbox").val()}),
|
|
success: function (response){
|
|
myModal.toggle();
|
|
load_data();
|
|
$('#alertToast').toast('show');
|
|
$('#alertToast .toast-body').html("Name Saved!");
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
</html> |