Добавлен wireguard-tools

Add dark theme

.gitignore

@@ -1,5 +1,4 @@
-.vscode/sftp.json
-src/.vscode/sftp.json
+.vscode
 .DS_Store
 .idea
 src/db

Dockerfile

@@ -0,0 +1,28 @@
+FROM ubuntu:20.04
+
+ARG WG_ADDRESS=$WG_ADDRESS
+
+RUN apt-get update && \
+ apt-get install -y --no-install-recommends iproute2 wireguard-tools iptables nano net-tools python3 python3-pip python3-venv procps openresolv inotify-tools && \
+ apt-get clean
+
+RUN mkdir -p /etc/wireguard/
+RUN mkdir -p /opt/wgdashboard
+RUN mkdir -p /opt/wgdashboard_tmp
+# configure wireguard
+RUN wg genkey |  tee /opt/wgdashboard_tmp/privatekey | wg pubkey |  tee /opt/wgdashboard_tmp/publickey
+
+RUN  cd / && echo "[Interface]" > wg0.conf && echo "SaveConfig = true" >> wg0.conf && echo -n "PrivateKey = " >> wg0.conf && cat /opt/wgdashboard_tmp/privatekey >> wg0.conf \
+    && echo  "ListenPort = 51820" >> wg0.conf && echo  "Address = ${WG_ADDRESS}" >> wg0.conf  && chmod 700 wg0.conf
+
+COPY ./src /opt/wgdashboard_tmp
+RUN pip3 install -r /opt/wgdashboard_tmp/requirements.txt   --no-cache-dir
+RUN rm -rf /opt/wgdashboard_tmp
+COPY ./entrypoint.sh /entrypoint.sh
+RUN chmod u+x /entrypoint.sh
+
+ENTRYPOINT ["/entrypoint.sh"]
+WORKDIR /opt/wgdashboard 
+
+EXPOSE 10086
+EXPOSE 51820/udp

README.md

@@ -1,518 +1,128 @@
-<p align="center">
-  <img alt="WGDashboard" src="img/logo.png" width="128">
-</p>
-<h1 align="center">WGDashboard</h1>
+## [WGDashboard](https://github.com/donaldzou/WGDashboard) for [AmneziaWG](https://github.com/amnezia-vpn/amneziawg-linux-kernel-module)
 
+A bit of crap code has been added to the original panel to adapt it to work with the obfuscated version of WireGuard.
 
-<p align="center">
-  <img src="http://ForTheBadge.com/images/badges/made-with-python.svg">
-</p>
-<p align="center">
-  <a href="https://github.com/donaldzou/wireguard-dashboard/releases/latest"><img src="https://img.shields.io/github/v/release/donaldzou/wireguard-dashboard"></a>
-  <a href="https://wakatime.com/badge/user/45f53c7c-9da9-4cb0-85d6-17bd38cc748b/project/5334ae20-e9a6-4c55-9fea-52d4eb9dfba6"><img src="https://wakatime.com/badge/user/45f53c7c-9da9-4cb0-85d6-17bd38cc748b/project/5334ae20-e9a6-4c55-9fea-52d4eb9dfba6.svg" alt="wakatime"></a>
-</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>
+### Installation instructions
 
-## 📣 What's New: v3.0
+Tested only with Ubuntu 22.04
 
-- 🎉  **New Features**
-  - **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**.
-  - **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**
-  - [IP Sorting range issues #99](https://github.com/donaldzou/WGDashboard/issues/99) [❤️ @barryboom]
-  - [INvalid character written to tunnel json file #108](https://github.com/donaldzou/WGDashboard/issues/108) [❤️ @ikidd]
-  - [Add IPv6 #91](https://github.com/donaldzou/WGDashboard/pull/91) [❤️ @pgalonza]
-  - [Added MTU and PersistentKeepalive to QR code and download files #112](https://github.com/donaldzou/WGDashboard/pull/112) [:heart: @reafian]
-  - **And many other bugs provided by our beloved users** :heart:
-- **🧐  Other Changes**
-  - **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>
-
-## Table of Content
-
-
-- [💡  Features](#-features)
-- [📝  Requirement](#-requirement)
-- [🛠  Install](#-install)
-- [🪜  Usage](#-usage)
-  - [Start/Stop/Restart WGDashboard](#startstoprestart-wgdashboard)
-  - [Autostart WGDashboard on boot](#autostart-wgdashboard-on-boot--v22)
-- [✂️  Dashboard Configuration](#%EF%B8%8F-dashboard-configuration)
-  - [Dashboard Configuration file](#dashboard-configuration-file)
-  - [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)
-- [🥘 Experimental Functions](#-experimental-functions)
-- [🔍  Screenshot](#-screenshot)
-- [⏰  Changelog](#--changelog)
-- [🛒  Dependencies](#-dependencies)
-- [✨  Contributors](#-contributors)
-
-## 💡 Features
-
-- **No need to re-configure existing WireGuard configuration! It can search for existed configuration files.**
-- Easy to use interface, provided username and password protection to the dashboard
-- Add peers and edit (Allowed IPs, DNS, Private Key...)
-- View peers and configuration real time details (Data Usage, Latest Handshakes...)
-- Share your peer configuration with QR code or file download
-- Testing tool: Ping and Traceroute to your peer's ip
-- **And more functions are coming up!**
-
-
-## 📝 Requirement
-
-- Recommend the following OS, tested by our beloved users:
-  - [x] Ubuntu 18.04.1 LTS - 20.04.1 LTS [@Me]
-  - [x] Debian GNU/Linux 10 (buster) [❤️ @[robchez](https://github.com/robchez)]
-  - [x] AlmaLinux 8.4 (Electric Cheetah) [❤️ @[barry-smithjr](https://github.com/)]
-  - [x] CentOS 7 [❤️ @[PrzemekSkw](https://github.com/PrzemekSkw)]
-
-  > **If you have tested on other OS and it works perfectly please provide it to me in [#31](https://github.com/donaldzou/wireguard-dashboard/issues/31). Thank you!**
-
-- **WireGuard** and **WireGuard-Tools (`wg-quick`)**  are installed.
-
-  > Don't know how? Check this <a href="https://www.wireguard.com/install/">official documentation</a>
-
-- Configuration files under **`/etc/wireguard`**, but please note the following sample
-
-  ```ini
-  [Interface]
-  ...
-  SaveConfig = true
-  # Need to include this line to allow WireGuard Tool to save your configuration, 
-  # or if you just want it to monitor your WireGuard Interface and don't need to
-  # make any changes with the dashboard, you can set it to false.
-  
-  [Peer]
-  PublicKey = abcd1234
-  AllowedIPs = 1.2.3.4/32
-  # Must have for each peer
-  ```
-
-- Python 3.7+ & Pip3
-
-- Browser support CSS3 and ES6
-
-## 🛠 Install
-1. Download WGDashboard
-
-   ```shell
-   git clone -b v3.0.3 https://github.com/donaldzou/WGDashboard.git wgdashboard
-   
-2. Open the WGDashboard folder
-
-   ```shell
-   cd wgdashboard/src
-   ```
-   
-3. Install WGDashboard
-
-   ```shell
-   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 WGDashboard
-
-   ```shell
-   ./wgd.sh start
-   ```
-   
-   **Note**:
-
-   > For [`pivpn`](https://github.com/pivpn/pivpn) user, please use `sudo ./wgd.sh start` to run if your current account does not have the permission to run `wg show` and `wg-quick`.
-
-6. Access dashboard
-
-   Access your server with port `10086` (e.g. http://your_server_ip:10086), using username `admin` and password `admin`. See below how to change port and ip that the dashboard is running with.
-
-## 🪜 Usage
-
-#### Start/Stop/Restart WGDashboard
-
-
-```shell
-cd wgdashboard/src
------------------------------
-./wgd.sh start    # Start the dashboard in background
------------------------------
-./wgd.sh debug    # Start the dashboard in foreground (debug mode)
------------------------------
-./wgd.sh stop     # Stop the dashboard
------------------------------
-./wgd.sh restart  # Restart the dasboard
+0. Скрипт быстрой установки
+```
+bash <(curl -sSL https://git.pub38.com/Evgen/WGDashboard/raw/branch/awg/install.sh)
 ```
 
-#### Autostart WGDashboard on boot (>= v2.2)
+#### Install AmneziaWG kernel module
 
-In the `src` folder, it contained a file called `wg-dashboard.service`, we can use this file to let our system to autostart the dashboard after reboot. The following guide has tested on **Ubuntu**, most **Debian** based OS might be the same, but some might not. Please don't hesitate to provide your system if you have tested the autostart on another system.
+1. Upgrade your system to latest packages including latest available kernel by running 
+ ```  apt-get full-upgrade ``` 
+After kernel upgrade reboot is required.
+2. Ensure that you have source repositories configured for APT - edit /etc/apt/sources.list and make sure that there is at least one line starting with deb-src is present and uncommented.
+3. Install pre-requisites - run 
+   ```sudo apt install -y software-properties-common python3-launchpadlib gnupg2 linux-headers-$(uname -r)```
+4. reboot
+5. ```sudo add-apt-repository ppa:amnezia/ppa```
+6. ```sudo apt-get install -y amneziawg ```
+7. Create simlinks from awg and awg-quick to wg and wg-quick
+```
+   ln -s /usr/bin/awg /usr/bin/wg
+   ln -s /usr/bin/awg-quick /usr/bin/wg-quick
+```
+9. reboot   
 
-1. Changing the directory to the dashboard's directory
+#### Install WGDashboard
 
-   ```shell
-   cd wgdashboard/src
+1. Install pip
+   ```apt -y install python3-pip```
+2. Install pre-requisites
+   ```pip install gunicorn ifcfg flask flask_qrcode icmplib```
+3. Clone and install WGDashboard
+   ```cd /```
+4. ```git clone https://git.pub38.com/Evgen/WGDashboard.git wgdashboard```
+5. ```cd /wgdashboard/src```
+6. ```chmod u+x wgd.sh```
+7. ```./wgd.sh install```
+8. Configure awg server interface 
+   ```cd /wgdashboard```
+9. ```chmod u+x awg-gen-config.sh```
+10. ``` ./awg-gen-config.sh ```
+11.  Create wg-dash systemd unit
    ```
+cat << EOF | sudo tee "/etc/systemd/system/wg-dash.service"
+[Unit]
+After=syslog.target network-online.target
+ConditionPathIsDirectory=/etc/amnezia/amneziawg
+[Service]
+Type=forking
+User=root
+Group=root
+PIDFile=/wgdashboard/src/gunicron.pid
+WorkingDirectory=/wgdashboard/src
+ExecStart=/usr/bin/env gunicorn --access-logfile /wgdashboard/src/log/access.log --error-logfile /wgdashboard/src/log/error.log 'dashboard:run_dashboard()' --pid /wgdashboard/src/gunicron.pid
+PrivateTmp=true
+Restart=no
 
-2. Get the full path of the dashboard's directory
+[Install]
+WantedBy=multi-user.target
 
-   ```shell
-   pwd
-   #Output: /root/wgdashboard/src
-   ```
+EOF
+```
+#### Configure firewall
 
-   For this example, the output is `/root/wireguard-dashboard/src`, your path might be different since it depends on where you downloaded the dashboard in the first place. **Copy the the output to somewhere, we will need this in the next step.**
 
-3. Edit the service file, the service file is located in `wireguard-dashboard/src`, you can use other editor you like, here will be using `nano`
+1. Allow panel port(see app_port in /wgdashboard/src/wg-dashboard.ini)
+```ufw allow 10085/tcp```
+2. Allow awg server port (see ListenPort in /etc/amnezia/amneziawg/wg0.conf)
+```ufw allow 52853/udp```
+3. Enable routing
+   edit  /etc/ufw/sysctl.conf
+   uncomment three lines:
+```
+   net/ipv4/ip_forward=1
+   net/ipv6/conf/default/forwarding=1
+   net/ipv6/conf/all/forwarding=1
+```
+4. Set default policy for forwarding
+   edit /etc/default/ufw
+   set -   DEFAULT_FORWARD_POLICY="ACCEPT"
 
-   ```shell
-   nano wg-dashboard.service
-   ```
+5. Add NAT rules for awg clients
+   edit /etc/ufw/after.rules
+   add all lines to the start of document:
+```   
+# NAT table rules
+*nat
+:POSTROUTING ACCEPT [0:0]
 
-   You will see something like this:
+# Forward traffic through eth0 - Change to match you out-interface
+-A POSTROUTING -s 10.90.90.0/24 -o eth0 -j MASQUERADE
 
-   ```ini
-   [Unit]
-   After=network.service
-   
-   [Service]
-   WorkingDirectory=<your dashboard directory full path here>
-   ExecStart=/usr/bin/python3 <your dashboard directory full path here>/dashboard.py
-   Restart=always
-   
-   
-   [Install]
-   WantedBy=default.target
-   ```
-
-   Now, we need to replace both `<your dashboard directory full path here>` to the one you just copied from step 2. After doing this, the file will become something like this, your file might be different:
-
-   ```ini
-   [Unit]
-   After=netword.service
-   
-   [Service]
-   WorkingDirectory=/root/wgdashboard/src
-   ExecStart=/usr/bin/python3 /root/wgdashboard/src/dashboard.py
-   Restart=always
-   
-   
-   [Install]
-   WantedBy=default.target
-   ```
-
-   **Be aware that after the value of `WorkingDirectory`, it does not have  a `/` (slash).** And then save the file after you edited it
-
-4. Copy the service file to systemd folder
-
-   ```bash
-   $ cp wg-dashboard.service /etc/systemd/system/wg-dashboard.service
-   ```
-
-   To make sure you copy the file successfully, you can use this command `cat /etc/systemd/system/wg-dashboard.service` to see if it will output the file you just edited.
-
-5. Enable the service
-
-   ```bash
-   $ sudo chmod 664 /etc/systemd/system/wg-dashboard.service
-   $ sudo systemctl daemon-reload
-   $ sudo systemctl enable wg-dashboard.service
-   $ sudo systemctl start wg-dashboard.service  # <-- To start the service
-   ```
-
-6. Check if the service run correctly
-
-   ```bash
-   $ sudo systemctl status wg-dashboard.service
-   ```
-
-   And you should see something like this
-
-   ```shell
-   ● wg-dashboard.service
-        Loaded: loaded (/etc/systemd/system/wg-dashboard.service; enabled; vendor preset: enabled)
-        Active: active (running) since Tue 2021-08-03 22:31:26 UTC; 4s ago
-      Main PID: 6602 (python3)
-         Tasks: 1 (limit: 453)
-        Memory: 26.1M
-        CGroup: /system.slice/wg-dashboard.service
-                └─6602 /usr/bin/python3 /root/wgdashboard/src/dashboard.py
-   
-   Aug 03 22:31:26 ubuntu-wg systemd[1]: Started wg-dashboard.service.
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Serving Flask app "WGDashboard" (lazy loading)
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Environment: production
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:    WARNING: This is a development server. Do not use it in a production deployment.
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:    Use a production WSGI server instead.
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Debug mode: off
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Running on all addresses.
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:    WARNING: This is a development server. Do not use it in a production deployment.
-   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Running on http://0.0.0.0:10086/ (Press CTRL+C to quit)
-   ```
-
-   If you see `Active:` followed by `active (running) since...` then it means it run correctly. 
-
-7. Stop/Start/Restart the service
-
-   ```bash
-   sudo systemctl stop wg-dashboard.service      # <-- To stop the service
-   sudo systemctl start wg-dashboard.service     # <-- To start the service
-   sudo systemctl restart wg-dashboard.service   # <-- To restart the service
-   ```
-
-8. **And now you can reboot your system, and use the command at step 6 to see if it will auto start after the reboot, or just simply access the dashboard through your browser. If you have any questions or problem, please report it in the issue page.**
-
-## ✂️ Dashboard Configuration
-
-#### 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 configurations:
-
-|                              | Description                                                  | Default                                              | Edit Available |
-| ---------------------------- | ------------------------------------------------------------ | ---------------------------------------------------- | -------------- |
-| **`[Account]`**              | *Configuration on account*                                   |                                                      |                |
-| `username`                   | Dashboard login username                                     | `admin`                                              | Yes            |
-| `password`                   | Password, will be hash with SHA256                           | `admin` hashed in SHA256                             | Yes            |
-|                              |                                                              |                                                      |                |
-| **`[Server]`**               | *Configuration on dashboard*                                 |                                                      |                |
-| `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_port`                   | Port the the dashboard will run with                         | `10086`                                              | Yes            |
-| `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**         |
-| `version`                    | Dashboard Version                                            | `v3.0.3`                                             | **No**         |
-| `dashboard_refresh_interval` | How frequent the dashboard will refresh on the configuration page | `60000ms`                                            | Yes            |
-| `dashboard_sort`             | How configuration is sorting                                 | `status`                                             | Yes            |
-|                              |                                                              |                                                      |                |
-| **`[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)
-
-Starting version 2.2, dashboard can now generate QR code and configuration file for each peer. Here is a template of what each QR code encoded with and the same content will be inside the file:
-
-```ini
-[Interface]
-PrivateKey = QWERTYUIOPO234567890YUSDAKFH10E1B12JE129U21=
-Address = 0.0.0.0/32
-DNS = 1.1.1.1
-
-[Peer]
-PublicKey = QWERTYUIOPO234567890YUSDAKFH10E1B12JE129U21=
-AllowedIPs = 0.0.0.0/0
-Endpoint = 0.0.0.0:51820
+# don't delete the 'COMMIT' line or these nat table rules won't
+# be processed
+COMMIT
 ```
 
-|                   | Description                                                  | Default Value                                                | Available in Peer setting |
-| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------- |
-| **`[Interface]`** |                                                              |                                                              |                           |
-| `PrivateKey`      | The private key of this peer                                 | Private key generated by WireGuard (`wg genkey`) or provided by user | Yes                       |
-| `Address`         | The `allowed_ips` of your peer                               | N/A                                                          | Yes                       |
-| `DNS`             | The DNS server your peer will use                            | `1.1.1.1` - Cloud flare DNS, you can change it when you adding the peer or in the peer setting. | Yes                       |
-| **`[Peer]`**      |                                                              |                                                              |                           |
-| `PublicKey`       | The public key of your server                                | N/A                                                          | No                        |
-| `AllowedIPs`      | IP ranges for which a peer will route traffic                | `0.0.0.0/0` - Indicated a default route to send all internet and VPN traffic through that peer. | Yes                       |
-| `Endpoint`        | Your wireguard server ip and port, the dashboard will search for your server's default interface's ip. | `<your server default interface ip>:<listen port>`           | Yes                       |
+restart firewall
 
-## ❓ How to update the dashboard?
+```
+ufw allow 22/tcp
+ufw disable
+ufw enable
+```
+start awg interface
 
-#### **Please note for user who is using `v2.3.1` or below**
+```
+awg-quick up wg0
+```
 
-- 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:.
+start WGDashboard
 
-<hr>
-
-1. Change your directory to `wgdashboard` 
-   
-    ```shell
-    cd wgdashboard
-    ```
-    
-2. Update the dashboard
-    ```shell
-    git pull https://github.com/donaldzou/WGDashboard.git v3.0.3 --force
-    ```
-
-3. Install
-
-   ```shell
-   ./wgd.sh install
-   ```
-
-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"/>
+```
+systemctl daemon-reload
+systemctl enable wg-dash --now
+```
 
 
 
-## 🔍 Screenshot
 
-![Sign In Page](img/SignIn.png)
-
-![Index Image](img/HomePage.png)
-
-![Configuration](img/Configuration.png)
-
-![Add Peer](img/AddPeer.png)
-
-![Edit Peer](img/EditPeer.png)
-
-![Delete Peer](img/DeleteBulk.png)
-
-![Dashboard Setting](img/DashboardSetting.png)
-
-![Ping](img/Ping.png)
-
-![Traceroute](img/Traceroute.png)
-
-## ⏰  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
-
-Bug Fixed:
-- Added support for full subnet on Allowed IP
-- Peer setting Save button
-
-#### v2.2 - Aug 14, 2021
-
-- 🎉  **New Features**
-  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
-  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
-  - **Search peers**: You can now search peers by their name.
-  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
-  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
-  - ....
-- 🪚  **Bug Fixed**
-  - When there are comments in the wireguard config file, will cause the dashboard to crash.
-  - Used regex to search for config files.
-- **🧐  Other Changes**
-  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
-  - Updated Python dependencies
-    - Flask: `v1.1.2 => v2.0.1`
-    - Jinja: `v2.10.1 => v3.0.1`
-    - icmplib: `v2.1.1 => v3.0.1`
-  - Updated CSS/JS dependencies
-    - Bootstrap: `v4.5.3 => v4.6.0`
-  - UI adjustment
-    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
-
-#### v2.1 - Jul 2, 2021
-
-- Added **Ping** and **Traceroute** tools!
-- Adjusted the calculation of data usage on each peers
-- Added refresh interval of the dashboard
-- Bug fixed when no configuration on fresh install ([#23](https://github.com/donaldzou/wireguard-dashboard/issues/23))
-- Fixed crash when too many peers ([#22](https://github.com/donaldzou/wireguard-dashboard/issues/22))
-
-#### v2.0 - May 5, 2021
-
-- Added login function to dashboard
-  - ***I'm not using the most ideal way to store the username and password, feel free to provide a better way to do this if you any good idea!***
-- Added a config file to the dashboard
-- Dashboard config can be change within the **Setting** tab on the side bar
-- Adjusted UI
-- And much more!
-
-#### v1.1.2 - Apr 3, 2021
-
-- Resolved issue [#3](https://github.com/donaldzou/wireguard-dashboard/issues/3).
-
-#### v1.1.1 - Apr 2, 2021
-
-- Able to add a friendly name to each peer. Thanks [#2](https://github.com/donaldzou/wireguard-dashboard/issues/2) !
-
-#### v1.0 - Dec 27, 2020
-
-- Added the function to remove peers
-
-## 🛒 Dependencies
-
-- CSS/JS
-  - [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) `v4.6.0`
-  - [Bootstrap Icon](https://icons.getbootstrap.com) `v1.4.0`
-  - [jQuery](https://jquery.com) `v3.5.1`
-- Python
-  - [Flask](https://pypi.org/project/Flask/) `v2.0.1`
-  - [ifcfg](https://pypi.org/project/ifcfg/) `v0.21`
-  - [icmplib](https://pypi.org/project/icmplib/) `v2.1.1`
-  - [flask-qrcode](https://pypi.org/project/Flask-QRcode/) `v3.0.0`
-
-## ✨ Contributors
-
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/antonioag95"><img src="https://avatars.githubusercontent.com/u/30556866?v=4?s=100" width="100px;" alt=""/><br /><sub><b>antonioag95</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=antonioag95" title="Tests">⚠️</a> <a href="https://github.com/donaldzou/WGDashboard/commits?author=antonioag95" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/tonjo"><img src="https://avatars.githubusercontent.com/u/4726289?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tonjo</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=tonjo" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/reafian"><img src="https://avatars.githubusercontent.com/u/11992416?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Richard Newton</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=reafian" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.davejlong.com"><img src="https://avatars.githubusercontent.com/u/175317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Long</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=davejlong" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.std-soft.com"><img src="https://avatars.githubusercontent.com/u/5978293?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Markus Neubauer</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=marneu" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+ 
 

awg-gen-config.sh

@@ -0,0 +1,115 @@
+#!/bin/bash
+
+set -xe
+
+export SERVER_NAME="serverwg"
+export INTERFACE_WG="wg0"
+
+sudo mkdir -p /etc/amnezia/amneziawg/keys ;
+
+wg genkey | sudo tee "/etc/amnezia/amneziawg/keys/server.key" | \
+wg pubkey | sudo tee "/etc/amnezia/amneziawg/keys/server.key.pub";
+
+echo
+echo "CREATING THE SERVER CONFIG"
+echo
+
+DEFAULT_INTERFACE="$(ip -o -4 route show to default | awk '{print $5}')"
+MAIN_IP="$(hostname -I | cut -d' ' -f1)"
+
+PRIVATE_KEY=$(sudo cat /etc/amnezia/amneziawg/keys/server.key)
+
+PORT=$(shuf -i 52800-53000 -n1)
+
+J_C=$(shuf -i 7-15 -n1)
+J_MIN=$(shuf -i 35-65 -n1)
+J_MAX=$(shuf -i 800-950 -n1)
+S_1=$(shuf -i 50-70 -n1)
+S_2=$(shuf -i 130-150 -n1)
+H_1=$(shuf -i 1006457265-1206457265 -n1)
+H_2=$(shuf -i 239455488-259455488 -n1)
+H_3=$(shuf -i 1109847463-1309847463 -n1)
+H_4=$(shuf -i 1546644382-1746644382 -n1)
+
+cat << EOF | sudo tee "/etc/amnezia/amneziawg/${INTERFACE_WG}.conf"
+[Interface]
+Address = 10.90.90.1/24
+ListenPort = ${PORT}
+PrivateKey = ${PRIVATE_KEY}
+Jc = ${J_C}
+Jmin = ${J_MIN}
+Jmax = ${J_MAX}
+S1 = ${S_1}
+S2 = ${S_2}
+H1 = ${H_1}
+H2 = ${H_2}
+H3 = ${H_3}
+H4 = ${H_4}
+
+EOF
+
+sudo chmod 600 "/etc/amnezia/amneziawg/${INTERFACE_WG}.conf" "/etc/amnezia/amneziawg/keys/server.key"
+
+echo
+echo "ACTIVATING WIREGUARD SERVICE"
+echo
+
+sudo wg-quick up "${INTERFACE_WG}"
+sudo wg show "${INTERFACE_WG}"
+
+echo
+echo "ENABLE WIREGUARD SERVICE AT BOOT"
+echo
+
+sudo systemctl enable awg-quick@wg0
+
+
+chmod -R 755 /etc/amnezia/amneziawg
+
+cat << EOF | sudo tee "/etc/systemd/system/wg-dash.service"
+[Unit]
+After=syslog.target network-online.target
+ConditionPathIsDirectory=/etc/amnezia/amneziawg
+
+[Service]
+Type=forking
+User=root
+Group=root
+PIDFile=/wgdashboard/src/gunicron.pid
+WorkingDirectory=/wgdashboard/src
+ExecStart=/usr/bin/env gunicorn --access-logfile /wgdashboard/src/log/access.log --error-logfile /wgdashboard/src/log/error.log 'dashboard:run_dashboard()' --pid /wgdashboard/src/gunicron.pid
+PrivateTmp=true
+Restart=no
+
+[Install]
+WantedBy=multi-user.target
+
+EOF
+
+cat << EOF | sudo tee "/wgdashboard/src/wg-dashboard.ini"
+[Account]
+username = admin
+password = 8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918
+
+[Server]
+wg_conf_path = /etc/amnezia/amneziawg
+app_ip = 0.0.0.0
+app_port = 10085
+auth_req = true
+version = v3.1
+dashboard_refresh_interval = 60000
+dashboard_sort = status
+dashboard_theme = light
+
+[Peers]
+peer_endpoint_allowed_ip = 0.0.0.0/0
+peer_display_mode = grid
+remote_endpoint = ${MAIN_IP}
+peer_keep_alive = 21
+
+
+EOF
+
+systemctl daemon-reload
+
+systemctl enable wg-dash --now

docker-compose.yml

@@ -0,0 +1,19 @@
+version: "3.5"
+
+services:
+  wgdashboard:
+    image: donaldzou/wgdashboard
+    build: 
+      context: ./
+      dockerfile: ./Dockerfile
+    cap_add: 
+      - NET_ADMIN
+      - SYS_MODULE
+    restart: unless-stopped 
+    volumes:
+      - /lib/modules:/lib/modules
+      - ./src:/opt/wgdashboard
+      - ./config:/etc/wireguard
+    ports:
+      - 10086:10086
+      - 51820:51820/udp

entrypoint.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# if [ -z "$(ls -A /etc/wireguard)" ]; then
+#   mv /wg0.conf /etc/wireguard
+#   echo "Moved conf file to /etc/wireguard"
+# else
+#   rm wg0.conf
+#   echo "Removed unneeded conf file"
+# fi
+
+# wg-quick up wg0
+chmod u+x /opt/wgdashboard/wgd.sh
+if [ ! -f "/opt/wgdashboard/wg-dashboard.ini" ]; then
+  /opt/wgdashboard/wgd.sh install
+fi
+/opt/wgdashboard/wgd.sh debug

install.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+set -e
+
+echo "[1/5] Обновление пакетов и установка зависимостей..."
+apt update && apt install -y python3-pip git wireguard-tools
+pip3 install --break-system-packages --ignore-installed blinker gunicorn ifcfg flask flask_qrcode icmplib
+
+echo "[2/5] Скачивание WGDashboard из Gitea..."
+rm -rf /wgdashboard
+git clone https://git.pub38.com/Evgen/WGDashboard.git /wgdashboard
+
+echo "[3/5] Установка WGDashboard..."
+chmod +x /wgdashboard/src/wgd.sh /wgdashboard/awg-gen-config.sh
+cd /wgdashboard/src && ./wgd.sh install
+
+echo "[4/5] Настройка конфигурации..."
+cd /wgdashboard && ./awg-gen-config.sh
+
+echo "[5/5] Запуск службы..."
+systemctl daemon-reload
+systemctl enable --now wg-dash
+
+echo "Установка успешно завершена!"

src/WGDashboard_donald.zou.egg-info/PKG-INFO

@@ -0,0 +1,557 @@
+Metadata-Version: 2.1
+Name: WGDashboard-donald.zou
+Version: 3.1
+Summary: Simplest dashboard for WireGuard VPN written in Python w/ Flask
+Home-page: https://github.com/donaldzou/WGDashboard
+Author: Donald Cheng Hong Zou
+Author-email: donaldzou@live.hk
+License: UNKNOWN
+Project-URL: Bug Tracker, https://github.com/donaldzou/WGDashboard/issues
+Platform: UNKNOWN
+Classifier: Programming Language :: Python :: 3
+Classifier: License :: OSI Approved :: Apache License
+Classifier: Operating System :: OS Independent
+Requires-Python: >=3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+
+<p align="center">
+  <img alt="WGDashboard" src="img/logo.png" width="128">
+</p>
+<h1 align="center">WGDashboard</h1>
+
+
+<p align="center">
+  <img src="http://ForTheBadge.com/images/badges/made-with-python.svg">
+</p>
+<p align="center">
+  <a href="https://github.com/donaldzou/wireguard-dashboard/releases/latest"><img src="https://img.shields.io/github/v/release/donaldzou/wireguard-dashboard"></a>
+  <a href="https://wakatime.com/badge/user/45f53c7c-9da9-4cb0-85d6-17bd38cc748b/project/5334ae20-e9a6-4c55-9fea-52d4eb9dfba6"><img src="https://wakatime.com/badge/user/45f53c7c-9da9-4cb0-85d6-17bd38cc748b/project/5334ae20-e9a6-4c55-9fea-52d4eb9dfba6.svg" alt="wakatime"></a>
+  <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fdonaldzou%2FWGDashboard&count_bg=%2379C83D&title_bg=%23555555&icon=github.svg&icon_color=%23E7E7E7&title=Visitor&edge_flat=false"/></a>
+</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>
+
+## 📣 What's New: v3.0
+
+- 🎉  **New Features**
+  - **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**.
+  - **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**
+  - [IP Sorting range issues #99](https://github.com/donaldzou/WGDashboard/issues/99) [❤️ @barryboom]
+  - [INvalid character written to tunnel json file #108](https://github.com/donaldzou/WGDashboard/issues/108) [❤️ @ikidd]
+  - [Add IPv6 #91](https://github.com/donaldzou/WGDashboard/pull/91) [❤️ @pgalonza]
+  - [Added MTU and PersistentKeepalive to QR code and download files #112](https://github.com/donaldzou/WGDashboard/pull/112) [:heart: @reafian]
+  - **And many other bugs provided by our beloved users** :heart:
+- **🧐  Other Changes**
+  - **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>
+
+## Table of Content
+
+
+- [💡  Features](#-features)
+- [📝  Requirement](#-requirement)
+- [🛠  Install](#-install)
+- [🪜  Usage](#-usage)
+  - [Start/Stop/Restart WGDashboard](#startstoprestart-wgdashboard)
+  - [Autostart WGDashboard on boot](#autostart-wgdashboard-on-boot--v22)
+- [✂️  Dashboard Configuration](#%EF%B8%8F-dashboard-configuration)
+  - [Dashboard Configuration file](#dashboard-configuration-file)
+  - [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)
+- [🥘 Experimental Functions](#-experimental-functions)
+- [🔍  Screenshot](#-screenshot)
+- [⏰  Changelog](#--changelog)
+- [🛒  Dependencies](#-dependencies)
+- [✨  Contributors](#-contributors)
+
+## 💡 Features
+
+- **No need to re-configure existing WireGuard configuration! It can search for existed configuration files.**
+- Easy to use interface, provided username and password protection to the dashboard
+- Add peers and edit (Allowed IPs, DNS, Private Key...)
+- View peers and configuration real time details (Data Usage, Latest Handshakes...)
+- Share your peer configuration with QR code or file download
+- Testing tool: Ping and Traceroute to your peer's ip
+- **And more functions are coming up!**
+
+
+## 📝 Requirement
+
+- Recommend the following OS, tested by our beloved users:
+  - [x] Ubuntu 18.04.1 LTS - 20.04.1 LTS [@Me]
+  - [x] Debian GNU/Linux 10 (buster) [❤️ @[robchez](https://github.com/robchez)]
+  - [x] AlmaLinux 8.4 (Electric Cheetah) [❤️ @[barry-smithjr](https://github.com/)]
+  - [x] CentOS 7 [❤️ @[PrzemekSkw](https://github.com/PrzemekSkw)]
+
+  > **If you have tested on other OS and it works perfectly please provide it to me in [#31](https://github.com/donaldzou/wireguard-dashboard/issues/31). Thank you!**
+
+- **WireGuard** and **WireGuard-Tools (`wg-quick`)**  are installed.
+
+  > Don't know how? Check this <a href="https://www.wireguard.com/install/">official documentation</a>
+
+- Configuration files under **`/etc/wireguard`**, but please note the following sample
+
+  ```ini
+  [Interface]
+  ...
+  SaveConfig = true
+  # Need to include this line to allow WireGuard Tool to save your configuration, 
+  # or if you just want it to monitor your WireGuard Interface and don't need to
+  # make any changes with the dashboard, you can set it to false.
+  
+  [Peer]
+  PublicKey = abcd1234
+  AllowedIPs = 1.2.3.4/32
+  # Must have for each peer
+  ```
+
+- Python 3.7+ & Pip3
+
+- Browser support CSS3 and ES6
+
+## 🛠 Install
+1. Download WGDashboard
+
+   ```shell
+   git clone -b v3.0.5 https://github.com/donaldzou/WGDashboard.git wgdashboard
+   
+2. Open the WGDashboard folder
+
+   ```shell
+   cd wgdashboard/src
+   ```
+   
+3. Install WGDashboard
+
+   ```shell
+   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 WGDashboard
+
+   ```shell
+   ./wgd.sh start
+   ```
+   
+   **Note**:
+
+   > For [`pivpn`](https://github.com/pivpn/pivpn) user, please use `sudo ./wgd.sh start` to run if your current account does not have the permission to run `wg show` and `wg-quick`.
+
+6. Access dashboard
+
+   Access your server with port `10086` (e.g. http://your_server_ip:10086), using username `admin` and password `admin`. See below how to change port and ip that the dashboard is running with.
+
+## 🪜 Usage
+
+#### Start/Stop/Restart WGDashboard
+
+
+```shell
+cd wgdashboard/src
+-----------------------------
+./wgd.sh start    # Start the dashboard in background
+-----------------------------
+./wgd.sh debug    # Start the dashboard in foreground (debug mode)
+-----------------------------
+./wgd.sh stop     # Stop the dashboard
+-----------------------------
+./wgd.sh restart  # Restart the dasboard
+```
+
+#### Autostart WGDashboard on boot (>= v2.2)
+
+In the `src` folder, it contained a file called `wg-dashboard.service`, we can use this file to let our system to autostart the dashboard after reboot. The following guide has tested on **Ubuntu**, most **Debian** based OS might be the same, but some might not. Please don't hesitate to provide your system if you have tested the autostart on another system.
+
+1. Changing the directory to the dashboard's directory
+
+   ```shell
+   cd wgdashboard/src
+   ```
+
+2. Get the full path of the dashboard's directory
+
+   ```shell
+   pwd
+   #Output: /root/wgdashboard/src
+   ```
+
+   For this example, the output is `/root/wireguard-dashboard/src`, your path might be different since it depends on where you downloaded the dashboard in the first place. **Copy the the output to somewhere, we will need this in the next step.**
+
+3. Edit the service file, the service file is located in `wireguard-dashboard/src`, you can use other editor you like, here will be using `nano`
+
+   ```shell
+   nano wg-dashboard.service
+   ```
+
+   You will see something like this:
+
+   ```ini
+   [Unit]
+   After=network.service
+   
+   [Service]
+   WorkingDirectory=<your dashboard directory full path here>
+   ExecStart=/usr/bin/python3 <your dashboard directory full path here>/dashboard.py
+   Restart=always
+   
+   
+   [Install]
+   WantedBy=default.target
+   ```
+
+   Now, we need to replace both `<your dashboard directory full path here>` to the one you just copied from step 2. After doing this, the file will become something like this, your file might be different:
+
+   ```ini
+   [Unit]
+   After=netword.service
+   
+   [Service]
+   WorkingDirectory=/root/wgdashboard/src
+   ExecStart=/usr/bin/python3 /root/wgdashboard/src/dashboard.py
+   Restart=always
+   
+   
+   [Install]
+   WantedBy=default.target
+   ```
+
+   **Be aware that after the value of `WorkingDirectory`, it does not have  a `/` (slash).** And then save the file after you edited it
+
+4. Copy the service file to systemd folder
+
+   ```bash
+   $ cp wg-dashboard.service /etc/systemd/system/wg-dashboard.service
+   ```
+
+   To make sure you copy the file successfully, you can use this command `cat /etc/systemd/system/wg-dashboard.service` to see if it will output the file you just edited.
+
+5. Enable the service
+
+   ```bash
+   $ sudo chmod 664 /etc/systemd/system/wg-dashboard.service
+   $ sudo systemctl daemon-reload
+   $ sudo systemctl enable wg-dashboard.service
+   $ sudo systemctl start wg-dashboard.service  # <-- To start the service
+   ```
+
+6. Check if the service run correctly
+
+   ```bash
+   $ sudo systemctl status wg-dashboard.service
+   ```
+
+   And you should see something like this
+
+   ```shell
+   ● wg-dashboard.service
+        Loaded: loaded (/etc/systemd/system/wg-dashboard.service; enabled; vendor preset: enabled)
+        Active: active (running) since Tue 2021-08-03 22:31:26 UTC; 4s ago
+      Main PID: 6602 (python3)
+         Tasks: 1 (limit: 453)
+        Memory: 26.1M
+        CGroup: /system.slice/wg-dashboard.service
+                └─6602 /usr/bin/python3 /root/wgdashboard/src/dashboard.py
+   
+   Aug 03 22:31:26 ubuntu-wg systemd[1]: Started wg-dashboard.service.
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Serving Flask app "WGDashboard" (lazy loading)
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Environment: production
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:    WARNING: This is a development server. Do not use it in a production deployment.
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:    Use a production WSGI server instead.
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Debug mode: off
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Running on all addresses.
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:    WARNING: This is a development server. Do not use it in a production deployment.
+   Aug 03 22:31:27 ubuntu-wg python3[6602]:  * Running on http://0.0.0.0:10086/ (Press CTRL+C to quit)
+   ```
+
+   If you see `Active:` followed by `active (running) since...` then it means it run correctly. 
+
+7. Stop/Start/Restart the service
+
+   ```bash
+   sudo systemctl stop wg-dashboard.service      # <-- To stop the service
+   sudo systemctl start wg-dashboard.service     # <-- To start the service
+   sudo systemctl restart wg-dashboard.service   # <-- To restart the service
+   ```
+
+8. **And now you can reboot your system, and use the command at step 6 to see if it will auto start after the reboot, or just simply access the dashboard through your browser. If you have any questions or problem, please report it in the issue page.**
+
+## ✂️ Dashboard Configuration
+
+#### 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 configurations:
+
+|                              | Description                                                  | Default                                              | Edit Available |
+| ---------------------------- | ------------------------------------------------------------ | ---------------------------------------------------- | -------------- |
+| **`[Account]`**              | *Configuration on account*                                   |                                                      |                |
+| `username`                   | Dashboard login username                                     | `admin`                                              | Yes            |
+| `password`                   | Password, will be hash with SHA256                           | `admin` hashed in SHA256                             | Yes            |
+|                              |                                                              |                                                      |                |
+| **`[Server]`**               | *Configuration on dashboard*                                 |                                                      |                |
+| `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_port`                   | Port the the dashboard will run with                         | `10086`                                              | Yes            |
+| `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**         |
+| `version`                    | Dashboard Version                                            | `v3.0.5`                                             | **No**         |
+| `dashboard_refresh_interval` | How frequent the dashboard will refresh on the configuration page | `60000ms`                                            | Yes            |
+| `dashboard_sort`             | How configuration is sorting                                 | `status`                                             | Yes            |
+|                              |                                                              |                                                      |                |
+| **`[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)
+
+Starting version 2.2, dashboard can now generate QR code and configuration file for each peer. Here is a template of what each QR code encoded with and the same content will be inside the file:
+
+```ini
+[Interface]
+PrivateKey = QWERTYUIOPO234567890YUSDAKFH10E1B12JE129U21=
+Address = 0.0.0.0/32
+DNS = 1.1.1.1
+
+[Peer]
+PublicKey = QWERTYUIOPO234567890YUSDAKFH10E1B12JE129U21=
+AllowedIPs = 0.0.0.0/0
+Endpoint = 0.0.0.0:51820
+```
+
+|                   | Description                                                  | Default Value                                                | Available in Peer setting |
+| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------- |
+| **`[Interface]`** |                                                              |                                                              |                           |
+| `PrivateKey`      | The private key of this peer                                 | Private key generated by WireGuard (`wg genkey`) or provided by user | Yes                       |
+| `Address`         | The `allowed_ips` of your peer                               | N/A                                                          | Yes                       |
+| `DNS`             | The DNS server your peer will use                            | `1.1.1.1` - Cloud flare DNS, you can change it when you adding the peer or in the peer setting. | Yes                       |
+| **`[Peer]`**      |                                                              |                                                              |                           |
+| `PublicKey`       | The public key of your server                                | N/A                                                          | No                        |
+| `AllowedIPs`      | IP ranges for which a peer will route traffic                | `0.0.0.0/0` - Indicated a default route to send all internet and VPN traffic through that peer. | Yes                       |
+| `Endpoint`        | Your wireguard server ip and port, the dashboard will search for your server's default interface's ip. | `<your server default interface ip>:<listen port>`           | Yes                       |
+
+## ❓ How to update the 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>
+
+#### Update Method 1 (For `v3.0` or above)
+
+1. Change your directory to `wgdashboard/src`
+
+   ```bash
+   cd wgdashboard/src
+   ```
+
+2. Update the dashboard with the following
+
+   ```bash
+   ./wgd.sh update
+   ```
+
+   > If this doesn't work, please use the method below. Sorry about that :(
+
+#### Update Method 2
+
+
+1. Change your directory to `wgdashboard` 
+   
+    ```shell
+    cd wgdashboard/src
+    ```
+    
+2. Update the dashboard
+    ```shell
+    git pull https://github.com/donaldzou/WGDashboard.git v3.0.5 --force
+    ```
+
+3. Install
+
+   ```shell
+   ./wgd.sh install
+   ```
+
+
+
+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
+
+![Sign In Page](img/SignIn.png)
+
+![Index Image](img/HomePage.png)
+
+![Configuration](img/Configuration.png)
+
+![Add Peer](img/AddPeer.png)
+
+![Edit Peer](img/EditPeer.png)
+
+![Delete Peer](img/DeleteBulk.png)
+
+![Dashboard Setting](img/DashboardSetting.png)
+
+![Ping](img/Ping.png)
+
+![Traceroute](img/Traceroute.png)
+
+## ⏰  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
+
+Bug Fixed:
+- Added support for full subnet on Allowed IP
+- Peer setting Save button
+
+#### v2.2 - Aug 14, 2021
+
+- 🎉  **New Features**
+  - **Add new peers**: Now you can add peers directly on dashboard, it will generate a pair of private key and public key. You can also set its DNS, endpoint allowed IPs. Both can set a default value in the setting page. [❤️ in [#44](https://github.com/donaldzou/wireguard-dashboard/issues/44)]  
+  - **QR Code:** You can add the private key in peer setting of your existed peer to create a QR code. Or just create a new one, dashboard will now be able to auto generate a private key and public key ;) Don't worry, all keys will be generated on your machine, and **will delete all key files after they got generated**. [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Peer configuration file download:** Same as QR code, you now can download the peer configuration file, so you don't need to manually input all the details on the peer machine! [❤️ in [#40](https://github.com/donaldzou/wireguard-dashboard/issues/40)]
+  - **Search peers**: You can now search peers by their name.
+  - **Autostart on boot:** Added a tutorial on how to start the dashboard to on boot! Please read the [tutorial below](#autostart-wireguard-dashboard-on-boot). [❤️ in [#29](https://github.com/donaldzou/wireguard-dashboard/issues/29)]  
+  - **Click to copy**: You can now click and copy all peer's public key and configuration's public key.
+  - ....
+- 🪚  **Bug Fixed**
+  - When there are comments in the wireguard config file, will cause the dashboard to crash.
+  - Used regex to search for config files.
+- **🧐  Other Changes**
+  - Moved all external CSS and JavaScript file to local hosting (Except Bootstrap Icon, due to large amount of SVG files).
+  - Updated Python dependencies
+    - Flask: `v1.1.2 => v2.0.1`
+    - Jinja: `v2.10.1 => v3.0.1`
+    - icmplib: `v2.1.1 => v3.0.1`
+  - Updated CSS/JS dependencies
+    - Bootstrap: `v4.5.3 => v4.6.0`
+  - UI adjustment
+    - Adjusted how peers will display in larger screens, used to be 1 row per peer, now is 3 peers in 1 row.
+
+#### v2.1 - Jul 2, 2021
+
+- Added **Ping** and **Traceroute** tools!
+- Adjusted the calculation of data usage on each peers
+- Added refresh interval of the dashboard
+- Bug fixed when no configuration on fresh install ([#23](https://github.com/donaldzou/wireguard-dashboard/issues/23))
+- Fixed crash when too many peers ([#22](https://github.com/donaldzou/wireguard-dashboard/issues/22))
+
+#### v2.0 - May 5, 2021
+
+- Added login function to dashboard
+  - ***I'm not using the most ideal way to store the username and password, feel free to provide a better way to do this if you any good idea!***
+- Added a config file to the dashboard
+- Dashboard config can be change within the **Setting** tab on the side bar
+- Adjusted UI
+- And much more!
+
+#### v1.1.2 - Apr 3, 2021
+
+- Resolved issue [#3](https://github.com/donaldzou/wireguard-dashboard/issues/3).
+
+#### v1.1.1 - Apr 2, 2021
+
+- Able to add a friendly name to each peer. Thanks [#2](https://github.com/donaldzou/wireguard-dashboard/issues/2) !
+
+#### v1.0 - Dec 27, 2020
+
+- Added the function to remove peers
+
+## 🛒 Dependencies
+
+- CSS/JS
+  - [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) `v4.6.0`
+  - [Bootstrap Icon](https://icons.getbootstrap.com) `v1.4.0`
+  - [jQuery](https://jquery.com) `v3.5.1`
+- Python
+  - [Flask](https://pypi.org/project/Flask/) `v2.0.1`
+  - [ifcfg](https://pypi.org/project/ifcfg/) `v0.21`
+  - [icmplib](https://pypi.org/project/icmplib/) `v2.1.1`
+  - [flask-qrcode](https://pypi.org/project/Flask-QRcode/) `v3.0.0`
+
+## ✨ Contributors
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/antonioag95"><img src="https://avatars.githubusercontent.com/u/30556866?v=4?s=100" width="100px;" alt=""/><br /><sub><b>antonioag95</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=antonioag95" title="Tests">⚠️</a> <a href="https://github.com/donaldzou/WGDashboard/commits?author=antonioag95" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/tonjo"><img src="https://avatars.githubusercontent.com/u/4726289?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tonjo</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=tonjo" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/reafian"><img src="https://avatars.githubusercontent.com/u/11992416?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Richard Newton</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=reafian" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.davejlong.com"><img src="https://avatars.githubusercontent.com/u/175317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Long</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=davejlong" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.std-soft.com"><img src="https://avatars.githubusercontent.com/u/5978293?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Markus Neubauer</b></sub></a><br /><a href="https://github.com/donaldzou/WGDashboard/commits?author=marneu" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+

src/WGDashboard_donald.zou.egg-info/SOURCES.txt

@@ -0,0 +1,8 @@
+LICENSE
+README.md
+pyproject.toml
+setup.cfg
+src/WGDashboard_donald.zou.egg-info/PKG-INFO
+src/WGDashboard_donald.zou.egg-info/SOURCES.txt
+src/WGDashboard_donald.zou.egg-info/dependency_links.txt
+src/WGDashboard_donald.zou.egg-info/top_level.txt

src/WGDashboard_donald.zou.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

src/WGDashboard_donald.zou.egg-info/top_level.txt

@@ -0,0 +1 @@
+

src/api.py

@@ -0,0 +1,244 @@
+import ipaddress, subprocess, datetime, os, util
+from datetime import datetime, timedelta
+from flask import jsonify
+from util import *
+import configparser
+
+notEnoughParameter = {"status": False, "reason": "Please provide all required parameters."}
+good = {"status": True, "reason": ""}
+
+def ret(status=True, reason="", data=""):
+    return {"status": status, "reason": reason, "data": data}
+
+
+
+def togglePeerAccess(data, g):
+    checkUnlock = g.cur.execute(f"SELECT * FROM {data['config']} WHERE id='{data['peerID']}'").fetchone()
+    if checkUnlock:
+        moveUnlockToLock = g.cur.execute(
+            f"INSERT INTO {data['config']}_restrict_access SELECT * FROM {data['config']} WHERE id = '{data['peerID']}'")
+        if g.cur.rowcount == 1:
+            print(g.cur.rowcount)
+            print(util.deletePeers(data['config'], [data['peerID']], g.cur, g.db))
+    else:
+        moveLockToUnlock = g.cur.execute(
+            f"SELECT * FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'").fetchone()
+        try:
+            if len(moveLockToUnlock[-1]) == 0:
+                status = subprocess.check_output(
+                    f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]}",
+                    shell=True, stderr=subprocess.STDOUT)
+            else:
+                now = str(datetime.datetime.now().strftime("%m%d%Y%H%M%S"))
+                f_name = now + "_tmp_psk.txt"
+                f = open(f_name, "w+")
+                f.write(moveLockToUnlock[-1])
+                f.close()
+                subprocess.check_output(
+                    f"wg set {data['config']} peer {moveLockToUnlock[0]} allowed-ips {moveLockToUnlock[11]} preshared-key {f_name}",
+                    shell=True, stderr=subprocess.STDOUT)
+                os.remove(f_name)
+            status = subprocess.check_output(f"wg-quick save {data['config']}", shell=True, stderr=subprocess.STDOUT)
+            g.cur.execute(
+                f"INSERT INTO {data['config']} SELECT * FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'")
+            if g.cur.rowcount == 1:
+                g.cur.execute(f"DELETE FROM {data['config']}_restrict_access WHERE id = '{data['peerID']}'")
+
+        except subprocess.CalledProcessError as exc:
+            return {"status": False, "reason": str(exc.output.strip())}
+    return good
+
+class managePeer:
+    def getPeerDataUsage(self, data, cur):
+        now = datetime.now()
+        now_string = now.strftime("%d/%m/%Y %H:%M:%S")
+        interval = {
+            "30min": now - timedelta(hours=0, minutes=30),
+             "1h": now - timedelta(hours=1, minutes=0), 
+             "6h": now - timedelta(hours=6, minutes=0), 
+             "24h": now - timedelta(hours=24, minutes=0), 
+             "all": ""
+        }
+        if data['interval'] not in interval.keys():
+            return {"status": False, "reason": "Invalid interval."}
+        intv = ""
+        if data['interval'] != "all":
+            t = interval[data['interval']].strftime("%d/%m/%Y %H:%M:%S")
+            intv = f" AND time >= '{t}'"
+        timeData = cur.execute(f"SELECT total_receive, total_sent, time FROM wg0_transfer WHERE id='{data['peerID']}' {intv} ORDER BY time DESC;")
+        chartData = []
+        for i in timeData:
+            chartData.append({
+                "total_receive": i[0],
+                "total_sent": i[1],
+                "time": i[2]
+            })
+        return {"status": True, "reason": "", "data": chartData}
+
+class manageConfiguration:
+    def AddressCheck(self, data):
+        address = data['address']
+        address = address.replace(" ", "")
+        address = address.split(',')
+        amount = 0
+        for i in address:
+            try:
+                ips = ipaddress.ip_network(i, False)
+                amount += ips.num_addresses
+            except ValueError as e:
+                return {"status": False, "reason": str(e)}
+        if amount >= 1:
+            return {"status": True, "reason": "", "data": f"Total of {amount} IPs"}
+        else:
+            return {"status": True, "reason": "", "data": f"0 available IPs"}
+
+    def PortCheck(self, data, configs):
+        port = data['port']
+        if (not port.isdigit()) or int(port) < 1 or int(port) > 65535:
+            return {"status": False, "reason": f"Invalid port."}
+        for i in configs:
+            if i['port'] == port:
+                return {"status": False, "reason": f"{port} used by {i['conf']}."}
+        checkSystem = subprocess.run(f'ss -tulpn | grep :{port} > /dev/null', shell=True)
+        if checkSystem.returncode != 1:
+            return {"status": False, "reason": f"Port {port} used by other process in your system."}
+        return good
+
+    def NameCheck(self, data, configs):
+        name = data['name']
+        name = name.replace(" ", "")
+        for i in configs:
+            if name == i['conf']:
+                return {"status": False, "reason": f"{name} already existed."}
+        illegal_filename = ["(Space)", " ", ".", ",", "/", "?", "<", ">", "\\", ":", "*", '|' '\"', "com1", "com2",
+                            "com3",
+                            "com4", "com5", "com6", "com7", "com8", "com9", "lpt1", "lpt2", "lpt3", "lpt4",
+                            "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
+        for i in illegal_filename:
+            name = name.replace(i, "")
+        if len(name) == 0:
+            return {"status": False, "reason": "Invalid name."}
+        return good
+
+    def addConfiguration(self, data, configs, WG_CONF_PATH):
+        output = ["[Interface]", "SaveConfig = true"]
+        required = ['addConfigurationPrivateKey', 'addConfigurationListenPort',
+                    'addConfigurationAddress', 'addConfigurationPreUp', 'addConfigurationPreDown',
+                    'addConfigurationPostUp', 'addConfigurationPostDown']
+        for i in required:
+            e = data[i]
+            if len(e) != 0:
+                key = i.replace("addConfiguration", "")
+                o = f"{key} = {e}"
+                output.append(o)
+        name = data['addConfigurationName']
+        illegal_filename = ["(Space)", " ", ".", ",", "/", "?", "<", ">", "\\", ":", "*", '|' '\"', "com1", "com2",
+                            "com3",
+                            "com4", "com5", "com6", "com7", "com8", "com9", "lpt1", "lpt2", "lpt3", "lpt4",
+                            "lpt5", "lpt6", "lpt7", "lpt8", "lpt9", "con", "nul", "prn"]
+        for i in illegal_filename:
+            name = name.replace(i, "")
+
+        try:
+            newFile = open(f"{WG_CONF_PATH}/{name}.conf", "w+")
+            newFile.write("\n".join(output))
+        except Exception as e:
+            return {"status": False, "reason": str(e)}
+        return {"status": True, "reason": "", "data": name}
+
+    def deleteConfiguration(self, data, config, g, WG_CONF_PATH):
+        confs = []
+        for i in config:
+            confs.append(i['conf'])
+        print(confs)
+        if data['name'] not in confs:
+            return {"status": False, "reason": "Configuration does not exist", "data": ""}
+        for i in config:
+            if i['conf'] == data['name']:
+                if i['status'] == "running":
+                    try:
+                        subprocess.check_output("wg-quick down " + data['name'], shell=True, stderr=subprocess.STDOUT)
+                    except subprocess.CalledProcessError as exc:
+                        return {"status": False, "reason": "Can't stop peer", "data": str(exc.output.strip().decode("utf-8"))}
+
+            g.cur.execute(f'DROP TABLE {data["name"]}')
+            g.cur.execute(f'DROP TABLE {data["name"]}_restrict_access')
+            g.db.commit()
+
+            try:
+                os.remove(f'{WG_CONF_PATH}/{data["name"]}.conf')
+            except Exception as e:
+                return {"status": False, "reason": "Can't delete peer", "data": str(e)}
+
+            return good
+
+    def getConfigurationInfo(self, configName, WG_CONF_PATH):
+        conf = configparser.RawConfigParser(strict=False)
+        conf.optionxform = str
+        try:
+            with open(f'{WG_CONF_PATH}/{configName}.conf', 'r'):
+                conf.read(f'{WG_CONF_PATH}/{configName}.conf')
+                if not conf.has_section("Interface"):
+                    return ret(status=False, reason="No [Interface] in configuration file")
+                return ret(data=dict(conf['Interface']))
+        except FileNotFoundError as err:
+            return ret(status=False, reason=str(err))
+    
+    def saveConfiguration(self, data, WG_CONF_PATH, configs):
+        conf = configparser.RawConfigParser(strict=False)
+        conf.optionxform = str
+        configName = data['configurationName']
+        pc = manageConfiguration.PortCheck(self, {'port': data['ListenPort']}, configs)
+        if pc['status']:
+            try:
+                newData = []
+                with open(f'{WG_CONF_PATH}/{configName}.conf', 'r') as f:
+                    conf.read(f'{WG_CONF_PATH}/{configName}.conf')
+                    if not conf.has_section("Interface"):
+                        return ret(status=False, reason="No [Interface] in configuration file")
+                    l = ['ListenPort', 'PostUp', 'PostDown', 'PreUp', 'PreDown']
+                    for i in l:
+                        conf.set("Interface", i, data[i])
+                    conf.remove_section("Peer")
+                    newData = list(map(lambda x : f"{x[0]} = {x[1]}\n", list(conf.items("Interface"))))
+                    originalData = f.readlines()
+                    for i in range(len(originalData)):
+                        if originalData[i] == "[Peer]\n":
+                            originalData = originalData[i:]
+                            break
+                    newData.insert(0, "[Interface]\n")
+                    newData.append("\n")
+                    newData = newData + originalData
+                    conf.clear()
+                
+
+                try:
+                    check = subprocess.check_output("wg-quick down " + configName,
+                                                    shell=True, stderr=subprocess.STDOUT)
+                except subprocess.CalledProcessError as exc:
+                    pass
+                with open(f'{WG_CONF_PATH}/{configName}.conf', 'w') as f:
+                    for i in newData:
+                        f.write(i)
+                try:
+                    check = subprocess.check_output("wg-quick up " + configName,
+                                                    shell=True, stderr=subprocess.STDOUT)
+                except subprocess.CalledProcessError as exc:
+                    pass
+                return ret()
+            except FileNotFoundError as err:
+                return ret(status=False, reason=str(err))
+        else:
+            return pc
+
+        
+
+
+class settings:
+    def setTheme(self, theme, config, setConfig):
+        themes = ['light', 'dark']
+        if theme not in themes: 
+            return ret(status=False, reason="Theme does not exist")
+        config['Server']['dashboard_theme'] = theme
+        setConfig(config)
+        return ret()

src/dashboard.py

@@ -3,8 +3,8 @@
 Under Apache-2.0 License
 """
 
+from crypt import methods
 import sqlite3
-from flask import g
 import configparser
 import hashlib
 import ipaddress
@@ -22,36 +22,42 @@ from datetime import datetime, timedelta
 from operator import itemgetter
 # PIP installed library
 import ifcfg
-from flask import Flask, request, render_template, redirect, url_for, session, jsonify
+from flask import Flask, request, render_template, redirect, url_for, session, jsonify, g
 from flask_qrcode import QRcode
 from icmplib import ping, traceroute
 
 # Import other python files
-from util import regex_match, check_DNS, check_Allowed_IPs, check_remote_endpoint, \
-    check_IP_with_range, clean_IP_with_range
+from util import *
+import threading
 
 # Dashboard Version
-DASHBOARD_VERSION = 'v3.0.3'
+DASHBOARD_VERSION = 'v3.1'
+
 # WireGuard's configuration path
 WG_CONF_PATH = None
+
 # Dashboard Config Name
 configuration_path = os.getenv('CONFIGURATION_PATH', '.')
 DB_PATH = os.path.join(configuration_path, 'db')
 if not os.path.isdir(DB_PATH):
     os.mkdir(DB_PATH)
 DASHBOARD_CONF = os.path.join(configuration_path, 'wg-dashboard.ini')
+
 # Upgrade Required
 UPDATE = None
+
 # Flask App Configuration
 app = Flask("WGDashboard")
 app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 5206928
 app.secret_key = secrets.token_urlsafe(16)
 app.config['TEMPLATES_AUTO_RELOAD'] = True
+
 # Enable QR Code Generator
 QRcode(app)
 
-
 # TODO: use class and object oriented programming
+updateInfo = {}
+
 
 def connect_db():
     """
@@ -99,7 +105,6 @@ def get_conf_peer_key(config_name):
         return config_name + " is not running."
 
 
-# Get numbers of connected peer of a configuration
 def get_conf_running_peer_number(config_name):
     """
     Get number of running peers on wireguard interface.
@@ -115,7 +120,7 @@ def get_conf_running_peer_number(config_name):
         data_usage = subprocess.check_output(f"wg show {config_name} latest-handshakes",
                                              shell=True, stderr=subprocess.STDOUT)
     except subprocess.CalledProcessError:
-        return "stopped"
+        return 0
     data_usage = data_usage.decode("UTF-8").split()
     count = 0
     now = datetime.now()
@@ -128,7 +133,6 @@ def get_conf_running_peer_number(config_name):
     return running
 
 
-# Read [Interface] section from configuration file
 def read_conf_file_interface(config_name):
     """
     Get interface settings.
@@ -139,16 +143,19 @@ def read_conf_file_interface(config_name):
     """
 
     conf_location = WG_CONF_PATH + "/" + config_name + ".conf"
-    with open(conf_location, 'r', encoding='utf-8') as file_object:
-        file = file_object.read().split("\n")
-        data = {}
-        for i in file:
-            if not regex_match("#(.*)", i):
-                if len(i) > 0:
-                    if i != "[Interface]":
-                        tmp = re.split(r'\s*=\s*', i, 1)
-                        if len(tmp) == 2:
-                            data[tmp[0]] = tmp[1]
+    try:
+        with open(conf_location, 'r', encoding='utf-8') as file_object:
+            file = file_object.read().split("\n")
+            data = {}
+            for i in file:
+                if not regex_match("#(.*)", i):
+                    if len(i) > 0:
+                        if i != "[Interface]":
+                            tmp = re.split(r'\s*=\s*', i, 1)
+                            if len(tmp) == 2:
+                                data[tmp[0]] = tmp[1]
+    except FileNotFoundError as e:
+        return {}
     return data
 
 
@@ -161,7 +168,6 @@ def read_conf_file(config_name):
     @rtype: dict
     """
 
-    # Read Configuration File Start
     conf_location = WG_CONF_PATH + "/" + config_name + ".conf"
     f = open(conf_location, 'r')
     file = f.read().split("\n")
@@ -257,21 +263,32 @@ def get_transfer(config_name):
             total_receive = cur_i[0][0]
             cur_total_sent = round(int(data_usage[i][2]) / (1024 ** 3), 4)
             cur_total_receive = round(int(data_usage[i][1]) / (1024 ** 3), 4)
-            if cur_i[0][4] == "running":
-                if total_sent <= cur_total_sent and total_receive <= cur_total_receive:
-                    total_sent = cur_total_sent
-                    total_receive = cur_total_receive
-                else:
-                    cumulative_receive = cur_i[0][2] + total_receive
-                    cumulative_sent = cur_i[0][3] + total_sent
-                    g.cur.execute("UPDATE %s SET cumu_receive = %f, cumu_sent = %f, cumu_data = %f WHERE id = '%s'" %
-                                  (config_name, round(cumulative_receive, 4), round(cumulative_sent, 4),
-                                   round(cumulative_sent + cumulative_receive, 4), data_usage[i][0]))
-                    total_sent = 0
-                    total_receive = 0
-                g.cur.execute("UPDATE %s SET total_receive = %f, total_sent = %f, total_data = %f WHERE id = '%s'" %
-                              (config_name, round(total_receive, 4), round(total_sent, 4),
-                               round(total_receive + total_sent, 4), data_usage[i][0]))
+            # if cur_i[0][4] == "running":
+            cumulative_receive = cur_i[0][2] + total_receive
+            cumulative_sent = cur_i[0][3] + total_sent
+            if total_sent <= cur_total_sent and total_receive <= cur_total_receive:
+                total_sent = cur_total_sent
+                total_receive = cur_total_receive
+            else:
+                # cumulative_receive = cur_i[0][2] + total_receive
+                # cumulative_sent = cur_i[0][3] + total_sent
+                g.cur.execute("UPDATE %s SET cumu_receive = %f, cumu_sent = %f, cumu_data = %f WHERE id = '%s'" %
+                                (config_name, round(cumulative_receive, 4), round(cumulative_sent, 4),
+                                round(cumulative_sent + cumulative_receive, 4), data_usage[i][0]))
+                total_sent = 0
+                total_receive = 0
+            g.cur.execute("UPDATE %s SET total_receive = %f, total_sent = %f, total_data = %f WHERE id = '%s'" %
+                            (config_name, round(total_receive, 4), round(total_sent, 4),
+                            round(total_receive + total_sent, 4), data_usage[i][0]))
+            # now = datetime.now()
+            # now_string = now.strftime("%d/%m/%Y %H:%M:%S")
+            # g.cur.execute(f'''
+            # INSERT INTO {config_name}_transfer (id, total_receive, total_sent, total_data, cumu_receive, cumu_sent, cumu_data, time) 
+            # VALUES ('{data_usage[i][0]}', {round(total_receive, 4)}, {round(total_sent, 4)}, {round(total_receive + total_sent, 4)},{round(cumulative_receive, 4)}, {round(cumulative_sent, 4)},
+            #                     {round(cumulative_sent + cumulative_receive, 4)}, '{now_string}')
+            # ''')
+            
+
 
 
 def get_endpoint(config_name):
@@ -294,6 +311,7 @@ def get_endpoint(config_name):
         count += 2
 
 
+
 def get_allowed_ip(conf_peer_data, config_name):
     """
     Get allowed ips from all peers of a configuration
@@ -307,6 +325,7 @@ def get_allowed_ip(conf_peer_data, config_name):
                       % (i.get('AllowedIPs', '(None)'), i["PublicKey"]))
 
 
+
 def get_all_peers_data(config_name):
     """
     Look for new peers from WireGuard
@@ -368,6 +387,12 @@ def get_all_peers_data(config_name):
     get_endpoint(config_name)
     get_allowed_ip(conf_peer_data, config_name)
 
+def getLockAccessPeers(config_name):
+    col = g.cur.execute(f"PRAGMA table_info({config_name}_restrict_access)").fetchall()
+    col = [a[1] for a in col]
+    data = g.cur.execute(f"SELECT * FROM {config_name}_restrict_access").fetchall()
+    result = [{col[i]: data[k][i] for i in range(len(col))} for k in range(len(data))]
+    return result
 
 def get_peers(config_name, search, sort_t):
     """
@@ -420,6 +445,24 @@ def get_conf_pub_key(config_name):
     except configparser.NoSectionError:
         return ""
 
+def get_wg_obf_by_name(config_name,obf_name):
+    """
+    Get public key for configuration.
+    @param config_name: Name of WG interface
+    @type config_name: str
+    @return: Return public key or empty string
+    @rtype: str
+    """
+
+    try:
+        conf = configparser.ConfigParser(strict=False)
+        conf.read(WG_CONF_PATH + "/" + config_name + ".conf")
+        pri = conf.get("Interface", obf_name)
+        conf.clear()
+        return pri.strip("\n")
+    except configparser.NoSectionError:
+        return ""
+
 
 def get_conf_listen_port(config_name):
     """
@@ -492,12 +535,32 @@ def get_conf_list():
                     total_sent FLOAT NULL, total_data FLOAT NULL, endpoint VARCHAR NULL, 
                     status VARCHAR NULL, latest_handshake VARCHAR NULL, allowed_ip VARCHAR NULL, 
                     cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, mtu INT NULL, 
-                    keepalive INT NULL, remote_endpoint VARCHAR NULL, preshared_key VARCHAR NULL, 
+                    keepalive INT NULL, remote_endpoint VARCHAR NULL, preshared_key VARCHAR NULL,
                     PRIMARY KEY (id)
                 )
             """
             g.cur.execute(create_table)
-            temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i)}
+            create_table = f"""
+                CREATE TABLE IF NOT EXISTS {i}_restrict_access (
+                    id VARCHAR NOT NULL, private_key VARCHAR NULL, DNS VARCHAR NULL, 
+                    endpoint_allowed_ip VARCHAR NULL, name VARCHAR NULL, total_receive FLOAT NULL, 
+                    total_sent FLOAT NULL, total_data FLOAT NULL, endpoint VARCHAR NULL, 
+                    status VARCHAR NULL, latest_handshake VARCHAR NULL, allowed_ip VARCHAR NULL, 
+                    cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, mtu INT NULL, 
+                    keepalive INT NULL, remote_endpoint VARCHAR NULL, preshared_key VARCHAR NULL,
+                    PRIMARY KEY (id)
+                )
+            """
+            g.cur.execute(create_table)
+            create_table = f"""
+                CREATE TABLE IF NOT EXISTS {i}_transfer (
+                    id VARCHAR NOT NULL, total_receive FLOAT NULL, 
+                    total_sent FLOAT NULL, total_data FLOAT NULL,
+                    cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, time DATETIME
+                )
+            """
+            g.cur.execute(create_table)
+            temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i), "port": get_conf_listen_port(i)}
             if temp['status'] == "running":
                 temp['checked'] = 'checked'
             else:
@@ -585,19 +648,32 @@ def f_available_ips(config_name):
     """
     config_interface = read_conf_file_interface(config_name)
     if "Address" in config_interface:
+        available = []
         existed = []
         conf_address = config_interface['Address']
         address = conf_address.split(',')
         for i in address:
             add, sub = i.split("/")
-            existed.append(ipaddress.ip_address(add))
+            existed.append(ipaddress.ip_address(add.replace(" ", "")))
         peers = g.cur.execute("SELECT allowed_ip FROM " + config_name).fetchall()
         for i in peers:
             add = i[0].split(",")
             for k in add:
                 a, s = k.split("/")
                 existed.append(ipaddress.ip_address(a.strip()))
-        available = list(ipaddress.ip_network(address[0], False).hosts())
+        count = 0
+        for i in address:
+            tmpIP = ipaddress.ip_network(i.replace(" ", ""), False)
+            if tmpIP.version == 6:
+                for i in tmpIP.hosts():
+                    if i not in existed:
+                        available.append(i)
+                        count += 1
+                    if count > 100:
+                        break
+            else:
+                available = available + list(tmpIP.hosts())
+
         for i in existed:
             try:
                 available.remove(i)
@@ -613,7 +689,6 @@ def f_available_ips(config_name):
 Flask Functions
 """
 
-
 @app.teardown_request
 def close_DB(exception):
     """
@@ -626,7 +701,6 @@ def close_DB(exception):
         g.db.close()
 
 
-# Before request
 @app.before_request
 def auth_req():
     """
@@ -638,7 +712,9 @@ def auth_req():
         g.cur = g.db.cursor()
     conf = get_dashboard_conf()
     req = conf.get("Server", "auth_req")
+    session['theme'] = conf.get("Server", "dashboard_theme")
     session['update'] = UPDATE
+    session['updateInfo'] = updateInfo
     session['dashboard_version'] = DASHBOARD_VERSION
     if req == "true":
         if '/static/' not in request.path and \
@@ -652,7 +728,11 @@ def auth_req():
             else:
                 session['message'] = ""
             conf.clear()
-            return redirect("/signin?redirect=" + str(request.url))
+
+            redirectURL = str(request.url)
+            redirectURL = redirectURL.replace("http://", "")
+            redirectURL = redirectURL.replace("https://", "")
+            return redirect("/signin?redirect=" + redirectURL)
     else:
         if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
                                 'update_app_ip_port', 'update_wg_conf_path']:
@@ -678,7 +758,7 @@ def signin():
     if "message" in session:
         message = session['message']
         session.pop("message")
-    return render_template('signin.html', message=message)
+    return render_template('signin.html', message=message, version=DASHBOARD_VERSION)
 
 
 # Sign Out
@@ -705,6 +785,7 @@ def auth():
     if password.hexdigest() == config["Account"]["password"] \
             and data['username'] == config["Account"]["username"]:
         session['username'] = data['username']
+        session.permanent = True
         config.clear()
         return jsonify({"status": True, "msg": ""})
     config.clear()
@@ -983,7 +1064,7 @@ def configuration(config_name):
         conf_data['checked'] = "checked"
     config_list = get_conf_list()
     if config_name not in [conf['conf'] for conf in config_list]:
-        return render_template('index.html', conf=get_conf_list())
+        return redirect('/')
 
     refresh_interval = int(config.get("Server", "dashboard_refresh_interval"))
     dns_address = config.get("Peers", "peer_global_DNS")
@@ -1001,6 +1082,7 @@ def configuration(config_name):
 
 
 # Get configuration details
+# @socketio.on("get_config")
 @app.route('/get_config/<config_name>', methods=['GET'])
 def get_conf(config_name):
     """
@@ -1009,40 +1091,59 @@ def get_conf(config_name):
     @type config_name: str
     @return: TODO
     """
-
-    config_interface = read_conf_file_interface(config_name)
-    search = request.args.get('search')
-    if len(search) == 0:
-        search = ""
-    search = urllib.parse.unquote(search)
-    config = get_dashboard_conf()
-    sort = config.get("Server", "dashboard_sort")
-    peer_display_mode = config.get("Peers", "peer_display_mode")
-    wg_ip = config.get("Peers", "remote_endpoint")
-    if "Address" not in config_interface:
-        conf_address = "N/A"
-    else:
-        conf_address = config_interface['Address']
-    conf_data = {
-        "peer_data": get_peers(config_name, search, sort),
-        "name": config_name,
-        "status": get_conf_status(config_name),
-        "total_data_usage": get_conf_total_data(config_name),
-        "public_key": get_conf_pub_key(config_name),
-        "listen_port": get_conf_listen_port(config_name),
-        "running_peer": get_conf_running_peer_number(config_name),
-        "conf_address": conf_address,
-        "wg_ip": wg_ip,
-        "sort_tag": sort,
-        "dashboard_refresh_interval": int(config.get("Server", "dashboard_refresh_interval")),
-        "peer_display_mode": peer_display_mode
+    result = {
+        "status": True,
+        "message": "",
+        "data": {}
     }
-    if conf_data['status'] == "stopped":
-        conf_data['checked'] = "nope"
+    if not session:
+        result["status"] = False
+        result["message"] = "Oops! <br> You're not signed in. Please refresh your page."
+        return jsonify(result)
+
+    if getattr(g, 'db', None) is None:
+        g.db = connect_db()
+        g.cur = g.db.cursor()
+    config_interface = read_conf_file_interface(config_name)
+
+    if config_interface != {}:
+        search = request.args.get('search')
+        if len(search) == 0:
+            search = ""
+        search = urllib.parse.unquote(search)
+        config = get_dashboard_conf()
+        sort = config.get("Server", "dashboard_sort")
+        peer_display_mode = config.get("Peers", "peer_display_mode")
+        wg_ip = config.get("Peers", "remote_endpoint")
+        if "Address" not in config_interface:
+            conf_address = "N/A"
+        else:
+            conf_address = config_interface['Address']
+        result['data'] = {
+            "peer_data": get_peers(config_name, search, sort),
+            "name": config_name,
+            "status": get_conf_status(config_name),
+            "total_data_usage": get_conf_total_data(config_name),
+            "public_key": get_conf_pub_key(config_name),
+            "listen_port": get_conf_listen_port(config_name),
+            "running_peer": get_conf_running_peer_number(config_name),
+            "conf_address": conf_address,
+            "wg_ip": wg_ip,
+            "sort_tag": sort,
+            "dashboard_refresh_interval": int(config.get("Server", "dashboard_refresh_interval")),
+            "peer_display_mode": peer_display_mode,
+            "lock_access_peers": getLockAccessPeers(config_name)
+        }
+        if result['data']['status'] == "stopped":
+            result['data']['checked'] = "nope"
+        else:
+            result['data']['checked'] = "checked"
+        config.clear()
     else:
-        conf_data['checked'] = "checked"
+        result['status'] = False
+        result['message'] = "I cannot find this configuration. <br> Please refresh and try again"
     config.clear()
-    return jsonify(conf_data)
+    return jsonify(result)
 
 
 # Turn on / off a configuration
@@ -1061,17 +1162,16 @@ def switch(config_name):
             check = subprocess.check_output("wg-quick down " + config_name,
                                             shell=True, stderr=subprocess.STDOUT)
         except subprocess.CalledProcessError as exc:
-            session["switch_msg"] = exc.output.strip().decode("utf-8")
-            return redirect('/')
+            # session["switch_msg"] = exc.output.strip().decode("utf-8")
+            return jsonify({"status": False, "reason":"Can't stop configuration", "message": str(exc.output.strip().decode("utf-8"))})
     elif status == "stopped":
         try:
             subprocess.check_output("wg-quick up " + config_name,
                                     shell=True, stderr=subprocess.STDOUT)
         except subprocess.CalledProcessError as exc:
-            session["switch_msg"] = exc.output.strip().decode("utf-8")
-            return redirect('/')
-    return redirect(request.referrer)
-
+            # session["switch_msg"] = exc.output.strip().decode("utf-8")
+            return jsonify({"status": False, "reason":"Can't turn on configuration", "message": str(exc.output.strip().decode("utf-8"))})
+    return jsonify({"status": True, "reason":""})
 
 @app.route('/add_peer_bulk/<config_name>', methods=['POST'])
 def add_peer_bulk(config_name):
@@ -1084,7 +1184,7 @@ def add_peer_bulk(config_name):
     keys = data['keys']
     endpoint_allowed_ip = data['endpoint_allowed_ip']
     dns_addresses = data['DNS']
-    enable_preshared_key = data["enable_preshared_key"]
+    enable_preshared_key = True
     amount = data['amount']
     config_interface = read_conf_file_interface(config_name)
     if "Address" not in config_interface:
@@ -1152,7 +1252,7 @@ def add_peer(config_name):
     allowed_ips = data['allowed_ips']
     endpoint_allowed_ip = data['endpoint_allowed_ip']
     dns_addresses = data['DNS']
-    enable_preshared_key = data["enable_preshared_key"]
+    enable_preshared_key = True
     preshared_key = data['preshared_key']
     keys = get_conf_peer_key(config_name)
     if len(public_key) == 0 or len(dns_addresses) == 0 or len(allowed_ips) == 0 or len(endpoint_allowed_ip) == 0:
@@ -1215,24 +1315,7 @@ def remove_peer(config_name):
     if not isinstance(keys, list):
         return config_name + " is not running."
     else:
-        sql_command = []
-        wg_command = ["wg", "set", config_name]
-        for delete_key in delete_keys:
-            if delete_key not in keys:
-                return "This key does not exist"
-            sql_command.append("DELETE FROM " + config_name + " WHERE id = '" + delete_key + "';")
-            wg_command.append("peer")
-            wg_command.append(delete_key)
-            wg_command.append("remove")
-        try:
-            remove_wg = subprocess.check_output(" ".join(wg_command),
-                                                shell=True, stderr=subprocess.STDOUT)
-            save_wg = subprocess.check_output(f"wg-quick save {config_name}", shell=True, stderr=subprocess.STDOUT)
-            g.cur.executescript(' '.join(sql_command))
-            g.db.commit()
-        except subprocess.CalledProcessError as exc:
-            return exc.output.strip()
-        return "true"
+        return deletePeers(config_name, delete_keys, g.cur, g.db)
 
 
 @app.route('/save_peer_setting/<config_name>', methods=['POST'])
@@ -1321,7 +1404,11 @@ def get_peer_name(config_name):
 # Return available IPs
 @app.route('/available_ips/<config_name>', methods=['GET'])
 def available_ips(config_name):
-    return jsonify(f_available_ips(config_name))
+    result = {"status": True, "message":"", "data": f_available_ips(config_name)}
+    if len(result["data"]) == 0:
+        result['status'] = False
+        result['message'] = f"No more available IP for {config_name}."
+    return jsonify(result)
 
 
 # Check if both key match
@@ -1365,9 +1452,29 @@ def generate_qrcode(config_name):
             endpoint_allowed_ip = peer[4]
             keepalive = peer[5]
             preshared_key = peer[6]
+            Jc = get_wg_obf_by_name(config_name,"Jc")
+            Jmin = get_wg_obf_by_name(config_name,"Jmin")
+            Jmax = get_wg_obf_by_name(config_name,"Jmax")
+            S1 = get_wg_obf_by_name(config_name,"S1")
+            S2 = get_wg_obf_by_name(config_name,"S2")
+            H1 = get_wg_obf_by_name(config_name,"H1")
+            H2 = get_wg_obf_by_name(config_name,"H2")
+            H3 = get_wg_obf_by_name(config_name,"H3")
+            H4 = get_wg_obf_by_name(config_name,"H4")
 
-            result = "[Interface]\nPrivateKey = " + private_key + "\nAddress = " + allowed_ip + "\nMTU = " \
-                     + str(mtu_value) + "\nDNS = " + dns_addresses + "\n\n[Peer]\nPublicKey = " + public_key \
+
+
+            result = "[Interface]\nPrivateKey = " + private_key + "\nAddress = " + allowed_ip + \
+                      "\nJc = " + Jc + \
+                      "\nJmin = " + Jmin + \
+                      "\nJmax = " + Jmax + \
+                      "\nS1 = " + S1 + \
+                      "\nS2 = " + S2 + \
+                      "\nH1 = " + H1 + \
+                      "\nH2 = " + H2 + \
+                      "\nH3 = " + H3 + \
+                      "\nH4 = " + H4 + \
+                     "\n\n[Peer]\nPublicKey = " + public_key \
                      + "\nAllowedIPs = " + endpoint_allowed_ip + "\nPersistentKeepalive = " \
                      + str(keepalive) + "\nEndpoint = " + endpoint
             if preshared_key != "":
@@ -1420,7 +1527,17 @@ def download_all(config_name):
             psk = "\nPresharedKey = " + preshared_key
 
         return_data = "[Interface]\nPrivateKey = " + private_key + "\nAddress = " + allowed_ip + "\nDNS = " + \
-                      dns_addresses + "\nMTU = " + str(mtu_value) + "\n\n[Peer]\nPublicKey = " + \
+                      dns_addresses + "\nMTU = " + str(mtu_value) + \
+                      "\nJc = " + Jc + \
+                      "\nJmin = " + Jmin + \
+                      "\nJmax = " + Jmax + \
+                      "\nS1 = " + S1 + \
+                      "\nS2 = " + S2 + \
+                      "\nH1 = " + H1 + \
+                      "\nH2 = " + H2 + \
+                      "\nH3 = " + H3 + \
+                      "\nH4 = " + H4 + \
+                      "\n\n[Peer]\nPublicKey = " + \
                       public_key + "\nAllowedIPs = " + endpoint_allowed_ip + "\nEndpoint = " + \
                       endpoint + "\nPersistentKeepalive = " + str(keepalive) + psk
         data.append({"filename": f"{filename}.conf", "content": return_data})
@@ -1454,6 +1571,15 @@ def download(config_name):
             keepalive = peer[5]
             preshared_key = peer[6]
             filename = peer[7]
+            Jc = get_wg_obf_by_name(config_name,"Jc")
+            Jmin = get_wg_obf_by_name(config_name,"Jmin")
+            Jmax = get_wg_obf_by_name(config_name,"Jmax")
+            S1 = get_wg_obf_by_name(config_name,"S1")
+            S2 = get_wg_obf_by_name(config_name,"S2")
+            H1 = get_wg_obf_by_name(config_name,"H1")
+            H2 = get_wg_obf_by_name(config_name,"H2")
+            H3 = get_wg_obf_by_name(config_name,"H3")
+            H4 = get_wg_obf_by_name(config_name,"H4")
             if len(filename) == 0:
                 filename = "Untitled_Peer"
             else:
@@ -1472,8 +1598,17 @@ def download(config_name):
             if preshared_key != "":
                 psk = "\nPresharedKey = " + preshared_key
 
-            return_data = "[Interface]\nPrivateKey = " + private_key + "\nAddress = " + allowed_ip + "\nDNS = " + \
-                          dns_addresses + "\nMTU = " + str(mtu_value) + "\n\n[Peer]\nPublicKey = " + \
+            return_data = "[Interface]\nPrivateKey = " + private_key + "\nAddress = " + allowed_ip +  \
+                          "\nJc = " + Jc + \
+                          "\nJmin = " + Jmin + \
+                          "\nJmax = " + Jmax + \
+                          "\nS1 = " + S1 + \
+                          "\nS2 = " + S2 + \
+                          "\nH1 = " + H1 + \
+                          "\nH2 = " + H2 + \
+                          "\nH3 = " + H3 + \
+                          "\nH4 = " + H4 + \
+                          "\n\n[Peer]\nPublicKey = " + \
                           public_key + "\nAllowedIPs = " + endpoint_allowed_ip + "\nEndpoint = " + \
                           endpoint + "\nPersistentKeepalive = " + str(keepalive) + psk
 
@@ -1501,6 +1636,133 @@ def switch_display_mode(mode):
     return "false"
 
 
+# APIs
+import api
+# TODO: Add configuration prefix to all configuration API
+
+@app.route('/api/getPeerDataUsage', methods=['POST'])
+def getPeerDataUsage():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['peerID', 'config', 'interval']
+    if checkJSONAllParameter(required, data):
+        returnData = api.managePeer.getPeerDataUsage(api.managePeer, data, g.cur)
+    else:
+        return jsonify(api.notEnoughParameter)
+    return jsonify(returnData)
+
+@app.route('/api/togglePeerAccess', methods=['POST'])
+def togglePeerAccess():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['peerID', 'config']
+    if checkJSONAllParameter(required, data):
+        returnData = api.togglePeerAccess(data, g)
+    else:
+        return jsonify(api.notEnoughParameter)
+    return jsonify(returnData)
+
+@app.route('/api/addConfigurationAddressCheck', methods=['POST'])
+def addConfigurationAddressCheck():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['address']
+    if checkJSONAllParameter(required, data):
+        returnData = api.manageConfiguration.AddressCheck(api.manageConfiguration, data)
+    else:
+        return jsonify(api.notEnoughParameter)
+    return jsonify(returnData)
+
+@app.route('/api/addConfigurationPortCheck', methods=['POST'])
+def addConfigurationPortCheck():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['port']
+    if checkJSONAllParameter(required, data):
+        returnData = api.manageConfiguration.PortCheck(api.manageConfiguration, data, get_conf_list())
+    else:
+        return jsonify(api.notEnoughParameter)
+    return jsonify(returnData)
+
+@app.route('/api/addConfigurationNameCheck', methods=['POST'])
+def addConfigurationNameCheck():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['name']
+    if checkJSONAllParameter(required, data):
+        returnData = api.manageConfiguration.NameCheck(api.manageConfiguration, data, get_conf_list())
+    else:
+        return jsonify(api.notEnoughParameter)
+    return jsonify(returnData)
+
+@app.route('/api/addConfiguration', methods=["POST"])
+def addConfiguration():
+    data = request.get_json()
+    returnData = {"status": True, "reason": ""}
+    required = ['addConfigurationPrivateKey', 'addConfigurationName', 'addConfigurationListenPort', 
+                'addConfigurationAddress', 'addConfigurationPreUp', 'addConfigurationPreDown', 
+                'addConfigurationPostUp', 'addConfigurationPostDown']
+    needFilled = ['addConfigurationPrivateKey', 'addConfigurationName', 'addConfigurationListenPort', 
+                'addConfigurationAddress']
+    if not checkJSONAllParameter(needFilled, data):
+        return jsonify(api.notEnoughParameter)
+    for i in required:
+        if i not in data.keys():
+            return jsonify(api.notEnoughParameter)
+    config = get_conf_list()
+    nameCheck = api.manageConfiguration.NameCheck(api.manageConfiguration, {"name": data['addConfigurationName']}, config)
+    if not nameCheck['status']:
+        return nameCheck
+
+    portCheck = api.manageConfiguration.PortCheck(api.manageConfiguration, {"port": data['addConfigurationListenPort']}, config)
+    if not portCheck['status']:
+        return portCheck
+
+    addressCheck = api.manageConfiguration.AddressCheck(api.manageConfiguration, {"address": data['addConfigurationAddress']})
+    if not addressCheck['status']:
+        return addressCheck
+
+    returnData = api.manageConfiguration.addConfiguration(api.manageConfiguration, data, config, WG_CONF_PATH)
+    return jsonify(returnData)
+
+@app.route('/api/saveConfiguration', methods=["POST"])
+def saveConfiguration():
+    data = request.get_json()
+    required = ['configurationName', 'ListenPort']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+    return api.manageConfiguration.saveConfiguration(api.manageConfiguration, data, WG_CONF_PATH, get_conf_list())
+
+@app.route('/api/deleteConfiguration', methods=['POST'])
+def deleteConfiguration():
+    data = request.get_json()
+    required = ['name']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+    returnData = api.manageConfiguration.deleteConfiguration(api.manageConfiguration, data, get_conf_list(), g, WG_CONF_PATH)
+    return returnData
+
+@app.route('/api/getConfigurationInfo', methods=['GET'])
+def getConfigurationInfo():
+    data = request.args.to_dict()
+    required = ['configName']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+    else:
+        return api.manageConfiguration.getConfigurationInfo(api.manageConfiguration, data['configName'], WG_CONF_PATH)
+
+@app.route('/api/settings/setTheme', methods=['POST'])
+def setTheme():
+    data = request.get_json()
+    required = ['theme']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+    else:
+        return api.settings.setTheme(api.settings, data['theme'], get_dashboard_conf(), set_dashboard_conf)
+
+
+        
+
 """
 Dashboard Tools Related
 """
@@ -1586,15 +1848,129 @@ def traceroute_ip():
         return "Error"
 
 
+import atexit
+@atexit.register 
+def goodbye(): 
+    global stop_thread
+    global bgThread
+    stop_thread = True
+    
+    print("Stopping background thread")
+
+def get_all_transfer_thread():
+    print("waiting 15 sec ")
+    time.sleep(7)
+    global stop_thread
+    # with app.app_context():
+    try:
+        db = connect_db()
+        cur = db.cursor()
+        while True:
+            print(stop_thread)
+            # if stop_thread:
+            #     break
+            conf = []
+            for i in os.listdir(WG_CONF_PATH):
+                if regex_match("^(.{1,}).(conf)$", i):
+                    i = i.replace('.conf', '')
+                    create_table = f"""
+                        CREATE TABLE IF NOT EXISTS {i} (
+                            id VARCHAR NOT NULL, private_key VARCHAR NULL, DNS VARCHAR NULL, 
+                            endpoint_allowed_ip VARCHAR NULL, name VARCHAR NULL, total_receive FLOAT NULL, 
+                            total_sent FLOAT NULL, total_data FLOAT NULL, endpoint VARCHAR NULL, 
+                            status VARCHAR NULL, latest_handshake VARCHAR NULL, allowed_ip VARCHAR NULL, 
+                            cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, mtu INT NULL, 
+                            keepalive INT NULL, remote_endpoint VARCHAR NULL, preshared_key VARCHAR NULL,
+                            PRIMARY KEY (id)
+                        )
+                    """
+                    cur.execute(create_table)
+                    create_table = f"""
+                        CREATE TABLE IF NOT EXISTS {i}_restrict_access (
+                            id VARCHAR NOT NULL, private_key VARCHAR NULL, DNS VARCHAR NULL, 
+                            endpoint_allowed_ip VARCHAR NULL, name VARCHAR NULL, total_receive FLOAT NULL, 
+                            total_sent FLOAT NULL, total_data FLOAT NULL, endpoint VARCHAR NULL, 
+                            status VARCHAR NULL, latest_handshake VARCHAR NULL, allowed_ip VARCHAR NULL, 
+                            cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, mtu INT NULL, 
+                            keepalive INT NULL, remote_endpoint VARCHAR NULL, preshared_key VARCHAR NULL,
+                            PRIMARY KEY (id)
+                        )
+                    """
+                    cur.execute(create_table)
+                    create_table = f"""
+                        CREATE TABLE IF NOT EXISTS {i}_transfer (
+                            id VARCHAR NOT NULL, total_receive FLOAT NULL, 
+                            total_sent FLOAT NULL, total_data FLOAT NULL,
+                            cumu_receive FLOAT NULL, cumu_sent FLOAT NULL, cumu_data FLOAT NULL, time DATETIME
+                        )
+                    """
+                    cur.execute(create_table)
+                    db.commit()
+                    temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i), "port": get_conf_listen_port(i)}
+                    if temp['status'] == "running":
+                        temp['checked'] = 'checked'
+                    else:
+                        temp['checked'] = ""
+                    conf.append(temp)
+            if len(conf) > 0:
+                conf = sorted(conf, key=itemgetter('conf'))
+            for i in conf:
+                print(i['conf'])
+                config_name = i['conf']
+                try:
+                    data_usage = subprocess.check_output(f"wg show {config_name} transfer",
+                                                        shell=True, stderr=subprocess.STDOUT)
+                    data_usage = data_usage.decode("UTF-8").split("\n")
+                    final = []
+                    for i in data_usage:
+                        final.append(i.split("\t"))
+                    data_usage = final
+                    for i in range(len(data_usage)):
+                        cur_i = cur.execute(
+                            "SELECT total_receive, total_sent, cumu_receive, cumu_sent, status FROM %s WHERE id='%s'"
+                            % (config_name, data_usage[i][0])).fetchall()
+                        if len(cur_i) > 0:
+                            total_sent = cur_i[0][1]
+                            total_receive = cur_i[0][0]
+                            cur_total_sent = round(int(data_usage[i][2]) / (1024 ** 3), 4)
+                            cur_total_receive = round(int(data_usage[i][1]) / (1024 ** 3), 4)
+                            cumulative_receive = cur_i[0][2] + total_receive
+                            cumulative_sent = cur_i[0][3] + total_sent
+                            if total_sent <= cur_total_sent and total_receive <= cur_total_receive:
+                                total_sent = cur_total_sent
+                                total_receive = cur_total_receive
+                            else:
+                                cur.execute("UPDATE %s SET cumu_receive = %f, cumu_sent = %f, cumu_data = %f WHERE id = '%s'" %
+                                                (config_name, round(cumulative_receive, 4), round(cumulative_sent, 4),
+                                                round(cumulative_sent + cumulative_receive, 4), data_usage[i][0]))
+                                total_sent = 0
+                                total_receive = 0
+                            cur.execute("UPDATE %s SET total_receive = %f, total_sent = %f, total_data = %f WHERE id = '%s'" %
+                                            (config_name, round(total_receive, 4), round(total_sent, 4),
+                                            round(total_receive + total_sent, 4), data_usage[i][0]))
+                            now = datetime.now()
+                            now_string = now.strftime("%d/%m/%Y %H:%M:%S")
+                            cur.execute(f'''
+                            INSERT INTO {config_name}_transfer (id, total_receive, total_sent, total_data, cumu_receive, cumu_sent, cumu_data, time) 
+                            VALUES ('{data_usage[i][0]}', {round(total_receive, 4)}, {round(total_sent, 4)}, {round(total_receive + total_sent, 4)},{round(cumulative_receive, 4)}, {round(cumulative_sent, 4)},
+                                                {round(cumulative_sent + cumulative_receive, 4)}, '{now_string}')
+                            ''')
+                            db.commit()
+                except subprocess.CalledProcessError:
+                    pass
+            time.sleep(30)
+    except KeyboardInterrupt:
+        return True
 """
 Dashboard Initialization
 """
-
+    
 
 def init_dashboard():
     """
     Create dashboard default configuration.
     """
+    
 
     # Set Default INI File
     if not os.path.isfile(DASHBOARD_CONF):
@@ -1624,6 +2000,8 @@ def init_dashboard():
         config['Server']['dashboard_refresh_interval'] = '60000'
     if 'dashboard_sort' not in config['Server']:
         config['Server']['dashboard_sort'] = 'status'
+    if 'dashboard_theme' not in config['Server']:
+        config['Server']['dashboard_theme'] = 'light'
     # Default dashboard peers setting
     if "Peers" not in config:
         config['Peers'] = {}
@@ -1658,11 +2036,13 @@ def check_update():
         for i in output:
             if not i["prerelease"]:
                 release.append(i)
+                global updateInfo
+                updateInfo = i
+                break
         if config.get("Server", "version") == release[0]["tag_name"]:
             result = "false"
         else:
             result = "true"
-
         return result
     except urllib.error.HTTPError:
         return "false"
@@ -1686,24 +2066,22 @@ def run_dashboard():
     global WG_CONF_PATH
     WG_CONF_PATH = config.get("Server", "wg_conf_path")
     config.clear()
+    x = threading.Thread(target=get_all_transfer_thread)
+    x.start()
     return app
 
 
 """
 Get host and port for web-server
 """
-
-
 def get_host_bind():
     init_dashboard()
     config = configparser.ConfigParser(strict=False)
     config.read('wg-dashboard.ini')
     app_ip = config.get("Server", "app_ip")
     app_port = config.get("Server", "app_port")
-
     return app_ip, app_port
 
-
 if __name__ == "__main__":
     init_dashboard()
     UPDATE = check_update()
@@ -1715,4 +2093,11 @@ if __name__ == "__main__":
     app_port = config.get("Server", "app_port")
     WG_CONF_PATH = config.get("Server", "wg_conf_path")
     config.clear()
+    global bgThread
+    global stop_thread
+    stop_thread = False
+    bgThread = threading.Thread(target=get_all_transfer_thread)
+    bgThread.daemon = True
+    bgThread.start()
+
     app.run(host=app_ip, debug=False, port=app_port)

src/static/css/dashboard.css

@@ -1,5 +1,10 @@
 body {
     font-size: .875rem;
+    /*font-family: 'Poppins', sans-serif;*/
+}
+
+.codeFont{
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .feather {
@@ -8,6 +13,10 @@ body {
     vertical-align: text-bottom;
 }
 
+.btn-primary {
+    font-weight: bold;
+}
+
 /*
  * Sidebar
  */
@@ -17,24 +26,21 @@ body {
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 100; /* Behind the navbar */
-    padding: 48px 0 0; /* Height of navbar */
+    z-index: 100;
+    /* Behind the navbar */
+    padding: 48px 0 0;
+    /* Height of navbar */
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
-/*@media (max-width: 767.98px) {*/
-/*  .sidebar {*/
-/*    top: 5rem;*/
-/*  }*/
-/*}*/
-
 .sidebar-sticky {
     position: relative;
     top: 0;
     height: calc(100vh - 48px);
     padding-top: .5rem;
     overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    overflow-y: auto;
+    /* Scrollable contents if viewport is shorter than content. */
 }
 
 @supports ((position: -webkit-sticky) or (position: sticky)) {
@@ -44,7 +50,7 @@ body {
     }
 }
 
-.sidebar .nav-link {
+.sidebar .nav-link, .bottomNavContainer .nav-link{
     font-weight: 500;
     color: #333;
     transition: 0.2s cubic-bezier(0.82, -0.07, 0, 1.01);
@@ -60,7 +66,7 @@ body {
     color: #999;
 }
 
-.sidebar .nav-link.active {
+.sidebar .nav-link.active, .bottomNavContainer .nav-link.active {
     color: #007bff;
 }
 
@@ -74,6 +80,7 @@ body {
     text-transform: uppercase;
 }
 
+
 /*
  * Navbar
  */
@@ -91,11 +98,11 @@ body {
     right: 1rem;
 }
 
-.form-control{
+.form-control {
     transition: all 0.2s ease-in-out;
 }
 
-.form-control:disabled{
+.form-control:disabled {
     cursor: not-allowed;
 }
 
@@ -116,153 +123,187 @@ body {
     box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
 
-.dot{
+.dot {
     width: 10px;
     height: 10px;
     border-radius: 50px;
     display: inline-block;
-    margin-left: 10px;
+    margin-left: auto !important;
 }
 
-.dot-running{
+.dot-running {
     background-color: #28a745!important;
     box-shadow: 0 0 0 0.2rem #28a74545;
 }
 
-.h6-dot-running{
+.h6-dot-running {
     margin-left: 0.3rem;
 }
 
-.dot-stopped{
+.dot-stopped {
     background-color: #6c757d!important;
 }
 
-.card-running{
+.card-running {
     border-color: #28a745;
 }
 
-.info h6{
+.info h6 {
     line-break: anywhere;
-    transition: 0.2s ease-in-out;
+    transition: all 0.4s cubic-bezier(0.96, -0.07, 0.34, 1.01);
+    opacity: 1;
 }
 
-.info .row .col-sm{
+.info .row .col-sm {
     display: flex;
     flex-direction: column;
 }
 
-.info .row .col-sm small{
+.info .row .col-sm small {
     display: flex;
-
 }
 
-.info .row .col-sm small strong:last-child(1){
+.info .row .col-sm small strong:last-child(1) {
     margin-left: auto !important;
 }
 
-.btn-control{
+.btn-control {
     border: none !important;
-    padding: 0 1rem 0 0;
+    padding: 0;
+    margin: 0 1rem 0 0;
 }
 
-.btn-control:active, .btn-control:focus{
+.btn-control:hover{
+    background-color: transparent !important;
+}
+
+.btn-control:active,
+.btn-control:focus {
     background-color: transparent !important;
     border: none !important;
     box-shadow: none;
 }
 
-.btn-qrcode-peer{
+.btn-qrcode-peer {
     padding: 0 !important;
 }
 
-.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
+.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{
+.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 {
     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 {
     background: white;
 }
 
-.btn-delete-peer:hover{
+.btn-delete-peer:hover {
     color: #dc3545;
 }
 
-.btn-setting-peer:hover{
-    color:#007bff
+.btn-lock-peer:hover {
+    color: #28a745;
 }
 
-.btn-download-peer:hover{
+.btn-lock-peer.lock{
+    color: #6c757d
+}
+
+.btn-lock-peer.lock:hover{
+    color: #6c757d
+}
+
+.btn-control.btn-outline-primary:hover{
+    color: #007bff
+}
+
+/* .btn-setting-peer:hover {
+    color: #007bff
+} */
+
+.btn-download-peer:hover {
     color: #17a2b8;
 }
 
-.login-container{
+.login-container {
     padding: 2rem;
 }
 
-@media (max-width: 992px){
-    .card-col{
+@media (max-width: 992px) {
+    .card-col {
         margin-bottom: 1rem;
     }
 }
 
-.switch{
+.switch {
     font-size: 2rem;
 }
-.switch:hover{
+
+.switch:hover {
     text-decoration: none
 }
 
-.btn-group-label:hover{
+.btn-group-label:hover {
     color: #007bff;
     border-color: #007bff;
     background: white;
 }
 
-/*.peer_data_group{*/
-/*  text-align: right;*/
-/*}*/
+.peer_data_group {
+    text-align: right;
+    display: flex;
+    margin-bottom: 0.5rem
+}
+
+.peer_data_group p {
+    text-transform: uppercase;
+    margin-bottom: 0;
+    margin-right: 1rem
+}
 
 @media (max-width: 768px) {
-    .peer_data_group{
+    .peer_data_group {
         text-align: left;
     }
 }
 
-.index-switch{
-    text-align: right;
+.index-switch {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
-main{
+main {
     margin-bottom: 3rem;
 }
 
-.peer_list{
+.peer_list {
     margin-bottom: 7rem
 }
 
 @media (max-width: 768px) {
-    .add_btn{
+    .add_btn {
         bottom: 1.5rem !important;
     }
-
-    .peer_list{
+    .peer_list {
         margin-bottom: 7rem !important;
     }
 }
 
-.btn-manage-group{
+.btn-manage-group {
     z-index: 99;
     position: fixed;
     bottom: 3rem;
@@ -270,7 +311,7 @@ main{
     display: flex;
 }
 
-.btn-manage-group .setting_btn_menu{
+.btn-manage-group .setting_btn_menu {
     position: absolute;
     top: -124px;
     background-color: white;
@@ -278,23 +319,23 @@ main{
     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;
+    min-width: 250px;
     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{
+.btn-manage-group .setting_btn_menu.show {
     display: block;
 }
 
-.setting_btn_menu.showing{
+.setting_btn_menu.showing {
     transform: translateY(0px);
     opacity: 1;
 }
 
-.setting_btn_menu a{
+.setting_btn_menu a {
     display: flex;
     padding: 0.5rem 1rem;
     transition: all 0.1s ease-in-out;
@@ -303,36 +344,38 @@ main{
     cursor: pointer;
 }
 
-.setting_btn_menu a:hover{
+.setting_btn_menu a:hover {
     background-color: #efefef;
     text-decoration: none;
 }
 
-.setting_btn_menu a i{
+.setting_btn_menu a i {
     margin-right: auto !important;
 }
 
-.add_btn{
+.add_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);
+    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{
+.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);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     font-size: 1.5rem;
 }
 
+@-webkit-keyframes rotating
+/* Safari and Chrome */
 
-@-webkit-keyframes rotating /* Safari and Chrome */ {
+{
     from {
         -webkit-transform: rotate(0deg);
         -o-transform: rotate(0deg);
@@ -344,6 +387,7 @@ main{
         transform: rotate(360deg);
     }
 }
+
 @keyframes rotating {
     from {
         -ms-transform: rotate(0deg);
@@ -360,6 +404,7 @@ main{
         transform: rotate(360deg);
     }
 }
+
 .rotating::before {
     -webkit-animation: rotating 0.75s linear infinite;
     -moz-animation: rotating 0.75s linear infinite;
@@ -368,7 +413,7 @@ main{
     animation: rotating 0.75s linear infinite;
 }
 
-.peer_private_key_textbox_switch{
+.peer_private_key_textbox_switch {
     position: absolute;
     right: 2rem;
     transform: translateY(-28px);
@@ -376,121 +421,153 @@ main{
     cursor: pointer;
 }
 
-#peer_private_key_textbox, #private_key, #public_key{
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+#peer_private_key_textbox,
+#private_key,
+#public_key,
+#peer_preshared_key_textbox {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.progress-bar{
+.progress-bar {
     transition: 0.3s ease-in-out;
 }
 
-.key{
+.key {
     transition: 0.2s ease-in-out;
     cursor: pointer;
 }
 
-.key:hover{
+.key:hover {
     color: #007bff;
 }
 
-.card{
+.card {
     border-radius: 10px;
 }
 
-.peer_list .card .button-group{
+.peer_list .card .button-group {
     height: 22px;
 }
 
-.form-control{
+.form-control {
     border-radius: 10px;
 }
 
-.btn{
+.btn {
     border-radius: 8px;
+    /*padding: 0.6rem 0.9em;*/
 }
 
-.modal-content{
+.login-box #username,
+.login-box #password {
+    padding: 0.6rem calc( 0.9rem + 32px);
+    height: inherit;
+}
+
+.login-box label[for="username"],
+.login-box label[for="password"] {
+    font-size: 1rem;
+    margin: 0 !important;
+    transform: translateY(30px) translateX(16px);
+    padding: 0;
+}
+
+
+/*label[for="password"]{*/
+
+
+/*    transform: translateY(32px) translateX(16px);*/
+
+
+/*}*/
+
+.modal-content {
     border-radius: 10px;
 }
 
-.tooltip-inner{
+.tooltip-inner {
     font-size: 0.8rem;
 }
 
 @-webkit-keyframes loading {
-    0%{
+    0% {
         background-color: #dfdfdf;
     }
-    50%{
+    50% {
         background-color: #adadad;
     }
-    100%{
-        background-color: #dfdfdf;
-    }
-}
-@-moz-keyframes loading {
-    0%{
-        background-color: #dfdfdf;
-    }
-    50%{
-        background-color: #adadad;
-    }
-    100%{
+    100% {
         background-color: #dfdfdf;
     }
 }
 
-.conf_card{
+@-moz-keyframes loading {
+    0% {
+        background-color: #dfdfdf;
+    }
+    50% {
+        background-color: #adadad;
+    }
+    100% {
+        background-color: #dfdfdf;
+    }
+}
+
+.conf_card {
     transition: 0.2s ease-in-out;
 }
 
-.conf_card:hover{
+.conf_card:hover {
     border-color: #007bff;
     cursor: pointer;
 }
 
-.info_loading{
-    animation: loading 2s infinite ease-in-out;
-    border-radius: 5px;
-    height: 19px;
-    transition: 0.3s ease-in-out;
+.info_loading {
+    /* animation: loading 2s infinite ease-in-out;
+    /* border-radius: 5px; */
+    height: 19.19px;
+    /* transition: 0.3s ease-in-out; */
+
+    /* transform: translateX(40px); */
+    opacity: 0 !important;
 }
 
-#conf_status_btn{
+#conf_status_btn {
     transition: 0.2s ease-in-out;
 }
 
-#conf_status_btn.info_loading{
+#conf_status_btn.info_loading {
     height: 38px;
     border-radius: 5px;
     animation: loading 3s infinite ease-in-out;
 }
 
-#qrcode_img img{
+#qrcode_img img {
     width: 100%;
 }
 
-#selected_ip_list .badge, #selected_peer_list .badge{
+#selected_ip_list .badge,
+#selected_peer_list .badge {
     margin: 0.1rem
 }
 
-#add_modal.ip_modal_open{
+#add_modal.ip_modal_open {
     transition: filter 0.2s ease-in-out;
     filter: brightness(0.5);
 }
 
-#delete_bulk_modal .list-group a.active{
+#delete_bulk_modal .list-group a.active {
     background-color: #dc3545;
     border-color: #dc3545;
 }
 
-#selected_peer_list{
+#selected_peer_list {
     max-height: 80px;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 
-.no-response{
+.no-response {
     width: 100%;
     height: 100%;
     position: fixed;
@@ -504,29 +581,354 @@ main{
     transition: all 1s ease-in-out;
 }
 
-.no-response.active{
+.no-response.active {
     display: flex;
 }
 
-.no-response.active.show{
+.no-response.active.show {
     opacity: 100;
 }
 
-.no-response .container > *{
+.no-response .container>* {
     text-align: center;
 }
 
-.no-responding{
+.no-responding {
     transition: all 1s ease-in-out;
     filter: blur(10px);
 }
 
-pre.index-alert{
+pre.index-alert {
     margin-bottom: 0;
     padding: 1rem;
     background-color: #343a40;
-    border: 1px solid rgba(0,0,0,.125);
+    border: 1px solid rgba(0, 0, 0, .125);
     border-radius: .25rem;
     margin-top: 1rem;
     color: white;
+}
+
+.peerNameCol {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.2rem
+}
+
+.peerName {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.peerLightContainer {
+    text-transform: uppercase;
+    margin: 0;
+    margin-left: auto !important;
+}
+
+.conf_card .dot,
+.info .dot {
+    transform: translateX(10px);
+}
+
+#config_body {
+    transition: 0.3s ease-in-out;
+}
+
+
+#config_body.firstLoading {
+    opacity: 0.2;
+}
+
+.chartTitle {
+    display: flex;
+}
+
+.chartControl {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.chartTitle h6 {
+    margin-bottom: 0;
+    line-height: 1;
+    margin-right: 0.5rem;
+}
+
+.chartContainer.fullScreen {
+    position: fixed;
+    z-index: 9999;
+    background-color: white;
+    top: 0;
+    left: 0;
+    width: calc( 100% + 15px);
+    height: 100%;
+    padding: 32px;
+}
+
+.chartContainer.fullScreen .col-sm {
+    padding-right: 0;
+    height: 100%;
+}
+
+.chartContainer.fullScreen .chartCanvasContainer {
+    width: 100%;
+    height: calc( 100% - 47px) !important;
+    max-height: calc( 100% - 47px) !important;
+}
+
+#switch{
+    transition: all 200ms ease-in;
+}
+
+.toggle--switch{
+    display: none;
+}
+
+.toggleLabel{
+    width: 64px;
+    height: 32px;
+    background-color: #6c757d17;
+    display: flex;
+    position: relative;
+    border: 2px solid #6c757d8c;
+    border-radius: 100px;
+    transition: all 200ms ease-in;
+    cursor: pointer;
+    margin: 0;
+}
+
+.toggle--switch.waiting + .toggleLabel{
+    opacity: 0.5;
+}
+
+.toggleLabel::before{
+    background-color: #6c757d;
+    height: 26px;
+    width: 26px;
+    content: "";
+    border-radius: 100px;
+    margin: 1px;
+    position: absolute;
+    animation-name: off;
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    transition: all 200ms ease-in;
+    cursor: pointer;
+}
+
+.toggleLabel:hover::before{
+    filter: brightness(1.2);
+}
+
+
+.toggle--switch:checked + .toggleLabel{
+    background-color: #007bff17 !important;
+    border: 2px solid #007bff8c;
+}
+
+.toggle--switch:checked + .toggleLabel::before{
+    background-color: #007bff;
+    animation-name: on;
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+}
+
+@keyframes on {
+    0%{
+        left: 0px;
+    }
+    60%{
+        left: 0px;
+        width: 40px; 
+    }
+    100%{
+        left: 32px;
+        width: 26px; 
+    }
+}
+
+@keyframes off {
+    0%{
+        left: 32px;
+    }
+    60%{
+        left: 18px;
+        width: 40px; 
+    }
+    100%{
+        left: 0px;
+        width: 26px; 
+    }
+}
+
+.toastContainer{
+    z-index: 99999 !important;
+}
+
+.toast{
+    min-width: 300px;
+    background-color: rgba(255,255,255,1);
+    z-index: 99999;
+}
+
+.toast-header{
+    background-color: rgba(255,255,255);
+}
+
+.toast-progressbar{
+    width: 100%;
+    height: 4px;
+    background-color: #007bff;
+    border-bottom-left-radius: .25rem;
+}
+
+.addConfigurationAvailableIPs{
+    margin-bottom: 0;
+}
+
+.input-feedback{
+    display: none;
+}
+
+#addConfigurationModal label{
+    display: flex;
+    width: 100%;
+    align-items: center;
+}
+
+#addConfigurationModal label a{
+    margin-left: auto !important;
+}
+
+#reGeneratePrivateKey{
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.addConfigurationToggleStatus.waiting{
+    opacity: 0.5;
+}
+
+/*.conf_card .card-body .row .card-col{*/
+/*    margin-bottom: 0.5rem;*/
+/*}*/
+
+.peerDataUsageChartContainer{
+    min-height: 50vh;
+    width: 100%;
+}
+
+.peerDataUsageChartControl{
+    display: block !important;
+    margin: 0;
+}
+
+.peerDataUsageChartControl .switchUnit{
+    width: 33.3%;
+}
+
+.peerDataUsageChartControl .switchTimePeriod{
+    width: 25%;
+}
+
+@media (min-width: 1200px){
+    #peerDataUsage .modal-xl {
+        max-width: 95vw;
+    }
+}
+
+.bottom{
+    display: none;
+}
+
+
+@media (max-width: 768px){
+    .bottom{
+        display: block;
+    }
+
+    .btn-manage-group{
+        bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px));
+    }
+
+    main{
+        padding-bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px));
+    }
+}
+
+
+.bottomNavContainer{
+    display: flex;
+    color: #333;
+    padding-bottom: env(safe-area-inset-bottom, 5px);
+    box-shadow: inset 0 1px 0 rgb(0 0 0 / 10%);
+}
+
+.bottomNavButton{
+    width: 25vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0.7rem 0;
+    color: rgba(51, 51, 51, 0.5);
+    cursor: pointer;
+    transition: all ease-in 0.2s;
+}
+
+.bottomNavButton.active{
+    color: #333;
+}
+
+.bottomNavButton i{
+    font-size: 1.2rem;
+}
+
+.bottomNavButton .subNav{
+    width: 100vw;
+    position: absolute;
+    z-index: 10000;
+    bottom: 0;
+    left: 0;
+    background-color: #272b30;
+    display: none;
+    animation-duration: 400ms;
+    padding-bottom: env(safe-area-inset-bottom, 5px);
+}
+
+.bottomNavButton .subNav.active{
+    display: block;
+}
+
+
+.bottomNavButton .subNav .nav .nav-item .nav-link{
+    padding: 0.7rem 1rem;
+}
+
+.bottomNavWrapper{
+    height: 100%;
+    width: 100%;
+    background-color: #000000a1;
+    position: fixed;
+    z-index: 1030;
+    display: none;
+    left: 0;
+}
+
+.bottomNavWrapper.active{
+    display: block;
+}
+
+.sb-update-url .dot-running{
+    transform: translateX(10px);
+}
+
+.list-group-item{
+    transition: all 0.1s ease-in;
+}
+
+.theme-switch-btn{
+    width: 100%;
 }

src/static/css/theme/dark.css

@@ -0,0 +1,391 @@
+:root {
+  --green: hsl(120deg, 30%, 50%) !important;
+  --blue: hsl(235deg, 60%, 60%) !important;
+  --red: hsl(0deg, 60%, 60%) !important;
+  --magenta: hsl(315deg, 60%, 60%) !important;
+}
+
+body {
+  background: #222222;
+  color: hsl(0deg, 0%, 80%);
+}
+
+a.text-primary:focus, a.text-primary:hover {
+  color: hsl(235deg, 60%, 50%) !important;
+}
+
+.btn-primary {
+  color: hsl(0deg, 0%, 90%) !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+  background: hsl(235deg, 60%, 60%) !important;
+}
+.btn-primary:hover {
+  background-color: hsl(235deg, 60%, 50%) !important;
+  border-color: hsl(235deg, 60%, 50%) !important;
+}
+
+.btn-outline-primary {
+  color: hsl(235deg, 60%, 60%) !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+  background: transparent !important;
+}
+.btn-outline-primary:hover, .btn-outline-primary.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-primary.active {
+  background-color: hsl(235deg, 60%, 60%) !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+}
+.btn-outline-primary:hover {
+  background-color: hsl(235deg, 60%, 50%) !important;
+  border-color: hsl(235deg, 60%, 50%) !important;
+}
+
+.btn-success {
+  color: hsl(0deg, 0%, 90%) !important;
+  border-color: hsl(120deg, 30%, 50%) !important;
+  background: hsl(120deg, 30%, 50%) !important;
+}
+.btn-success:hover {
+  background-color: hsl(120deg, 30%, 40%) !important;
+  border-color: hsl(120deg, 30%, 40%) !important;
+}
+
+.list-group-item {
+  background-color: #272727;
+  border-color: #272727;
+  color: white;
+}
+.list-group-item:hover {
+  background-color: #333333;
+  border-color: #333333;
+  color: white;
+}
+
+.delete-peer-bulk-badge.badge-danger {
+  background-color: hsl(0deg, 60%, 60%);
+}
+.delete-peer-bulk-badge.badge-danger:hover {
+  background-color: hsl(0deg, 60%, 50%);
+}
+
+#delete_bulk_modal .list-group a.active {
+  background-color: hsl(0deg, 60%, 60%);
+  border: hsl(0deg, 60%, 60%);
+}
+#delete_bulk_modal .list-group a.active:hover {
+  background-color: hsl(0deg, 60%, 50%);
+  border: hsl(0deg, 60%, 50%);
+}
+
+#available_ip_modal .list-group a.active {
+  background-color: hsl(235deg, 60%, 60%);
+  border: hsl(235deg, 60%, 60%);
+}
+#available_ip_modal .list-group a.active:hover {
+  background-color: hsl(235deg, 60%, 50%);
+  border: hsl(235deg, 60%, 50%);
+}
+
+.available-ip-badge.badge-primary {
+  background-color: hsl(235deg, 60%, 60%);
+}
+.available-ip-badge.badge-primary:hover {
+  background-color: hsl(235deg, 60%, 50%);
+}
+
+.btn-outline-success {
+  color: hsl(120deg, 30%, 50%) !important;
+  border-color: hsl(120deg, 30%, 50%) !important;
+  background: transparent !important;
+}
+.btn-outline-success:hover, .btn-outline-success.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-success.active {
+  background-color: hsl(120deg, 30%, 50%) !important;
+  border-color: hsl(120deg, 30%, 50%) !important;
+}
+.btn-outline-success:hover {
+  background-color: hsl(120deg, 30%, 40%) !important;
+  border-color: hsl(120deg, 30%, 40%) !important;
+}
+
+.btn-danger {
+  color: hsl(0deg, 0%, 90%) !important;
+  border-color: hsl(0deg, 60%, 60%) !important;
+  background: hsl(0deg, 60%, 60%) !important;
+}
+.btn-danger:hover {
+  background-color: hsl(0deg, 60%, 50%) !important;
+  border-color: hsl(0deg, 60%, 50%) !important;
+}
+
+.btn-outline-danger {
+  color: hsl(0deg, 60%, 60%) !important;
+  border-color: hsl(0deg, 60%, 60%) !important;
+  background: transparent !important;
+}
+.btn-outline-danger:hover, .btn-outline-danger.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-danger.active {
+  background-color: hsl(0deg, 60%, 60%) !important;
+  border-color: hsl(0deg, 60%, 60%) !important;
+}
+.btn-outline-danger:hover {
+  background-color: hsl(0deg, 60%, 50%) !important;
+  border-color: hsl(0deg, 60%, 50%) !important;
+}
+
+.btn-secondary {
+  color: hsl(0deg, 0%, 90%) !important;
+  border-color: #424242 !important;
+  background: #424242 !important;
+}
+.btn-secondary:hover {
+  background-color: #383838 !important;
+  border-color: #383838 !important;
+}
+
+.btn-outline-secondary {
+  color: #424242 !important;
+  border-color: #424242 !important;
+  background: transparent !important;
+}
+.btn-outline-secondary:hover, .btn-outline-secondary.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-secondary.active {
+  background-color: #424242 !important;
+  border-color: #424242 !important;
+}
+.btn-outline-secondary:hover {
+  background-color: #383838 !important;
+  border-color: #383838 !important;
+}
+
+.btn-control.btn-lock-peer.lock {
+  color: hsl(0deg, 60%, 60%) !important;
+}
+.btn-control.btn-lock-peer.lock:hover {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+.btn-control:hover {
+  background-color: transparent !important;
+}
+.btn-control:hover.btn-outline-primary {
+  color: hsl(235deg, 60%, 50%) !important;
+}
+.btn-control:hover.btn-outline-success {
+  color: hsl(120deg, 30%, 40%) !important;
+}
+.btn-control:hover.btn-outline-danger {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+.btn-control:hover.btn-outline-secondary {
+  color: #383838 !important;
+}
+
+.form-control {
+  background-color: #2c2c2c !important;
+  border-color: transparent !important;
+  color: hsl(0deg, 0%, 80%) !important;
+}
+
+.form-control:disabled {
+  color: #777777 !important;
+}
+
+.card .form-control {
+  background: #2c2c2c !important;
+}
+
+.conf_card a {
+  color: hsl(235deg, 60%, 60%);
+}
+.conf_card:hover {
+  border-color: hsl(235deg, 60%, 60%);
+}
+
+.sidebar .nav-link,
+.bottomNavContainer .nav-link {
+  color: hsl(0deg, 0%, 80%);
+}
+.sidebar .nav-link:hover,
+.bottomNavContainer .nav-link:hover {
+  background: #222222;
+}
+
+nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,
+.navbar-brand,
+.bg-dark {
+  background-color: #1e1e1e !important;
+  background: #1e1e1e !important;
+}
+
+.card {
+  background: #272727;
+}
+
+.text-muted {
+  color: hsl(0deg, 0%, 50%) !important;
+}
+
+.text-danger {
+  color: hsl(0deg, 60%, 60%) !important;
+}
+
+.text-success {
+  color: hsl(120deg, 30%, 50%) !important;
+}
+
+.text-primary {
+  color: hsl(235deg, 60%, 60%) !important;
+}
+
+.text-info {
+  color: hsl(190deg, 60%, 60%) !important;
+}
+
+a.text-success:focus,
+a.text-success:hover {
+  color: hsl(120deg, 30%, 40%) !important;
+}
+
+a.text-danger:focus,
+a.text-danger:hover {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+
+a.text-info:focus,
+a.text-info:hover {
+  color: hsl(190deg, 60%, 50%) !important;
+}
+
+.dot-running {
+  background-color: hsl(120deg, 30%, 50%) !important;
+}
+
+.card-running {
+  border-color: hsl(120deg, 30%, 50%);
+}
+
+.toggle--switch:checked + .toggleLabel::before {
+  background-color: hsl(235deg, 60%, 60%) !important;
+}
+
+.toggle--switch:checked + .toggleLabel {
+  background-color: #2e336b !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+}
+
+.sidebar .nav-link.active,
+.bottomNavContainer .nav-link.active {
+  color: hsl(235deg, 60%, 60%) !important;
+}
+
+hr {
+  border-color: #2e2e2e;
+}
+
+.modal-content {
+  background-color: #222222;
+}
+
+.modal-header,
+.modal-footer {
+  background-color: #1e1e1e;
+  border-color: #2e2e2e;
+}
+
+code {
+  color: hsl(315deg, 60%, 60%);
+}
+
+.close {
+  color: hsl(0deg, 0%, 80%);
+  text-shadow: none;
+}
+.close:hover {
+  color: hsl(0deg, 0%, 70%);
+}
+
+.chartContainer.fullScreen {
+  background-color: #222222 !important;
+}
+
+.popover {
+  background-color: #333333 !important;
+  border: none !important;
+}
+
+.popover-body {
+  color: hsl(0deg, 0%, 80%) !important;
+}
+
+div.toast {
+  background-color: #424242 !important;
+}
+div.toast div.toast-header {
+  background-color: #333333 !important;
+  color: hsl(0deg, 0%, 80%) !important;
+  border-bottom-color: #424242 !important;
+}
+div.toast div.toast-body {
+  background-color: #383838 !important;
+  color: hsl(0deg, 0%, 80%) !important;
+}
+div.toast div.toast-body.text-danger {
+  color: hsl(0deg, 60%, 60%) !important;
+}
+div.toast div.toast-progressbar {
+  background-color: hsl(235deg, 60%, 60%) !important;
+}
+div.toast div.toast-progressbar.bg-danger {
+  background-color: hsl(0deg, 60%, 60%) !important;
+}
+
+.bs-popover-auto[x-placement^=right] > .arrow::after,
+.bs-popover-right > .arrow::after {
+  border-right-color: #333333 !important;
+}
+
+.btn-manage-group .setting_btn_menu {
+  background-color: #2c2c2c !important;
+}
+
+.setting_btn_menu a:hover {
+  background-color: #333333 !important;
+}
+
+.table {
+  color: hsl(0deg, 0%, 80%) !important;
+}
+.table th,
+.table td {
+  border-color: #333333 !important;
+}
+
+.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-primary.focus, .btn-primary:focus {
+  box-shadow: 0 0 0 0.2rem rgba(144, 153, 255, 0.29) !important;
+}
+
+.bottomNav {
+  background-color: #272727 !important;
+}
+.bottomNav .bottomNavButton {
+  color: hsl(0deg, 0%, 60%);
+}
+.bottomNav .bottomNavButton.active {
+  color: hsl(235deg, 60%, 60%) !important;
+}
+.bottomNav .subNav {
+  background-color: #272727 !important;
+}
+
+.key:hover {
+  color: hsl(235deg, 60%, 60%);
+}
+
+/*# sourceMappingURL=dark.css.map */

src/static/css/theme/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAiBX;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE,kBAzFS;EA0FT,cA1FS;EA2FT;;AAEA;EACE,kBA3FO;EA4FP,cA5FO;EA6FP;;;AAMJ;EACE,kBA3FQ;;AA4FR;EACE,kBA9FM;;;AAoGN;EACE,kBApGI;EAqGJ,QArGI;;AAuGJ;EACE,kBAzGE;EA0GF,QA1GE;;;AAkHN;EACE,kBA/GK;EAgHL,QAhHK;;AAkHL;EACE,kBApHG;EAqHH,QArHG;;;AA2HX;EACE,kBA3HS;;AA4HT;EACE,kBA9HO;;;AAkIX;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAnQO;;AAqQT;EACE,cAtQO;;;AA0QX;AAAA;EAEE,OAnQS;;AAqQT;AAAA;EACE,YAhSO;;;AAoSX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA1SS;;;AA6SX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cA5UU;;;AA+UZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cApWS;;;AAuWX;EACE,kBA5WS;;;AA+WX;AAAA;EAEE,kBAlXS;EAmXT,cA9WS;;;AAiXX;EACE,OA/VY;;;AAkWd;EACE,OAhWS;EAiWT;;AAEA;EACE,OAnWO;;;AAuWX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OAhbK;;AAobT;EACE;;AAGF;EACE;;;AAKJ;EACE,OA1cS","file":"dark.css"}

src/static/css/theme/dark.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAiBX,0CACE,yBAGF,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,iBACE,iBAzFS,QA0FT,aA1FS,QA2FT,WAEA,uBACE,iBA3FO,KA4FP,aA5FO,KA6FP,WAMJ,qCACE,iBA3FQ,QA4FR,2CACE,iBA9FM,KAoGN,wCACE,iBApGI,QAqGJ,OArGI,QAuGJ,8CACE,iBAzGE,KA0GF,OA1GE,KAkHN,yCACE,iBA/GK,QAgHL,OAhHK,QAkHL,+CACE,iBApHG,QAqHH,OArHG,QA2HX,kCACE,iBA3HS,QA4HT,wCACE,iBA9HO,QAkIX,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAnQO,QAqQT,iBACE,aAtQO,QA0QX,iDAEE,MAnQS,KAqQT,6DACE,WAhSO,KAoSX,8FAGE,oCACA,8BAGF,MACE,WA1SS,QA6SX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aA5UU,QA+UZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aApWS,QAuWX,eACE,iBA5WS,KA+WX,4BAEE,iBAlXS,QAmXT,aA9WS,QAiXX,KACE,MA/VY,QAkWd,OACE,MAhWS,KAiWT,iBAEA,aACE,MAnWO,QAuWX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,qCACE,yBAGF,gCACE,oCAGF,0CACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MAhbK,KAobT,mCACE,yBAGF,mBACE,oCAKJ,WACE,MA1cS","file":"dark.min.css"}

src/static/css/theme/dark.scss

@@ -0,0 +1,480 @@
+$grey-100: #1e1e1e;
+$grey-200: #222222;
+$grey-300: #242424;
+$grey-400: #272727;
+$grey-500: #2c2c2c;
+$grey-600: #2e2e2e;
+$grey-700: #333333;
+$grey-800: #383838;
+$grey-900: #424242;
+$grey-1000: #777777;
+
+$green-400: hsl(120deg, 30%, 40%);
+$green-500: hsl(120deg, 30%, 50%);
+
+$red-400: hsl(0deg, 60%, 50%);
+$red-500: hsl(0deg, 60%, 60%);
+
+$blue-400: hsl(235deg, 60%, 50%);
+$blue-500: hsl(235deg, 60%, 60%);
+$blue-400-clear: rgba(51, 64, 204, 0.25);
+
+$cyan-400: hsl(190deg, 60%, 50%);
+$cyan-500: hsl(190deg, 60%, 60%);
+
+$magenta-500: hsl(315deg, 60%, 60%);
+
+$text-100: hsl(0deg, 0%, 90%);
+$text-200: hsl(0deg, 0%, 80%);
+$text-300: hsl(0deg, 0%, 70%);
+$text-400: hsl(0deg, 0%, 60%);
+$text-500: hsl(0deg, 0%, 50%);
+
+:root {
+  --green: #{$green-500} !important;
+  --blue: #{$blue-500} !important;
+  --red: #{$red-500} !important;
+  --magenta: #{$magenta-500} !important;
+}
+
+body {
+  background: $grey-200;
+  color: $text-200;
+}
+
+a.text-primary:focus, a.text-primary:hover{
+  color: $blue-400 !important;
+}
+
+.btn-primary {
+  color: $text-100 !important;
+  border-color: $blue-500 !important;
+  background: $blue-500 !important;
+
+  &:hover {
+    background-color: $blue-400 !important;
+    border-color: $blue-400 !important;
+  }
+}
+
+.btn-outline-primary {
+  color: $blue-500 !important;
+  border-color: $blue-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $blue-500 !important;
+    border-color: $blue-500 !important;
+  }
+
+  &:hover {
+    background-color: $blue-400 !important;
+    border-color: $blue-400 !important;
+  }
+}
+
+.btn-success {
+  color: $text-100 !important;
+  border-color: $green-500 !important;
+  background: $green-500 !important;
+
+  &:hover {
+    background-color: $green-400 !important;
+    border-color: $green-400 !important;
+  }
+}
+
+.list-group-item{
+  background-color: $grey-400;
+  border-color: $grey-400;
+  color: white;
+
+  &:hover{
+    background-color: $grey-700;
+    border-color: $grey-700;
+    color: white;
+  }
+}
+
+
+
+.delete-peer-bulk-badge.badge-danger{
+  background-color: $red-500;
+  &:hover{
+    background-color: $red-400;
+  }
+}
+
+#delete_bulk_modal{
+  .list-group{
+    a.active{
+      background-color: $red-500;
+      border: $red-500;
+
+      &:hover{
+        background-color: $red-400;
+        border: $red-400;
+      }
+    }
+  }
+}
+
+#available_ip_modal{
+  .list-group{
+    a.active{
+      background-color: $blue-500;
+      border: $blue-500;
+      
+      &:hover{
+        background-color: $blue-400;
+        border: $blue-400;
+      }
+    }
+  }
+}
+
+.available-ip-badge.badge-primary{
+  background-color: $blue-500;
+  &:hover{
+    background-color: $blue-400;
+  }
+}
+
+.btn-outline-success {
+  color: $green-500 !important;
+  border-color: $green-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $green-500 !important;
+    border-color: $green-500 !important;
+  }
+
+  &:hover {
+    background-color: $green-400 !important;
+    border-color: $green-400 !important;
+  }
+}
+
+.btn-danger {
+  color: $text-100 !important;
+  border-color: $red-500 !important;
+  background: $red-500 !important;
+
+  &:hover {
+    background-color: $red-400 !important;
+    border-color: $red-400 !important;
+  }
+}
+
+.btn-outline-danger {
+  color: $red-500 !important;
+  border-color: $red-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $red-500 !important;
+    border-color: $red-500 !important;
+  }
+
+  &:hover {
+    background-color: $red-400 !important;
+    border-color: $red-400 !important;
+  }
+}
+
+.btn-secondary {
+  color: $text-100 !important;
+  border-color: $grey-900 !important;
+  background: $grey-900 !important;
+
+  &:hover {
+    background-color: $grey-800 !important;
+    border-color: $grey-800 !important;
+  }
+}
+
+.btn-outline-secondary {
+  color: $grey-900 !important;
+  border-color: $grey-900 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $grey-900 !important;
+    border-color: $grey-900 !important;
+  }
+
+  &:hover {
+    background-color: $grey-800 !important;
+    border-color: $grey-800 !important;
+  }
+}
+
+.btn-control {
+  &.btn-lock-peer.lock {
+    color: $red-500 !important;
+    &:hover {
+      color: $red-400 !important;
+    }
+  }
+
+  &:hover {
+    background-color: transparent !important;
+
+    &.btn-outline-primary {
+      color: $blue-400 !important;
+    }
+
+    &.btn-outline-success {
+      color: $green-400 !important;
+    }
+
+    &.btn-outline-danger {
+      color: $red-400 !important;
+    }
+
+    &.btn-outline-secondary {
+      color: $grey-800 !important;
+    }
+  }
+}
+
+.form-control {
+  background-color: $grey-500 !important;
+  border-color: transparent !important;
+  color: $text-200 !important;
+}
+
+.form-control:disabled{
+  color: $grey-1000 !important;
+}
+
+.card .form-control {
+  background: $grey-500 !important;
+}
+
+.conf_card{
+  a{
+    color: $blue-500;
+  }
+  &:hover{
+    border-color: $blue-500;
+  }
+}
+
+.sidebar .nav-link,
+.bottomNavContainer .nav-link {
+  color: $text-200;
+
+  &:hover {
+    background: $grey-200;
+  }
+}
+
+nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,
+.navbar-brand,
+.bg-dark {
+  background-color: $grey-100 !important;
+  background: $grey-100 !important;
+}
+
+.card {
+  background: $grey-400;
+}
+
+.text-muted {
+  color: $text-500 !important;
+}
+
+.text-danger {
+  color: $red-500 !important;
+}
+
+.text-success {
+  color: $green-500 !important;
+}
+
+.text-primary {
+  color: $blue-500 !important;
+}
+
+.text-info {
+  color: $cyan-500 !important;
+}
+
+a.text-success:focus,
+a.text-success:hover {
+  color: $green-400 !important;
+}
+
+a.text-danger:focus,
+a.text-danger:hover {
+  color: $red-400 !important;
+}
+
+a.text-info:focus,
+a.text-info:hover {
+  color: $cyan-400 !important;
+}
+
+.dot-running {
+  background-color: $green-500 !important;
+}
+
+.card-running {
+  border-color: $green-500;
+}
+
+.toggle--switch:checked + .toggleLabel::before {
+  background-color: $blue-500 !important;
+}
+.toggle--switch:checked + .toggleLabel {
+  background-color: mix($blue-500, #000f) !important;
+  border-color: $blue-500 !important;
+}
+
+.sidebar .nav-link.active,
+.bottomNavContainer .nav-link.active {
+  color: $blue-500 !important;
+}
+
+hr {
+  border-color: $grey-600;
+}
+
+.modal-content {
+  background-color: $grey-200;
+}
+
+.modal-header,
+.modal-footer {
+  background-color: $grey-100;
+  border-color: $grey-600;
+}
+
+code {
+  color: $magenta-500;
+}
+
+.close {
+  color: $text-200;
+  text-shadow: none;
+
+  &:hover {
+    color: $text-300;
+  }
+}
+
+.chartContainer.fullScreen {
+  background-color: $grey-200 !important;
+}
+
+.popover {
+  background-color: $grey-700 !important;
+  border: none !important;
+}
+
+.popover-body {
+  color: $text-200 !important;
+}
+
+div.toast {
+  background-color: $grey-900 !important;
+
+  div.toast-header {
+    background-color: $grey-700 !important;
+    color: $text-200 !important;
+    border-bottom-color: $grey-900 !important;
+  }
+
+  div.toast-body {
+    background-color: $grey-800 !important;
+    color: $text-200 !important;
+  }
+
+  div.toast-body.text-danger{
+    color: $red-500 !important;
+  }
+
+  div.toast-progressbar {
+    background-color: $blue-500 !important;
+  }
+
+  div.toast-progressbar.bg-danger {
+    background-color: $red-500 !important;
+  }
+}
+
+.bs-popover-auto[x-placement^="right"] > .arrow::after,
+.bs-popover-right > .arrow::after {
+  border-right-color: $grey-700 !important;
+}
+
+.btn-manage-group .setting_btn_menu {
+  background-color: $grey-500 !important;
+}
+
+.setting_btn_menu a:hover {
+  background-color: $grey-700 !important;
+}
+
+.table {
+  color: $text-200 !important;
+
+  th,
+  td {
+    border-color: $grey-700 !important;
+  }
+}
+
+
+.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-primary.focus, .btn-primary:focus{
+  box-shadow: 0 0 0 0.2rem rgb(144 153 255 / 29%) !important;
+}
+
+.bottomNav{
+  &{
+    background-color: $grey-400 !important;
+  }
+
+  .bottomNavButton{
+    &{
+      color: $text-400;
+    }
+  }
+
+  .bottomNavButton.active{
+    color: $blue-500 !important;
+  }
+
+  .subNav{
+    background-color: $grey-400 !important;
+  }
+  
+}
+
+.key:hover{
+  color: $blue-500;
+}
+
+

src/static/js/configurationTool.js

@@ -0,0 +1,929 @@
+let $body = $("body");
+let available_ips = [];
+let $add_peer = document.getElementById("save_peer");
+
+$("#configuration_delete").on("click", function(){
+    configurations.configurationDeleteModal().toggle();
+});
+
+function ajaxPostJSON(url, data, doneFunc){
+    $.ajax({
+        url: url,
+        method: "POST",
+        data: JSON.stringify(data),
+        headers: {"Content-Type": "application/json"}
+    }).done(function (res) { 
+        doneFunc(res);
+    });
+}
+
+function ajaxGetJSON(url, doneFunc){
+    $.ajax({
+        url: url,
+        headers: {"Content-Type": "application/json"}
+    }).done(function (res) { 
+        doneFunc(res);
+    });
+}
+
+$("#sure_delete_configuration").on("click", function () {
+    configurations.removeConfigurationInterval();
+    let ele = $(this)
+    ele.attr("disabled", "disabled");
+    function done(res){
+        if (res.status){
+            $('#configuration_delete_modal button[data-dismiss="modal"]').remove();
+            ele.text("Delete Successful! Redirecting in 5 seconds.");
+            setTimeout(function(){
+                window.location.replace('/');
+            }, 5000)
+        }else{
+            $("#remove_configuration_alert").removeClass("d-none").text(res.reason);
+        }
+    }
+    ajaxPostJSON("/api/deleteConfiguration", {"name": configurations.getConfigurationName()}, done);
+});
+
+function loadPeerDataUsageChartDone(res){
+    if (res.status === true){
+        let t = new Date();
+        let string = `${t.getDate()}/${t.getMonth()}/${t.getFullYear()} ${t.getHours() > 10 ? t.getHours():`0${t.getHours()}`}:${t.getMinutes() > 10 ? t.getMinutes():`0${t.getMinutes()}`}:${t.getSeconds() > 10 ? t.getSeconds():`0${t.getSeconds()}`}`;
+        $(".peerDataUsageUpdateTime").html(`Updated on: ${string}`);
+
+        configurations.peerDataUsageChartObj().data.labels = [];
+        configurations.peerDataUsageChartObj().data.datasets[0].data = [];
+        configurations.peerDataUsageChartObj().data.datasets[1].data = [];
+        console.log(res);
+        let data = res.data;
+        if (data.length > 0){
+            configurations.peerDataUsageChartObj().data.labels.push(data[data.length - 1].time);
+            configurations.peerDataUsageChartObj().data.datasets[0].data.push(0);
+            configurations.peerDataUsageChartObj().data.datasets[1].data.push(0);
+        
+            configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[data.length - 1].total_sent
+            configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[data.length - 1].total_receive
+        
+        
+            for(let i = data.length - 2; i >= 0; i--){
+                let sent = data[i].total_sent - configurations.peerDataUsageChartObj().data.datasets[0].lastData;
+                let receive = data[i].total_receive - configurations.peerDataUsageChartObj().data.datasets[1].lastData;
+                configurations.peerDataUsageChartObj().data.datasets[0].data.push(sent);
+                configurations.peerDataUsageChartObj().data.datasets[1].data.push(receive);
+                configurations.peerDataUsageChartObj().data.labels.push(data[i].time);
+                configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[i].total_sent;
+                configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[i].total_receive;
+            }
+            configurations.peerDataUsageChartObj().update();
+        }
+    }
+}
+
+let peerDataUsageInterval;
+
+$body.on("click", ".btn-data-usage-peer", function(){
+    configurations.peerDataUsageChartObj().data.peerID = $(this).data("peer-id");
+    configurations.peerDataUsageModal().toggle();
+    peerDataUsageInterval = setInterval(function(){
+        ajaxPostJSON("/api/getPeerDataUsage", {"config": configurations.getConfigurationName(), "peerID":  configurations.peerDataUsageChartObj().data.peerID, "interval": window.localStorage.getItem("peerTimePeriod")}, loadPeerDataUsageChartDone); 
+    }, 30000);
+    ajaxPostJSON("/api/getPeerDataUsage", {"config": configurations.getConfigurationName(), "peerID":  configurations.peerDataUsageChartObj().data.peerID, "interval": window.localStorage.getItem("peerTimePeriod")}, loadPeerDataUsageChartDone); 
+});
+
+$('#peerDataUsage').on('shown.bs.modal', function() {
+    configurations.peerDataUsageChartObj().resize();
+}).on('hidden.bs.modal', function() {
+    clearInterval(peerDataUsageInterval);
+    configurations.peerDataUsageChartObj().data.peerID = "";
+    configurations.peerDataUsageChartObj().data.labels = [];
+    configurations.peerDataUsageChartObj().data.datasets[0].data = [];
+    configurations.peerDataUsageChartObj().data.datasets[1].data = [];
+    configurations.peerDataUsageChartObj().update();
+});
+
+$(".switchTimePeriod").on("click", function(){
+    let peerTimePeriod = window.localStorage.peerTimePeriod;
+    $(".switchTimePeriod").removeClass("active");
+    $(this).addClass("active");
+    if ($(this).data('time') !== peerTimePeriod){
+        ajaxPostJSON("/api/getPeerDataUsage", {"config": configurations.getConfigurationName(), "peerID": configurations.peerDataUsageChartObj().data.peerID, "interval": $(this).data('time')}, loadPeerDataUsageChartDone); 
+        window.localStorage.peerTimePeriod = $(this).data('time');
+    }
+    
+})
+
+
+/**
+ * Edit Configuration
+ */
+
+$editConfiguration = $("#edit_configuration");
+$editConfiguration.on("click", function(){
+    configurations.getConfigurationDetails();
+    configurations.configurationEditModal().toggle();
+});
+
+$saveConfiguration = $("#editConfigurationBtn");
+$saveConfiguration.on("click", function(){
+    $(this).html("Saving...")
+    $(this).siblings().hide();
+    $(this).attr("disabled", "disabled");
+
+    let data = {
+        "configurationName": configurations.getConfigurationName(),
+        "ListenPort": $("#editConfigurationListenPort").val(),
+        "PostUp": $("#editConfigurationPostUp").val(),
+        "PostDown": $("#editConfigurationPostDown").val(),
+        "PreDown": $("#editConfigurationPreDown").val(),
+        "PreUp": $("#editConfigurationPreUp").val(),
+    }
+    function done(res){
+        console.log(res);
+        $saveConfiguration.removeAttr("disabled");
+        if (res.status){
+            configurations.configurationEditModal().toggle();
+            configurations.loadPeers("");
+            showToast("Configuration saved");
+        }else{
+            showToast(res.reason);
+        }
+        $saveConfiguration.html("Save");
+        $saveConfiguration.siblings().show();
+    }
+    ajaxPostJSON("/api/saveConfiguration", data, done);
+})
+
+/**
+ * ==========
+ * Add peers
+ * ==========
+ */
+
+/**
+ * Toggle add peers modal when add button clicked
+ */
+document.querySelector(".add_btn").addEventListener("click", () => {
+    configurations.addModal().toggle();
+});
+
+/**
+ * When configuration switch got click
+ */
+$(".toggle--switch").on("change", function(){
+    console.log('lol')
+    $(this).addClass("waiting").attr("disabled", "disabled");
+    let id = configurations.getConfigurationName();
+    let status = $(this).prop("checked");
+    let ele = $(this);
+    $.ajax({
+        url: `/switch/${id}`
+    }).done(function(res){
+        if (res.status){
+            if (status){
+                showToast(`${id} is running.`)
+            }else{
+                showToast(`${id} is stopped.`)
+            }
+        }else{
+            if (status){
+                ele.prop("checked", false)
+            }else{
+                ele.prop("checked", true)
+            }
+            showToast(res.reason, true);
+            $(".index-alert").removeClass("d-none").text(`Configuration toggle failed. Please check the following error message:\n${res.message}`);
+        }
+        ele.removeClass("waiting");
+        ele.removeAttr("disabled");
+        configurations.loadPeers($('#search_peer_textbox').val())
+    });
+
+});
+
+/**
+ * Generate Public key when private got change
+ */
+document.querySelector("#private_key").addEventListener("change", (event) => {
+    let publicKey = document.querySelector("#public_key");
+    if (event.target.value.length === 44) {
+        publicKey.value = window.wireguard.generatePublicKey(event.target.value);
+        publicKey.setAttribute("disabled", "disabled");
+    } else {
+        publicKey.attributes.removeNamedItem("disabled");
+        publicKey.value = "";
+    }
+});
+
+/**
+ * Handle when add modal is show and hide
+ */
+$('#add_modal').on('show.bs.modal', function() {
+    configurations.generateKeyPair();
+    configurations.getAvailableIps();
+}).on('hide.bs.modal', function() {
+    $("#allowed_ips_indicator").html('');
+});
+
+/**
+ * Handle when user clicked the regenerate button
+ */
+$("#re_generate_key").on("click", function() {
+    $("#public_key").attr("disabled", "disabled");
+    $("#re_generate_key i").addClass("rotating");
+    configurations.generateKeyPair();
+});
+
+/**
+ * Handle when user is editing in allowed ips textbox
+ */
+$("#allowed_ips").on("keyup", function() {
+    let s = configurations.cleanIp($(this).val());
+    s = s.split(",");
+    if (available_ips.includes(s[s.length - 1])) {
+        $("#allowed_ips_indicator").removeClass().addClass("text-success")
+            .html('<i class="bi bi-check-circle-fill"></i>');
+    } else {
+        $("#allowed_ips_indicator").removeClass().addClass("text-warning")
+            .html('<i class="bi bi-exclamation-circle-fill"></i>');
+    }
+});
+
+/**
+ * Change peer name when user typing in peer name textbox
+ */
+$("#peer_name_textbox").on("keyup", function() {
+    $(".peer_name").html($(this).val());
+});
+
+/**
+ * When Add Peer button got clicked
+ */
+$add_peer.addEventListener("click", function() {
+    let $bulk_add = $("#bulk_add");
+    if ($bulk_add.prop("checked")) {
+        if (!$("#new_add_amount").hasClass("is-invalid")) {
+            configurations.addPeersByBulk();
+        }
+    } else {
+        let $public_key = $("#public_key");
+        let $private_key = $("#private_key");
+        let $allowed_ips = $("#allowed_ips");
+        $allowed_ips.val(configurations.cleanIp($allowed_ips.val()));
+        let $new_add_DNS = $("#new_add_DNS");
+        $new_add_DNS.val(configurations.cleanIp($new_add_DNS.val()));
+        let $new_add_endpoint_allowed_ip = $("#new_add_endpoint_allowed_ip");
+        $new_add_endpoint_allowed_ip.val(configurations.cleanIp($new_add_endpoint_allowed_ip.val()));
+        let $new_add_name = $("#new_add_name");
+        let $new_add_MTU = $("#new_add_MTU");
+        let $new_add_keep_alive = $("#new_add_keep_alive");
+        let $enable_preshare_key = $("#enable_preshare_key");
+        $add_peer.setAttribute("disabled", "disabled");
+        $add_peer.innerHTML = "Adding...";
+        if ($allowed_ips.val() !== "" && $public_key.val() !== "" && $new_add_DNS.val() !== "" && $new_add_endpoint_allowed_ip.val() !== "") {
+            let conf = configurations.getConfigurationName();
+            let data_list = [$private_key, $allowed_ips, $new_add_name, $new_add_DNS, $new_add_endpoint_allowed_ip, $new_add_MTU, $new_add_keep_alive];
+            data_list.forEach((ele) => ele.attr("disabled", "disabled"));
+            $.ajax({
+                method: "POST",
+                url: "/add_peer/" + conf,
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                data: JSON.stringify({
+                    "private_key": $private_key.val(),
+                    "public_key": $public_key.val(),
+                    "allowed_ips": $allowed_ips.val(),
+                    "name": $new_add_name.val(),
+                    "DNS": $new_add_DNS.val(),
+                    "endpoint_allowed_ip": $new_add_endpoint_allowed_ip.val(),
+                    "MTU": $new_add_MTU.val(),
+                    "keep_alive": $new_add_keep_alive.val(),
+                    "enable_preshared_key": $enable_preshare_key.prop("checked"),
+                    "preshared_key": $enable_preshare_key.val()
+                }),
+                success: function(response) {
+                    if (response !== "true") {
+                        $("#add_peer_alert").html(response).removeClass("d-none");
+                        data_list.forEach((ele) => ele.removeAttr("disabled"));
+                        $add_peer.removeAttribute("disabled");
+                        $add_peer.innerHTML = "Save";
+                    } else {
+                        configurations.loadPeers("");
+                        data_list.forEach((ele) => ele.removeAttr("disabled"));
+                        $("#add_peer_form").trigger("reset");
+                        $add_peer.removeAttribute("disabled");
+                        $add_peer.innerHTML = "Save";
+                        showToast("Add peer successful!");
+                        configurations.addModal().toggle();
+                    }
+                }
+            });
+        } else {
+            $("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");
+            $add_peer.removeAttribute("disabled");
+            $add_peer.innerHTML = "Add";
+        }
+    }
+});
+
+/**
+ *  Handle when user is typing the amount of peers they want to add, and will check if the amount is less than 1 or
+ *  is larger than the amount of available ips
+ */
+$("#new_add_amount").on("keyup", function() {
+    let $bulk_amount_validation = $("#bulk_amount_validation");
+    // $(this).removeClass("is-valid").addClass("is-invalid");
+    if ($(this).val().length > 0) {
+        if (isNaN($(this).val())) {
+            $(this).removeClass("is-valid").addClass("is-invalid");
+            $bulk_amount_validation.html("Please enter a valid integer");
+        } else if ($(this).val() > available_ips.length) {
+            $(this).removeClass("is-valid").addClass("is-invalid");
+            $bulk_amount_validation.html(`Cannot create more than ${available_ips.length} peers.`);
+        } else if ($(this).val() < 1) {
+            $(this).removeClass("is-valid").addClass("is-invalid");
+            $bulk_amount_validation.html("Please enter at least 1 or more.");
+        } else {
+            $(this).removeClass("is-invalid").addClass("is-valid");
+        }
+    } else {
+        $(this).removeClass("is-invalid").removeClass("is-valid");
+    }
+});
+
+/**
+ * Handle when user toggled add peers by bulk
+ */
+$("#bulk_add").on("change", function() {
+    let hide = $(".non-bulk");
+    let amount = $("#new_add_amount");
+    if ($(this).prop("checked") === true) {
+        for (let i = 0; i < hide.length; i++) {
+            $(hide[i]).attr("disabled", "disabled");
+        }
+        amount.removeAttr("disabled");
+    } else {
+        for (let i = 0; i < hide.length; i++) {
+            if ($(hide[i]).attr('id') !== "public_key") {
+                $(hide[i]).removeAttr("disabled");
+            }
+        }
+        amount.attr("disabled", "disabled");
+    }
+});
+
+
+/**
+ * =======================
+ * Available IP Related
+ * =======================
+ */
+
+/**
+ * Handle when available ip modal show and hide
+ */
+$("#available_ip_modal").on("show.bs.modal", () => {
+    document.querySelector('#add_modal').classList.add("ip_modal_open");
+}).on("hidden.bs.modal", () => {
+    document.querySelector('#add_modal').classList.remove("ip_modal_open");
+    let ips = [];
+    let $selected_ip_list = document.querySelector("#selected_ip_list");
+    for (let i = 0; i < $selected_ip_list.childElementCount; i++) {
+        ips.push($selected_ip_list.children[i].dataset.ip);
+    }
+    ips.forEach((ele) => configurations.triggerIp(ele));
+});
+
+/**
+ * When IP Badge got click
+ */
+$body.on("click", ".available-ip-badge", function() {
+    $(".available-ip-item[data-ip='" + $(this).data("ip") + "']").removeClass("active");
+    $(this).remove();
+});
+
+/**
+ * When available ip item got click
+ */
+$body.on("click", ".available-ip-item", function() {
+    configurations.triggerIp($(this).data("ip"));
+});
+
+/**
+ * When search IP button got clicked
+ */
+$("#search_available_ip").on("click", function() {
+    configurations.ipModal().toggle();
+    let $allowed_ips = document.querySelector("#allowed_ips");
+    if ($allowed_ips.value.length > 0) {
+        let s = $allowed_ips.value.split(",");
+        for (let i = 0; i < s.length; i++) {
+            s[i] = s[i].trim();
+            configurations.triggerIp(s[i]);
+        }
+    }
+}).tooltip();
+
+/**
+ * When confirm IP is clicked
+ */
+$("#confirm_ip").on("click", () => {
+    configurations.ipModal().toggle();
+    let ips = [];
+    let $selected_ip_list = $("#selected_ip_list");
+    $selected_ip_list.children().each(function() {
+        ips.push($(this).data("ip"));
+    });
+    $("#allowed_ips").val(ips.join(", "));
+    ips.forEach((ele) => configurations.triggerIp(ele));
+});
+
+/**
+ * =======
+ * QR Code
+ * =======
+ */
+
+/**
+ * When the QR-code button got clicked on each peer
+ */
+$body.on("click", ".btn-qrcode-peer", function() {
+    let src = $(this).data('imgsrc');
+    $.ajax({
+        "url": src,
+        "method": "GET"
+    }).done(function(res) {
+        $("#qrcode_img").attr('src', res);
+        configurations.qrcodeModal().toggle();
+    });
+});
+
+/**
+ * ===========
+ * Delete Peer
+ * ===========
+ */
+
+/**
+ * When the delete button got clicked on each peer
+ */
+$body.on("click", ".btn-delete-peer", function() {
+    let peer_id = $(this).data('peer-id')
+    $("#delete_peer").data("peer-id", peer_id);
+    configurations.deleteModal().toggle();
+});
+
+$body.on("click", ".btn-lock-peer", function() {
+    configurations.toggleAccess($(this).data('peer-id'), configurations.getConfigurationName());
+    if ($(this).hasClass("lock")) {
+        console.log($(this).data("peer-name"))
+        showToast(`Enabled ${$(this).children().data("peer-name")}`)
+        $(this).removeClass("lock")
+        $(this).children().tooltip('hide').attr('data-original-title', 'Peer enabled. Click to disable peer.').tooltip('show');
+    } else {
+        // Currently unlocked
+        showToast(`Disabled ${$(this).children().data("peer-name")}`)
+        $(this).addClass("lock");
+        $(this).children().tooltip('hide').attr('data-original-title', 'Peer disabled. Click to enable peer.').tooltip('show');
+    }
+});
+
+/**
+ * When the confirm delete button clicked
+ */
+$("#delete_peer").on("click", function() {
+    $(this).attr("disabled", "disabled");
+    $(this).html("Deleting...");
+    let config = configurations.getConfigurationName();
+    let peer_ids = [$(this).data("peer-id")];
+    configurations.deletePeers(config, peer_ids);
+});
+
+/**
+ * =============
+ * Peer Settings
+ * =============
+ */
+
+/**
+ * Handle when setting button got clicked for each peer
+ */
+$body.on("click", ".btn-setting-peer", function() {
+    // configurations.startProgressBar();
+    let peer_id = $(this).data("peer-id");
+    $("#save_peer_setting").attr("peer_id", peer_id);
+    $.ajax({
+        method: "POST",
+        url: "/get_peer_data/" + configurations.getConfigurationName(),
+        headers: {
+            "Content-Type": "application/json"
+        },
+        data: JSON.stringify({ "id": peer_id }),
+        success: function(response) {
+            let peer_name = ((response.name === "") ? "Untitled" : response.name);
+            $("#setting_modal .peer_name").html(peer_name);
+            $("#setting_modal #peer_name_textbox").val(response.name);
+            $("#setting_modal #peer_private_key_textbox").val(response.private_key);
+            $("#setting_modal #peer_DNS_textbox").val(response.DNS);
+            $("#setting_modal #peer_allowed_ip_textbox").val(response.allowed_ip);
+            $("#setting_modal #peer_endpoint_allowed_ips").val(response.endpoint_allowed_ip);
+            $("#setting_modal #peer_mtu").val(response.mtu);
+            $("#setting_modal #peer_keep_alive").val(response.keep_alive);
+            $("#setting_modal #peer_preshared_key_textbox").val(response.preshared_key);
+            configurations.settingModal().toggle();
+            configurations.endProgressBar();
+        }
+    });
+});
+
+/**
+ * Handle when setting modal is closing
+ */
+$('#setting_modal').on('hidden.bs.modal', function() {
+    $("#setting_peer_alert").addClass("d-none");
+});
+
+/**
+ * Handle when private key text box in setting modal got changed
+ */
+$("#peer_private_key_textbox").on("change", function() {
+    let $save_peer_setting = $("#save_peer_setting");
+    if ($(this).val().length > 0) {
+        $.ajax({
+            "url": "/check_key_match/" + configurations.getConfigurationName(),
+            "method": "POST",
+            "headers": { "Content-Type": "application/json" },
+            "data": JSON.stringify({
+                "private_key": $("#peer_private_key_textbox").val(),
+                "public_key": $save_peer_setting.attr("peer_id")
+            })
+        }).done(function(res) {
+            if (res.status === "failed") {
+                $("#setting_peer_alert").html(res.status).removeClass("d-none");
+            } else {
+                $("#setting_peer_alert").addClass("d-none");
+            }
+        });
+    }
+});
+
+/**
+ * When save peer setting button got clicked
+ */
+$("#save_peer_setting").on("click", function() {
+    $(this).attr("disabled", "disabled");
+    $(this).html("Saving...");
+    let $peer_DNS_textbox = $("#peer_DNS_textbox");
+    let $peer_allowed_ip_textbox = $("#peer_allowed_ip_textbox");
+    let $peer_endpoint_allowed_ips = $("#peer_endpoint_allowed_ips");
+    let $peer_name_textbox = $("#peer_name_textbox");
+    let $peer_private_key_textbox = $("#peer_private_key_textbox");
+    let $peer_preshared_key_textbox = $("#peer_preshared_key_textbox");
+    let $peer_mtu = $("#peer_mtu");
+    let $peer_keep_alive = $("#peer_keep_alive");
+
+    if ($peer_DNS_textbox.val() !== "" &&
+        $peer_allowed_ip_textbox.val() !== "" && $peer_endpoint_allowed_ips.val() !== "") {
+        let peer_id = $(this).attr("peer_id");
+        let conf_id = $(this).attr("conf_id");
+        let data_list = [$peer_name_textbox, $peer_DNS_textbox, $peer_private_key_textbox, $peer_preshared_key_textbox, $peer_allowed_ip_textbox, $peer_endpoint_allowed_ips, $peer_mtu, $peer_keep_alive];
+        data_list.forEach((ele) => ele.attr("disabled", "disabled"));
+        $.ajax({
+            method: "POST",
+            url: "/save_peer_setting/" + conf_id,
+            headers: {
+                "Content-Type": "application/json"
+            },
+            data: JSON.stringify({
+                id: peer_id,
+                name: $peer_name_textbox.val(),
+                DNS: $peer_DNS_textbox.val(),
+                private_key: $peer_private_key_textbox.val(),
+                allowed_ip: $peer_allowed_ip_textbox.val(),
+                endpoint_allowed_ip: $peer_endpoint_allowed_ips.val(),
+                MTU: $peer_mtu.val(),
+                keep_alive: $peer_keep_alive.val(),
+                preshared_key: $peer_preshared_key_textbox.val()
+            }),
+            success: function(response) {
+                if (response.status === "failed") {
+                    $("#setting_peer_alert").html(response.msg).removeClass("d-none");
+                } else {
+                    configurations.settingModal().toggle();
+                    configurations.loadPeers($('#search_peer_textbox').val());
+                    $('#alertToast').toast('show');
+                    $('#alertToast .toast-body').html("Peer Saved!");
+                }
+                $("#save_peer_setting").removeAttr("disabled").html("Save");
+                data_list.forEach((ele) => ele.removeAttr("disabled"));
+            }
+        });
+    } else {
+        $("#setting_peer_alert").html("Please fill in all required box.").removeClass("d-none");
+        $("#save_peer_setting").removeAttr("disabled").html("Save");
+    }
+});
+
+/**
+ * Toggle show or hide for the private key textbox in the setting modal
+ */
+$(".peer_private_key_textbox_switch").on("click", function() {
+    let $peer_private_key_textbox = $("#peer_private_key_textbox");
+    let mode = (($peer_private_key_textbox.attr('type') === 'password') ? "text" : "password");
+    let icon = (($peer_private_key_textbox.attr('type') === 'password') ? "bi bi-eye-slash-fill" : "bi bi-eye-fill");
+    $peer_private_key_textbox.attr('type', mode);
+    $(".peer_private_key_textbox_switch i").removeClass().addClass(icon);
+});
+
+/**
+ * ===========
+ * Search Peer
+ * ===========
+ */
+
+let typingTimer; // Timeout object
+let doneTypingInterval = 200; // Timeout interval
+
+/**
+ * Handle when the user keyup and keydown on the search textbox
+ */
+$('#search_peer_textbox').on('keyup', function() {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(() => {
+        configurations.loadPeers($(this).val());
+    }, doneTypingInterval);
+}).on('keydown', function() {
+    clearTimeout(typingTimer);
+});
+
+/**
+ * Manage Peers
+ */
+
+/**
+ * Handle when sort peers changed
+ */
+$body.on("change", "#sort_by_dropdown", function() {
+    $.ajax({
+        method: "POST",
+        data: JSON.stringify({ 'sort': $("#sort_by_dropdown option:selected").val() }),
+        headers: { "Content-Type": "application/json" },
+        url: "/update_dashboard_sort",
+        success: function() {
+            configurations.loadPeers($('#search_peer_textbox').val());
+        }
+    });
+});
+
+/**
+ * Handle copy public key
+ */
+$body.on("mouseenter", ".key", function() {
+    let label = $(this).parent().siblings().children()[1];
+    label.style.opacity = "100";
+}).on("mouseout", ".key", function() {
+    let label = $(this).parent().siblings().children()[1];
+    label.style.opacity = "0";
+    setTimeout(function() {
+        label.innerHTML = "CLICK TO COPY";
+    }, 200);
+}).on("click", ".key", function() {
+    let label = $(this).parent().siblings().children()[1];
+    configurations.copyToClipboard($(this));
+    label.innerHTML = "COPIED!";
+});
+
+/**
+ * Handle when interval button got clicked
+ */
+$body.on("click", ".update_interval", function() {
+    $(".interval-btn-group button").removeClass("active");
+    let _new = $(this);
+    _new.addClass("active");
+    let interval = $(this).data("refresh-interval");
+    if ([5000, 10000, 30000, 60000].includes(interval)) {
+        configurations.updateRefreshInterval(interval);
+    }
+
+
+
+    // $.ajax({
+    //     method:"POST",
+    //     data: "interval="+$(this).data("refresh-interval"),
+    //     url: "/update_dashboard_refresh_interval",
+    //     success: function (res){
+    //         configurations.updateRefreshInterval(res, interval);
+    //     }
+    // });
+});
+
+/**
+ * Handle when refresh button got clicked
+ */
+$body.on("click", ".refresh", function() {
+    configurations.loadPeers($('#search_peer_textbox').val());
+});
+
+/**
+ * Handle when display mode button got clicked
+ */
+$body.on("click", ".display_mode", function() {
+    $(".display-btn-group button").removeClass("active");
+    $(this).addClass("active");
+    window.localStorage.setItem("displayMode", $(this).data("display-mode"));
+    configurations.updateDisplayMode();
+    if ($(this).data("display-mode") === "list") {
+        Array($(".peer_list").children()).forEach(function(child) {
+            $(child).removeClass().addClass("col-12");
+        });
+        showToast("Displaying as List");
+    } else {
+        Array($(".peer_list").children()).forEach(function(child) {
+            $(child).removeClass().addClass("col-sm-6 col-lg-4");
+        });
+        showToast("Displaying as Grids");
+    }
+});
+
+
+/**
+ * =================
+ * Configuration Menu
+ * =================
+ */
+let $setting_btn_menu = $(".setting_btn_menu");
+$setting_btn_menu.css("top", ($setting_btn_menu.height() + 54) * (-1));
+let $setting_btn = $(".setting_btn");
+
+/**
+ * When the menu button got clicked
+ */
+$setting_btn.on("click", function() {
+    if ($setting_btn_menu.hasClass("show")) {
+        $setting_btn_menu.removeClass("showing");
+        setTimeout(function() {
+            $setting_btn_menu.removeClass("show");
+        }, 201);
+    } else {
+        $setting_btn_menu.addClass("show");
+        setTimeout(function() {
+            $setting_btn_menu.addClass("showing");
+        }, 10);
+    }
+});
+
+/**
+ * Whenever the user clicked, if it is outside the menu and the menu is opened, hide the menu
+ */
+$("html").on("click", function(r) {
+    if (document.querySelector(".setting_btn") !== r.target) {
+        if (!document.querySelector(".setting_btn").contains(r.target)) {
+            if (!document.querySelector(".setting_btn_menu").contains(r.target)) {
+                $setting_btn_menu.removeClass("showing");
+                setTimeout(function() {
+                    $setting_btn_menu.removeClass("show");
+                }, 310);
+            }
+        }
+    }
+});
+
+
+/**
+ * ====================
+ * Delete Peers by Bulk
+ * ====================
+ */
+
+/**
+ * When delete peers by bulk clicked
+ */
+$("#delete_peers_by_bulk_btn").on("click", () => {
+    let $delete_bulk_modal_list = $("#delete_bulk_modal .list-group");
+    $delete_bulk_modal_list.html('');
+    peers.forEach((peer) => {
+        let name;
+        if (peer.name === "") { name = "Untitled Peer"; } else { name = peer.name; }
+        $delete_bulk_modal_list.append('<a class="list-group-item list-group-item-action delete-bulk-peer-item" style="cursor: pointer" data-id="' +
+            peer.id + '" data-name="' + name + '">' + name + '<br><code>' + peer.id + '</code></a>');
+    });
+    configurations.deleteBulkModal().toggle();
+});
+
+/**
+ * When the item or tag of delete peers by bulk got clicked
+ */
+$body.on("click", ".delete-bulk-peer-item", function() {
+    configurations.toggleDeleteByBulkIP($(this));
+}).on("click", ".delete-peer-bulk-badge", function() {
+    configurations.toggleDeleteByBulkIP($(".delete-bulk-peer-item[data-id='" + $(this).data("id") + "']"));
+});
+
+let $selected_peer_list = document.getElementById("selected_peer_list");
+
+/**
+ * The change observer to observe when user choose 1 or more peers to delete
+ * @type {MutationObserver}
+ */
+let changeObserver = new MutationObserver(function() {
+    if ($selected_peer_list.hasChildNodes()) {
+        $("#confirm_delete_bulk_peers").removeAttr("disabled");
+    } else {
+        $("#confirm_delete_bulk_peers").attr("disabled", "disabled");
+    }
+});
+changeObserver.observe($selected_peer_list, {
+    attributes: true,
+    childList: true,
+    characterData: true
+});
+
+let confirm_delete_bulk_peers_interval;
+
+/**
+ * When the user clicked the delete button in the delete peers by bulk
+ */
+$("#confirm_delete_bulk_peers").on("click", function() {
+    let btn = $(this);
+    if (confirm_delete_bulk_peers_interval !== undefined) {
+        clearInterval(confirm_delete_bulk_peers_interval);
+        confirm_delete_bulk_peers_interval = undefined;
+        btn.html("Delete");
+    } else {
+        let timer = 5;
+        btn.html(`Deleting in ${timer} secs... Click to cancel`);
+        confirm_delete_bulk_peers_interval = setInterval(function() {
+            timer -= 1;
+            btn.html(`Deleting in ${timer} secs... Click to cancel`);
+            if (timer === 0) {
+                btn.html(`Deleting...`);
+                btn.attr("disabled", "disabled");
+                let ips = [];
+                $selected_peer_list.childNodes.forEach((ele) => ips.push(ele.dataset.id));
+                configurations.deletePeers(configurations.getConfigurationName(), ips);
+                clearInterval(confirm_delete_bulk_peers_interval);
+                confirm_delete_bulk_peers_interval = undefined;
+            }
+        }, 1000);
+    }
+});
+
+/**
+ * Select all peers to delete
+ */
+$("#select_all_delete_bulk_peers").on("click", function() {
+    $(".delete-bulk-peer-item").each(function() {
+        if (!$(this).hasClass("active")) {
+            configurations.toggleDeleteByBulkIP($(this));
+        }
+    });
+});
+
+/**
+ * When delete peers by bulk window is hidden
+ */
+$(configurations.deleteBulkModal()._element).on("hidden.bs.modal", function() {
+    $(".delete-bulk-peer-item").each(function() {
+        if ($(this).hasClass("active")) {
+            configurations.toggleDeleteByBulkIP($(this));
+        }
+    });
+});
+
+/**
+ * ==============
+ * Download Peers
+ * ==============
+ */
+
+/**
+ * When the download peers button got clicked
+ */
+$body.on("click", ".btn-download-peer", function(e) {
+    e.preventDefault();
+    let link = $(this).attr("href");
+    $.ajax({
+        "url": link,
+        "method": "GET",
+        success: function(res) {
+            configurations.downloadOneConfig(res);
+        }
+    });
+});
+
+/**
+ * When the download all peers got clicked
+ */
+$("#download_all_peers").on("click", function() {
+    $.ajax({
+        "url": `/download_all/${configurations.getConfigurationName()}`,
+        "method": "GET",
+        success: function(res) {
+            if (res.peers.length > 0) {
+                window.wireguard.generateZipFiles(res);
+                showToast("Peers' zip file download successful!");
+            } else {
+                showToast("Oops! There are no peer can be download.");
+            }
+        }
+    });
+});

src/static/js/index.js

@@ -0,0 +1,243 @@
+let emptyInputFeedback = "Can't leave empty";
+$('[data-toggle="tooltip"]').tooltip()
+let $add_configuration = $("#add_configuration");
+
+let addConfigurationModal = $("#addConfigurationModal");
+$(".bottomNavHome").addClass("active");
+
+
+addConfigurationModal.modal({
+    keyboard: false,
+    backdrop: 'static',
+    show: false
+});
+
+addConfigurationModal.on("hidden.bs.modal", function(){
+    $("#add_configuration_form").trigger("reset");
+    $("#add_configuration_form input").removeClass("is-valid").removeClass("is-invalid");
+    $(".addConfigurationAvailableIPs").text("N/A");
+});
+
+$(".toggle--switch").on("change", function(){
+    $(this).addClass("waiting").attr("disabled", "disabled");
+    let id = $(this).data("conf-id");
+    let status = $(this).prop("checked");
+    let ele = $(this);
+    let label = $(this).siblings("label");
+    $.ajax({
+        url: `/switch/${id}`
+    }).done(function(res){
+        let dot = $(`div[data-conf-id="${id}"] .dot`);
+        if (res.status){
+            if (status){
+                dot.removeClass("dot-stopped").addClass("dot-running");
+                dot.siblings().text("Running");
+                showToast(`${id} is running.`);
+            }else{
+                dot.removeClass("dot-running").addClass("dot-stopped");
+                showToast(`${id} is stopped.`);
+            }
+        }else{
+            ele.parents().children(".card-message").html(`<pre class="index-alert">Configuration toggle failed. Please check the following error message:<br><code>${res.message}</code></pre>`)
+            showToast(`${id} toggled failed.`, true);
+            if (status){
+                ele.prop("checked", false)
+            }else{
+                ele.prop("checked", true)
+            }
+        }
+        ele.removeClass("waiting").removeAttr("disabled");
+    })
+});
+
+$(".sb-home-url").addClass("active");
+
+$(".card-body").on("click", function(handle){
+    if ($(handle.target).attr("class") !== "toggleLabel" && $(handle.target).attr("class") !== "toggle--switch") {
+        let c = $(".card");
+        for (let i of c){
+            if (i != $(this).parent()[0]){
+                $(i).css("transition", "ease-in-out 0.3s").css("opacity", "0.5")
+            }
+        }
+        
+
+
+        window.open($(this).find("a").attr("href"), "_self");
+    }
+});
+
+function genKeyPair(){
+    let keyPair = window.wireguard.generateKeypair(); 
+    $("#addConfigurationPrivateKey").val(keyPair.privateKey).data("checked", true);
+}
+
+$("#reGeneratePrivateKey").on("click", function() {
+    genKeyPair();
+});
+
+$("#toggleAddConfiguration").on("click", function(){
+    addConfigurationModal.modal('toggle');
+    genKeyPair()
+}); 
+
+$("#addConfigurationPrivateKey").on("change", function() {
+    $privateKey = $(this);
+    $privateKeyFeedback = $("#addConfigurationPrivateKeyFeedback");
+    if ($privateKey.val().length != 44){
+        invalidInput($privateKey, $privateKeyFeedback, "Invalid length");
+    }else{
+        validInput($privateKey);
+    }
+});
+
+function ajaxPostJSON(url, data, doneFunc){
+    $.ajax({
+        url: url,
+        method: "POST",
+        data: JSON.stringify(data),
+        headers: {"Content-Type": "application/json"}
+    }).done(function (res) { 
+        doneFunc(res);
+    });
+}
+
+function validInput(input){
+    input.removeClass("is-invalid").addClass("is-valid").removeAttr("disabled").data("checked", true);
+}
+function invalidInput(input, feedback, text){
+    input.removeClass("is-valid").addClass("is-invalid").removeAttr("disabled").data("checked", false);
+    feedback.addClass("invalid-feedback").text(text);
+}
+
+function checkPort($this){
+    let port = $this;
+    port.attr("disabled", "disabled");
+    let portFeedback = $("#addConfigurationListenPortFeedback");
+    if (port.val().length == 0){
+        invalidInput(port, portFeedback, emptyInputFeedback)
+    }else{
+        function done(res){
+            if(res.status){
+                validInput(port);
+            }else{
+                invalidInput(port, portFeedback, res.reason)
+            }
+        }
+        ajaxPostJSON('/api/addConfigurationPortCheck', {"port": port.val()}, done);
+    }
+}
+$("#addConfigurationListenPort").on("change", function(){
+    checkPort($(this));
+})
+
+function checkAddress($this){
+    let address = $this;
+    address.attr("disabled", "disabled");
+    let availableIPs = $(".addConfigurationAvailableIPs");
+    let addressFeedback = $("#addConfigurationAddressFeedback");
+    if (address.val().length == 0){
+        invalidInput(address, addressFeedback, emptyInputFeedback);
+        availableIPs.html(`N/A`);
+    }else{
+        function done(res){
+            if (res.status){
+                availableIPs.html(`<strong>${res.data}</strong>`);
+                validInput(address);
+            }else{
+                invalidInput(address, addressFeedback, res.reason);
+                availableIPs.html(`N/A`);
+            }
+        }
+        ajaxPostJSON("/api/addConfigurationAddressCheck", {"address": address.val()}, done)
+    }
+}
+$("#addConfigurationAddress").on("change", function(){
+    checkAddress($(this));
+});
+
+
+function checkName($this){
+    let name = $this;
+    let nameFeedback = $("#addConfigurationNameFeedback");
+    name.val(name.val().replace(/\s/g,'')).attr("disabled", "disabled");
+    if (name.val().length === 0){
+        invalidInput(name, nameFeedback, emptyInputFeedback)
+    }else{
+        function done(res){
+            if (res.status){
+                validInput(name);
+            }else{
+                invalidInput(name, nameFeedback, res.reason);
+            }
+        }
+        ajaxPostJSON("/api/addConfigurationNameCheck", {"name": name.val()}, done);
+    }
+}
+$("#addConfigurationName").on("change", function(){
+    checkName($(this));
+});
+
+
+
+
+
+$("#addConfigurationBtn").on("click", function(){
+    let btn = $(this);
+    let input = $("#add_configuration_form input");
+    let filled = true;
+    for (let i = 0; i < input.length; i++){
+        let $i = $(input[i]);
+        if ($i.attr("required") != undefined){
+            if ($i.val().length == 0 && $i.attr("name") !== "addConfigurationPrivateKey"){
+                invalidInput($i, $i.siblings(".input-feedback"), emptyInputFeedback);
+                filled = false;
+            }
+            if ($i.val().length != 44 && $i.attr("name") == "addConfigurationPrivateKey"){
+                invalidInput($i, $i.siblings(".input-feedback"), "Invalid length");
+                filled = false;
+            }
+            if (!$i.data("checked")){
+                filled = false;
+            }
+        }  
+    }
+    if (filled){
+        $("#addConfigurationModal .modal-footer .btn").hide();
+        $(".addConfigurationStatus").removeClass("d-none");
+        let data = {};
+        let q = [];
+        for (let i = 0; i < input.length; i++){
+            let $i = $(input[i]);
+            data[$i.attr("name")] = $i.val();
+            q.push($i.attr("name"));
+        }
+        let done = (res) => {
+            let name = res.data;
+            $(".addConfigurationAddStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} added successfully.`);
+            if (res.status){
+                setTimeout(() => {
+                    $(".addConfigurationToggleStatus").removeClass("waiting").html(`<div class="spinner-border spinner-border-sm" role="status"></div> Toggle Configuration`)
+                    $.ajax({
+                        url: `/switch/${name}`
+                    }).done(function(res){
+                        if (res.status){
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> Toggle Successfully. Refresh in 5 seconds.`);
+                            setTimeout(() => {
+                                $(".addConfigurationToggleStatus").text("Refeshing...")
+                                location.reload();
+                            }, 5000);
+                        }else{
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`)
+                            $("#addCconfigurationAlertMessage").removeClass("d-none").html(`${name} toggle failed. Please check the following error message:<br>${res.message}`);
+                        }
+                    });
+                }, 500);
+            }else{
+                $(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} adding failed.`)
+                $("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason);
+            }
+        };
+        ajaxPostJSON("/api/addConfiguration", data, done);
+    }
+});

src/static/js/pwa.js

@@ -0,0 +1,38 @@
+let wrapper = $(".bottomNavWrapper");
+$(".bottomNavConfigs").on("click", function(){
+    let subNav = $(this).children(".subNav");
+    subNav.removeClass("animate__fadeOutDown").addClass("active animate__fadeInUp");
+    wrapper.fadeIn();
+});
+
+$(".bottomNavHome").on("click", function(){
+    window.location.replace('/')
+});
+
+$(".bottomNavSettings").on("click", function(){
+    window.location.replace('/settings')
+})
+
+
+function hideBottomSubNav(){
+    $(".bottomNavButton .subNav").removeClass("animate__fadeInUp").addClass("animate__fadeOutDown");
+    wrapper.fadeOut();
+    setTimeout(function(){
+        $(".bottomNavButton .subNav").removeClass("active");
+    },350)
+}
+
+wrapper.on("click", function(){
+    hideBottomSubNav();
+});
+
+
+$(".bottomNavMore").on("click", function(){
+    let subNav = $(this).children(".subNav");
+    subNav.removeClass("animate__fadeOutDown").addClass("active animate__fadeInUp");
+    wrapper.fadeIn();
+});
+
+// $(".bottomNavButton .nav-conf-link").on("click", function(){
+//     hideBottomSubNav();
+// })

src/static/js/settings.js

@@ -0,0 +1,60 @@
+$(".sb-settings-url").addClass("active")
+$(".confirm_modal").click(function () {
+    $(".app_new_ip").html($("#app_ip")[0].value)
+    $(".app_new_port").html($("#app_port")[0].value)
+})
+
+$(".confirm_restart").click(function () {
+    $(".cancel_restart").remove()
+    countdown = 7;
+    $.post('/update_app_ip_port', $('.update_app_ip_port').serialize())
+    url = $("#app_ip")[0].value + ":" + $("#app_port")[0].value;
+    $(".confirm_restart").attr("disabled", "disabled")
+    setInterval(function () {
+        if (countdown === 0) {
+            window.location.replace("http://" + url);
+        }
+        $(".confirm_restart").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+});
+
+$(".change_path").click(function () {
+    $(this).attr("disabled", "disabled");
+    countdown = 5;
+    setInterval(function () {
+        if (countdown === 0) {
+            location.reload()
+        }
+        $(".change_path").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+    $.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize())
+});
+
+$(".bottomNavSettings").addClass("active");
+
+
+$(".theme-switch-btn").on("click", function(){
+    if (!$(this).hasClass("active")){
+        let theme = $(this).data("theme");
+        $(".theme-switch-btn").removeClass("active");
+        $(this).addClass("active");
+        $.ajax({
+            method: "POST",
+            url: "/api/settings/setTheme",
+            headers: {"Content-Type": "application/json"},
+            data: JSON.stringify({"theme": theme})
+        }).done(function(res){
+            if (res.status == true){
+                if (theme == "light"){
+                    $("#darkThemeCSS").remove();
+                    showToast("Switched to light theme");
+                }else{
+                    $("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');
+                    showToast("Switched to dark theme");
+                }
+            }
+        });
+    }
+});

src/static/js/settings.min.js

@@ -0,0 +1 @@
+$(".sb-settings-url").addClass("active");$(".confirm_modal").click(function(){$(".app_new_ip").html($("#app_ip")[0].value);$(".app_new_port").html($("#app_port")[0].value)});$(".confirm_restart").click(function(){$(".cancel_restart").remove();countdown=7;$.post("/update_app_ip_port",$(".update_app_ip_port").serialize());url=$("#app_ip")[0].value+":"+$("#app_port")[0].value;$(".confirm_restart").attr("disabled","disabled");setInterval(function(){if(countdown===0){window.location.replace("http://"+url)}$(".confirm_restart").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3)});$(".change_path").click(function(){$(this).attr("disabled","disabled");countdown=5;setInterval(function(){if(countdown===0){location.reload()}$(".change_path").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3);$.post("/update_wg_conf_path",$(".update_wg_conf_path").serialize())});$(".bottomNavSettings").addClass("active");$(".theme-switch-btn").on("click",function(){if(!$(this).hasClass("active")){let theme=$(this).data("theme");$(".theme-switch-btn").removeClass("active");$(this).addClass("active");$.ajax({method:"POST",url:"/api/settings/setTheme",headers:{"Content-Type":"application/json"},data:JSON.stringify({theme:theme})}).done(function(res){if(res.status==true){if(theme=="light"){$("#darkThemeCSS").remove();showToast("Switched to light theme")}else{$("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');showToast("Switched to dark theme")}}})}});

src/static/js/tools.js

@@ -64,4 +64,27 @@ $(".send_traceroute").on("click", function (){
             $("#traceroute_modal .form-control").removeAttr("disabled");
         }
     });
-});
+});
+let numberToast = 0;
+function showToast(msg, isDanger = false) {
+    $(".toastContainer").append(
+        `<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger ? 'text-danger':''}">${msg}</div>
+            <div class="toast-progressbar ${isDanger ? 'bg-danger':''}"></div>
+        </div>` )
+    $(`#${numberToast}-toast`).toast('show');
+    $(`#${numberToast}-toast .toast-body`).html(msg);
+    $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
+    $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
+    let i = numberToast;
+    setTimeout(function(){
+        $(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")
+    }, 4500)
+    numberToast++;
+}

src/static/js/tools.min.js

@@ -1 +1,10 @@
-$(".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")}})});
+$(".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")}})});let numberToast=0;function showToast(msg,isDanger=false){$(".toastContainer").append(`<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger?"text-danger":""}">${msg}</div>
+            <div class="toast-progressbar ${isDanger?"bg-danger":""}"></div>
+        </div>`);$(`#${numberToast}-toast`).toast("show");$(`#${numberToast}-toast .toast-body`).html(msg);$(`#${numberToast}-toast .toast-progressbar`).css("transition",`width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data("delay")}ms cubic-bezier(0, 0, 0, 0)`);$(`#${numberToast}-toast .toast-progressbar`).css("width","0px");let i=numberToast;setTimeout(function(){$(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")},4500);numberToast++}

src/static/js/wireguard.js

@@ -171,6 +171,17 @@
 		return String.fromCharCode.apply(null, base64);
 	}
 
+	function base64ToKey(base64) {
+		let binary_string = window.atob(base64);
+		let len = binary_string.length;
+		let bytes = new Uint8Array(len);
+		for (let i = 0; i < len; i++) {
+			bytes[i] = binary_string.charCodeAt(i);
+		}
+		let uint8 = new Uint8Array(bytes.buffer);
+		return uint8;
+	}
+
 	function putU32(b, n)
 	{
 		b.push(n & 0xff, (n >>> 8) & 0xff, (n >>> 16) & 0xff, (n >>> 24) & 0xff);
@@ -282,7 +293,8 @@
 			};
 		},
 		generatePublicKey: function (privateKey){
-			return keyToBase64(generatePublicKey(privateKey))
+			privateKey = base64ToKey(privateKey);
+			return keyToBase64(generatePublicKey(privateKey));
 		},
 
 		generateZipFiles: function(res){

src/static/js/wireguard.min.js

@@ -1 +0,0 @@
-(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)}}})();

src/templates/configuration.html

@@ -1,8 +1,9 @@
 <!-- configuration.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
 <html lang="en">
 {% with title=title%}
-    {% include "header.html"%}
+{% include "header.html"%}
 {% endwith %}
+
 <body>
     <div class="no-response">
         <div class="container">
@@ -10,28 +11,26 @@
             <h4 class="text-white">Oops!<br>I can't connect to the server.</h4>
         </div>
     </div>
-	{% include "navbar.html" %}
-	<div class="container-fluid" id="right_body">
-		{% include "sidebar.html" %}
-        <div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
-            <div class="form-group">
-                <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="">
-            </div>
-        </div>
-		<div id="config_body">
+    {% include "navbar.html" %}
+    <div class="container-fluid" id="right_body">
+        {% include "sidebar.html" %}
+        <div id="config_body">
             <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 id="config_info_alert"></div>
+                    <div>
+                        <pre class="index-alert d-none" style="margin-bottom: 1rem;"></pre>
+                    </div>
                     <div class="row">
                         <div class="col">
                             <small class="text-muted"><strong>CONFIGURATION</strong></small>
                             <h1 class="mb-3"><samp id="conf_name">{{ title }}</samp></h1>
                         </div>
                         <div class="col">
-                            <small class="text-muted"><strong>SWITCH</strong></small><br>
-                            <div id="conf_status_btn" class="info_loading"></div>
-                            <div class="spinner-border text-primary" role="status" style="display: none; margin-top: 10px">
-                                <span class="sr-only">Loading...</span>
+                            <small class="text-muted"><strong>TOGGLE</strong></small><br>
+                            <!-- <div id="conf_status_btn" class="info_loading"></div> -->
+                            <div id="switch" class="info_loading">
+                                <input type="checkbox" class="toggle--switch" id="toggle--switch">
+                                <label for="toggle--switch" class="toggleLabel"></label>
                             </div>
                         </div>
                         <div class="w-100"></div>
@@ -49,7 +48,8 @@
                         </div>
                         <div class="col-sm">
                             <small class="text-muted"><strong>TOTAL RECEIVED</strong></small>
-                            <h6 style="text-transform: uppercase;" id="conf_total_data_received" class="info_loading"></h6>
+                            <h6 style="text-transform: uppercase;" id="conf_total_data_received" class="info_loading">
+                            </h6>
                         </div>
                         <div class="col-sm">
                             <small class="text-muted"><strong>TOTAL SENT</strong></small>
@@ -59,60 +59,121 @@
                         <div class="col-sm">
                             <small class="text-muted">
                                 <strong>PUBLIC KEY</strong>
-                                <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong>
+                                <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out"
+                                    class="text-primary">CLICK TO COPY</strong>
                             </small>
                             <h6 class="info_loading"><samp class="key" id="conf_public_key"></samp></h6>
                         </div>
                         <div class="col-sm">
                             <small class="text-muted"><strong>LISTEN PORT</strong></small>
-                            <h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_listen_port"></samp></h6>
+                            <h6 style="text-transform: uppercase;" class="info_loading"><samp
+                                    id="conf_listen_port"></samp></h6>
                         </div>
-                         <div class="col-sm">
+                        <div class="col-sm">
                             <small class="text-muted"><strong>ADDRESS</strong></small>
-                            <h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_address"></samp></h6>
+                            <h6 style="text-transform: uppercase;" class="info_loading"><samp id="conf_address"></samp>
+                            </h6>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <div class="row chartContainer">
+                    <div class="col-sm">
+                        <div class="chartTitle">
+                            <h6>Data Usage / Refresh Interval</h6>
+                            <div class="chartControl" style="margin-left: auto">
+                                <div class="btn-group" role="group">
+                                    <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="GB">GB</button>
+                                    <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="MB">MB</button>
+                                    <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="KB">KB</button>
+                                    <button class="btn btn-outline-primary btn-sm fullScreen"><i
+                                            class="bi bi-fullscreen"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chartCanvasContainer" style="width: 100%; height: 300px">
+                            <canvas id="totalDataUsageChartObj" width="100" height="100"></canvas>
                         </div>
                     </div>
                 </div>
                 <hr>
                 <div class="button-div mb-3">
                     <div class="row">
-                        <div class="col-sm">
-                             <div class="form-group">
-                                <label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
-                                <select class="form-control" id="sort_by_dropdown">
-                                    <option value="status">Status</option>
-                                    <option value="name">Name</option>
-                                    <option value="allowed_ip">Allowed IP</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col-sm">
-                            <div class="form-group">
-                                <label><small class="text-muted">Refresh Interval</small></label><br>
-                                <div class="btn-group interval-btn-group" role="group" style="width: 100%">
-                                    <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="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="60000">1m</button>
+                        <div class="col-md">
+                            <div class="row">
+                                <div class="col-md">
+                                    <div class="form-group">
+                                        <label for="search_peer_textbox"><small class="text-muted">Search
+                                                Peers</small></label>
+                                        <input type="text" class="form-control" id="search_peer_textbox"
+                                            placeholder="Enter Peer's Name" value="">
+                                    </div>
+                                </div>
+                                <div class="col-md">
+                                    <div class="form-group">
+                                        <label for="sort_by_dropdown"><small class="text-muted">Sort Peers
+                                                By</small></label>
+                                        <select class="form-control" id="sort_by_dropdown">
+                                            <option value="status">Status</option>
+                                            <option value="name">Name</option>
+                                            <option value="allowed_ip">Allowed IP</option>
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-sm">
+                        <div class="col-md">
+                            <div class="form-group">
+                                <label><small class="text-muted">Refresh Interval</small></label><br>
+                                <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" 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="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="60000">1m</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md">
                             <div class="form-group">
                                 <label><small class="text-muted">Display Mode</small></label><br>
                                 <div class="btn-group display-btn-group" role="group" style="width: 100%">
-                                    <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode" data-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" data-display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
+                                    <button style="width: 20%" type="button"
+                                        class="btn btn-outline-primary display_mode" data-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" data-display-mode="list"><i
+                                            class="bi bi-list" style="font-size: 1.5rem;"></i></button>
                                 </div>
                             </div>
                         </div>
                         <div class="btn-manage-group">
-                            <button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
-                            <button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
+                            <button type="button" class="btn btn-primary add_btn"><i
+                                    class="bi bi-plus-circle-fill"></i></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>
+                                <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>
+                                <hr>
+                                <a class="text-primary" id="edit_configuration"><i class="bi bi-gear-fill"></i>
+                                    Configration Settings</a>
+                                <a class="text-danger" id="configuration_delete"><i class="bi bi-trash3-fill"></i>
+                                    Delete Configuration</a>
                             </div>
                         </div>
 
@@ -122,305 +183,19 @@
                 <small id="peer_loading_time" class="text-muted"></small>
             </main>
         </div>
-	</div>
-
-	<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
-		aria-labelledby="staticBackdropLabel" aria-hidden="true">
-		<div class="modal-dialog modal-dialog-centered modal-lg">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="staticBackdropLabel">Add New Peer</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-                    <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">
-						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-						  <span aria-hidden="true">&times;</span>
-						</button>
-					</div>
-					<form id="add_peer_form">
-                        <div class="form-group non-bulk">
-                            <div>
-                                <label for="private_key">Private Key</label>
-                            </div>
-                            <div class="input-group">
-                                <input type="text" class="form-control" id="private_key" aria-describedby="private_key">
-                                <div class="input-group-append">
-                                   <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 class="form-group non-bulk">
-							<label for="public_key">Public Key <code>(Required)</code></label>
-							<input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled>
-						</div>
-                        <div class="row">
-                            <div class="col-sm-6 non-bulk">
-                                 <div class="form-group">
-                                    <label for="new_add_name">Name</label>
-                                    <input type="text" class="form-control" id="new_add_name">
-                                </div>
-                            </div>
-                            <div class="col-sm-6 non-bulk">
-                                <div class="form-group">
-                                    <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
-                                    <div class="input-group">
-                                        <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 class="col-sm-6">
-                                 <div class="form-group">
-                                    <label for="new_add_DNS">DNS <code>(Required)</code></label>
-                                    <input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
-                                </div>
-                            </div>
-                            <div class="col-sm-6">
-                                 <div class="form-group">
-                                    <label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label>
-                                    <input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
-                                </div>
-                            </div>
-                            <div class="col-sm-6">
-                                 <div class="form-group">
-                                    <label for="new_add_MTU">MTU</label>
-                                    <input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
-                                </div>
-                            </div>
-                            <div class="col-sm-6">
-                                 <div class="form-group">
-                                    <label for="new_add_keep_alive">Persistent keepalive</label>
-                                    <input type="text" class="form-control" id="new_add_keep_alive" value="{{ keep_alive }}">
-                                 </div>
-                            </div>
-                            <div class="col-sm">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" id="enable_preshare_key" name="enable_preshare_key" value="enable_psk">
-                                    <label class="form-check-label" for="enable_preshare_key">Use Pre-shared Key</label>
-                                </div>
-                            </div>
-                        </div>
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Add</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal fade" id="delete_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
-		aria-labelledby="staticBackdropLabel" aria-hidden="true">
-		<div class="modal-dialog modal-dialog-centered">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this peer?</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-					<div id="remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
-						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-						  <span aria-hidden="true">&times;</span>
-						</button>
-					</div>
-					<h6 style="margin: 0">This action is not reversible.</h6>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
-					<button type="button" class="btn btn-danger" id="delete_peer" conf_id={{conf_data['name']}} peer_id="">Yes</button>
-				</div>
-			</div>
-		</div>
-	</div>
-    <div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
-		aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
-		<div class="modal-dialog modal-dialog-centered modal-lg">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title peer_name"></h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-                    <div id="setting_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
-						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-						  <span aria-hidden="true">&times;</span>
-						</button>
-					</div>
-                    <div class="mb-3">
-                        <label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
-                        <input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
-                        <a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
-                    </div>
-                    <div>
-                        <label for="peer_preshared_key_textbox" class="form-label">Pre-Shared Key</label>
-                        <input type="text" class="form-control" id="peer_preshared_key_textbox">
-                    </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">
-                              <label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
-                              <input type="text" class="form-control" id="peer_allowed_ip_textbox">
-                            </div>
-                        </div>
-                        <div class="col-sm-6">
-                            <div class="mb-3">
-                              <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
-                              <input type="text" class="form-control" id="peer_DNS_textbox">
-                            </div>
-                        </div>
-                        <div class="col-sm-6">
-                            <div class="mb-3">
-                              <label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
-                              <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
-                            </div>
-                        </div>
-                        <div class="col-sm-6">
-                            <div class="mb-3">
-                              <label for="peer_mtu" class="form-label">MTU</label>
-                              <input type="text" class="form-control" id="peer_mtu">
-                            </div>
-                        </div>
-                        <div class="col-sm-6">
-                            <div class="mb-3">
-                              <label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
-                              <input type="text" class="form-control" id="peer_keep_alive">
-                            </div>
-                        </div>
-                    </div>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-primary" id="save_peer_setting" conf_id={{conf_data['name']}} peer_id="">Save</button>
-				</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"
-		aria-labelledby="staticBackdropLabel" aria-hidden="true">
-		<div class="modal-dialog modal-dialog-centered">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title">QR Code</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-                    <img id="qrcode_img" style="width: 100%">
-				</div>
-			</div>
-		</div>
-	</div>
-    <div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;">
-          <div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
-            <div class="toast-header">
-                  <strong class="mr-auto">WGDashboard</strong>
-                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-            </div>
-            <div class="toast-body">
-            </div>
-          </div>
     </div>
+    {% include "modal.html" %}
+    <div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
     {% include "tools.html" %}
 </body>
 {% 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.js') }}"></script>
+<script src="{{ url_for('static',filename='js/configurationTool.js') }}"></script>
+<script src="{{ url_for('static',filename='js/wireguard.js') }}"></script>
 <script>
-    /* global peers */
-    let load_timeout;
-    let load_interval = 0;
-    let conf_name = "{{ conf_data['name'] }}"
-    let peers = [];
-    $(".sb-"+conf_name+"-url").addClass("active");
-	$(function(){
-		configurations.loadPeers($('#search_peer_textbox').val());
-	});
+    configurations.setConfigurationName("{{ conf_data['name'] }}");
+    configurations.setActiveConfigurationName();
+    configurations.loadPeers($('#search_peer_textbox').val());
 </script>
-</html>	
+
+</html>

src/templates/footer.html

@@ -1,3 +1,4 @@
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
-<script src="{{ url_for('static',filename='js/tools.min.js') }}"></script>
+<script src="{{ url_for('static',filename='js/tools.js') }}"></script>
+<script src="{{ url_for('static',filename='js/pwa.js') }}"></script>

src/templates/header.html

@@ -3,16 +3,22 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<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="application-name" content="WGDashboard">
+    <meta name="apple-mobile-web-app-title" content="WGDashboard">
     <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="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" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
-</head>
+    <!-- THEME APPLY HERE -->
+    {% if session["theme"] == "dark" %} 
+        <link rel= "stylesheet" type= "text/css" href="{{ url_for('static',filename='css/theme/dark.min.css') }}" id="darkThemeCSS">
+    {% endif %}
+    <!-- THEME APPLY HERE -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+</head>

src/templates/index.html

@@ -9,22 +9,26 @@
 	{% include "navbar.html" %}
 	<div class="container-fluid">
         {% include "sidebar.html" %}
-		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4">
+		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4" style="margin-bottom: 10rem !important;">
             <div style="display: flex; flex-direction: row; align-items: center;">
                 <h1 class="pb-4 mt-4">Home</h1>
             </div>
-            {% if msg != "" %}
+            <!-- {% 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 %}
+            {% endif %} -->
+            <div class="index-alert alert alert-danger d-none" role="alert">
+                Configuration toggle failed. Please check the following error message:
+            </div>
+            <pre class="index-alert index-alert-full d-none"><code></code></pre>
 
             {% 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>
             {% endif %}
-			{% for i in conf%}
-				<div class="card mt-3 conf_card">
+			{% for i in conf %}
+				<div class="card mt-3 conf_card" data-conf-id="{{i['conf']}}">
 					<div class="card-body">
 						<div class="row">
 							<div class="col card-col">
@@ -35,44 +39,126 @@
 							</div>
 							<div class="col card-col">
 								<small class="text-muted"><strong>STATUS</strong></small>
-								<h6 style="text-transform: uppercase; margin:0 !important;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>
+								<h6 style="text-transform: uppercase; margin:0 !important;"><span>{{i['status']}}</span><span class="dot dot-{{i['status']}}"></span></h6>
 							</div>
-							<div class="col-md card-col">
+							<div class="col-sm card-col">
 								<small class="text-muted"><strong>PUBLIC KEY</strong></small>
 								<h6 style="margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
 							</div>
-							<div class="col-md index-switch">
-                                {% if i['checked'] == "checked" %}
-                                    <a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-primary tt"><i class="bi bi-toggle2-on"></i></a>
-                                {% else %}
-                                    <a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i></a>
-                                {% endif %}
-                                <div class="spinner-border text-primary" role="status" style="display: none">
-                                    <span class="sr-only">Loading...</span>
-                                </div>
+							<div class="col-sm index-switch">
+								<div class="switch-test">
+									<input type="checkbox" class="toggle--switch" id="{{i['conf']}}-switch" {{i['checked']}} data-conf-id="{{i['conf']}}">
+									<label for="{{i['conf']}}-switch" class="toggleLabel"></label>
+								</div>
 							</div>
 						</div>
+                        <div class="card-message"></div>
 					</div>
 				</div>
 			{%endfor%}
 		</main>
 	</div>
-{% include "tools.html" %}
+	<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
+	<div class="btn-manage-group">
+		<button type="button" class="btn btn-primary add_btn" id="toggleAddConfiguration"><i class="bi bi-plus-circle-fill"></i></button>
+	</div>
+	<div class="modal fade" id="addConfigurationModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-dialog-centered modal-lg">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="staticBackdropLabel">Add New Configuration</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+                        <div class="alert-body"></div>
+					</div>
+                    <pre id="addCconfigurationAlertMessage" class="index-alert d-none"></pre>
+					<form id="add_configuration_form">
+                        <div class="form-group">
+                            <div>
+                                <label for="addConfigurationPrivateKey">Private Key <code>*</code></label>
+                            </div>
+                            <div class="input-group">
+                                <input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" name="addConfigurationPrivateKey" required>
+                                <div class="input-group-append">
+                                   <button type="button" class="btn btn-danger" id="reGeneratePrivateKey" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
+                                </div>
+                                <div id="addConfigurationPrivateKeyFeedback" class="input-feedback"></div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm">
+                                <div class="form-group">
+                                    <label for="addConfigurationName">Configuration Name <code>*</code></label>
+                                    <input type="text" class="form-control" id="addConfigurationName" name="addConfigurationName" required>
+                                    <div id="addConfigurationNameFeedback" class="input-feedback"></div>
+                                </div>
+                            </div>
+                            <div class="col-sm">
+                                <div class="form-group">
+                                    <label for="addConfigurationListenPort">Listen Port <code>*</code></label>
+                                    <input type="number" class="form-control codeFont" id="addConfigurationListenPort" name="addConfigurationListenPort" required>
+                                    <div id="addConfigurationListenPortFeedback" class="input-feedback"></div>
+                                </div>
+                            </div>
+                        </div>
+						<div class="row">
+							<div class="col-sm">
+								<div class="form-group">
+									<label for="addConfigurationAddress">Address <code>*</code>
+                                        
+                                    </label>
+									<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24" name="addConfigurationAddress" required>
+                                    <div id="addConfigurationAddressFeedback" class="input-feedback"></div>
+                                </div>
+							</div>
+							<div class="col-sm">
+								<div class="form-group">
+									<label for=""># of available IPs</label>
+									<p class="addConfigurationAvailableIPs">N/A</p>
+								</div>
+							</div>
+						</div>
+                        <hr>
+                        <div class="form-group">
+                            <label for="addConfigurationPreUp">PreUp</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPreUp" name="addConfigurationPreUp">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPreDown">PreDown</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPreDown" name="addConfigurationPreDown">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPostUp">PostUp</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPostUp" name="addConfigurationPostUp">
+                        </div>
+                        <div class="form-group">
+                            <label for="addConfigurationPostDown">PostDown</label>
+                            <input type="text" class="form-control codeFont" id="addConfigurationPostDown" name="addConfigurationPostDown"> 
+                        </div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-primary" id="addConfigurationBtn">Add</button>
+                    <div class="text-primary addConfigurationStatus addConfigurationAddStatus d-none">
+						<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>
+						Add Configuration
+					</div>
+					<div class="text-primary addConfigurationStatus addConfigurationToggleStatus d-none waiting">
+						<i class="bi bi-circle"></i> Toggle Configuration
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	{% include "tools.html" %}
 </body>
 {% include "footer.html" %}
-<script>
-
-	$('.switch').on("click", function() {
-	    $(this).siblings($(".spinner-border")).css("display", "inline-block")
-	    $(this).remove()
-		location.replace("/switch/"+$(this).attr('id'))
-    });
-	$(".sb-home-url").addClass("active");
-
-    $(".card-body").on("click", function(handle){
-        if ($(handle.target).attr("class") !== "bi bi-toggle2-off" && $(handle.target).attr("class") !== "bi bi-toggle2-on") {
-            window.open($(this).find("a").attr("href"), "_self");
-        }
-    })
-</script>
+<script src="{{ url_for('static',filename='js/wireguard.js') }}"></script>
+<script src="{{ url_for('static',filename='js/index.js') }}"></script>
 </html>

src/templates/modal.html

@@ -0,0 +1,427 @@
+<div class="modal fade" id="peerDataUsage">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Data Usage</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                        aria-hidden="true">&times;</span></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="chartControl peerDataUsageChartControl col-sm">
+                        <label><small class="text-muted">Data Unit Size</small></label><br>
+                        <div class="btn-group" role="group" style="width: 100%;">
+                            <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="GB">GB</button>
+                            <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="MB">MB</button>
+                            <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="KB">KB</button>
+                        </div>
+                    </div>
+                    <div class="chartControl peerDataUsageChartControl col-sm">
+                        <label><small class="text-muted">Time Period</small></label><br>
+                        <div class="btn-group" role="group" style="width: 100%;">
+                            <button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="30min">30
+                                min</button>
+                            <button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="1h">1hr</button>
+                            <button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="6h">6hrs</button>
+                            <button class="btn btn-outline-primary btn-sm switchTimePeriod"
+                                data-time="24h">24hrs</button>
+                            <button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="all">All</button>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <small class="text-muted peerDataUsageUpdateTime" style="position: absolute; right: 1rem;">2023</small>
+
+                <div class="peerDataUsageChartContainer">
+                    <canvas id="peerDataUsageChartObj"></canvas>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="add_modal">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Add New Peer</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <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">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <form id="add_peer_form">
+                    <div class="form-group">
+                        <div>
+                            <label for="private_key">Private Key</label>
+                        </div>
+                        <div class="input-group">
+                            <input type="text" class="form-control non-bulk" id="private_key"
+                                aria-describedby="private_key">
+                            <div class="input-group-append">
+                                <button type="button" class="btn btn-danger non-bulk" 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 class="form-group">
+                        <label for="public_key">Public Key <code>(Required)</code></label>
+                        <input type="text" class="form-control non-bulk" id="public_key" aria-describedby="public_key"
+                            disabled>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="form-group">
+                                <label for="new_add_name">Name</label>
+                                <input type="text" class="form-control non-bulk" id="new_add_name">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="form-group">
+                                <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
+                                <div class="input-group">
+                                    <input type="text" class="form-control non-bulk" id="allowed_ips">
+                                    <div class="input-group-append">
+                                        <button type="button" class="btn btn-primary non-bulk" 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 class="col-sm-6">
+                            <div class="form-group">
+                                <label for="new_add_DNS">DNS <code>(Required)</code></label>
+                                <input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="form-group">
+                                <label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs
+                                    <code>(Required)</code></label>
+                                <input type="text" class="form-control" id="new_add_endpoint_allowed_ip"
+                                    value="{{ endpoint_allowed_ip }}">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="form-group">
+                                <label for="new_add_MTU">MTU</label>
+                                <input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="form-group">
+                                <label for="new_add_keep_alive">Persistent keepalive</label>
+                                <input type="text" class="form-control" id="new_add_keep_alive"
+                                    value="{{ keep_alive }}">
+                            </div>
+                        </div>
+                      <div class="col-sm">
+                            <div class="form-check">
+                                <input class="form-check-input" type="hidden" id="enable_preshare_key" name="enable_preshare_key" value="enable_psk" visible="false" >
+                             <!--   <label class="form-check-label" type="hidden" for="enable_preshare_key">Use Pre-shared Key</label> -->
+                            </div>
+                        </div> 
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="save_peer">Add</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="configuration_delete_modal">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this configuration?</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div id="remove_configuration_alert" class="alert alert-danger alert-dismissible fade show d-none"
+                    role="alert">
+
+                </div>
+                <p style="margin: 0">This action is not reversible. The configuration will get toggle off, and
+                    delete from database and from the configuration folder.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+                <button type="button" class="btn btn-danger" id="sure_delete_configuration">Yes</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="delete_modal">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this peer?</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div id="remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <h6 style="margin: 0">This action is not reversible.</h6>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+                <button type="button" class="btn btn-danger" id="delete_peer" conf_id={{conf_data['name']}}
+                    peer_id="">Yes</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="setting_modal" peer_id="">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title peer_name"></h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div id="setting_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="mb-3">
+                    <label for="peer_private_key_textbox" class="form-label">Private Key
+                        <code>(Required for QR Code and download)</code></label>
+                    <input type="password" class="form-control" id="peer_private_key_textbox"
+                        style="padding-right: 40px">
+                    <a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
+                </div>
+                <div>
+                    <label for="peer_preshared_key_textbox" class="form-label">Pre-Shared Key</label>
+                    <input type="text" class="form-control" id="peer_preshared_key_textbox">
+                </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">
+                            <label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs
+                                <code>(Required)</code></label>
+                            <input type="text" class="form-control" id="peer_allowed_ip_textbox">
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="mb-3">
+                            <label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
+                            <input type="text" class="form-control" id="peer_DNS_textbox">
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="mb-3">
+                            <label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs
+                                <code>(Required)</code></label>
+                            <input type="text" class="form-control" id="peer_endpoint_allowed_ips">
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="mb-3">
+                            <label for="peer_mtu" class="form-label">MTU</label>
+                            <input type="text" class="form-control" id="peer_mtu">
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="mb-3">
+                            <label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
+                            <input type="text" class="form-control" id="peer_keep_alive">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="save_peer_setting" conf_id={{conf_data['name']}}
+                    peer_id="">Save</button>
+            </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"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">QR Code</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <img id="qrcode_img" style="width: 100%">
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="editConfigurationModal">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Edit Configuration</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none"
+                    role="alert">
+                    <div class="alert-body"></div>
+                </div>
+                <pre id="addCconfigurationAlertMessage" class="index-alert d-none"></pre>
+                <form id="add_configuration_form">
+                    <div class="row">
+                        <div class="col-sm">
+                            <div class="form-group">
+                                <label for="editConfigurationName">Configuration Name</label>
+                                <p id="editConfigurationName"></p>
+                            </div>
+                        </div>
+                        <div class="col-sm">
+                            <div class="form-group">
+                                <label for="editConfigurationAddress">Address</label>
+                                <p class="codeFont" id="editConfigurationAddress"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="editConfigurationPrivateKey">Private Key</label>
+                        <p class="codeFont" id="editConfigurationPrivateKey"></p>
+                    </div>
+                    <hr>
+                    <div class="form-group">
+                        <label for="editConfigurationListenPort">Listen Port <code>*</code></label>
+                        <input type="number" class="form-control codeFont" id="editConfigurationListenPort"
+                            name="editConfigurationListenPort" required>
+                        <div id="editConfigurationListenPortFeedback" class="input-feedback"></div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="editConfigurationPreUp">PreUp</label>
+                        <input type="text" class="form-control codeFont" id="editConfigurationPreUp"
+                            name="editConfigurationPreUp">
+                    </div>
+                    <div class="form-group">
+                        <label for="editConfigurationPreDown">PreDown</label>
+                        <input type="text" class="form-control codeFont" id="editConfigurationPreDown"
+                            name="editConfigurationPreDown">
+                    </div>
+                    <div class="form-group">
+                        <label for="editConfigurationPostUp">PostUp</label>
+                        <input type="text" class="form-control codeFont" id="editConfigurationPostUp"
+                            name="editConfigurationPostUp">
+                    </div>
+                    <div class="form-group">
+                        <label for="editConfigurationPostDown">PostDown</label>
+                        <input type="text" class="form-control codeFont" id="editConfigurationPostDown"
+                            name="editConfigurationPostDown">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="editConfigurationBtn">Save</button>
+            </div>
+        </div>
+    </div>
+</div>

src/templates/navbar.html

@@ -1,10 +1,12 @@
 <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="/">WGDashboard</a>
-    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
-        data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
+	<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="/">WGDashboard</a>
+	<!-- <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
+		data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+	</button> -->
+	
 </nav>
 <div class="progress" style="height: 3px; position: fixed; width: 100%; z-index: 10000; background-color: transparent">
-  <div class="progress-bar" role="progressbar" style="z-index: 10000; width: 0%"></div>
-</div>
+	<div class="progress-bar" role="progressbar" style="z-index: 10000; width: 0%"></div>
+</div>
+

src/templates/settings.html

@@ -16,6 +16,26 @@
             {% endif %}
             <h1 class="">Settings</h1>
             <hr>
+            <div class="card mb-3">
+                <h6 class="card-header">Dashboard Theme</h6>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-6">
+                            <button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "light" %} {{ "active" }} {% endif %}' data-theme="light">
+                                <i class="bi bi-sun-fill"></i>
+                                Light
+                            </button>
+                        </div>
+                        <div class="col-6">
+                            <button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "dark" %} {{ "active" }} {% endif %}' data-theme="dark">
+                                <i class="bi bi-moon-fill"></i>
+                                Dark
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr>
             {% if required_auth == "true" %}
                 <div class="card mb-3">
                     <h6 class="card-header">Peer Default Settings</h6>
@@ -161,44 +181,9 @@
     </div>
 </div>
 {% include "tools.html" %}
+<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
 </body>
-
 {% include "footer.html" %}
-<script>
-    $(".sb-settings-url").addClass("active")
-    $(".confirm_modal").click(function () {
-        $(".app_new_ip").html($("#app_ip")[0].value)
-        $(".app_new_port").html($("#app_port")[0].value)
-    })
+<script src="{{ url_for('static',filename='js/settings.js') }}"></script>
 
-    $(".confirm_restart").click(function () {
-        $(".cancel_restart").remove()
-        countdown = 7;
-        $.post('/update_app_ip_port', $('.update_app_ip_port').serialize())
-        url = $("#app_ip")[0].value + ":" + $("#app_port")[0].value;
-        $(".confirm_restart").attr("disabled", "disabled")
-        setInterval(function () {
-            if (countdown === 0) {
-                window.location.replace("http://" + url);
-            }
-            $(".confirm_restart").html("Redirecting you in " + countdown + " seconds.")
-            countdown--;
-        }, 1000)
-    });
-
-    $(".change_path").click(function () {
-        $(this).attr("disabled", "disabled");
-        countdown = 5;
-        setInterval(function () {
-            if (countdown === 0) {
-                location.reload()
-            }
-            $(".change_path").html("Redirecting you in " + countdown + " seconds.")
-            countdown--;
-        }, 1000)
-        $.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize())
-
-    });
-
-</script>
 </html>

src/templates/sidebar.html

@@ -1,3 +1,70 @@
+<div class="bottomNavWrapper"></div>
+<div class="bottom">
+    <nav class="navbar navbar-dark fixed-bottom bg-light flex-md-nowrap p-0 bottomNav">
+        <div class="bottomNavContainer" style="z-index: 1000;">
+            <div class="bottomNavButton bottomNavHome">
+                <i class="bi bi-house"></i>Home
+            </div>
+            <div class="bottomNavButton bottomNavConfigs">
+                <i class="bi bi-files"></i>
+                Configs
+                <div class="subNav bg-light animate__animated">
+                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+                        <span>Configurations</span>
+                    </h6>
+                    <ul class="nav flex-column">
+                        {% for i in conf%}
+                            <li class="nav-item"><a class="nav-link nav-conf-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}" data-conf-id="{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
+                        {%endfor%}
+                    </ul>
+                    <hr>
+                </div>
+            </div>
+            <div class="bottomNavButton bottomNavSettings">
+                <i class="bi bi-gear"></i>
+                Settings
+            </div>
+            <div class="bottomNavButton bottomNavMore">
+                <i class="bi bi-justify"></i>More
+                <div class="subNav bg-light animate__animated">
+                    <ul class="nav flex-column">
+                        {% if session['update'] == "true" %}
+                            <li class="nav-item sb-update-li">
+                                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+                                    <span>New Update</span>
+                                </h6>
+                                <a class="nav-link sb-update-url text-success" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">
+                                    {{ session['updateInfo']['name'] }} - 
+                                    <code>{{ session['updateInfo']['tag_name'] }}</code> 
+                                </a>
+                            </li>
+                        {% endif %}
+                    </ul>
+                    <hr>
+                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+                        <span>Tools</span>
+                    </h6>
+                    <ul class="nav flex-column">
+                        <ul class="nav flex-column">
+                                <li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#ping_modal" href="#">Ping</a></li>
+                            <li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#traceroute_modal" href="#">Traceroute</a></li>
+                        </ul>
+                    </ul>
+                    <hr>
+                    {% if "username" in session %}
+                        <ul class="nav flex-column">
+                                <li class="nav-item"><a class="nav-link text-danger" href="/signout" style="font-weight: bold">Sign Out</a></li>
+                        </ul>
+                    {% endif %}
+                    <ul class="nav flex-column">
+                        <li class="nav-item"><a href="https://github.com/donaldzou/WGDashboard/releases/tag/{{ session['dashboard_version'] }}"><small class="nav-link text-muted">{{ session['dashboard_version'] }}</small></a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </nav>
+</div>
+
 <div class="row">
     <div class="row">
         <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
@@ -9,7 +76,13 @@
                     {% endif %}
                     {% if session['update'] == "true" %}
                     <li class="nav-item sb-update-li">
-                        <a class="nav-link sb-update-url" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">New Update Available!<span class="dot dot-running"></span></a>
+                        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+                            <span>New Update</span>
+                        </h6>
+                        <a class="nav-link sb-update-url text-success" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">
+                            {{ session['updateInfo']['name'] }} - 
+                            <code>{{ session['updateInfo']['tag_name'] }}</code> 
+                        </a>
                     </li>
                     {% endif %}
                 </ul>
@@ -19,7 +92,7 @@
                 </h6>
                 <ul class="nav flex-column">
                     {% for i in conf%}
-                        <li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
+                        <li class="nav-item"><a class="nav-link nav-conf-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}" data-conf-id="{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
                     {%endfor%}
                 </ul>
                 <hr>

src/templates/signin.html

@@ -14,41 +14,46 @@
         <div class="container-fluid login-container-fluid">
             <main role="main" class="container login-container">
                 <div class="login-box" style="margin: auto !important;">
-                    <h1 class="text-center">Sign In</h1>
+                    <h1 class="text-center">Sign in</h1>
+                    <h5 class="text-center">to WGDashboard</h5>
                     <form style="margin-left: auto !important; margin-right: auto !important; max-width: 500px;" action="/auth" method="post">
                         {% if message != "" %}
                             <div class="alert alert-warning" role="alert">You need to sign in first</div>
                         {% endif %}
-                        <div class="alert alert-danger d-none" role="alert"></div>
+                        <div class="alert alert-danger d-none" role="alert" style="margin-top: 1rem; margin-bottom: 0rem;"></div>
                         <div class="form-group">
-                            <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>
+                            <label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i></label>
+                            <input type="text" class="form-control" id="username" name="username" placeholder="Your username" required>
                         </div>
                         <div class="form-group">
-                            <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>
+                            <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
+                            <input type="password" class="form-control" id="password" name="password" placeholder="Your password" required>
                         </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>
                     </form>
                 </div>
             </main>
         </div>
+        <small class="text-muted" style="position: fixed; bottom: 0; width: 100%; text-align: center; margin-bottom: 2rem">Version: {{ version }}</small>
     </body>
 {% include "footer.html" %}
 <script>
-    $("button").on("click", function(e){
-        let req = $("input[required]");
+    let loginButton = $('button[type="submit"]');
+    loginButton.on("click", function(e){
+        e.preventDefault();
+        let $password = $("#password");
+        let $username = $("#username");
+        let req = [$password, $username];
         let check = true
         for (let i = 0; i < req.length; i++){
             if ($(req[i]).val().length === 0){
-                $("button").html("Sign In");
+                loginButton.html("Sign In");
                 check = false;
-                $("input[required]").addClass("is-invalid");
+                $(req[i]).addClass("is-invalid");
                 break;
             }
         }
         if (check){
-            e.preventDefault();
             $(this).html("Signing In...").attr("disabled", "disabled");
             $.ajax({
                 url: "/auth",
@@ -62,13 +67,17 @@
                 if (res.status === true){
                     const urlParams = new URLSearchParams(window.location.search);
                     if (urlParams.get("redirect")){
-                        window.location.replace(urlParams.get("redirect"))
+                        if (document.URL.substring(0, 5) == "http:"){
+                            window.location.replace(`http://${urlParams.get("redirect")}`)
+                        }else if (document.URL.substring(0, 5) == "https"){
+                            window.location.replace(`https://${urlParams.get("redirect")}`)
+                        }
                     }else{
                         window.location.replace("/");
                     }
                 }else{
-                    $(".alert").html(res.msg).removeClass("d-none");
-                    $("button").html("Sign In").removeAttr("disabled");
+                    $(".alert").html(res.msg).removeClass("d-none").fadeIn();
+                    loginButton.html("Sign In").removeAttr("disabled");
                     $("input[required]").addClass("is-invalid");
                 }
             });

src/util.py

@@ -1,5 +1,6 @@
 import re
-
+import subprocess
+import dashboard
 """
 Helper Functions
 """
@@ -79,3 +80,34 @@ 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]",
                                              address))
 
+
+def deletePeers(config_name, delete_keys, cur, db):
+    sql_command = []
+    wg_command = ["wg", "set", config_name]
+    for delete_key in delete_keys:
+        if delete_key not in dashboard.get_conf_peer_key(config_name):
+            return "This key does not exist"
+        sql_command.append("DELETE FROM " + config_name + " WHERE id = '" + delete_key + "';")
+        wg_command.append("peer")
+        wg_command.append(delete_key)
+        wg_command.append("remove")
+    try:
+        print("deleting...")
+        remove_wg = subprocess.check_output(" ".join(wg_command),
+                                            shell=True, stderr=subprocess.STDOUT)
+        save_wg = subprocess.check_output(f"wg-quick save {config_name}", shell=True, stderr=subprocess.STDOUT)
+        cur.executescript(' '.join(sql_command))
+        db.commit()
+    except subprocess.CalledProcessError as exc:
+        return exc.output.strip()
+    return "true"
+
+def checkJSONAllParameter(required, data):
+    if len(data) == 0:
+        return False
+    for i in required:
+        if i not in list(data.keys()) or len(data[i]) == 0:
+            return False
+    return True
+
+