kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-18 21:40:12 +01: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

108
README.md
View File

@ -4,9 +4,9 @@
<p align="center"> <p align="center">
<img src="img/logo.png" width="128"> <img alt="Wireguard Dashboard Logo" src="img/logo.png" width="128">
</p> </p>
<h1 align="center"> Wireguard Dashboard</h1> <h1 align="center">Wireguard Dashboard</h1>
<p align="center"> <p align="center">
<img src="http://ForTheBadge.com/images/badges/made-with-python.svg"> <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> <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** - 🎉 **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)] - **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
- **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)] - **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
- **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** - 🪚 **Bug Fixed**
- When there are comments in the wireguard config file, will cause the dashboard to crash. - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check. [❤️ @realfian]
- Used regex to search for config files. - [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** - **🧐 Other Changes**
- Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files). - Moved Add Peer Button into the right bottom corner.
- 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.
<hr> <hr>
@ -115,22 +108,22 @@
cd wireguard-dashboard/src cd wireguard-dashboard/src
``` ```
3. Install Python Dependencies 3. Install Wireguard Dashboard
```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
```shell ```shell
sudo chmod u+x wgd.sh sudo chmod u+x wgd.sh
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 ./wgd.sh start
``` ```
@ -138,7 +131,7 @@
> 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`. > 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. 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,20 +323,11 @@ Endpoint = 0.0.0.0:51820
1. Change your directory to `wireguard-dashboard` 1. Change your directory to `wireguard-dashboard`
```shell ```shell
cd wireguard-dashboard cd wireguard-dashboard/src
``` ```
2. Get the newest version 2. Update the dashboard
```shell ```shell
sudo git stash sudo ./wgd.sh update
sudo git pull https://github.com/donaldzou/wireguard-dashboard.git v2.2.1 --force
```
3. Update and install all python dependencies
```shell
python3 -m pip install -r requirements.txt
```
4. Start the dashboard
```shell
./wgd.sh start
``` ```
## 🔍 Screenshot ## 🔍 Screenshot
@ -369,6 +353,36 @@ Endpoint = 0.0.0.0:51820
## ⏰ Changelog ## ⏰ 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 #### v2.1 - Jul 2, 2021
- Added **Ping** and **Traceroute** tools! - Added **Ping** and **Traceroute** tools!

582
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; margin-bottom: 3rem;
} }
/*.add_btn{*/ .peer_list{
/* position: fixed;*/ margin-bottom: 7rem
/* bottom: 1.75rem;*/ }
/* right: 1.75rem;*/
/* z-index: 1000;*/ @media (max-width: 768px) {
/* padding: 0.75rem 1.5rem;*/ .add_btn{
/* border-radius: 3rem;*/ bottom: 1.5rem !important;
/* font-size: 1rem;*/ }
/*}*/
.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 */ { @-webkit-keyframes rotating /* Safari and Chrome */ {
from { from {

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

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

66
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"> <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="" style="display: none">
</div> </div>
</div> </div>
<div id="config_body"></div>
<div id="config_body">
</div>
</div> </div>
<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" <div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true"> aria-labelledby="staticBackdropLabel" aria-hidden="true">
@ -44,9 +40,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="private_key" aria-describedby="public_key"> <input type="text" class="form-control" id="private_key" aria-describedby="public_key">
<div class="input-group-append"> <div class="input-group-append">
<button type="button" class="btn btn-danger" id="re_generate_key"> <button type="button" class="btn btn-danger" id="re_generate_key"><i class="bi bi-arrow-repeat"></i></button>
<i class="bi bi-arrow-repeat"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -73,13 +67,24 @@
<input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}"> <input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label> <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 }}"> <input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
</div> </div>
</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> </div>
</form> </form>
</div> </div>
@ -132,29 +137,51 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="mb-3"> <div>
<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> <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"> <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> <a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
</div> </div>
<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"> <div class="mb-3">
<label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label> <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"> <input type="text" class="form-control" id="peer_allowed_ip_textbox">
</div> </div>
</div>
<div class="col-sm-6">
<div class="mb-3"> <div class="mb-3">
<label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label> <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
<input type="text" class="form-control" id="peer_DNS_textbox"> <input type="text" class="form-control" id="peer_DNS_textbox">
</div> </div>
</div>
<div class="col-sm-6">
<div class="mb-3"> <div class="mb-3">
<label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label> <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"> <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
</div> </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> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
@ -223,9 +250,6 @@
},250) },250)
} }
function load_data(search){ function load_data(search){
startProgressBar() startProgressBar()
$.ajax({ $.ajax({
@ -237,10 +261,8 @@
success: function (response){ success: function (response){
$("#config_body").html(response); $("#config_body").html(response);
$("#search_peer_textbox").css("display", "block") $("#search_peer_textbox").css("display", "block")
if (bar.css("width") !== "0%"){
endProgressBar() endProgressBar()
} }
}
}) })
} }
$(document).ready(function(){ $(document).ready(function(){
@ -249,8 +271,6 @@
load_data($('#search_peer_textbox').val()); load_data($('#search_peer_textbox').val());
}, {{dashboard_refresh_interval}}) }, {{dashboard_refresh_interval}})
}); });
</script> </script>
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script> <script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
</html> </html>

62
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"> <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"> <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="row">
<div class="col"> <div class="col">
<small class="text-muted"><strong>CONFIGURATION</strong></small> <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>
<div class="col"> <div class="col">
<small class="text-muted"><strong>ACTION</strong></small><br> <small class="text-muted"><strong>ACTION</strong></small><br>
@ -47,7 +57,14 @@
</div> </div>
<div class="col-sm"> <div class="col-sm">
<small class="text-muted"><strong>LISTEN PORT</strong></small> <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>
<div class="col-sm"> <div class="col-sm">
<small class="text-muted"><strong>ADDRESS</strong></small> <small class="text-muted"><strong>ADDRESS</strong></small>
@ -81,18 +98,22 @@
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="form-group"> <div class="form-group">
<label><small class="text-muted">Add</small></label><br> <label><small class="text-muted">Display Mode</small></label><br>
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal" style="width: 100%"> <div class="btn-group" role="group" style="width: 100%">
<i class="bi bi-plus-circle-fill"></i> Add Peer <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> </button>
</div> </div>
</div>
</div>
<hr> <hr>
</div> </div>
</div> </div>
<div class="row"> <div class="row peer_list">
{% if conf_data['peer_data']|length == 0 %} {% if conf_data['peer_data']|length == 0 %}
<div class="col-12" style="text-align: center; margin-top: 1.5rem"> <div class="col-12" style="text-align: center; margin-top: 1.5rem">
<h3 class="text-muted">Oops! No peers found ‘︿’</h3> <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
@ -100,28 +121,37 @@
{% endif %} {% endif %}
{% for i in conf_data['peer_data']%} {% 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 mb-3">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col">
<div class="card-header-body "> <div class="card-header-body ">
{% if not i['name']%} {% if not i['name']%}
{{ "Untitled Peer" }} {{ "Untitled" }}
{% else %} {% else %}
{{i['name']}} {{i['name']}}
{% endif %} {% endif %}
<span class="dot dot-{{i['status']}}"></span> {# <span class="dot dot-{{i['status']}}"></span>#}
</div> </div>
</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> </div>
<div class="card-body"> <div class="card-body">
<div class="row"> <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"> <div class="col-sm">
<small class="text-muted" style="display: flex"> <small class="text-muted" style="display: flex">
<strong>PEER</strong> <strong>PEER</strong>

100
src/templates/settings.html
View File

@ -1,7 +1,7 @@
<html> <html>
{% with %} {% with %}
{% set title="Settings" %} {% set title="Settings" %}
{% include "header.html"%} {% include "header.html" %}
{% endwith %} {% endwith %}
<body> <body>
{% include "navbar.html" %} {% include "navbar.html" %}
@ -14,53 +14,86 @@
{{ message }} {{ message }}
</div> </div>
{% endif %} {% endif %}
<h1 class="pb-4">Settings</h1> <h1 class="">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'] }}" required>
<button type="submit" class="btn btn-success">Update Account</button>
</div>
</form>
<hr> <hr>
<h3>New Peer Default Settings</h3> {% if required_auth == "true" %}
<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"> <form action="/update_peer_default_config" method="post">
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-6">
<label for="username">DNS</label> <label for="peer_global_DNS">DNS</label>
<input type="text" class="form-control mb-4" id="peer_global_DNS" name="peer_global_DNS" <input type="text" class="form-control mb-4" id="peer_global_DNS"
name="peer_global_DNS"
value="{{ peer_global_DNS }}" required> value="{{ peer_global_DNS }}" required>
</div> </div>
<div class="col-sm"> <div class="col-sm-6">
<label for="username">Peer Endpoint Allowed IPs</label> <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" <input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip"
name="peer_endpoint_allowed_ip"
value="{{ peer_endpoint_allowed_ip }}" required> value="{{ peer_endpoint_allowed_ip }}" required>
</div> </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> </div>
<button class="btn btn-success" type="submit">Update Peer Default Settings</button> <button class="btn btn-success" type="submit">Update Peer Default Settings</button>
</div> </div>
</form> </form>
</div>
</div>
<hr> <hr>
<div class="card mb-3">
<h6 class="card-header">WireGuard Configuration Path</h6>
<h3>WireGuard Configuration Path</h3> <div class="card-body">
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path"> <form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
<div class="form-group"> <div class="form-group">
<label for="username">Path</label> <label for="wg_conf_path">Path</label>
<input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path" <input type="text" class="form-control mb-2" id="wg_conf_path" name="wg_conf_path"
value="{{ 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 class="text-muted">Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
</p> </p>
<button class="btn btn-danger change_path">Update Path & Restart Dashboard</button> <button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
</div> </div>
</form> </form>
<hr> </div>
<h3>Security</h3> </div>
<form action="/update_pwd" , method="post">
<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"> <div class="form-group">
<label for="currentpass">Current Password</label> <label for="currentpass">Current Password</label>
<input type="password" class="form-control mb-2" id="currentpass" name="currentpass"> <input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
@ -71,9 +104,12 @@
<button type="submit" class="btn btn-danger">Update Password</button> <button type="submit" class="btn btn-danger">Update Password</button>
</div> </div>
</form> </form>
<hr> </div>
</div>
{% endif %} {% endif %}
<h3>Dashboard Configuration</h3> <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"> <form action="/update_app_ip_port" method="post" class="update_app_ip_port">
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
@ -90,11 +126,13 @@
</div> </div>
</div> </div>
<button type="button" class="btn btn-danger confirm_modal" data-toggle="modal" <button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
data-target="#confirmModal">Update Configuration & Restart data-target="#confirmModal">Update Configuration & Restart Dashboard
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
</main> </main>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="confirmModal" data-backdrop="static" data-keyboard="false" tabindex="-1" <div class="modal fade" id="confirmModal" data-backdrop="static" data-keyboard="false" tabindex="-1"

2
src/templates/sidebar.html
View File

@ -19,7 +19,7 @@
</h6> </h6>
<ul class="nav flex-column"> <ul class="nav flex-column">
{% for i in conf%} {% 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%} {%endfor%}
</ul> </ul>
<hr> <hr>

5
src/templates/signin.html
View File

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

83
src/wgd.sh
View File

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