mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-09-08 04:31:14 +00:00
v2.2 beta 4
This commit is contained in:
Donald Cheng Hong Zou
@@ -1,10 +1,21 @@
|
||||
<html>
|
||||
{% include "header.html" %}
|
||||
{% with title=title%}
|
||||
{% include "header.html"%}
|
||||
{% endwith %}
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid">
|
||||
{% include "sidebar.html" %}
|
||||
<div id="config_body"></div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
@@ -44,22 +55,29 @@
|
||||
<input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<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">
|
||||
<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>
|
||||
<div class="col-sm">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="DNS">DNS</label>
|
||||
<input type="text" class="form-control" id="DNS" value="1.1.1.1">
|
||||
<label for="new_add_DNS">DNS</label>
|
||||
<input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
|
||||
<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">
|
||||
<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 }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,6 +132,10 @@
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<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">
|
||||
@@ -128,10 +150,11 @@
|
||||
<label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_DNS_textbox">
|
||||
</div>
|
||||
<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 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">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
@@ -174,25 +197,59 @@
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
$(".sb-{{conf_data['name']}}-url").addClass("active");
|
||||
function load_data(){
|
||||
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()
|
||||
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: "/get_config/"+"{{conf_data['name']}}",
|
||||
url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
|
||||
headers:{
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
async:false,
|
||||
success: function (response){
|
||||
$("#config_body").html(response);
|
||||
$("[refresh-interval={{ dashboard_refresh_interval }}]").addClass("active")
|
||||
{#$("[refresh-interval={{ dashboard_refresh_interval }}]").addClass("active")#}
|
||||
$("#search_peer_textbox").css("display", "block")
|
||||
if (bar.css("width") !== "0%"){
|
||||
endProgressBar()
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
$(document).ready(function(){
|
||||
load_data();
|
||||
load_data($('#search_peer_textbox').val());
|
||||
setInterval(function(){
|
||||
load_data();
|
||||
load_data($('#search_peer_textbox').val());
|
||||
}, {{dashboard_refresh_interval}})
|
||||
});
|
||||
|
||||
@@ -207,8 +264,8 @@
|
||||
})
|
||||
});
|
||||
$("body").on("click", ".refresh", function (){
|
||||
load_data();
|
||||
load_data($('#search_peer_textbox').val());
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('static',filename='configuration.js') }}"></script>
|
||||
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
|
||||
</html>
|
||||
@@ -1,9 +1,3 @@
|
||||
<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 src="{{ url_for('static',filename='tools.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
|
||||
<script src="{{ url_for('static',filename='js/bootstrap.bundle.js') }}"></script>
|
||||
<script src="{{ url_for('static',filename='js/tools.js') }}"></script>
|
||||
|
||||
@@ -39,8 +39,11 @@
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PUBLIC KEY</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
|
||||
<small class="text-muted">
|
||||
<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>
|
||||
</small>
|
||||
<h6 style="text-transform: uppercase;"><samp class="key">{{conf_data['public_key']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LISTEN PORT</strong></small>
|
||||
@@ -48,85 +51,122 @@
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="button-div mb-3" style="text-align: right;">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm btn-group-label refresh"><i class="bi bi-arrow-repeat"></i></button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="5000">5s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="10000">10s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="30000">30s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="60000">1m</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary add_btn btn-sm" data-toggle="modal" data-target="#add_modal">
|
||||
<i class="bi bi-plus-circle-fill"></i> PEER
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for i in conf_data['peer_data']%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card-header-body ">
|
||||
{% if not i['name']%}
|
||||
{{ "Untitled Peer" }}
|
||||
{% else %}
|
||||
{{i['name']}}
|
||||
{% endif %}
|
||||
<span class="dot dot-{{i['status']}}"></span>
|
||||
<div class="button-div mb-3">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
|
||||
<select class="form-control" id="sort_by_dropdown">
|
||||
<option value="status" {% if sort_tag == "status" %} {{ "selected" }} {% endif %}>Status</option>
|
||||
<option value="name" {% if sort_tag == "name" %} {{ "selected" }} {% endif %}>Name</option>
|
||||
<option value="allowed_ip" {% if sort_tag == "allowed_ip" %} {{ "selected" }} {% endif %}>Allowed IP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label><small class="text-muted">Refresh Interval</small></label><br>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-primary btn-group-label refresh"><i class="bi bi-arrow-repeat"></i></button>
|
||||
<button type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 5000 %} {{ "active" }} {% endif %}" refresh-interval="5000">5s</button>
|
||||
<button type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 10000 %} {{ "active" }} {% endif %}" refresh-interval="10000">10s</button>
|
||||
<button type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 30000 %} {{ "active" }} {% endif %}" refresh-interval="30000">30s</button>
|
||||
<button type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 60000 %} {{ "active" }} {% endif %}" refresh-interval="60000">1m</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm peer_data_group">
|
||||
<p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
|
||||
<p class="text-success" style="text-transform: uppercase; display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label><small class="text-muted">Add</small></label><br>
|
||||
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal" style="width: 100%">
|
||||
<i class="bi bi-plus-circle-fill"></i> Add Peer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PEER</strong></small>
|
||||
<h6><samp class="ml-auto">{{i['id']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>ALLOWED IP</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>END POINT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<hr>
|
||||
<div class="button-group" style="display:flex">
|
||||
|
||||
<button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button>
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>
|
||||
{% if i['private_key'] %}
|
||||
<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline">
|
||||
<button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" img_src="{{ qrcode("[Interface]\nPrivateKey = "+i['private_key']+"\nAddress = "+i['allowed_ip']+"\nDNS = 1.1.1.1\n\n[Peer]\nPublicKey = "+conf_data['public_key']+"\nAllowedIPs = 0.0.0.0/0\nEndpoint = "+wg_ip+":"+conf_data['listen_port']) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg>
|
||||
</button>
|
||||
<a href="/download/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}" type="button" class="btn btn-outline-info btn-download-peer btn-control">
|
||||
<i class="bi bi-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% if conf_data['peer_data']|length == 0 %}
|
||||
<div class="col-12" style="text-align: center; margin-top: 1.5rem">
|
||||
<h3 class="text-muted">Oops! No peers found ‘︿’</h3>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% for i in conf_data['peer_data']%}
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card-header-body ">
|
||||
{% if not i['name']%}
|
||||
{{ "Untitled Peer" }}
|
||||
{% else %}
|
||||
{{i['name']}}
|
||||
{% endif %}
|
||||
<span class="dot dot-{{i['status']}}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 peer_data_group">
|
||||
<p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
|
||||
<p class="text-success" style="text-transform: uppercase; display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<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">{{i['id']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>ALLOWED IP</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>END POINT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<hr>
|
||||
<div class="button-group" style="display:flex">
|
||||
|
||||
<button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button>
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>
|
||||
{% if i['private_key'] %}
|
||||
<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline">
|
||||
<button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" img_src="{{ qrcode("[Interface]\nPrivateKey = "+i['private_key']+"\nAddress = "+i['allowed_ip']+"\nDNS = 1.1.1.1\n\n[Peer]\nPublicKey = "+conf_data['public_key']+"\nAllowedIPs = 0.0.0.0/0\nEndpoint = "+wg_ip+":"+conf_data['listen_port']) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg>
|
||||
</button>
|
||||
<a href="/download/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}" type="button" class="btn btn-outline-info btn-download-peer btn-control">
|
||||
<i class="bi bi-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{%endfor%}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<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="icon" href="{{ url_for('static',filename='logo.png') }}"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='dashboard.css') }}">
|
||||
<title>Wireguard Dashboard - {{ title }}</title>
|
||||
<link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
|
||||
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
|
||||
</head>
|
||||
|
||||
|
||||
@@ -4,4 +4,7 @@
|
||||
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="progress" style="height: 3px; position: fixed; width: 100%; z-index: 10000; background-color: transparent">
|
||||
<div class="progress-bar" role="progressbar" style="z-index: 10000; width: 0%"></div>
|
||||
</div>
|
||||
@@ -1,41 +1,64 @@
|
||||
<html>
|
||||
{% include "header.html" %}
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid">
|
||||
{% include "sidebar.html" %}
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
|
||||
<div class="setting-container mt-4">
|
||||
{% if message != ""%}
|
||||
<div class="alert alert-{{ status }}" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h1 class="pb-4">Settings</h1>
|
||||
{% if required_auth == "true" %}
|
||||
<h3>Account</h3>
|
||||
<form action="/update_acct" method="post">
|
||||
<div class="form-group">
|
||||
{% include "header.html" %}
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid">
|
||||
{% include "sidebar.html" %}
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
|
||||
<div class="setting-container mt-4">
|
||||
{% if message != "" %}
|
||||
<div class="alert alert-{{ status }}" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h1 class="pb-4">Settings</h1>
|
||||
{% if required_auth == "true" %}
|
||||
<h3>Account</h3>
|
||||
<form action="/update_acct" method="post">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" class="form-control mb-4" id="username" name="username" value="{{ session['username'] }}">
|
||||
<button type="submit" class="btn btn-success" >Update Account</button>
|
||||
<input type="text" class="form-control mb-4" id="username" name="username"
|
||||
value="{{ session['username'] }}" required>
|
||||
<button type="submit" class="btn btn-success">Update Account</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>New Peer Default Settings</h3>
|
||||
<form action="/update_peer_default_config" method="post">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="username">DNS</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_global_DNS" name="peer_global_DNS"
|
||||
value="{{ peer_global_DNS }}" required>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<label for="username">Peer Endpoint Allowed IPs</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip" name="peer_endpoint_allowed_ip"
|
||||
value="{{ peer_endpoint_allowed_ip }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>WireGuard Configuration Path</h3>
|
||||
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
|
||||
<div class="form-group">
|
||||
<label for="username">Path</label>
|
||||
<button class="btn btn-success" type="submit">Update Peer Default Settings</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
|
||||
<input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path" value="{{ wg_conf_path }}">
|
||||
<p>Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code></p>
|
||||
|
||||
<h3>WireGuard Configuration Path</h3>
|
||||
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
|
||||
<div class="form-group">
|
||||
<label for="username">Path</label>
|
||||
<input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path"
|
||||
value="{{ wg_conf_path }}">
|
||||
<p>Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
|
||||
</p>
|
||||
<button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>Security</h3>
|
||||
<form action="/update_pwd", method="post">
|
||||
<div class="form-group">
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>Security</h3>
|
||||
<form action="/update_pwd" , method="post">
|
||||
<div class="form-group">
|
||||
<label for="currentpass">Current Password</label>
|
||||
<input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
|
||||
<label for="newpass">New Password</label>
|
||||
@@ -43,37 +66,42 @@
|
||||
<label for="repnewpass">Repeat New Password</label>
|
||||
<input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
|
||||
<button type="submit" class="btn btn-danger">Update Password</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
{% endif %}
|
||||
<h3>Dashboard Configuration</h3>
|
||||
<form action="/update_app_ip_port" method="post" class="update_app_ip_port">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="app_ip">Dashboard IP</label>
|
||||
<input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
|
||||
<p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server
|
||||
IP Address.</small></p>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
{% endif %}
|
||||
<h3>Dashboard Configuration</h3>
|
||||
<form action="/update_app_ip_port" method="post" class="update_app_ip_port">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="app_ip" >Dashboard IP</label>
|
||||
<input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
|
||||
<p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server IP Address.</small></p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<label for="app_port">Dashboard Port</label>
|
||||
<input type="text" class="form-control mb-4" id="app_port" name="app_port" value="{{ app_port }}">
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger confirm_modal" data-toggle="modal" data-target="#confirmModal">Update Configuration & Restart</button>
|
||||
<div class="col-sm">
|
||||
<label for="app_port">Dashboard Port</label>
|
||||
<input type="text" class="form-control mb-4" id="app_port" name="app_port"
|
||||
value="{{ app_port }}">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
|
||||
data-target="#confirmModal">Update Configuration & Restart
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="confirmModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="confirmModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Confirm Dashboard Configuration</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<small>Dashboard Original IP</small>
|
||||
<p>{{ app_ip }}</p>
|
||||
<small style="font-weight: bold" class="text-bold">Dashboard New IP</small>
|
||||
@@ -82,49 +110,49 @@
|
||||
<p>{{ app_port }}</p>
|
||||
<small style="font-weight: bold" class="text-bold">Dashboard New Port</small>
|
||||
<p class="app_new_port text-bold text-danger" style="font-weight: bold"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary cancel_restart" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger confirm_restart">Confirm & Restart Dashboard</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
$(".sb-settings-url").addClass("active")
|
||||
$(".confirm_modal").click(function (){
|
||||
$(".confirm_modal").click(function () {
|
||||
$(".app_new_ip").html($("#app_ip")[0].value)
|
||||
$(".app_new_port").html($("#app_port")[0].value)
|
||||
})
|
||||
|
||||
$(".confirm_restart").click(function (){
|
||||
$(".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;
|
||||
url = $("#app_ip")[0].value + ":" + $("#app_port")[0].value;
|
||||
$(".confirm_restart").attr("disabled", "disabled")
|
||||
setInterval(function (){
|
||||
if (countdown === 0){
|
||||
window.location.replace("http://"+url);
|
||||
setInterval(function () {
|
||||
if (countdown === 0) {
|
||||
window.location.replace("http://" + url);
|
||||
}
|
||||
$(".confirm_restart").html("Redirecting you in "+countdown+" seconds.")
|
||||
$(".confirm_restart").html("Redirecting you in " + countdown + " seconds.")
|
||||
countdown--;
|
||||
},1000)
|
||||
}, 1000)
|
||||
});
|
||||
|
||||
$(".change_path").click(function (){
|
||||
$(".change_path").click(function () {
|
||||
$(this).attr("disabled", "disabled");
|
||||
countdown = 5;
|
||||
setInterval(function (){
|
||||
if (countdown === 0){
|
||||
setInterval(function () {
|
||||
if (countdown === 0) {
|
||||
location.reload()
|
||||
}
|
||||
$(".change_path").html("Redirecting you in "+countdown+" seconds.")
|
||||
$(".change_path").html("Redirecting you in " + countdown + " seconds.")
|
||||
countdown--;
|
||||
},1000)
|
||||
}, 1000)
|
||||
$.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize())
|
||||
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>Wireguard Dashboard | Login</title>
|
||||
<link rel="icon" href="{{ url_for('static',filename='logo.png') }}"/>
|
||||
<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') }}">
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
|
||||
Reference in New Issue
Block a user