kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 15:20:09 +01:00
Code

Merge pull request #126 from donaldzou/Migrate-to-SQLite

Browse Source 
Production branch for v3.0
This commit is contained in:
Donald Zou 2022-01-18 12:33:34 -05:00 committed by GitHub
commit 83dde12ca9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 2658 additions and 1316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.gitignore vendored
View File

@ -1,12 +1,11 @@
.vscode/sftp.json .vscode/sftp.json
src/.vscode/sftp.json src/.vscode/sftp.json
.DS_Store .DS_Store
wg.db
*.json
.idea .idea
src/test.py src/db
tmp
__pycache__ __pycache__
src/test.py
*.db
src/wg-dashboard.ini src/wg-dashboard.ini
src/static/pic.xd src/static/pic.xd
*.conf *.conf
@ -15,3 +14,5 @@ public_key.txt
venv/** venv/**
log/** log/**
release/* release/*
src/db/wgdashboard.db
.jshintrc

130
README.md
View File

@ -1,19 +1,9 @@
<hr>
> Hi! I'm planning the next major update for this project, please let me know if you have any suggestions or feature requests ;) You can create an issue with the "Feature request" template. Cheers!
### Help Wanted
> If anyone know a better way to distribute releases of python application other than GitHub, please let me know in <a href="https://github.com/donaldzou/wireguard-dashboard/issues/103">#103</a>!
> Please provide your OS name and version if you can run the dashboard on it perfectly in <a href="https://github.com/donaldzou/wireguard-dashboard/issues/31">#31</a>, since I only tested on Ubuntu. Thank you!
<hr>
<p align="center"> <p align="center">
<img alt="WGDashboard" src="img/logo.png" width="128"> <img alt="WGDashboard" src="img/logo.png" width="128">
</p> </p>
<h1 align="center">WGDashboard</h1> <h1 align="center">WGDashboard</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">
</p> </p>
@ -24,27 +14,42 @@
<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>
<p align="center"><small>Note: This project is not affiliate to the official WireGuard Project ;)</small></p> <p align="center"><small>Note: This project is not affiliate to the official WireGuard Project ;)</small></p>
## 📣 What's New: v2.3 ## 📣 What's New: v3.0
- 🎉 **New Features** - 🎉 **New Features**
- **Update directly from `wgd.sh`:** Now you can update WGDashboard directly from the bash script. - **Moved from TinyDB to SQLite**: SQLite provide a better performance and loading speed when getting peers! Also avoided crashing the database due to **race condition**.
- **Displaying Peers:** You can switch the display mode between list and table in the configuration page. - **Added Gunicorn WSGI Server**: This could provide more stable on handling HTTP request, and more flexibility in the future (such as HTTPS support). **BIG THANKS to @pgalonza :heart: **
- **Add Peers by Bulk: ** User can add peers by bulk, just simply set the amount and click add.
- **Delete Peers by Bulk**: User can delete peers by bulk, without deleting peers one by one.
- **Download Peers in Zip**: User can download all *downloadable* peers in a zip.
- **Added Pre-shared Key to peers:** Now each peer can add with a pre-shared key to enhance security. Previously added peers can add the pre-shared key through the peer setting button.
- **Redirect Back to Previous Page:** The dashboard will now redirect you back to your previous page if the current session got timed out and you need to sign in again.
- **Added Some [🥘 Experimental Functions](#-experimental-functions)**
- 🪚 **Bug Fixed** - 🪚 **Bug Fixed**
- [Peer DNS Validation Fails #67](issues/67): Added DNS format check. [❤️ @realfian] - [IP Sorting range issues #99](https://github.com/donaldzou/WGDashboard/issues/99) [❤️ @barryboom]
- [configparser.NoSectionError: No section: 'Interface' #66](issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`. [❤️ @ramalmaty] - [INvalid character written to tunnel json file #108](https://github.com/donaldzou/WGDashboard/issues/108) [❤️ @ ikidd]
- [Feature request: Interface not loading when information missing #73](issues/73): Fixed when Configuration Address and Listen Port is missing will crash the dashboard. [❤️ @js32] - [Add IPv6 #91](https://github.com/donaldzou/WGDashboard/pull/91) [❤️ @ pgalonza]
- [Remote Peer, MTU and PersistentKeepalives added #70](pull/70): Added MTU, remote peer and Persistent Keepalive. [❤️ @realfian] - [Added MTU and PersistentKeepalive to QR code and download files #112](https://github.com/donaldzou/WGDashboard/pull/112) [:heart: @reafian]
- [Fixes DNS check to support search domain #65](pull/65): Added allow input domain into DNS. [❤️@davejlong] - **And many other bugs provided by our beloved users** :heart:
- **🧐 Other Changes** - **🧐 Other Changes**
- Moved Add Peer Button into the right bottom corner. - **Key generating moved to front-end**: No longer need to use the server's WireGuard to generate keys, thanks to the `wireguard.js` from the [official repository](https://git.zx2c4.com/wireguard-tools/tree/contrib/keygen-html/wireguard.js)!
- **Peer transfer calculation**: each peer will now show all transfer amount (previously was only showing transfer amount from the last configuration start-up).
- **UI adjustment on running peers**: peers will have a new style indicating that it is running.
- **`wgd.sh` finally can update itself**: So now user could update the whole dashboard from `wgd.sh`, with the `update` command.
- **Minified JS and CSS files**: Although only a small changes on the file size, but I think is still a good practice to save a bit of bandwidth ;)
*And many other small changes for performance and bug fixes! :laughing:*
> If you have any other brilliant ideas for this project, please shout it in here [#129](https://github.com/donaldzou/WGDashboard/issues/129) :heart:
**For users who is using `v2.x.x` please be sure to read [this](#please-note-for-user-who-is-using-v231-or-below) before updating WGDashboard ;)**
<hr> <hr>
## Table of Content ## Table of Content
- [💡 Features](#-features) - [💡 Features](#-features)
- [📝 Requirement](#-requirement) - [📝 Requirement](#-requirement)
- [🛠 Install](#-install) - [🛠 Install](#-install)
@ -55,6 +60,7 @@
- [Dashboard Configuration file](#dashboard-configuration-file) - [Dashboard Configuration file](#dashboard-configuration-file)
- [Generating QR code and peer configuration file (.conf)](#generating-qr-code-and-peer-configuration-file-conf) - [Generating QR code and peer configuration file (.conf)](#generating-qr-code-and-peer-configuration-file-conf)
- [❓ How to update the dashboard?](#-how-to-update-the-dashboard) - [❓ How to update the dashboard?](#-how-to-update-the-dashboard)
- [🥘 Experimental Functions](#-experimental-functions)
- [🔍 Screenshot](#-screenshot) - [🔍 Screenshot](#-screenshot)
- [⏰ Changelog](#--changelog) - [⏰ Changelog](#--changelog)
- [🛒 Dependencies](#-dependencies) - [🛒 Dependencies](#-dependencies)
@ -103,11 +109,13 @@
- Python 3.7+ & Pip3 - Python 3.7+ & Pip3
- Browser support CSS3 and ES6
## 🛠 Install ## 🛠 Install
1. Download WGDashboard 1. Download WGDashboard
```shell ```shell
git clone -b v2.3.1 https://github.com/donaldzou/WGDashboard.git wgdashboard git clone -b v3.0 https://github.com/donaldzou/WGDashboard.git wgdashboard
2. Open the WGDashboard folder 2. Open the WGDashboard folder
@ -280,22 +288,30 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u
#### Dashboard Configuration file #### Dashboard Configuration file
Since version 2.0, WGDashboard will be using a configuration file called `wg-dashboard.ini`, (It will generate automatically after first time running the dashboard). More options will include in future versions, and for now it included the following config: Since version 2.0, WGDashboard will be using a configuration file called `wg-dashboard.ini`, (It will generate automatically after first time running the dashboard). More options will include in future versions, and for now it included the following configurations:
| | Description | Default | Available in Setting | | | Description | Default | Edit Available |
| --------------- | ------------------------------------------------------------ | ------------------------ | -------------------- | | ---------------------------- | ------------------------------------------------------------ | ---------------------------------------------------- | -------------- |
| **`[Account]`** | | | | | **`[Account]`** | *Configuration on account* | | |
| `username` | Dashboard login username | `admin` | Yes | | `username` | Dashboard login username | `admin` | Yes |
| `password` | Password, will be hash with SHA256 | `admin` hashed in SHA256 | Yes | | `password` | Password, will be hash with SHA256 | `admin` hashed in SHA256 | Yes |
| **`[Server]`** | | | | | | | | |
| **`[Server]`** | *Configuration on dashboard* | | |
| `wg_conf_path` | The path of all the Wireguard configurations | `/etc/wireguard` | Yes | | `wg_conf_path` | The path of all the Wireguard configurations | `/etc/wireguard` | Yes |
| `app_ip` | IP address the dashboard will run with | `0.0.0.0` | Yes | | `app_ip` | IP address the dashboard will run with | `0.0.0.0` | Yes |
| `app_port` | Port the the dashboard will run with | `10086` | Yes | | `app_port` | Port the the dashboard will run with | `10086` | Yes |
| `auth_req` | Does the dashboard need authentication to access | `true` | No | | `auth_req` | Does the dashboard need authentication to access, if `auth_req = false` , user will not be access the **Setting** tab due to security consideration. **User can only edit the file directly in system**. | `true` | **No** |
| | If `auth_req = false` , user will not be access the **Setting** tab due to security consideration. **User can only edit the file directly in system**. | | | | `version` | Dashboard Version | `v3.0` | **No** |
| `version` | Dashboard Version | `v2.2` | No | | `dashboard_refresh_interval` | How frequent the dashboard will refresh on the configuration page | `60000ms` | Yes |
| `dashboard_sort` | How configuration is sorting | `status` | Yes |
**Except `auth_req` due to security consideration.** | | | | |
| **`[Peers]`** | *Default Settings on a new peer* | | |
| `peer_global_dns` | DNS Server | `1.1.1.1` | Yes |
| `peer_endpoint_allowed_ip` | Endpoint Allowed IP | `0.0.0.0/0` | Yes |
| `peer_display_mode` | How peer will display | `grid` | Yes |
| `remote_endpoint` | Remote Endpoint (i.e where your peers will connect to) | *depends on your server's default network interface* | Yes |
| `peer_mtu` | Maximum Transmit Unit | `1420` | |
| `peer_keep_alive` | Keep Alive | `21` | Yes |
#### Generating QR code and peer configuration file (.conf) #### Generating QR code and peer configuration file (.conf)
@ -326,14 +342,35 @@ Endpoint = 0.0.0.0:51820
## ❓ How to update the dashboard? ## ❓ How to update the dashboard?
1. Change your directory to `wireguard-dashboard` #### **Please note for user who is using `v2.3.1` or below**
- For user who is using `v2.3.1` or below, please notice that all data that stored in the current database will **not** transfer to the new database. This is hard decision to move from TinyDB to SQLite. But SQLite does provide a thread-safe access and TinyDB doesn't. I couldn't find a safe way to transfer the data, so you need to do them manually... Sorry about that :pensive: . But I guess this would be a great start for future development :sunglasses:.
<hr>
1. Change your directory to `wgdashboard`
```shell ```shell
cd wireguard-dashboard/src cd wgdashboard
``` ```
2. Update the dashboard 2. Update the dashboard
```shell ```shell
sudo ./wgd.sh update git pull https://github.com/donaldzou/WGDashboard.git v3.0 --force
``` ```
Starting with `v3.0`, you can simply do `./wgd.sh update` !! (I hope, lol)
## 🥘 Experimental Functions
#### Progressive Web App (PWA) for WGDashboard
- With `v3.0`, I've added a `manifest.json` into the dashboard, so user could add their dashboard as a PWA to their browser or mobile device.
<img src="img/PWA.gif"/>
## 🔍 Screenshot ## 🔍 Screenshot
![Sign In Page](img/SignIn.png) ![Sign In Page](img/SignIn.png)
@ -346,7 +383,7 @@ Endpoint = 0.0.0.0:51820
![Edit Peer](img/EditPeer.png) ![Edit Peer](img/EditPeer.png)
![Delete Peer](img/DeletePeer.png) ![Delete Peer](img/DeleteBulk.png)
![Dashboard Setting](img/DashboardSetting.png) ![Dashboard Setting](img/DashboardSetting.png)
@ -354,10 +391,26 @@ Endpoint = 0.0.0.0:51820
![Traceroute](img/Traceroute.png) ![Traceroute](img/Traceroute.png)
## ⏰ Changelog ## ⏰ Changelog
#### v2.3.1 - Sep 8, 2021
- Updated dashboard's name to **WGDashboard**!!
#### v2.3 - Sep 8, 2021
- 🎉 **New Features**
- **Update directly from `wgd.sh`:** Now you can update WGDashboard directly from the bash script.
- **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
- 🪚 **Bug Fixed**
- [Peer DNS Validation Fails #67](issues/67): Added DNS format check. [❤️ @realfian]
- [configparser.NoSectionError: No section: 'Interface' #66](issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`. [❤️ @ramalmaty]
- [Feature request: Interface not loading when information missing #73](issues/73): Fixed when Configuration Address and Listen Port is missing will crash the dashboard. [❤️ @js32]
- [Remote Peer, MTU and PersistentKeepalives added #70](pull/70): Added MTU, remote peer and Persistent Keepalive. [❤️ @realfian]
- [Fixes DNS check to support search domain #65](pull/65): Added allow input domain into DNS. [❤️@davejlong]
- **🧐 Other Changes**
- Moved Add Peer Button into the right bottom corner.
#### v2.2.1 - Aug 16, 2021 #### v2.2.1 - Aug 16, 2021
Bug Fixed: Bug Fixed:
@ -425,7 +478,6 @@ Bug Fixed:
- [jQuery](https://jquery.com) `v3.5.1` - [jQuery](https://jquery.com) `v3.5.1`
- Python - Python
- [Flask](https://pypi.org/project/Flask/) `v2.0.1` - [Flask](https://pypi.org/project/Flask/) `v2.0.1`
- [TinyDB](https://pypi.org/project/tinydb/) `v4.3.0`
- [ifcfg](https://pypi.org/project/ifcfg/) `v0.21` - [ifcfg](https://pypi.org/project/ifcfg/) `v0.21`
- [icmplib](https://pypi.org/project/icmplib/) `v2.1.1` - [icmplib](https://pypi.org/project/icmplib/) `v2.1.1`
- [flask-qrcode](https://pypi.org/project/Flask-QRcode/) `v3.0.0` - [flask-qrcode](https://pypi.org/project/Flask-QRcode/) `v3.0.0`

BIN
img/AddPeer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 221 KiB

After

Width:  |  Height:  |  Size: 156 KiB

BIN
img/Configuration.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 181 KiB

BIN
img/DashboardSetting.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 234 KiB

After

Width:  |  Height:  |  Size: 114 KiB

BIN
img/DeleteBulk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

BIN
img/EditPeer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 149 KiB

BIN
img/HomePage.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
img/PWA.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 MiB

BIN
img/QRCode.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 KiB

After

Width:  |  Height:  |  Size: 239 KiB

BIN
img/SearchIP.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

4
src/certbot.ini Normal file
View File

@ -0,0 +1,4 @@
authenticator = standalone
noninteractive = true
agree-tos = true
rsa-key-size = 2048

1471
src/dashboard.py
View File

File diff suppressed because it is too large Load Diff

11
src/gunicorn.conf.py Normal file
View File

@ -0,0 +1,11 @@
import multiprocessing
import dashboard
app_host, app_port = dashboard.get_host_bind()
worker_class = 'gthread'
workers = multiprocessing.cpu_count() * 2 + 1
threads = 4
bind = f"{app_host}:{app_port}"
daemon = True
pidfile = './gunicorn.pid'

3
src/requirements.txt
View File

@ -1,5 +1,6 @@
Flask Flask
tinydb==4.5.2
ifcfg ifcfg
icmplib icmplib
flask-qrcode flask-qrcode
gunicorn
certbot

BIN
src/static/.DS_Store vendored
View File

Binary file not shown.

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

@ -52,6 +52,7 @@ body {
.nav-link:hover { .nav-link:hover {
padding-left: 30px; padding-left: 30px;
background-color: #dfdfdf;
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
@ -90,6 +91,14 @@ body {
right: 1rem; right: 1rem;
} }
.form-control{
transition: all 0.2s ease-in-out;
}
.form-control:disabled{
cursor: not-allowed;
}
.navbar .form-control { .navbar .form-control {
padding: .75rem 1rem; padding: .75rem 1rem;
border-width: 0; border-width: 0;
@ -162,8 +171,24 @@ body {
box-shadow: none; box-shadow: none;
} }
.btn-qrcode-peer{
padding: 0 !important;
}
.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
transform: scale(0.9) rotate(180deg);
border: 0 !important;
}
.btn-download-peer:active, .btn-download-peer:hover{
color: #17a2b8 !important;
transform: translateY(5px);
}
.share_peer_btn_group .btn-control{ .share_peer_btn_group .btn-control{
padding: 0 0 0 1rem; margin: 0 0 0 1rem;
padding: 0 !important;
transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
} }
.btn-control:hover{ .btn-control:hover{
@ -233,18 +258,77 @@ main{
} }
.peer_list{ .peer_list{
margin-bottom: 4rem !important; margin-bottom: 7rem !important;
} }
} }
.add_btn{ .btn-manage-group{
z-index: 99;
position: fixed; position: fixed;
bottom: 3rem; bottom: 3rem;
right: 2rem; right: 2rem;
display: flex;
}
.btn-manage-group .setting_btn_menu{
position: absolute;
top: -124px;
background-color: white;
padding: 1rem 0;
right: 0;
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
border-radius: 10px;
min-width: 200px;
display: none;
transform: translateY(-30px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.58, 0.03, 0.05, 1.28);
}
.btn-manage-group .setting_btn_menu.show{
display: block;
}
.setting_btn_menu.showing{
transform: translateY(0px);
opacity: 1;
}
.setting_btn_menu a{
display: flex;
padding: 0.5rem 1rem;
transition: all 0.1s ease-in-out;
font-size: 1rem;
align-items: center;
cursor: pointer;
}
.setting_btn_menu a:hover{
background-color: #efefef;
text-decoration: none;
}
.setting_btn_menu a i{
margin-right: auto !important;
}
.add_btn{
height: 54px;
z-index: 99; z-index: 99;
border-radius: 100px !important; border-radius: 100px !important;
padding: 10px 20px; padding: 0 14px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin-right: 1rem;
font-size: 1.5rem;
}
.setting_btn{
height: 54px;
z-index: 99;
border-radius: 100px !important;
padding: 0 14px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
font-size: 1.5rem;
} }
@ -382,3 +466,67 @@ main{
animation: loading 3s infinite ease-in-out; animation: loading 3s infinite ease-in-out;
} }
#qrcode_img img{
width: 100%;
}
#selected_ip_list .badge, #selected_peer_list .badge{
margin: 0.1rem
}
#add_modal.ip_modal_open{
transition: filter 0.2s ease-in-out;
filter: brightness(0.5);
}
#delete_bulk_modal .list-group a.active{
background-color: #dc3545;
border-color: #dc3545;
}
#selected_peer_list{
max-height: 80px;
overflow-y: scroll;
overflow-x: hidden;
}
.no-response{
width: 100%;
height: 100%;
position: fixed;
background: #000000ba;
z-index: 10000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 1s ease-in-out;
}
.no-response.active{
display: flex;
}
.no-response.active.show{
opacity: 100;
}
.no-response .container > *{
text-align: center;
}
.no-responding{
transition: all 1s ease-in-out;
filter: blur(10px);
}
pre.index-alert{
margin-bottom: 0;
padding: 1rem;
background-color: #343a40;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
margin-top: 1rem;
color: white;
}

2
src/static/css/dashboard.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
src/static/img/192x192ios.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/static/img/icon-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/static/img/icon-256x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/static/img/icon-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/static/img/icon-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

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

File diff suppressed because it is too large Load Diff

2
src/static/js/configuration.min.js vendored
View File

File diff suppressed because one or more lines are too long

0
src/static/js/configurationsTools.js Normal file
View File

0
src/static/js/configurationsTools.min.js vendored Normal file
View File

80
src/static/js/tools.js
View File

@ -1,63 +1,67 @@
$(".ip_dropdown").change(function (){ /**
$(".modal.show .btn").removeAttr("disabled") * tools.js - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]
*/
$(".ip_dropdown").on("change",function (){
$(".modal.show .btn").removeAttr("disabled");
}); });
$(".conf_dropdown").change(function (){
$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...') $(".conf_dropdown").on("change", function (){
$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');
$.ajax({ $.ajax({
url: "/get_ping_ip", url: "/get_ping_ip",
method: "POST", method: "POST",
data: "config=" + $(this).children("option:selected").val(), data: "config=" + $(this).children("option:selected").val(),
success: function (res){ success: function (res){
$(".modal.show .ip_dropdown").html("") $(".modal.show .ip_dropdown").html("");
$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP') $(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');
$(".modal.show .ip_dropdown").append(res) $(".modal.show .ip_dropdown").append(res);
} }
}) });
}); });
// Ping Tools // Ping Tools
$(".send_ping").click(function (){ $(".send_ping").on("click", function (){
$(this).attr("disabled","disabled") $(this).attr("disabled","disabled");
$(this).html("Pinging...") $(this).html("Pinging...");
$("#ping_modal .form-control").attr("disabled","disabled") $("#ping_modal .form-control").attr("disabled","disabled");
$.ajax({ $.ajax({
method:"POST", method:"POST",
data: "ip="+$(':selected', $("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(), data: "ip="+ $(':selected', $("#ping_modal .ip_dropdown")).val() +
"&count=" + $("#ping_modal .ping_count").val(),
url: "/ping_ip", url: "/ping_ip",
success: function (res){ success: function (res){
$(".ping_result tbody").html("") $(".ping_result tbody").html("");
html = '<tr><th scope="row">Address</th><td>'+res['address']+'</td></tr>' + let html = '<tr><th scope="row">Address</th><td>'+res.address+'</td></tr>' +
'<tr><th scope="row">Is Alive</th><td>'+res['is_alive']+'</td></tr>' + '<tr><th scope="row">Is Alive</th><td>'+res.is_alive+'</td></tr>' +
'<tr><th scope="row">Min RTT</th><td>'+res['min_rtt']+'ms</td></tr>' + '<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+'ms</td></tr>' +
'<tr><th scope="row">Average RTT </th><td>'+res['avg_rtt']+'ms</td></tr>' + '<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+'ms</td></tr>' +
'<tr><th scope="row">Max RTT</th><td>'+res['max_rtt']+'ms</td></tr>' + '<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+'ms</td></tr>' +
'<tr><th scope="row">Package Sent</th><td>'+res['package_sent']+'</td></tr>' + '<tr><th scope="row">Package Sent</th><td>'+res.package_sent+'</td></tr>' +
'<tr><th scope="row">Package Received</th><td>'+res['package_received']+'</td></tr>' + '<tr><th scope="row">Package Received</th><td>'+res.package_received+'</td></tr>' +
'<tr><th scope="row">Package Loss</th><td>'+res['package_loss']+'</td></tr>' '<tr><th scope="row">Package Loss</th><td>'+res.package_loss+'</td></tr>';
$(".ping_result tbody").html(html) $(".ping_result tbody").html(html);
$(".send_ping").removeAttr("disabled") $(".send_ping").removeAttr("disabled");
$(".send_ping").html("Ping") $(".send_ping").html("Ping");
$("#ping_modal .form-control").removeAttr("disabled") $("#ping_modal .form-control").removeAttr("disabled");
} }
}) });
}); });
// Traceroute Tools // Traceroute Tools
$(".send_traceroute").click(function (){ $(".send_traceroute").on("click", function (){
$(this).attr("disabled","disabled") $(this).attr("disabled","disabled");
$(this).html("Tracing..."); $(this).html("Tracing...");
$("#traceroute_modal .form-control").attr("disabled","disabled") $("#traceroute_modal .form-control").attr("disabled","disabled");
$.ajax({ $.ajax({
url: "/traceroute_ip", url: "/traceroute_ip",
method: "POST", method: "POST",
data: "ip=" + $(':selected', $("#traceroute_modal .ip_dropdown")).val(), data: "ip=" + $(':selected', $("#traceroute_modal .ip_dropdown")).val(),
success: function (res){ success: function (res){
$(".traceroute_result tbody").html(""); $(".traceroute_result tbody").html("");
for (i in res){ res.forEach((ele) =>
$(".traceroute_result tbody").append('<tr><th scope="row">'+res[i]['hop']+'</th><td>'+res[i]['ip']+'</td><td>'+res[i]['avg_rtt']+'</td><td>'+res[i]['min_rtt']+'</td><td>'+res[i]['max_rtt']+'</td></tr>') $(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+'</th><td>'+ele.ip+'</td><td>'+ele.avg_rtt+'</td><td>'+ele.min_rtt+'</td><td>'+ele.max_rtt+'</td></tr>'));
$(".send_traceroute").removeAttr("disabled").html("Traceroute");
$("#traceroute_modal .form-control").removeAttr("disabled");
} }
$(".send_traceroute").removeAttr("disabled"); });
$(".send_traceroute").html("Traceroute"); });
$("#traceroute_modal .form-control").removeAttr("disabled")
}
})
})

2
src/static/js/tools.min.js vendored
View File

@ -1 +1 @@
$(".ip_dropdown").change(function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").change(function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").click(function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");html='<tr><th scope="row">Address</th><td>'+res["address"]+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res["is_alive"]+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res["min_rtt"]+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res["avg_rtt"]+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res["max_rtt"]+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res["package_sent"]+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res["package_received"]+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res["package_loss"]+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").click(function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");for(i in res){$(".traceroute_result tbody").append('<tr><th scope="row">'+res[i]["hop"]+"</th><td>"+res[i]["ip"]+"</td><td>"+res[i]["avg_rtt"]+"</td><td>"+res[i]["min_rtt"]+"</td><td>"+res[i]["max_rtt"]+"</td></tr>")}$(".send_traceroute").removeAttr("disabled");$(".send_traceroute").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})}); $(".ip_dropdown").on("change",function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").on("change",function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");let html='<tr><th scope="row">Address</th><td>'+res.address+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res.is_alive+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res.package_sent+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res.package_received+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res.package_loss+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");res.forEach(ele=>$(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+"</th><td>"+ele.ip+"</td><td>"+ele.avg_rtt+"</td><td>"+ele.min_rtt+"</td><td>"+ele.max_rtt+"</td></tr>"));$(".send_traceroute").removeAttr("disabled").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})});

301
src/static/js/wireguard.js Normal file
View File

@ -0,0 +1,301 @@
/*! SPDX-License-Identifier: GPL-2.0
*
* Copyright (C) 2015-2020 Jason A. Donenfeld <Jason@zx2c4.com>. All Rights Reserved.
*/
(function() {
function gf(init) {
var r = new Float64Array(16);
if (init) {
for (var i = 0; i < init.length; ++i)
r[i] = init[i];
}
return r;
}
function pack(o, n) {
var b, m = gf(), t = gf();
for (var i = 0; i < 16; ++i)
t[i] = n[i];
carry(t);
carry(t);
carry(t);
for (var j = 0; j < 2; ++j) {
m[0] = t[0] - 0xffed;
for (var i = 1; i < 15; ++i) {
m[i] = t[i] - 0xffff - ((m[i - 1] >> 16) & 1);
m[i - 1] &= 0xffff;
}
m[15] = t[15] - 0x7fff - ((m[14] >> 16) & 1);
b = (m[15] >> 16) & 1;
m[14] &= 0xffff;
cswap(t, m, 1 - b);
}
for (var i = 0; i < 16; ++i) {
o[2 * i] = t[i] & 0xff;
o[2 * i + 1] = t[i] >> 8;
}
}
function carry(o) {
var c;
for (var i = 0; i < 16; ++i) {
o[(i + 1) % 16] += (i < 15 ? 1 : 38) * Math.floor(o[i] / 65536);
o[i] &= 0xffff;
}
}
function cswap(p, q, b) {
var t, c = ~(b - 1);
for (var i = 0; i < 16; ++i) {
t = c & (p[i] ^ q[i]);
p[i] ^= t;
q[i] ^= t;
}
}
function add(o, a, b) {
for (var i = 0; i < 16; ++i)
o[i] = (a[i] + b[i]) | 0;
}
function subtract(o, a, b) {
for (var i = 0; i < 16; ++i)
o[i] = (a[i] - b[i]) | 0;
}
function multmod(o, a, b) {
var t = new Float64Array(31);
for (var i = 0; i < 16; ++i) {
for (var j = 0; j < 16; ++j)
t[i + j] += a[i] * b[j];
}
for (var i = 0; i < 15; ++i)
t[i] += 38 * t[i + 16];
for (var i = 0; i < 16; ++i)
o[i] = t[i];
carry(o);
carry(o);
}
function invert(o, i) {
var c = gf();
for (var a = 0; a < 16; ++a)
c[a] = i[a];
for (var a = 253; a >= 0; --a) {
multmod(c, c, c);
if (a !== 2 && a !== 4)
multmod(c, c, i);
}
for (var a = 0; a < 16; ++a)
o[a] = c[a];
}
function clamp(z) {
z[31] = (z[31] & 127) | 64;
z[0] &= 248;
}
function generatePublicKey(privateKey) {
var r, z = new Uint8Array(32);
var a = gf([1]),
b = gf([9]),
c = gf(),
d = gf([1]),
e = gf(),
f = gf(),
_121665 = gf([0xdb41, 1]),
_9 = gf([9]);
for (var i = 0; i < 32; ++i)
z[i] = privateKey[i];
clamp(z);
for (var i = 254; i >= 0; --i) {
r = (z[i >>> 3] >>> (i & 7)) & 1;
cswap(a, b, r);
cswap(c, d, r);
add(e, a, c);
subtract(a, a, c);
add(c, b, d);
subtract(b, b, d);
multmod(d, e, e);
multmod(f, a, a);
multmod(a, c, a);
multmod(c, b, e);
add(e, a, c);
subtract(a, a, c);
multmod(b, a, a);
subtract(c, d, f);
multmod(a, c, _121665);
add(a, a, d);
multmod(c, c, a);
multmod(a, d, f);
multmod(d, b, _9);
multmod(b, e, e);
cswap(a, b, r);
cswap(c, d, r);
}
invert(c, c);
multmod(a, a, c);
pack(z, a);
return z;
}
function generatePresharedKey() {
var privateKey = new Uint8Array(32);
window.crypto.getRandomValues(privateKey);
return privateKey;
}
function generatePrivateKey() {
var privateKey = generatePresharedKey();
clamp(privateKey);
return privateKey;
}
function encodeBase64(dest, src) {
var input = Uint8Array.from([(src[0] >> 2) & 63, ((src[0] << 4) | (src[1] >> 4)) & 63, ((src[1] << 2) | (src[2] >> 6)) & 63, src[2] & 63]);
for (var i = 0; i < 4; ++i)
dest[i] = input[i] + 65 +
(((25 - input[i]) >> 8) & 6) -
(((51 - input[i]) >> 8) & 75) -
(((61 - input[i]) >> 8) & 15) +
(((62 - input[i]) >> 8) & 3);
}
function keyToBase64(key) {
var i, base64 = new Uint8Array(44);
for (i = 0; i < 32 / 3; ++i)
encodeBase64(base64.subarray(i * 4), key.subarray(i * 3));
encodeBase64(base64.subarray(i * 4), Uint8Array.from([key[i * 3 + 0], key[i * 3 + 1], 0]));
base64[43] = 61;
return String.fromCharCode.apply(null, base64);
}
function putU32(b, n)
{
b.push(n & 0xff, (n >>> 8) & 0xff, (n >>> 16) & 0xff, (n >>> 24) & 0xff);
}
function putU16(b, n)
{
b.push(n & 0xff, (n >>> 8) & 0xff);
}
function putBytes(b, a)
{
for (var i = 0; i < a.length; ++i)
b.push(a[i] & 0xff);
}
function encodeString(s)
{
var utf8 = unescape(encodeURIComponent(s));
var b = new Uint8Array(utf8.length);
for (var i = 0; i < utf8.length; ++i)
b[i] = utf8.charCodeAt(i);
return b;
}
function crc32(b)
{
if (!crc32.table) {
crc32.table = [];
for (var c = 0, n = 0; n < 256; c = ++n) {
for (var k = 0; k < 8; ++k)
c = ((c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1));
crc32.table[n] = c;
}
}
var crc = -1;
for (var i = 0; i < b.length; ++i)
crc = (crc >>> 8) ^ crc32.table[(crc ^ b[i]) & 0xff];
return (crc ^ (-1)) >>> 0;
}
function createZipFile(files)
{
var b = [];
var cd = [];
var offset = 0;
for (var i = 0; i < files.length; ++i) {
var name = encodeString(files[i].filename);
var contents = encodeString(files[i].content);
var crc = crc32(contents);
putU32(b, 0x04034b50); /* signature */
putU16(b, 20); /* version needed */
putU16(b, 0); /* flags */
putU16(b, 0); /* compression method */
putU16(b, 0); /* mtime */
putU16(b, 0); /* mdate */
putU32(b, crc); /* crc32 */
putU32(b, contents.length); /* compressed size */
putU32(b, contents.length); /* uncompressed size */
putU16(b, name.length); /* file name length */
putU16(b, 0); /* extra field length */
putBytes(b, name);
putBytes(b, contents);
putU32(cd, 0x02014b50); /* signature */
putU16(cd, 0); /* version made */
putU16(cd, 20); /* version needed */
putU16(cd, 0); /* flags */
putU16(cd, 0); /* compression method */
putU16(cd, 0); /* mtime */
putU16(cd, 0); /* mdate */
putU32(cd, crc); /* crc32 */
putU32(cd, contents.length); /* compressed size */
putU32(cd, contents.length); /* uncompressed size */
putU16(cd, name.length); /* file name length */
putU16(cd, 0); /* extra field length */
putU16(cd, 0); /* file comment length */
putU16(cd, 0); /* disk number start */
putU16(cd, 0); /* internal file attributes */
putU32(cd, 32); /* external file attributes - 'archive' bit set (32) */
putU32(cd, offset); /* relative offset of local header */
putBytes(cd, name); /* file name */
offset += 30 + contents.length + name.length
}
putBytes(b, cd); /* central directory */
putU32(b, 0x06054b50); /* end of central directory signature */
putU16(b, 0); /* number of this disk */
putU16(b, 0); /* number of disk with central directory start */
putU16(b, files.length); /* number of entries on disk */
putU16(b, files.length); /* number of entries */
putU32(b, cd.length); /* length of central directory */
putU32(b, offset); /* offset to start of central directory */
putU16(b, 0); /* zip comment size */
return Uint8Array.from(b);
}
window.wireguard = {
generateKeypair: function() {
var privateKey = generatePrivateKey();
var publicKey = generatePublicKey(privateKey);
var presharedKey = generatePresharedKey();
return {
publicKey: keyToBase64(publicKey),
privateKey: keyToBase64(privateKey),
presharedKey: keyToBase64(presharedKey)
};
},
generatePublicKey: function (privateKey){
return keyToBase64(generatePublicKey(privateKey))
},
generateZipFiles: function(res){
var files = res.peers;
var zipFile = createZipFile(files);
var blob = new Blob([zipFile], { type: "application/zip" });
var a = document.createElement("a");
a.download = res.filename;
a.href = URL.createObjectURL(blob);
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
})();

1
src/static/js/wireguard.min.js vendored Normal file
View File

@ -0,0 +1 @@
(function(){function gf(init){var r=new Float64Array(16);if(init){for(var i=0;i<init.length;++i)r[i]=init[i]}return r}function pack(o,n){var b,m=gf(),t=gf();for(var i=0;i<16;++i)t[i]=n[i];carry(t);carry(t);carry(t);for(var j=0;j<2;++j){m[0]=t[0]-65517;for(var i=1;i<15;++i){m[i]=t[i]-65535-(m[i-1]>>16&1);m[i-1]&=65535}m[15]=t[15]-32767-(m[14]>>16&1);b=m[15]>>16&1;m[14]&=65535;cswap(t,m,1-b)}for(var i=0;i<16;++i){o[2*i]=t[i]&255;o[2*i+1]=t[i]>>8}}function carry(o){var c;for(var i=0;i<16;++i){o[(i+1)%16]+=(i<15?1:38)*Math.floor(o[i]/65536);o[i]&=65535}}function cswap(p,q,b){var t,c=~(b-1);for(var i=0;i<16;++i){t=c&(p[i]^q[i]);p[i]^=t;q[i]^=t}}function add(o,a,b){for(var i=0;i<16;++i)o[i]=a[i]+b[i]|0}function subtract(o,a,b){for(var i=0;i<16;++i)o[i]=a[i]-b[i]|0}function multmod(o,a,b){var t=new Float64Array(31);for(var i=0;i<16;++i){for(var j=0;j<16;++j)t[i+j]+=a[i]*b[j]}for(var i=0;i<15;++i)t[i]+=38*t[i+16];for(var i=0;i<16;++i)o[i]=t[i];carry(o);carry(o)}function invert(o,i){var c=gf();for(var a=0;a<16;++a)c[a]=i[a];for(var a=253;a>=0;--a){multmod(c,c,c);if(a!==2&&a!==4)multmod(c,c,i)}for(var a=0;a<16;++a)o[a]=c[a]}function clamp(z){z[31]=z[31]&127|64;z[0]&=248}function generatePublicKey(privateKey){var r,z=new Uint8Array(32);var a=gf([1]),b=gf([9]),c=gf(),d=gf([1]),e=gf(),f=gf(),_121665=gf([56129,1]),_9=gf([9]);for(var i=0;i<32;++i)z[i]=privateKey[i];clamp(z);for(var i=254;i>=0;--i){r=z[i>>>3]>>>(i&7)&1;cswap(a,b,r);cswap(c,d,r);add(e,a,c);subtract(a,a,c);add(c,b,d);subtract(b,b,d);multmod(d,e,e);multmod(f,a,a);multmod(a,c,a);multmod(c,b,e);add(e,a,c);subtract(a,a,c);multmod(b,a,a);subtract(c,d,f);multmod(a,c,_121665);add(a,a,d);multmod(c,c,a);multmod(a,d,f);multmod(d,b,_9);multmod(b,e,e);cswap(a,b,r);cswap(c,d,r)}invert(c,c);multmod(a,a,c);pack(z,a);return z}function generatePresharedKey(){var privateKey=new Uint8Array(32);window.crypto.getRandomValues(privateKey);return privateKey}function generatePrivateKey(){var privateKey=generatePresharedKey();clamp(privateKey);return privateKey}function encodeBase64(dest,src){var input=Uint8Array.from([src[0]>>2&63,(src[0]<<4|src[1]>>4)&63,(src[1]<<2|src[2]>>6)&63,src[2]&63]);for(var i=0;i<4;++i)dest[i]=input[i]+65+(25-input[i]>>8&6)-(51-input[i]>>8&75)-(61-input[i]>>8&15)+(62-input[i]>>8&3)}function keyToBase64(key){var i,base64=new Uint8Array(44);for(i=0;i<32/3;++i)encodeBase64(base64.subarray(i*4),key.subarray(i*3));encodeBase64(base64.subarray(i*4),Uint8Array.from([key[i*3+0],key[i*3+1],0]));base64[43]=61;return String.fromCharCode.apply(null,base64)}function putU32(b,n){b.push(n&255,n>>>8&255,n>>>16&255,n>>>24&255)}function putU16(b,n){b.push(n&255,n>>>8&255)}function putBytes(b,a){for(var i=0;i<a.length;++i)b.push(a[i]&255)}function encodeString(s){var utf8=unescape(encodeURIComponent(s));var b=new Uint8Array(utf8.length);for(var i=0;i<utf8.length;++i)b[i]=utf8.charCodeAt(i);return b}function crc32(b){if(!crc32.table){crc32.table=[];for(var c=0,n=0;n<256;c=++n){for(var k=0;k<8;++k)c=c&1?3988292384^c>>>1:c>>>1;crc32.table[n]=c}}var crc=-1;for(var i=0;i<b.length;++i)crc=crc>>>8^crc32.table[(crc^b[i])&255];return(crc^-1)>>>0}function createZipFile(files){var b=[];var cd=[];var offset=0;for(var i=0;i<files.length;++i){var name=encodeString(files[i].filename);var contents=encodeString(files[i].content);var crc=crc32(contents);putU32(b,67324752);putU16(b,20);putU16(b,0);putU16(b,0);putU16(b,0);putU16(b,0);putU32(b,crc);putU32(b,contents.length);putU32(b,contents.length);putU16(b,name.length);putU16(b,0);putBytes(b,name);putBytes(b,contents);putU32(cd,33639248);putU16(cd,0);putU16(cd,20);putU16(cd,0);putU16(cd,0);putU16(cd,0);putU16(cd,0);putU32(cd,crc);putU32(cd,contents.length);putU32(cd,contents.length);putU16(cd,name.length);putU16(cd,0);putU16(cd,0);putU16(cd,0);putU16(cd,0);putU32(cd,32);putU32(cd,offset);putBytes(cd,name);offset+=30+contents.length+name.length}putBytes(b,cd);putU32(b,101010256);putU16(b,0);putU16(b,0);putU16(b,files.length);putU16(b,files.length);putU32(b,cd.length);putU32(b,offset);putU16(b,0);return Uint8Array.from(b)}window.wireguard={generateKeypair:function(){var privateKey=generatePrivateKey();var publicKey=generatePublicKey(privateKey);var presharedKey=generatePresharedKey();return{publicKey:keyToBase64(publicKey),privateKey:keyToBase64(privateKey),presharedKey:keyToBase64(presharedKey)}},generatePublicKey:function(privateKey){return keyToBase64(generatePublicKey(privateKey))},generateZipFiles:function(res){var files=res.peers;var zipFile=createZipFile(files);var blob=new Blob([zipFile],{type:"application/zip"});var a=document.createElement("a");a.download=res.filename;a.href=URL.createObjectURL(blob);a.style.display="none";document.body.appendChild(a);a.click();document.body.removeChild(a)}}})();

31
src/static/json/manifest.json Normal file
View File

@ -0,0 +1,31 @@
{
"theme_color": "#343a40",
"background_color": "#343a40",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"name": "WGDashboard",
"short_name": "WGDashboard",
"icons": [
{
"src": "/static/img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/img/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/static/img/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/static/img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

239
src/templates/configuration.html
View File

@ -1,10 +1,18 @@
<!-- configuration.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
<html lang="en"> <html lang="en">
{% with title=title%} {% with title=title%}
{% include "header.html"%} {% include "header.html"%}
{% endwith %} {% endwith %}
<body> <body>
<div class="no-response">
<div class="container">
<h1 class="text-white display-1"><i class="bi bi-emoji-frown-fill"></i></h1>
<h4 class="text-white">Oops!<br>I can't connect to the server.</h4>
</div>
</div>
{% include "navbar.html" %} {% include "navbar.html" %}
<div class="container-fluid">
<div class="container-fluid" id="right_body">
{% include "sidebar.html" %} {% include "sidebar.html" %}
<div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4"> <div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
<div class="form-group"> <div class="form-group">
@ -83,7 +91,7 @@
<div class="form-group"> <div class="form-group">
<label><small class="text-muted">Refresh Interval</small></label><br> <label><small class="text-muted">Refresh Interval</small></label><br>
<div class="btn-group interval-btn-group" role="group" style="width: 100%"> <div class="btn-group interval-btn-group" role="group" style="width: 100%">
<button style="width: 20%" type="button" class="btn btn-outline-primary btn-group-label refresh"><i class="bi bi-arrow-repeat"></i></button> <button style="width: 20%" type="button" class="btn btn-outline-primary btn-group-label refresh" data-toggle="tooltip" data-placement="bottom" title="Refresh Peers"><i class="bi bi-arrow-repeat"></i></button>
<button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="5000">5s</button> <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="5000">5s</button>
<button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="10000">10s</button> <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="10000">10s</button>
<button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="30000">30s</button> <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval" data-refresh-interval="30000">30s</button>
@ -100,61 +108,86 @@
</div> </div>
</div> </div>
</div> </div>
<button type="button" class="btn btn-primary add_btn"> <div class="btn-manage-group">
<i class="bi bi-plus-circle-fill" style=""></i> Add Peer <button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
</button> <button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
<div class="setting_btn_menu">
<a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
<a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
</div>
</div>
</div> </div>
</div> </div>
<div class="row peer_list"></div> <div class="row peer_list"></div>
</main> </main>
</div> </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">
<div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add a new peer</h5> <h5 class="modal-title" id="staticBackdropLabel">Add New Peer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div>
<div class="custom-control custom-switch" style="margin-bottom: 1rem">
<input class="custom-control-input" type="checkbox" id="bulk_add">
<label class="custom-control-label" for="bulk_add"><strong>Add Peers by bulk</strong></label>
<i class="bi bi-question-circle-fill" style="cursor: pointer" data-container="body" data-toggle="popover" data-placement="right" data-trigger="click" data-content="By adding peers by bulk, each peer's name will be auto generated, and Allowed IP will be assign to the next available IP."></i>
</div>
<div class="form-group" style="margin: 0">
<input type="number" class="form-control" id="new_add_amount" min="1" placeholder="Amount" disabled>
<div id="bulk_amount_validation" class="invalid-feedback"></div>
</div>
</div>
<hr>
<div id="add_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert"> <div id="add_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<form id="add_peer_form"> <form id="add_peer_form">
<div class="alert alert-warning" role="alert" style="font-size: 0.8rem"> <div class="form-group non-bulk">
To generate QR code for this new peer, you need to provide the private key, or use the generated key. If you don't need the QR code, simply remove the private key and insert your existed public key.
</div>
<div class="form-group">
<div> <div>
<label for="private_key">Private Key</label> <label for="private_key">Private Key</label>
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="private_key" aria-describedby="private_key"> <input type="text" class="form-control" id="private_key" aria-describedby="private_key">
<div class="input-group-append"> <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" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group non-bulk">
<label for="public_key">Public Key <code>(Required)</code></label> <label for="public_key">Public Key <code>(Required)</code></label>
<input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled> <input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6 non-bulk">
<div class="form-group"> <div class="form-group">
<label for="new_add_name">Name</label> <label for="new_add_name">Name</label>
<input type="text" class="form-control" id="new_add_name"> <input type="text" class="form-control" id="new_add_name">
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6 non-bulk">
<div class="form-group"> <div class="form-group">
<label for="allowed_ips">Allowed IPs <code>(Required)</code></label> <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
<div class="input-group">
<input type="text" class="form-control" id="allowed_ips"> <input type="text" class="form-control" id="allowed_ips">
<div class="input-group-append">
<button type="button" class="btn btn-primary" id="search_available_ip" data-toggle="tooltip" data-placement="top" title="Search Available IPs">
<i class="bi bi-search"></i>
</button>
</div>
</div>
<p style="position: absolute; top: 4px; right: 1rem;" class="text-success" id="allowed_ips_indicator"></p>
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
@ -192,7 +225,7 @@
</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>
<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Save</button> <button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Add</button>
</div> </div>
</div> </div>
</div> </div>
@ -213,7 +246,7 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<h6>This action is not reversible.</h6> <h6 style="margin: 0">This action is not reversible.</h6>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
@ -222,13 +255,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" <div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id=""> aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
<div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="peer_name"></h5> <h5 class="modal-title peer_name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
@ -296,24 +328,73 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="available_ip_modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Select available IP</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="selected_ip" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
<small class="text-muted"><strong>SELECTED IP (CLICK TO REMOVE)</strong></small>
<div id="selected_ip_list"></div>
</div>
<div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
<div class="list-group"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirm_ip">Confirm</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete_bulk_modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Select Peers to Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div id="bulk_remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert" style="margin: 1rem">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="selected_peers" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
<small class="text-muted"><strong>SELECTED PEERS (CLICK TO REMOVE)</strong></small>
<div id="selected_peer_list"></div>
</div>
<div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
<div class="list-group"></div>
</div>
<div class="modal-footer">
<a class="text-danger" id="select_all_delete_bulk_peers" style="cursor: pointer; margin-right: auto;"><small><strong>SELECT ALL</strong></small></a>
<button type="button" class="btn btn-danger" id="confirm_delete_bulk_peers" disabled data-conf="{{conf_data['name']}}">Delete</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="qrcode_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" <div class="modal fade" id="qrcode_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true"> aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="peer_name">QR Code</h5> <h5 class="modal-title">QR Code</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<img src="" id="qrcode_img" style="width: 100%"> <img id="qrcode_img" style="width: 100%">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;"> <div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;">
<div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000"> <div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header"> <div class="toast-header">
@ -329,123 +410,17 @@
{% include "tools.html" %} {% include "tools.html" %}
</body> </body>
{% include "footer.html" %} {% include "footer.html" %}
<script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script> <script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
<script> <script>
/* global peers */
let load_timeout; let load_timeout;
let load_interval = 0; let load_interval = 0;
let conf_name = "{{ conf_data['name'] }}" let conf_name = "{{ conf_data['name'] }}"
let peers = [];
$(".sb-"+conf_name+"-url").addClass("active"); $(".sb-"+conf_name+"-url").addClass("active");
function load_data(search){
startProgressBar()
let result = '';
$.ajax({
method: "GET",
url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
headers:{
"Content-Type": "application/json"
},
success: function (response){
{# Check all status #}
if (response["listen_port"] === "" && response["status"] === "stopped"){
$("config_info_alert").append('<div class="alert alert-warning" role="alert">Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.</div>')
}
if (response["conf_address"] === "N/A"){
$("config_info_alert").append('<div class="alert alert-warning" role="alert">Configuration <strong>Address</strong> need to be specified to have peers connect to it.</div>')
}
{# Status Button #}
if (response["checked"] === "checked"){
$("#conf_status_btn").html('<a href="#" id="'+response["name"]+'" '+response["checked"]+' class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>');
}else{
$("#conf_status_btn").html('<a href="#" id="'+response["name"]+'" '+response["checked"]+' class="switch text-primary"><i class="bi bi-toggle2-off"></i> OFF</a>');
}
$("#sort_by_dropdown option").removeAttr("selected");
$("#sort_by_dropdown option[value="+response["sort_tag"]+"]").attr("selected", "selected");
$(".interval-btn-group button").removeClass("active");
$("button[data-refresh-interval="+response["dashboard_refresh_interval"]+"]").addClass("active");
$(".display-btn-group button").removeClass("active");
$("button[data-display-mode="+response["peer_display_mode"]+"]").addClass("active");
$("#conf_status").html(response["status"]+'<span class="dot dot-'+response["status"]+'"></span>');
$("#conf_connected_peers").html(response["running_peer"]);
$("#conf_total_data_usage").html(response["total_data_usage"][0] +" GB");
$("#conf_total_data_received").html(response["total_data_usage"][2] +" GB");
$("#conf_total_data_sent").html(response["total_data_usage"][1]+" GB");
$("#conf_public_key").html(response["public_key"]);
$("#conf_listen_port").html(response["listen_port"] === "" ? "N/A":response["listen_port"]);
$("#conf_address").html(response["conf_address"]);
$(".info h6").removeClass("info_loading");
$("#conf_status_btn").removeClass("info_loading")
if (response["peer_data"].length === 0){
$(".peer_list").html('<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>');
}else{
let display_mode = response["peer_display_mode"] === "list" ? "col-12" : "col-sm-6 col-lg-4";
response["peer_data"].forEach(function(peer){
let total_r = 0;
let total_s = 0;
for (let i = 0; i < peer["traffic"].length; i++){
total_r += peer["traffic"][i]["total_receive"];
total_s += peer["traffic"][i]["total_sent"];
}
let spliter = '<div class="w-100"></div>';
let peer_name =
'<div class="col-sm display" style="display: flex; align-items: center; margin-bottom: 0.2rem">' +
'<h5 style="margin: 0;">'+ (peer["name"] === "" ? "Untitled" : peer["name"]) +'</h5>' +
'<h6 style="text-transform: uppercase; margin: 0; margin-left: auto !important;"><span class="dot dot-'+peer["status"]+'" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left" title="Peer Running"></span></h6>' +
'</div>';
let peer_transfer = '<div class="col-12 peer_data_group" style="text-align: right; display: flex; margin-bottom: 0.5rem"><p class="text-primary" style="text-transform: uppercase; margin-bottom: 0; margin-right: 1rem"><small><i class="bi bi-arrow-down-right"></i> '+ roundN(peer["total_receive"] + total_r, 4) +' GB</small></p> <p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> '+ roundN(peer["total_sent"] + total_s, 4) +' GB</small></p> </div>'
let peer_key = '<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">'+peer["id"]+'</samp></h6></div>';
let peer_allowed_ip = '<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer["allowed_ip"]+'</h6></div>';
let peer_latest_handshake = '<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer['latest_handshake']+'</h6> </div>';
let peer_endpoint = '<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer["endpoint"]+'</h6></div>';
let peer_control = '<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="'+peer["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="'+peer["id"]+'" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>';
if (peer["private_key"] !== ""){
peer_control += '<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/'+response['name']+'?id='+encodeURIComponent(peer["id"])+'"><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/'+response["name"]+'?id='+encodeURIComponent(peer["id"])+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>';
}
peer_control += '</div>';
let html = '<div class="'+display_mode+'">' +
'<div class="card mb-3 card-'+peer["status"]+'">' +
'<div class="card-body">' +
'<div class="row">'
+ peer_name
+ spliter
+ peer_transfer
+ peer_key
+ peer_allowed_ip
+ peer_latest_handshake
+ spliter
+ peer_endpoint
+ spliter
+ peer_control
+ '</div>' +
'</div></div>' +
'</div></div>';
result += html;
})
$(".peer_list").html(result);
if (response["dashboard_refresh_interval"] !== load_interval){
load_interval = response["dashboard_refresh_interval"];
clearInterval(load_timeout);
load_timeout = setInterval(function (){
load_data($('#search_peer_textbox').val());
},response["dashboard_refresh_interval"])
}
}
{#$("#config_body").html(response);#}
$(".dot.dot-running").attr("title","Peer Running").tooltip();
$(".dot.dot-stopped").attr("title","Peer Stopped").tooltip();
{#$("#search_peer_textbox").css("display", "block")#}
endProgressBar()
}
})
}
$(function(){ $(function(){
load_data($('#search_peer_textbox').val()); configurations.loadPeers($('#search_peer_textbox').val());
}); });
</script> </script>
</html> </html>

11
src/templates/header.html
View File

@ -1,7 +1,16 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>WGDashboard | {{ title }}</title> <title>{{ title }} | WGDashboard</title>
<link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="e">
<meta name="apple-mobile-web-app-title" content="e">
<meta name="msapplication-starturl" content="/">
<link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/> <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}"> <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">

16
src/templates/index.html
View File

@ -1,4 +1,5 @@
<html> <!-- index.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
<html lang="en">
{% with %} {% with %}
{% set title="Home" %} {% set title="Home" %}
{% include "header.html"%} {% include "header.html"%}
@ -9,7 +10,16 @@
<div class="container-fluid"> <div class="container-fluid">
{% include "sidebar.html" %} {% include "sidebar.html" %}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4">
<div style="display: flex; flex-direction: row; align-items: center;">
<h1 class="pb-4 mt-4">Home</h1> <h1 class="pb-4 mt-4">Home</h1>
</div>
{% if msg != "" %}
<div class="alert alert-danger" role="alert">
Configuration toggle failed. Please check the following error message:
</div>
<pre class="index-alert"><code>{{ msg }}</code></pre>
{% endif %}
{% if conf == [] %} {% if conf == [] %}
<p class="text-muted">You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".</p> <p class="text-muted">You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".</p>
{% endif %} {% endif %}
@ -20,7 +30,7 @@
<div class="col card-col"> <div class="col card-col">
<small class="text-muted"><strong>CONFIGURATION</strong></small> <small class="text-muted"><strong>CONFIGURATION</strong></small>
<a href="/configuration/{{i['conf']}}" class="conf_link"> <a href="/configuration/{{i['conf']}}" class="conf_link">
<h6 class="card-title" style="margin:0 !important;">{{i['conf']}}</h6> <h6 class="card-title" style="margin:0 !important;"><samp>{{i['conf']}}</samp></h6>
</a> </a>
</div> </div>
<div class="col card-col"> <div class="col card-col">
@ -29,7 +39,7 @@
</div> </div>
<div class="col-md card-col"> <div class="col-md card-col">
<small class="text-muted"><strong>PUBLIC KEY</strong></small> <small class="text-muted"><strong>PUBLIC KEY</strong></small>
<h6 style="text-transform: uppercase; margin:0 !important;"><samp>{{i['public_key']}}</samp></h6> <h6 style="margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
</div> </div>
<div class="col-md index-switch"> <div class="col-md index-switch">
{% if i['checked'] == "checked" %} {% if i['checked'] == "checked" %}

70
src/templates/signin.html
View File

@ -1,32 +1,31 @@
<html> <html>
<head> {% with title="Sign In"%}
<meta charset="utf-8"> {% include "header.html"%}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% endwith %}
<title>WGDashboard | Login</title> <style>
<link rel="icon" href="{{ url_for('static',filename='logo.png') }}"/> .login-container-fluid{
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> display: flex;
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}"> height: calc( 100% - 240px );
</head> align-items: center;
}
</style>
<body> <body>
{% include "navbar.html" %} {% include "navbar.html" %}
<div class="container-fluid"> <div class="container-fluid login-container-fluid">
<main role="main" class="container login-container"> <main role="main" class="container login-container">
<div class="login-box" style="margin: auto !important;"> <div class="login-box" style="margin: auto !important;">
<h1 class="text-center">Sign In</h1> <h1 class="text-center">Sign In</h1>
<form style="margin-left: auto !important; margin-right: auto !important; max-width: 500px;" action="/auth" method="post"> <form style="margin-left: auto !important; margin-right: auto !important; max-width: 500px;" action="/auth" method="post">
{% if message != "" %} {% if message != "" %}
<div class="alert alert-danger" role="alert"> <div class="alert alert-warning" role="alert">You need to sign in first</div>
{{ message }}
</div>
{% endif %} {% endif %}
<div class="alert alert-danger d-none" role="alert"></div>
<div class="form-group"> <div class="form-group">
<label for="username" class="text-left">Username</label> <label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i> Username</label>
<input type="text" class="form-control" id="username" name="username" required> <input type="text" class="form-control" id="username" name="username" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password" class="text-left">Password</label> <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i> Password</label>
<input type="password" class="form-control" id="password" name="password" required> <input type="password" class="form-control" id="password" name="password" required>
</div> </div>
<button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button> <button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button>
@ -37,8 +36,43 @@
</body> </body>
{% include "footer.html" %} {% include "footer.html" %}
<script> <script>
$("button").click(function(){ $("button").on("click", function(e){
$(this).html("Signing In...") let req = $("input[required]");
let check = true
for (let i = 0; i < req.length; i++){
if ($(req[i]).val().length === 0){
$("button").html("Sign In");
check = false;
$("input[required]").addClass("is-invalid");
break;
}
}
if (check){
e.preventDefault();
$(this).html("Signing In...").attr("disabled", "disabled");
$.ajax({
url: "/auth",
method: "POST",
headers:{"Content-Type": "application/json"},
data: JSON.stringify({
"username": $("#username").val(),
"password": $("#password").val()
}) })
}).done(function(res){
if (res.status === true){
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("redirect")){
window.location.replace(urlParams.get("redirect"))
}else{
window.location.replace("/");
}
}else{
$(".alert").html(res.msg).removeClass("d-none");
$("button").html("Sign In").removeAttr("disabled");
$("input[required]").addClass("is-invalid");
}
});
}
});
</script> </script>
</html> </html>

1
src/util.py
View File

@ -78,3 +78,4 @@ def check_DNS(dns):
def check_remote_endpoint(address): def check_remote_endpoint(address):
return (check_IP(address) or regex_match("(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z][a-z]{0,61}[a-z]", return (check_IP(address) or regex_match("(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z][a-z]{0,61}[a-z]",
address)) address))

64
src/wgd.sh
View File

@ -1,7 +1,19 @@
#!/bin/bash #!/bin/bash
# wgd.sh - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]
# Under Apache-2.0 License
app_name="dashboard.py" app_name="dashboard.py"
app_official_name="WGDashboard" app_official_name="WGDashboard"
PID_FILE=./gunicorn.pid
environment=$(if [[ $ENVIRONMENT ]]; then echo $ENVIRONMENT; else echo 'develop'; fi)
if [[ $CONFIGURATION_PATH ]]; then
cb_work_dir=$CONFIGURATION_PATH/letsencrypt/work-dir
cb_config_dir=$CONFIGURATION_PATH/letsencrypt/config-dir
else
cb_work_dir=/etc/letsencrypt
cb_config_dir=/var/lib/letsencrypt
fi
dashes='------------------------------------------------------------' dashes='------------------------------------------------------------'
equals='============================================================' equals='============================================================'
help () { help () {
@ -50,33 +62,64 @@ install_wgd(){
printf "| Installing latest Python dependencies |\n" printf "| Installing latest Python dependencies |\n"
python3 -m pip install -U -r requirements.txt > /dev/null 2>&1 python3 -m pip install -U -r requirements.txt > /dev/null 2>&1
printf "| WGDashboard installed successfully! |\n" printf "| WGDashboard installed successfully! |\n"
printf "| Enter ./wgd start to start the dashboard |\n" printf "| Enter ./wgd.sh start to start the dashboard |\n"
} }
check_wgd_status(){ check_wgd_status(){
if ps aux | grep '[p]ython3 '$app_name > /dev/null; if test -f "$PID_FILE"; then
then if ps aux | grep -v grep | grep $(cat ./gunicorn.pid) > /dev/null; then
return 0 return 0
else else
return 1 return 1
fi fi
else
if ps aux | grep -v grep | grep '[p]ython3 '$app_name > /dev/null; then
return 0
else
return 1
fi
fi
} }
start_wgd () { certbot_create_ssl () {
certbot certonly --config ./certbot.ini --email "$EMAIL" --work-dir $cb_work_dir --config-dir $cb_config_dir --domain "$SERVERURL"
}
certbot_renew_ssl () {
certbot renew --work-dir $cb_work_dir --config-dir $cb_config_dir
}
gunicorn_start () {
printf "%s\n" "$dashes" printf "%s\n" "$dashes"
printf "| Starting WGDashboard in the background. |\n" printf "| Starting WGDashboard with Gunicorn in the background. |\n"
if [ ! -d "log" ] if [ ! -d "log" ]; then
then mkdir "log" 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 & if [[ $USER == root ]]; then
export PATH=$PATH:/usr/local/bin:$HOME/.local/bin
fi
gunicorn --access-logfile log/access_"$d".log \
--error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
printf "| Log files is under log/ |\n" printf "| Log files is under log/ |\n"
printf "%s\n" "$dashes" printf "%s\n" "$dashes"
} }
gunicorn_stop () {
kill $(cat ./gunicorn.pid)
}
start_wgd () {
gunicorn_start
}
stop_wgd() { stop_wgd() {
if test -f "$PID_FILE"; then
gunicorn_stop
else
kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')" kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
fi
} }
start_wgd_debug() { start_wgd_debug() {
@ -99,8 +142,7 @@ update_wgd() {
mv wgd.sh wgd.sh.old mv wgd.sh wgd.sh.old
printf "| Downloading %s from GitHub... |\n" "$new_ver" printf "| Downloading %s from GitHub... |\n" "$new_ver"
git stash > /dev/null 2>&1 git stash > /dev/null 2>&1
git pull git pull https://github.com/donaldzou/WGDashboard.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 "| Upgrading pip |\n" printf "| Upgrading pip |\n"
python3 -m pip install -U pip > /dev/null 2>&1 python3 -m pip install -U pip > /dev/null 2>&1
printf "| Installing latest Python dependencies |\n" printf "| Installing latest Python dependencies |\n"
@ -150,7 +192,7 @@ if [ "$#" != 1 ];
printf "%s\n" "$dashes" printf "%s\n" "$dashes"
stop_wgd stop_wgd
printf "| WGDashboard is stopped. |\n" printf "| WGDashboard is stopped. |\n"
sleep 2 sleep 4
start_wgd start_wgd
else else
start_wgd start_wgd