kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-06-30 22:50:14 +02:00
Code

Merge pull request #76 from donaldzou/v2.3

Browse Source 
V2.3
This commit is contained in:
Donald Zou 2021-09-08 12:42:11 -04:00 committed by GitHub
commit 1736359615
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 779 additions and 455 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
README.md
View File

@ -4,9 +4,9 @@
<p align="center">
<img src="img/logo.png" width="128">
<img alt="Wireguard Dashboard Logo" src="img/logo.png" width="128">
</p>
<h1 align="center"> Wireguard Dashboard</h1>
<h1 align="center">Wireguard Dashboard</h1>
<p align="center">
<img src="http://ForTheBadge.com/images/badges/made-with-python.svg">
@ -17,29 +17,22 @@
<p align="center">Monitoring WireGuard is not convinient, need to login into server and type <code>wg show</code>. That's why this platform is being created, to view all configurations and manage them in a easier way.</p>
## 📣 What's New: Version v2.2
## 📣 What's New: Version v2.3
- 🎉 **New Features**
- **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]
- **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]
- **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
- **Search peers**: You can now search peers by their name.
- **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]
- **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
- ....
- **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
- **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
- 🪚 **Bug Fixed**
- When there are comments in the wireguard config file, will cause the dashboard to crash.
- Used regex to search for config files.
- [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check. [❤️ @realfian]
- [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`. [❤️ @ramalmaty]
- [Feature request: Interface not loading when information missing #73](https://github.com/donaldzou/wireguard-dashboard/issues/73): Fixed when Configuration Address and Listen Port is missing will crash the dashboard. [❤️ @js32]
- [Remote Peer, MTU and PersistentKeepalives added #70](https://github.com/donaldzou/wireguard-dashboard/pull/70): Added MTU, remote peer and Persistent Keepalive. [❤️ @realfian]
- [Fixes DNS check to support search domain #65](https://github.com/donaldzou/wireguard-dashboard/pull/65): Added allow input domain into DNS. [❤️@davejlong]
- **🧐 Other Changes**
- Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
- Updated Python dependencies
- Flask: `v1.1.2 => v2.0.1`
- Jinja: `v2.10.1 => v3.0.1`
- icmplib: `v2.1.1 => v3.0.1`
- Updated CSS/JS dependencies
- Bootstrap: `v4.5.3 => v4.6.0`
- UI adjustment
- Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
- Moved Add Peer Button into the right bottom corner.
<hr>
@ -115,30 +108,30 @@
cd wireguard-dashboard/src
```
3. Install Python Dependencies
```shell
python3 -m pip install -r requirements.txt
```
4. Give read, write and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files is not stored in `/etc/wireguard`
```shell
sudo chmod -R 744 /etc/wireguard
```
5. Install & run Wireguard Dashboard
3. Install Wireguard Dashboard
```shell
sudo chmod u+x wgd.sh
./wgd.sh start
sudo ./wgd.sh install
```
4. Give read and execute permission to root of the WireGuard configuration folder, you can change the path if your configuration files are not stored in `/etc/wireguard`
```shell
sudo chmod -R 755 /etc/wireguard
```
5. Run Wireguard Dashboard
```shell
./wgd.sh start
```
**Note**:
> For [`pivpn`](https://github.com/pivpn/pivpn) user, please use `sudo ./wgd.sh start` to run if your current account does not have the permission to run `wg show` and `wg-quick`.
6. **Access dashboard**
6. Access dashboard
Access your server with port `10086` ! e.g (http://your_server_ip:10086), continue to read to on how to change port and ip that dashboard is running with.
@ -330,21 +323,12 @@ Endpoint = 0.0.0.0:51820
1. Change your directory to `wireguard-dashboard`
```shell
cd wireguard-dashboard
cd wireguard-dashboard/src
```
2. Get the newest version
2. Update the dashboard
```shell
sudo git stash
sudo git pull https://github.com/donaldzou/wireguard-dashboard.git v2.2.1 --force
sudo ./wgd.sh update
```
3. Update and install all python dependencies
```shell
python3 -m pip install -r requirements.txt
```
4. Start the dashboard
```shell
./wgd.sh start
```
## 🔍 Screenshot
![Sign In Page](img/SignIn.png)
@ -369,6 +353,36 @@ Endpoint = 0.0.0.0:51820
## ⏰ Changelog
#### v2.2.1 - Aug 16, 2021
Bug Fixed:
- Added support for full subnet on Allowed IP
- Peer setting Save button
#### v2.2 - Aug 14, 2021
- 🎉 **New Features**
- **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]
- **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]
- **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
- **Search peers**: You can now search peers by their name.
- **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]
- **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
- ....
- 🪚 **Bug Fixed**
- When there are comments in the wireguard config file, will cause the dashboard to crash.
- Used regex to search for config files.
- **🧐 Other Changes**
- Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
- Updated Python dependencies
- Flask: `v1.1.2 => v2.0.1`
- Jinja: `v2.10.1 => v3.0.1`
- icmplib: `v2.1.1 => v3.0.1`
- Updated CSS/JS dependencies
- Bootstrap: `v4.5.3 => v4.6.0`
- UI adjustment
- Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
#### v2.1 - Jul 2, 2021
- Added **Ping** and **Traceroute** tools!

612
src/dashboard.py
View File

File diff suppressed because it is too large Load Diff

33
src/static/css/dashboard.css
View File

@ -194,15 +194,30 @@ main{
margin-bottom: 3rem;
}
/*.add_btn{*/
/* position: fixed;*/
/* bottom: 1.75rem;*/
/* right: 1.75rem;*/
/* z-index: 1000;*/
/* padding: 0.75rem 1.5rem;*/
/* border-radius: 3rem;*/
/* font-size: 1rem;*/
/*}*/
.peer_list{
margin-bottom: 7rem
}
@media (max-width: 768px) {
.add_btn{
bottom: 1.5rem !important;
}
.peer_list{
margin-bottom: 4rem !important;
}
}
.add_btn{
position: fixed;
bottom: 3rem;
right: 2rem;
z-index: 99;
border-radius: 100px;
padding: 10px 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {

49
src/static/js/configuration.js
View File

@ -17,7 +17,6 @@ function generate_key(){
$("#re_generate_key i").removeClass("rotating")
})
}
function generate_public_key(){
$.ajax({
"url": "/generate_public_key",
@ -26,7 +25,7 @@ function generate_public_key(){
"data": JSON.stringify({"private_key": $("#private_key").val()})
}).done(function(res){
if(res['status'] === "failed"){
$("#add_peer_alert").html(res['msg']+$("#add_peer_alert").html());
$("#add_peer_alert").html(res['msg']);
$("#add_peer_alert").removeClass("d-none");
}else{
$("#add_peer_alert").addClass("d-none");
@ -46,24 +45,21 @@ $("#private_key").change(function(){
$("#public_key").val("")
}
})
$('#add_modal').on('show.bs.modal', function (event) {
generate_key()
})
$("#re_generate_key").click(function (){
$("#public_key").attr("disabled","disabled")
$("#re_generate_key i").addClass("rotating")
generate_key()
})
$("#save_peer").click(function(){
$(this).attr("disabled","disabled")
$(this).html("Saving...")
if ($("#allowed_ips").val() !== "" && $("#public_key").val() !== "" && $("#new_add_DNS").val() !== "" && $("#new_add_endpoint_allowed_ip").val() != ""){
var conf = $(this).attr('conf_id')
var data_list = [$("#private_key"), $("#allowed_ips"), $("#new_add_name"), $("#new_add_DNS"), $("#new_add_endpoint_allowed_ip")]
var data_list = [$("#private_key"), $("#allowed_ips"), $("#new_add_name"), $("#new_add_DNS"), $("#new_add_endpoint_allowed_ip"),$("#new_add_MTU"),$("#new_add_keep_alive")]
for (var i = 0; i < data_list.length; i++){
data_list[i].attr("disabled", "disabled")
}
@ -79,12 +75,19 @@ $("#save_peer").click(function(){
"allowed_ips": $("#allowed_ips").val(),
"name":$("#new_add_name").val(),
"DNS": $("#new_add_DNS").val(),
"endpoint_allowed_ip": $("#new_add_endpoint_allowed_ip").val()
"endpoint_allowed_ip": $("#new_add_endpoint_allowed_ip").val(),
"MTU": $("#new_add_MTU").val(),
"keep_alive": $("#new_add_keep_alive").val()
}),
success: function (response){
if(response != "true"){
$("#add_peer_alert").html(response+$("#add_peer_alert").html());
$("#add_peer_alert").html(response);
$("#add_peer_alert").removeClass("d-none");
for (var i = 0; i < data_list.length; i++){
data_list[i].removeAttr("disabled", "disabled")
}
$("#save_peer").removeAttr("disabled")
$("#save_peer").html("Save")
}
else{
location.reload();
@ -164,13 +167,15 @@ $("body").on("click", ".btn-setting-peer", function(){
},
data: JSON.stringify({"id": peer_id}),
success: function(response){
let peer_name = ((response['name'] === "") ? "Untitled Peer" : response['name']);
var peer_name = ((response['name'] === "") ? "Untitled Peer" : response['name'])
$("#setting_modal .peer_name").html(peer_name);
$("#setting_modal #peer_name_textbox").val(peer_name)
$("#setting_modal #peer_name_textbox").val(response['name'])
$("#setting_modal #peer_private_key_textbox").val(response['private_key'])
$("#setting_modal #peer_DNS_textbox").val(response['DNS'])
$("#setting_modal #peer_allowed_ip_textbox").val(response['allowed_ip'])
$("#setting_modal #peer_endpoint_allowed_ips").val(response['endpoint_allowed_ip'])
$("#setting_modal #peer_mtu").val(response['mtu'])
$("#setting_modal #peer_keep_alive").val(response['keep_alive'])
settingModal.toggle();
endProgressBar()
}
@ -211,7 +216,10 @@ $("#save_peer_setting").click(function (){
){
var peer_id = $(this).attr("peer_id");
var conf_id = $(this).attr("conf_id");
var data_list = [$("#peer_name_textbox"), $("#peer_DNS_textbox"), $("#peer_private_key_textbox"), $("#peer_allowed_ip_textbox"), $("#peer_endpoint_allowed_ips")]
var data_list = [
$("#peer_name_textbox"), $("#peer_DNS_textbox"), $("#peer_private_key_textbox"),
$("#peer_allowed_ip_textbox"), $("#peer_endpoint_allowed_ips"), $("#peer_mtu"), $("#peer_keep_alive")
]
for (var i = 0; i < data_list.length; i++){
data_list[i].attr("disabled", "disabled")
}
@ -227,7 +235,9 @@ $("#save_peer_setting").click(function (){
DNS: $("#peer_DNS_textbox").val(),
private_key: $("#peer_private_key_textbox").val(),
allowed_ip: $("#peer_allowed_ip_textbox").val(),
endpoint_allowed_ip: $("#peer_endpoint_allowed_ips").val()
endpoint_allowed_ip: $("#peer_endpoint_allowed_ips").val(),
MTU: $("#peer_mtu").val(),
keep_alive: $("#peer_keep_alive").val()
}),
success: function (response){
if (response['status'] === "failed"){
@ -279,7 +289,6 @@ function doneTyping () {
load_data($('#search_peer_textbox').val());
}
// Sorting
$("body").on("change", "#sort_by_dropdown", function (){
$.ajax({
@ -293,7 +302,7 @@ $("body").on("change", "#sort_by_dropdown", function (){
})
})
// Click key to copy
$("body").on("mouseenter", ".key", function(){
var label = $(this).parent().siblings().children()[1]
label.style.opacity = "100"
@ -319,6 +328,7 @@ function copyToClipboard(element) {
$temp.remove();
}
// Update Interval
$("body").on("click", ".update_interval", function(){
$.ajax({
method:"POST",
@ -332,3 +342,14 @@ $("body").on("click", ".update_interval", function(){
$("body").on("click", ".refresh", function (){
load_data($('#search_peer_textbox').val());
});
// Switch display mode
$("body").on("click", ".display_mode", function(){
$.ajax({
method:"GET",
url: "/switch_display_mode/"+$(this).attr("display-mode"),
success: function (res){
location.reload()
}
})
})

88
src/templates/configuration.html
View File

@ -11,11 +11,7 @@
<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 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,9 +40,7 @@
<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>
<button type="button" class="btn btn-danger" id="re_generate_key"><i class="bi bi-arrow-repeat"></i></button>
</div>
</div>
</div>
@ -73,13 +67,24 @@
<input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label>
<input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="new_add_MTU">MTU</label>
<input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
</div>
</div>
<div class="col-sm-6">
<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>
</form>
</div>
@ -132,29 +137,51 @@
<span aria-hidden="true">&times;</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">
<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>
</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">
<hr>
<div class="row">
<div class="col-sm-6">
<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>
<div class="col-sm-6">
<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">
</div>
</div>
<div class="col-sm-6">
<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>
</div>
<div class="col-sm-6">
<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="col-sm-6">
<div class="mb-3">
<label for="peer_mtu" class="form-label">MTU</label>
<input type="text" class="form-control" id="peer_mtu">
</div>
</div>
<div class="col-sm-6">
<div class="mb-3">
<label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
<input type="text" class="form-control" id="peer_keep_alive">
</div>
</div>
</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>
<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>
@ -223,9 +250,6 @@
},250)
}
function load_data(search){
startProgressBar()
$.ajax({
@ -237,9 +261,7 @@
success: function (response){
$("#config_body").html(response);
$("#search_peer_textbox").css("display", "block")
if (bar.css("width") !== "0%"){
endProgressBar()
}
endProgressBar()
}
})
}
@ -249,8 +271,6 @@
load_data($('#search_peer_textbox').val());
}, {{dashboard_refresh_interval}})
});
</script>
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
</html>

60
src/templates/get_conf.html
View File

@ -1,9 +1,19 @@
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
<div class="info mt-4">
{% if conf_data['listen_port'] == "" and conf_data['status'] == "stopped" %}
<div class="alert alert-warning" role="alert">
Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.
</div>
{% endif %}
{% if conf_data['conf_address'] == "N/A" %}
<div class="alert alert-warning" role="alert">
Configuration <strong>Address</strong> not be specified to have peer connect to it.
</div>
{% endif %}
<div class="row">
<div class="col">
<small class="text-muted"><strong>CONFIGURATION</strong></small>
<h1 class="mb-3">{{conf_data['name']}}</h1>
<h1 class="mb-3"><samp>{{conf_data['name']}}</samp></h1>
</div>
<div class="col">
<small class="text-muted"><strong>ACTION</strong></small><br>
@ -47,7 +57,14 @@
</div>
<div class="col-sm">
<small class="text-muted"><strong>LISTEN PORT</strong></small>
<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
<h6 style="text-transform: uppercase;"><samp>
{% if conf_data['listen_port'] == "" %}
N/A
{% else %}
{{conf_data['listen_port']}}
{% endif %}
</samp></h6>
</div>
<div class="col-sm">
<small class="text-muted"><strong>ADDRESS</strong></small>
@ -81,18 +98,22 @@
</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>
<label><small class="text-muted">Display Mode</small></label><br>
<div class="btn-group" role="group" style="width: 100%">
<button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "grid" %} {{ "active" }} {% endif %}" display-mode="grid"><i class="bi bi-grid-fill" style="font-size: 1.5rem;"></i></button>
<button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "list" %} {{ "active" }} {% endif %}" display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal">
<i class="bi bi-plus-circle-fill" style=""></i> Add Peer
</button>
</div>
<hr>
</div>
</div>
<div class="row">
<div class="row peer_list">
{% 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>
@ -100,28 +121,37 @@
{% endif %}
{% for i in conf_data['peer_data']%}
<div class="col-sm-6 col-md-4">
{% if peer_display_mode == "list" %}
<div class="col-12">
{% else %}
<div class="col-sm-6 col-lg-4">
{% endif %}
<div class="card mb-3">
<div class="card-header">
<div class="row">
<div class="col-12">
<div class="col">
<div class="card-header-body ">
{% if not i['name']%}
{{ "Untitled Peer" }}
{{ "Untitled" }}
{% else %}
{{i['name']}}
{% endif %}
<span class="dot dot-{{i['status']}}"></span>
{# <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-6">
<small class="text-muted"><strong>STATUS</strong></small>
<h6 style="text-transform: uppercase;" class="mb-2"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
</div>
<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> {{i['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> {{i['total_sent']}} GB</small></p>
</div>
<div class="col-sm">
<small class="text-muted" style="display: flex">
<strong>PEER</strong>

192
src/templates/settings.html
View File

@ -1,7 +1,7 @@
<html>
{% with %}
{% set title="Settings" %}
{% include "header.html"%}
{% include "header.html" %}
{% endwith %}
<body>
{% include "navbar.html" %}
@ -14,86 +14,124 @@
{{ message }}
</div>
{% endif %}
<h1 class="pb-4">Settings</h1>
<h1 class="">Settings</h1>
<hr>
{% 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'] }}" 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 class="card mb-3">
<h6 class="card-header">Peer Default Settings</h6>
<div class="card-body">
<form action="/update_peer_default_config" method="post">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="peer_global_DNS">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-6">
<label for="peer_endpoint_allowed_ip">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 class="col-sm-6">
<label for="peer_mtu">MTU</label>
<input type="text" class="form-control mb-4" id="peer_mtu"
name="peer_mtu"
value="{{ peer_mtu }}">
</div>
<div class="col-sm-6">
<label for="peer_keep_alive">Persistent Keepalive</label>
<input type="text" class="form-control mb-4" id="peer_keep_alive"
name="peer_keep_alive"
value="{{ peer_keepalive }}">
</div>
<div class="col-sm-12">
<label for="peer_remote_endpoint"><strong>Peer Remote Endpoint (This will be change globally, and will be apply to all peer's QR code and configuration file.)</strong></label>
<input type="text" class="form-control mb-4" id="peer_remote_endpoint"
name="peer_remote_endpoint"
value="{{ peer_remote_endpoint }}" required>
</div>
</div>
<button class="btn btn-success" type="submit">Update Peer Default Settings</button>
</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>
<button class="btn btn-success" type="submit">Update Peer Default Settings</button>
</form>
</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>
<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">
<label for="currentpass">Current Password</label>
<input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
<label for="newpass">New Password</label>
<input type="password" class="form-control mb-2" id="newpass" name="newpass">
<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>
<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>
</form>
<hr>
<div class="card mb-3">
<h6 class="card-header">WireGuard Configuration Path</h6>
<div class="card-body">
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
<div class="form-group">
<label for="wg_conf_path">Path</label>
<input type="text" class="form-control mb-2" id="wg_conf_path" name="wg_conf_path"
value="{{ wg_conf_path }}">
<p class="text-muted">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>
</div>
</div>
<div class="card mb-3">
<h6 class="card-header">Account</h6>
<div class="card-body">
<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'] }}" required>
<button type="submit" class="btn btn-danger">Update Account</button>
</div>
</form>
</div>
</div>
<div class="card mb-3">
<h6 class="card-header">Security</h6>
<div class="card-body">
<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>
<input type="password" class="form-control mb-2" id="newpass" name="newpass">
<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>
</div>
</div>
{% endif %}
<div class="card">
<h6 class="card-header">Dashboard Configuration</h6>
<div class="card-body">
<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 Dashboard
</button>
</div>
</form>
</div>
</div>
</div>
</main>
<!-- Modal -->

2
src/templates/sidebar.html
View File

@ -19,7 +19,7 @@
</h6>
<ul class="nav flex-column">
{% for i in conf%}
<li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
<li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
{%endfor%}
</ul>
<hr>

5
src/templates/signin.html
View File

@ -36,4 +36,9 @@
</div>
</body>
{% include "footer.html" %}
<script>
$("button").click(function(){
$(this).html("Signing In...")
})
</script>
</html>

83
src/wgd.sh
View File

@ -1,26 +1,42 @@
#!/bin/bash
app_name="dashboard.py"
app_official_name="Wireguard Dashboard"
dashes='------------------------------------------------------------'
equals='============================================================'
help () {
printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
printf "Usage: sh wgd.sh <option>"
printf "\n \n"
printf "Available options: \n"
printf " start: To start Wireguard Dashboard.\n"
printf " stop: To stop Wireguard Dashboard.\n"
printf " debug: To start Wireguard Dashboard in debug mode (i.e run in foreground).\n"
printf " update: To update Wireguard Dashboard to the newest version from GitHub.\n"
printf "Thank you for using this dashboard! Your support is my motivation ;) \n"
printf "\n"
printf "=================================================================================\n"
printf "+ <Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou +\n"
printf "=================================================================================\n"
printf "| Usage: ./wgd.sh <option> |\n"
printf "| |\n"
printf "| Available options: |\n"
printf "| start: To start Wireguard Dashboard |\n"
printf "| stop: To stop Wireguard Dashboard. |\n"
printf "| debug: To start Wireguard Dashboard in debug mode (i.e run in foreground). |\n"
printf "| update: To update Wireguard Dashboard to the newest version from GitHub. |\n"
printf "| install: To install Wireguard Dashboard. |\n"
printf "| Thank you for using! Your support is my motivation ;) |\n"
printf "=================================================================================\n"
}
install_wgd(){
rm db/hi.txt
# Check Python3 version
version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
if [ $version_pass == "0" ]
then printf "| Wireguard Dashboard required Python3.7+ |\n"
printf "%s\n" "$dashes"
exit 1
fi
rm db/hi.txt > /dev/null 2>&1
if [ ! -d "log" ]
then mkdir "log"
fi
printf "| Installing latest Python dependencies |\n"
python3 -m pip install -r requirements.txt > /dev/null 2>&1
printf "| Wireguard Dashboard installed successfully! |\n"
printf "| Starting Dashboard |\n"
start_wgd
}
@ -34,14 +50,15 @@ check_wgd_status(){
}
start_wgd () {
printf "%s" "$PLATFORM"
printf "Starting Wireguard Dashboard in the background. \n"
printf "%s\n" "$dashes"
printf "| Starting Wireguard Dashboard in the background. |\n"
if [ ! -d "log" ]
then mkdir "log"
fi
d=$(date '+%Y%m%d%H%M%S')
python3 "$app_name" > log/"$d".txt 2>&1 &
printf "Log file: log/%s""$d"".txt\n"
printf "| Log files is under log/ |\n"
printf "%s\n" "$dashes"
}
stop_wgd() {
@ -49,33 +66,30 @@ stop_wgd() {
}
start_wgd_debug() {
printf "Starting Wireguard Dashboard in the foreground. \n"
printf "%s\n" "$dashes"
printf "| Starting Wireguard Dashboard in the foreground. |\n"
python3 "$app_name"
printf "%s\n" "$dashes"
}
update_wgd() {
new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases').read(); output = json.loads(data);print(output[0]['tag_name'])")
new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output['tag_name'])")
printf "%s\n" "$dashes"
printf "Are you sure you want to update to the %s? (Y/N): " "$new_ver"
printf "| Are you sure you want to update to the %s? (Y/N): " "$new_ver"
read up
if [ "$up" = "Y" ]; then
printf "%s\n" "$dashes"
printf "| Shutting down Wireguard Dashboard... |\n"
printf "%s\n" "$dashes"
stop_wgd
kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
printf "| Downloading %s from GitHub... |\n" "$new_ver"
printf "%s\n" "$dashes"
git stash > /dev/null 2>&1
git pull https://github.com/donaldzou/wireguard-dashboard.git $new_ver --force > /dev/null 2>&1
printf "%s\n" "$dashes"
printf "| Installing latest Python dependencies |\n"
python3 -m pip install -r requirements.txt > /dev/null 2>&1
printf "| Update Successfully! |\n"
printf "%s\n" "$dashes"
start_wgd
else
printf "%s\n" "$dashes"
printf "CANCEL update. \n"
printf "| Update Canceled. |\n"
printf "%s\n" "$dashes"
fi
}
@ -87,31 +101,40 @@ if [ "$#" != 1 ];
else
if [ "$1" = "start" ]; then
if check_wgd_status; then
printf "Wireguard Dashboard is already running. \n"
printf "%s\n" "$dashes"
printf "| Wireguard Dashboard is already running. |\n"
printf "%s\n" "$dashes"
else
start_wgd
fi
elif [ "$1" = "stop" ]; then
if check_wgd_status; then
printf "%s\n" "$dashes"
stop_wgd
printf "Wireguard Dashboard is stopped. \n"
printf "| Wireguard Dashboard is stopped. |\n"
printf "%s\n" "$dashes"
else
printf "Wireguard Dashboard is not running. \n"
printf "%s\n" "$dashes"
printf "| Wireguard Dashboard is not running. |\n"
printf "%s\n" "$dashes"
fi
elif [ "$1" = "update" ]; then
update_wgd
elif [ "$1" = "install" ]; then
install_wgd
elif [ "$1" = "restart" ]; then
if check_wgd_status; then
printf "%s\n" "$dashes"
stop_wgd
printf "| Wireguard Dashboard is stopped. |\n"
sleep 2
printf "Wireguard Dashboard is stopped. \n"
start_wgd
else
start_wgd
fi
elif [ "$1" = "debug" ]; then
if check_wgd_status; then
printf "Wireguard Dashboard is already running. \n"
printf "| Wireguard Dashboard is already running. |\n"
else
start_wgd_debug
fi