kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-07 08:20:13 +01:00
Code
7e770b9b5d
WGDashboard/src/templates/configuration.html

290 lines
10 KiB
HTML
Raw Normal View History

First Commit
2020-10-18 07:10:13 +02:00
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Wireguard Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='dashboard.css') }}">
On/Off Switch
2020-10-18 18:23:38 +02:00
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
Added connected peers
2020-12-26 06:17:42 +01:00
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
v20210402 Added more features
2021-04-03 02:48:00 +02:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
First Commit
2020-10-18 07:10:13 +02:00
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
v20210402 Added more features
2021-04-03 02:48:00 +02:00
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="/">Wireguard Dashboard</a>
First Commit
2020-10-18 07:10:13 +02:00
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container-fluid">
<div class="row">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Configurations</span>
</h6>
<ul class="nav flex-column">
{% for i in conf%}
<li class="nav-item"><a class="nav-link" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
{%endfor%}
</ul>
</div>
</nav>
</div>
</div>
v20210402 Added more features
2021-04-03 02:48:00 +02:00
<div id="config_body">
</div>
First Commit
2020-10-18 07:10:13 +02:00
</div>
Added connected peers
2020-12-26 06:17:42 +01:00
<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
Able to add peer
2020-10-23 07:31:10 +02:00
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">&times;</span>
</button>
</div>
<div class="modal-body">
Added the function to remove peers
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">&times;</span>
</button>
</div>
Able to add peer
2020-10-23 07:31:10 +02:00
<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>
Added connected peers
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">&times;</span>
</button>
</div>
<div class="modal-body">
Added the function to remove peers
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">&times;</span>
</button>
</div>
Added connected peers
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>
v20210402 Added more features
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="">
<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">&times;</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">&times;</span>
</button>
</div>
<div class="toast-body">
</div>
</div>
</div>
First Commit
2020-10-18 07:10:13 +02:00
</body>
Able to add peer
2020-10-23 07:31:10 +02:00
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
First Commit
2020-10-18 07:10:13 +02:00
<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>
v20210402 Added more features
2021-04-03 02:48:00 +02:00
<script>
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();
}, 10000)
});
</script>
First Commit
2020-10-18 07:10:13 +02:00
<script>
Update configuration.html
2020-10-19 02:19:41 +02:00
$('.switch').change(function() {
Able to add peer
2020-10-23 07:31:10 +02:00
if ($(this).prop('checked') == false){
if (confirm('Are you sure you want to turn off this connection?')){
Added the function to remove peers
2020-12-27 05:42:41 +01:00
location.replace("/switch/"+$(this).attr('id'));
Able to add peer
2020-10-23 07:31:10 +02:00
}
}
else{
Added the function to remove peers
2020-12-27 05:42:41 +01:00
location.replace("/switch/"+$(this).attr('id'));
Able to add peer
2020-10-23 07:31:10 +02:00
}
});
$("#save_peer").click(function(){
if ($("#allowed_ips") != "" && $("#public_key") != ""){
var conf = $(this).attr('conf_id')
Update configuration.html
2020-10-19 17:48:08 +02:00
Able to add peer
2020-10-23 07:31:10 +02:00
$.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){
Added the function to remove peers
2020-12-27 05:42:41 +01:00
if(response != "true"){
$("#add_peer_alert").html(response+$("#add_peer_alert").html());
$("#add_peer_alert").removeClass("d-none");
}
else{
location.reload();
}
Able to add peer
2020-10-23 07:31:10 +02:00
}
})
}
})
Update configuration.html
2020-10-19 17:48:08 +02:00
v20210402 Added more features
2021-04-03 02:48:00 +02:00
$("body").on("click", ".btn-delete-peer", function(){
var peer_id = $(this).attr("id");
Added connected peers
2020-12-26 06:17:42 +01:00
$("#delete_peer").attr("peer_id", peer_id);
v20210402 Added more features
2021-04-03 02:48:00 +02:00
})
$(".btn-delete-peer").click(function(){
Added connected peers
2020-12-26 06:17:42 +01:00
});
Added the function to remove peers
2020-12-27 05:42:41 +01:00
$("#delete_peer").click(function(){
Added connected peers
2020-12-26 06:17:42 +01:00
var peer_id = $(this).attr("peer_id");
var config = $(this).attr("conf_id");
$.ajax({
method: "POST",
Added the function to remove peers
2020-12-27 05:42:41 +01:00
url: "/remove_peer/"+config,
Added connected peers
2020-12-26 06:17:42 +01:00
headers:{
"Content-Type": "application/json"
},
Added the function to remove peers
2020-12-27 05:42:41 +01:00
data: JSON.stringify({"action": "delete", "peer_id": peer_id}),
Added connected peers
2020-12-26 06:17:42 +01:00
success: function (response){
Added the function to remove peers
2020-12-27 05:42:41 +01:00
if(response != "true"){
$("#remove_peer_alert").html(response+$("#add_peer_alert").html());
$("#remove_peer_alert").removeClass("d-none");
}
else{
location.reload();
}
Added connected peers
2020-12-26 06:17:42 +01:00
}
})
});
v20210402 Added more features
2021-04-03 02:48:00 +02:00
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");
v20210402.2
2021-04-03 04:22:41 +02:00
$("#peer_name_textbox").val("")
v20210402 Added more features
2021-04-03 02:48:00 +02:00
}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!");
}
})
})
First Commit
2020-10-18 07:10:13 +02:00
</script>
Able to add peer
2020-10-23 07:31:10 +02:00
</html>
Copy Permalink