Doing a update

Fixed redirect functionality
Merge branch 'main' of https://github.com/donaldzou/WGDashboard
2025-10-03 15:56:17 +00:00 · 2022-03-22 17:28:19 -04:00 · 2022-03-22 16:17:12 -04:00 · 2022-02-28 13:29:25 -05:00 · 2022-02-28 13:29:17 -05:00 · 2022-02-27 15:50:55 -05:00
46 changed files with 3688 additions and 1143 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -41,10 +41,19 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "marneu",
+      "name": "Markus Neubauer",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5978293?v=4",
+      "profile": "http://www.std-soft.com",
+      "contributions": [
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 7,
-  "projectName": "wireguard-dashboard",
+  "projectName": "WGDashboard",
  "projectOwner": "donaldzou",
  "repoType": "github",
  "repoHost": "https://github.com",
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,17 @@
-.vscode/sftp.json
-src/.vscode/sftp.json
+.vscode
 .DS_Store
-wg.db
-*.json
 .idea
-src/test.py
-tmp
+src/db
 __pycache__
+src/test.py
+*.db
 src/wg-dashboard.ini
 src/static/pic.xd
 *.conf
 private_key.txt
 public_key.txt
-
+venv/**
+log/**
+release/*
+src/db/wgdashboard.db
+.jshintrc
--- a/README.md
+++ b/README.md
@@ -1,53 +1,67 @@
-<hr>
-<p align=center>Please provide your OS name and version if you can run the dashboard on it perfectly in <a href="https://github.com/donaldzou/wireguard-dashboard/issues/31">#31</a>, since I only tested on Ubuntu. Thank you!</p>
-<hr>
-
-
 <p align="center">
-  <img alt="Wireguard Dashboard Logo" src="img/logo.png" width="128">
+  <img alt="WGDashboard" src="img/logo.png" width="128">
 </p>
-<h1 align="center">Wireguard Dashboard</h1>
+<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: v2.3
+## 📣 What's New: v3.0

 - 🎉  **New Features**
-  - **Update directly from `wgd.sh`:** Now you can update Wireguard Dashboard directly from the bash script.
-  - **Displaying Peers:** You can switch the display mode between list and table in the configuration page.
+  - **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**
-  - [Peer DNS Validation Fails #67](https://github.com/donaldzou/wireguard-dashboard/issues/67): Added DNS format check. [❤️ @realfian]
-  - [configparser.NoSectionError: No section: 'Interface' #66](https://github.com/donaldzou/wireguard-dashboard/issues/66): Changed permission requirement for `etc/wireguard` from `744` to `755`. [❤️ @ramalmaty]
-  - [Feature request: Interface not loading when information missing #73](https://github.com/donaldzou/wireguard-dashboard/issues/73): Fixed when Configuration Address and Listen Port is missing will crash the dashboard. [❤️ @js32]
-  - [Remote Peer, MTU and PersistentKeepalives added #70](https://github.com/donaldzou/wireguard-dashboard/pull/70): Added MTU, remote peer and Persistent Keepalive. [❤️ @realfian]
-  - [Fixes DNS check to support search domain #65](https://github.com/donaldzou/wireguard-dashboard/pull/65): Added allow input domain into DNS. [❤️@davejlong]
+  - [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**
-  - Moved Add Peer Button into the right bottom corner.
+  - **Key generating moved to front-end**: No longer need to use the server's WireGuard to generate keys, thanks to the `wireguard.js` from the [official repository](https://git.zx2c4.com/wireguard-tools/tree/contrib/keygen-html/wireguard.js)! 
+  - **Peer transfer calculation**: each peer will now show all transfer amount (previously was only showing transfer amount from the last configuration start-up).
+  - **UI adjustment on running peers**: peers will have a new style indicating that it is running.
+  - **`wgd.sh` finally can update itself**: So now user could update the whole dashboard from `wgd.sh`, with the `update` command.
+  - **Minified JS and CSS files**: Although only a small changes on the file size, but I think is still a good practice to save a bit of bandwidth ;)

+*And many other small changes for performance and bug fixes! :laughing:*

+>  If you have any other brilliant ideas for this project, please shout it in here [#129](https://github.com/donaldzou/WGDashboard/issues/129) :heart:   
+
+**For users who is using `v2.x.x` please be sure to read [this](#please-note-for-user-who-is-using-v231-or-below) before updating WGDashboard ;)**

 <hr>

-
 ## Table of Content

+
 - [💡  Features](#-features)
 - [📝  Requirement](#-requirement)
 - [🛠  Install](#-install)
 - [🪜  Usage](#-usage)
-  - [Start/Stop/Restart Wireguard Dashboard](#startstoprestart-wireguard-dashboard)
-  - [Autostart Wireguard Dashboard on boot](#autostart-wireguard-dashboard-on-boot)
+  - [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)
@@ -74,7 +88,7 @@

  > **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.
+- **WireGuard** and **WireGuard-Tools (`wg-quick`)**  are installed.

  > Don't know how? Check this <a href="https://www.wireguard.com/install/">official documentation</a>

@@ -96,19 +110,21 @@

 - Python 3.7+ & Pip3

+- Browser support CSS3 and ES6
+
 ## 🛠 Install
-1. **Download Wireguard Dashboard**
+1. Download WGDashboard

   ```shell
-   git clone -b v2.2.1 https://github.com/donaldzou/wireguard-dashboard.git
+   git clone -b v3.0.6 https://github.com/donaldzou/WGDashboard.git wgdashboard
   
-2. Open the Wireguard Dashboard folder
+2. Open the WGDashboard folder

   ```shell
-   cd wireguard-dashboard/src
+   cd wgdashboard/src
   ```
   
-3. Install Wireguard Dashboard
+3. Install WGDashboard

   ```shell
   sudo chmod u+x wgd.sh
@@ -121,7 +137,7 @@
   sudo chmod -R 755 /etc/wireguard
   ```

-5. Run Wireguard Dashboard
+5. Run WGDashboard

   ```shell
   ./wgd.sh start
@@ -133,15 +149,15 @@

 6. Access dashboard

-   Access your server with port `10086` ! e.g (http://your_server_ip:10086), continue to read to on how to change port and ip that dashboard is running with.
+   Access your server with port `10086` (e.g. http://your_server_ip:10086), using username `admin` and password `admin`. See below how to change port and ip that the dashboard is running with.

 ## 🪜 Usage

-#### Start/Stop/Restart Wireguard Dashboard
+#### Start/Stop/Restart WGDashboard


 ```shell
-cd Wireguard-Dashboard/src
+cd wgdashboard/src
 -----------------------------
 ./wgd.sh start    # Start the dashboard in background
 -----------------------------
@@ -152,21 +168,21 @@ cd Wireguard-Dashboard/src
 ./wgd.sh restart  # Restart the dasboard
 ```

-#### Autostart Wireguard Dashboard on boot (>= v2.2)
+#### 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 wireguard-dashboard/src
+   cd wgdashboard/src
   ```

 2. Get the full path of the dashboard's directory

   ```shell
   pwd
-   #Output: /root/wireguard-dashboard/src
+   #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.**
@@ -181,7 +197,7 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u

   ```ini
   [Unit]
-   After=netword.service
+   After=network.service
   
   [Service]
   WorkingDirectory=<your dashboard directory full path here>
@@ -200,8 +216,8 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u
   After=netword.service
   
   [Service]
-   WorkingDirectory=/root/wireguard-dashboard/src
-   ExecStart=/usr/bin/python3 /root/wireguard-dashboard/src/dashboard.py
+   WorkingDirectory=/root/wgdashboard/src
+   ExecStart=/usr/bin/python3 /root/wgdashboard/src/dashboard.py
   Restart=always
   
   
@@ -244,10 +260,10 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u
         Tasks: 1 (limit: 453)
        Memory: 26.1M
        CGroup: /system.slice/wg-dashboard.service
-                └─6602 /usr/bin/python3 /root/wireguard-dashboard/src/dashboard.py
+                └─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 "Wireguard Dashboard" (lazy loading)
+   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.
@@ -273,24 +289,30 @@ In the `src` folder, it contained a file called `wg-dashboard.service`, we can u

 #### Dashboard Configuration file

-Since version 2.0, Wireguard Dashboard will be using a configuration file called `wg-dashboard.ini`, (It will generate automatically after first time running the dashboard). More options will include in future versions, and for now it included the following config:
+Since version 2.0, WGDashboard will be using a configuration file called `wg-dashboard.ini`, (It will generate automatically after first time running the dashboard). More options will include in future versions, and for now it included the following configurations:

-|                 | Description                                                  | Default                  | Available in Setting |
-| --------------- | ------------------------------------------------------------ | ------------------------ | -------------------- |
-| **`[Account]`** |                                                              |                          |                      |
-| `username`      | Dashboard login username                                     | `admin`                  | Yes                  |
-| `password`      | Password, will be hash with SHA256                           | `admin` hashed in SHA256 | Yes                  |
-| **`[Server]`**  |                                                              |                          |                      |
-| `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             | `true`                   | No                   |
-|                 | If `auth_req = false` , user will not be access the **Setting** tab due to security consideration. **User can only edit the file directly in system**. |                          |                      |
-| `version`       | Dashboard Version                                            | `v2.2`                   | No                   |
-
-<p align=center>Latest Version: v2.2</p>
-
-**Except `auth_req` due to security consideration.**
+|                              | 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.6`                                             | **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)

@@ -321,14 +343,62 @@ Endpoint = 0.0.0.0:51820

 ## ❓ How to update the dashboard?

-1. Change your directory to `wireguard-dashboard` 
+#### **Please note for user who is using `v2.3.1` or below**
+
+- For user who is using `v2.3.1` or below, please notice that all data that stored in the current database will **not** transfer to the new database. This is hard decision to move from TinyDB to SQLite. But SQLite does provide a thread-safe access and TinyDB doesn't. I couldn't find a safe way to transfer the data, so you need to do them manually... Sorry about that :pensive: . But I guess this would be a great start for future development :sunglasses:.
+
+<hr>
+
+#### 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 wireguard-dashboard/src
+    cd wgdashboard/src
    ```
+    
 2. Update the dashboard
    ```shell
-    sudo ./wgd.sh update
+    git pull https://github.com/donaldzou/WGDashboard.git v3.0.6 --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)
@@ -341,7 +411,7 @@ Endpoint = 0.0.0.0:51820

 ![Edit Peer](img/EditPeer.png)

-![Delete Peer](img/DeletePeer.png)
+![Delete Peer](img/DeleteBulk.png)

 ![Dashboard Setting](img/DashboardSetting.png)

@@ -349,10 +419,26 @@ Endpoint = 0.0.0.0:51820

 ![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:
@@ -420,7 +506,6 @@ Bug Fixed:
  - [jQuery](https://jquery.com) `v3.5.1`
 - Python
  - [Flask](https://pypi.org/project/Flask/) `v2.0.1`
-  - [TinyDB](https://pypi.org/project/tinydb/) `v4.3.0`
  - [ifcfg](https://pypi.org/project/ifcfg/) `v0.21`
  - [icmplib](https://pypi.org/project/icmplib/) `v2.1.1`
  - [flask-qrcode](https://pypi.org/project/Flask-QRcode/) `v3.0.0`
@@ -428,7 +513,7 @@ Bug Fixed:
 ## ✨ Contributors

 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
+[![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)):
@@ -438,10 +523,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- 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/wireguard-dashboard/commits?author=antonioag95" title="Tests">⚠️</a> <a href="https://github.com/donaldzou/wireguard-dashboard/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/wireguard-dashboard/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/wireguard-dashboard/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/wireguard-dashboard/commits?author=davejlong" title="Code">💻</a></td>
+    <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>

--- a/img/AddPeer.png
+++ b/img/AddPeer.png
--- a/img/Configuration.png
+++ b/img/Configuration.png
--- a/img/DashboardSetting.png
+++ b/img/DashboardSetting.png
--- a/img/DeleteBulk.png
+++ b/img/DeleteBulk.png
--- a/img/EditPeer.png
+++ b/img/EditPeer.png
--- a/img/HomePage.png
+++ b/img/HomePage.png
--- a/img/PWA.gif
+++ b/img/PWA.gif
--- a/img/QRCode.png
+++ b/img/QRCode.png
--- a/img/SearchIP.png
+++ b/img/SearchIP.png
--- a/src/certbot.ini
+++ b/src/certbot.ini
@@ -0,0 +1,4 @@
+authenticator = standalone
+noninteractive = true
+agree-tos = true
+rsa-key-size = 2048
--- a/src/dashboard.py
+++ b/src/dashboard.py
--- a/src/db/hi.txt
+++ b/src/db/hi.txt
@@ -1 +0,0 @@
-You can delete this later ;)
--- a/src/gunicorn.conf.py
+++ b/src/gunicorn.conf.py
@@ -0,0 +1,11 @@
+import multiprocessing
+import dashboard
+
+app_host, app_port = dashboard.get_host_bind()
+
+worker_class = 'gthread'
+workers = multiprocessing.cpu_count() * 2 + 1
+threads = 4
+bind = f"{app_host}:{app_port}"
+daemon = True
+pidfile = './gunicorn.pid'
--- a/src/requirements.txt
+++ b/src/requirements.txt
@@ -1,5 +1,6 @@
 Flask
-tinydb
 ifcfg
 icmplib
-flask-qrcode
+flask-qrcode
+gunicorn
+certbot
--- a/src/static/.DS_Store
+++ b/src/static/.DS_Store
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -1,5 +1,6 @@
 body {
    font-size: .875rem;
+    /*font-family: 'Poppins', sans-serif;*/
 }

 .feather {
@@ -52,6 +53,7 @@ body {

 .nav-link:hover {
    padding-left: 30px;
+    background-color: #dfdfdf;
 }

 .sidebar .nav-link .feather {
@@ -90,6 +92,14 @@ body {
    right: 1rem;
 }

+.form-control{
+    transition: all 0.2s ease-in-out;
+}
+
+.form-control:disabled{
+    cursor: not-allowed;
+}
+
 .navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
@@ -117,15 +127,38 @@ body {

 .dot-running{
    background-color: #28a745!important;
+    box-shadow: 0 0 0 0.2rem #28a74545;
+}
+
+.h6-dot-running{
+    margin-left: 0.3rem;
 }

 .dot-stopped{
    background-color: #6c757d!important;
 }

+.card-running{
+    border-color: #28a745;
+}

 .info h6{
    line-break: anywhere;
+    transition: 0.2s ease-in-out;
+}
+
+.info .row .col-sm{
+    display: flex;
+    flex-direction: column;
+}
+
+.info .row .col-sm small{
+    display: flex;
+
+}
+
+.info .row .col-sm small strong:last-child(1){
+    margin-left: auto !important;
 }

 .btn-control{
@@ -133,8 +166,30 @@ body {
    padding: 0 1rem 0 0;
 }

+.btn-control:active, .btn-control:focus{
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none;
+}
+
+.btn-qrcode-peer{
+    padding: 0 !important;
+}
+
+.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
+    transform: scale(0.9) rotate(180deg);
+    border: 0 !important;
+}
+
+.btn-download-peer:active, .btn-download-peer:hover{
+    color: #17a2b8 !important;
+    transform: translateY(5px);
+}
+
 .share_peer_btn_group .btn-control{
-    padding: 0 0 0 1rem;
+    margin: 0 0 0 1rem;
+    padding: 0 !important;
+    transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
 }

 .btn-control:hover{
@@ -204,18 +259,77 @@ main{
    }

    .peer_list{
-        margin-bottom: 4rem !important;
+        margin-bottom: 7rem !important;
    }
 }

-.add_btn{
+.btn-manage-group{
+    z-index: 99;
    position: fixed;
    bottom: 3rem;
    right: 2rem;
+    display: flex;
+}
+
+.btn-manage-group .setting_btn_menu{
+    position: absolute;
+    top: -124px;
+    background-color: white;
+    padding: 1rem 0;
+    right: 0;
+    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
+    border-radius: 10px;
+    min-width: 200px;
+    display: none;
+    transform: translateY(-30px);
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.58, 0.03, 0.05, 1.28);
+}
+
+.btn-manage-group .setting_btn_menu.show{
+    display: block;
+}
+
+.setting_btn_menu.showing{
+    transform: translateY(0px);
+    opacity: 1;
+}
+
+.setting_btn_menu a{
+    display: flex;
+    padding: 0.5rem 1rem;
+    transition: all 0.1s ease-in-out;
+    font-size: 1rem;
+    align-items: center;
+    cursor: pointer;
+}
+
+.setting_btn_menu a:hover{
+    background-color: #efefef;
+    text-decoration: none;
+}
+
+.setting_btn_menu a i{
+    margin-right: auto !important;
+}
+
+.add_btn{
+    height: 54px;
    z-index: 99;
-    border-radius: 100px;
-    padding: 10px 20px;
+    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);
+    margin-right: 1rem;
+    font-size: 1.5rem;
+}
+
+.setting_btn{
+    height: 54px;
+    z-index: 99;
+    border-radius: 100px !important;
+    padding: 0 14px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    font-size: 1.5rem;
 }


@@ -263,6 +377,10 @@ main{
    cursor: pointer;
 }

+#peer_private_key_textbox, #private_key, #public_key{
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
 .progress-bar{
    transition: 0.3s ease-in-out;
 }
@@ -274,4 +392,160 @@ main{

 .key:hover{
    color: #007bff;
+}
+
+.card{
+    border-radius: 10px;
+}
+
+.peer_list .card .button-group{
+    height: 22px;
+}
+
+.form-control{
+    border-radius: 10px;
+}
+
+.btn{
+    border-radius: 8px;
+    /*padding: 0.6rem 0.9em;*/
+}
+
+#username, #password{
+    padding: 0.6rem calc( 0.9rem + 32px );
+    height: inherit;
+}
+
+label[for="username"], 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{
+    font-size: 0.8rem;
+}
+
+@-webkit-keyframes loading {
+    0%{
+        background-color: #dfdfdf;
+    }
+    50%{
+        background-color: #adadad;
+    }
+    100%{
+        background-color: #dfdfdf;
+    }
+}
+@-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{
+    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;
+}
+
+#conf_status_btn{
+    transition: 0.2s ease-in-out;
+}
+
+#conf_status_btn.info_loading{
+    height: 38px;
+    border-radius: 5px;
+    animation: loading 3s infinite ease-in-out;
+}
+
+#qrcode_img img{
+    width: 100%;
+}
+
+#selected_ip_list .badge, #selected_peer_list .badge{
+    margin: 0.1rem
+}
+
+#add_modal.ip_modal_open{
+    transition: filter 0.2s ease-in-out;
+    filter: brightness(0.5);
+}
+
+#delete_bulk_modal .list-group a.active{
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+#selected_peer_list{
+    max-height: 80px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.no-response{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background: #000000ba;
+    z-index: 10000;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all 1s ease-in-out;
+}
+
+.no-response.active{
+    display: flex;
+}
+
+.no-response.active.show{
+    opacity: 100;
+}
+
+.no-response .container > *{
+    text-align: center;
+}
+
+.no-responding{
+    transition: all 1s ease-in-out;
+    filter: blur(10px);
+}
+
+pre.index-alert{
+    margin-bottom: 0;
+    padding: 1rem;
+    background-color: #343a40;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: .25rem;
+    margin-top: 1rem;
+    color: white;
 }
--- a/src/static/css/dashboard.min.css
+++ b/src/static/css/dashboard.min.css
--- a/src/static/img/192x192ios.png
+++ b/src/static/img/192x192ios.png
--- a/src/static/img/icon-192x192.png
+++ b/src/static/img/icon-192x192.png
--- a/src/static/img/icon-256x256.png
+++ b/src/static/img/icon-256x256.png
--- a/src/static/img/icon-384x384.png
+++ b/src/static/img/icon-384x384.png
--- a/src/static/img/icon-512x512.png
+++ b/src/static/img/icon-512x512.png
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
--- a/src/static/js/configuration.min.js
+++ b/src/static/js/configuration.min.js
--- a/src/static/js/configurationsTools.js
+++ b/src/static/js/configurationsTools.js
--- a/src/static/js/configurationsTools.min.js
+++ b/src/static/js/configurationsTools.min.js
--- a/src/static/js/tools.js
+++ b/src/static/js/tools.js
@@ -1,68 +1,67 @@
-$(".ip_dropdown").change(function (){
-    $(".modal.show .btn").removeAttr("disabled")
+/**
+ * tools.js - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]
+ */
+
+$(".ip_dropdown").on("change",function (){
+    $(".modal.show .btn").removeAttr("disabled");
 });
-$(".conf_dropdown").change(function (){
-    $(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...')
+
+$(".conf_dropdown").on("change", function (){
+    $(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');
    $.ajax({
        url: "/get_ping_ip",
        method: "POST",
-        data: "config="+$(this).children("option:selected").val(),
+        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)
+            $(".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);
        }
-    })
+    });
 });
-
-
 // Ping Tools
-
-
-
-$(".send_ping").click(function (){
-    $(this).attr("disabled","disabled")
-    $(this).html("Pinging...")
-    $("#ping_modal .form-control").attr("disabled","disabled")
+$(".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(),
+        data: "ip="+ $(':selected', $("#ping_modal .ip_dropdown")).val() +
+            "&count=" + $("#ping_modal .ping_count").val(),
        url: "/ping_ip",
        success: function (res){
-            $(".ping_result tbody").html("")
-            html = '<tr><th scope="row">Address</th><td>'+res['address']+'</td></tr>' +
-                '<tr><th scope="row">Is Alive</th><td>'+res['is_alive']+'</td></tr>' +
-                '<tr><th scope="row">Min RTT</th><td>'+res['min_rtt']+'ms</td></tr>' +
-                '<tr><th scope="row">Average RTT </th><td>'+res['avg_rtt']+'ms</td></tr>' +
-                '<tr><th scope="row">Max RTT</th><td>'+res['max_rtt']+'ms</td></tr>' +
-                '<tr><th scope="row">Package Sent</th><td>'+res['package_sent']+'</td></tr>' +
-                '<tr><th scope="row">Package Received</th><td>'+res['package_received']+'</td></tr>' +
-                '<tr><th scope="row">Package Loss</th><td>'+res['package_loss']+'</td></tr>'
-            $(".ping_result tbody").html(html)
-            $(".send_ping").removeAttr("disabled")
-            $(".send_ping").html("Ping")
-            $("#ping_modal .form-control").removeAttr("disabled")
+            $(".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");
        }
-    })
+    });
 });

 // Traceroute Tools
-$(".send_traceroute").click(function (){
-    $(this).attr("disabled","disabled")
+$(".send_traceroute").on("click", function (){
+    $(this).attr("disabled","disabled");
    $(this).html("Tracing...");
-    $("#traceroute_modal .form-control").attr("disabled","disabled")
+    $("#traceroute_modal .form-control").attr("disabled","disabled");
    $.ajax({
        url: "/traceroute_ip",
        method: "POST",
-        data: "ip="+$(':selected', $("#traceroute_modal .ip_dropdown")).val(),
+        data: "ip=" + $(':selected', $("#traceroute_modal .ip_dropdown")).val(),
        success: function (res){
            $(".traceroute_result tbody").html("");
-            for (i in res){
-               $(".traceroute_result tbody").append('<tr><th scope="row">'+res[i]['hop']+'</th><td>'+res[i]['ip']+'</td><td>'+res[i]['avg_rtt']+'</td><td>'+res[i]['min_rtt']+'</td><td>'+res[i]['max_rtt']+'</td></tr>')
-            }
-            $(".send_traceroute").removeAttr("disabled");
-            $(".send_traceroute").html("Traceroute");
-            $("#traceroute_modal .form-control").removeAttr("disabled")
+            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");
        }
-    })
-})
+    });
+});
--- a/src/static/js/tools.min.js
+++ b/src/static/js/tools.min.js
@@ -0,0 +1 @@
+$(".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")}})});
--- a/src/static/js/wireguard.js
+++ b/src/static/js/wireguard.js
@@ -0,0 +1,313 @@
+/*! SPDX-License-Identifier: GPL-2.0
+ *
+ * Copyright (C) 2015-2020 Jason A. Donenfeld <Jason@zx2c4.com>. All Rights Reserved.
+ */
+
+(function() {
+	function gf(init) {
+		var r = new Float64Array(16);
+		if (init) {
+			for (var i = 0; i < init.length; ++i)
+				r[i] = init[i];
+		}
+		return r;
+	}
+
+	function pack(o, n) {
+		var b, m = gf(), t = gf();
+		for (var i = 0; i < 16; ++i)
+			t[i] = n[i];
+		carry(t);
+		carry(t);
+		carry(t);
+		for (var j = 0; j < 2; ++j) {
+			m[0] = t[0] - 0xffed;
+			for (var i = 1; i < 15; ++i) {
+				m[i] = t[i] - 0xffff - ((m[i - 1] >> 16) & 1);
+				m[i - 1] &= 0xffff;
+			}
+			m[15] = t[15] - 0x7fff - ((m[14] >> 16) & 1);
+			b = (m[15] >> 16) & 1;
+			m[14] &= 0xffff;
+			cswap(t, m, 1 - b);
+		}
+		for (var i = 0; i < 16; ++i) {
+			o[2 * i] = t[i] & 0xff;
+			o[2 * i + 1] = t[i] >> 8;
+		}
+	}
+
+	function carry(o) {
+		var c;
+		for (var i = 0; i < 16; ++i) {
+			o[(i + 1) % 16] += (i < 15 ? 1 : 38) * Math.floor(o[i] / 65536);
+			o[i] &= 0xffff;
+		}
+	}
+
+	function cswap(p, q, b) {
+		var t, c = ~(b - 1);
+		for (var i = 0; i < 16; ++i) {
+			t = c & (p[i] ^ q[i]);
+			p[i] ^= t;
+			q[i] ^= t;
+		}
+	}
+
+	function add(o, a, b) {
+		for (var i = 0; i < 16; ++i)
+			o[i] = (a[i] + b[i]) | 0;
+	}
+
+	function subtract(o, a, b) {
+		for (var i = 0; i < 16; ++i)
+			o[i] = (a[i] - b[i]) | 0;
+	}
+
+	function multmod(o, a, b) {
+		var t = new Float64Array(31);
+		for (var i = 0; i < 16; ++i) {
+			for (var j = 0; j < 16; ++j)
+				t[i + j] += a[i] * b[j];
+		}
+		for (var i = 0; i < 15; ++i)
+			t[i] += 38 * t[i + 16];
+		for (var i = 0; i < 16; ++i)
+			o[i] = t[i];
+		carry(o);
+		carry(o);
+	}
+
+	function invert(o, i) {
+		var c = gf();
+		for (var a = 0; a < 16; ++a)
+			c[a] = i[a];
+		for (var a = 253; a >= 0; --a) {
+			multmod(c, c, c);
+			if (a !== 2 && a !== 4)
+				multmod(c, c, i);
+		}
+		for (var a = 0; a < 16; ++a)
+			o[a] = c[a];
+	}
+
+	function clamp(z) {
+		z[31] = (z[31] & 127) | 64;
+		z[0] &= 248;
+	}
+
+	function generatePublicKey(privateKey) {
+		var r, z = new Uint8Array(32);
+		var a = gf([1]),
+			b = gf([9]),
+			c = gf(),
+			d = gf([1]),
+			e = gf(),
+			f = gf(),
+			_121665 = gf([0xdb41, 1]),
+			_9 = gf([9]);
+		for (var i = 0; i < 32; ++i)
+			z[i] = privateKey[i];
+		clamp(z);
+		for (var i = 254; i >= 0; --i) {
+			r = (z[i >>> 3] >>> (i & 7)) & 1;
+			cswap(a, b, r);
+			cswap(c, d, r);
+			add(e, a, c);
+			subtract(a, a, c);
+			add(c, b, d);
+			subtract(b, b, d);
+			multmod(d, e, e);
+			multmod(f, a, a);
+			multmod(a, c, a);
+			multmod(c, b, e);
+			add(e, a, c);
+			subtract(a, a, c);
+			multmod(b, a, a);
+			subtract(c, d, f);
+			multmod(a, c, _121665);
+			add(a, a, d);
+			multmod(c, c, a);
+			multmod(a, d, f);
+			multmod(d, b, _9);
+			multmod(b, e, e);
+			cswap(a, b, r);
+			cswap(c, d, r);
+		}
+		invert(c, c);
+		multmod(a, a, c);
+		pack(z, a);
+		return z;
+	}
+
+	function generatePresharedKey() {
+		var privateKey = new Uint8Array(32);
+		window.crypto.getRandomValues(privateKey);
+		return privateKey;
+	}
+
+	function generatePrivateKey() {
+		var privateKey = generatePresharedKey();
+		clamp(privateKey);
+		return privateKey;
+	}
+
+	function encodeBase64(dest, src) {
+		var input = Uint8Array.from([(src[0] >> 2) & 63, ((src[0] << 4) | (src[1] >> 4)) & 63, ((src[1] << 2) | (src[2] >> 6)) & 63, src[2] & 63]);
+		for (var i = 0; i < 4; ++i)
+			dest[i] = input[i] + 65 +
+			(((25 - input[i]) >> 8) & 6) -
+			(((51 - input[i]) >> 8) & 75) -
+			(((61 - input[i]) >> 8) & 15) +
+			(((62 - input[i]) >> 8) & 3);
+	}
+
+	function keyToBase64(key) {
+		var i, base64 = new Uint8Array(44);
+		for (i = 0; i < 32 / 3; ++i)
+			encodeBase64(base64.subarray(i * 4), key.subarray(i * 3));
+		encodeBase64(base64.subarray(i * 4), Uint8Array.from([key[i * 3 + 0], key[i * 3 + 1], 0]));
+		base64[43] = 61;
+		return String.fromCharCode.apply(null, base64);
+	}
+
+	function 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);
+	}
+
+	function putU16(b, n)
+	{
+		b.push(n & 0xff, (n >>> 8) & 0xff);
+	}
+
+	function putBytes(b, a)
+	{
+		for (var i = 0; i < a.length; ++i)
+			b.push(a[i] & 0xff);
+	}
+
+	function encodeString(s)
+	{
+		var utf8 = unescape(encodeURIComponent(s));
+		var b = new Uint8Array(utf8.length);
+		for (var i = 0; i < utf8.length; ++i)
+			b[i] = utf8.charCodeAt(i);
+		return b;
+	}
+
+	function crc32(b)
+	{
+		if (!crc32.table) {
+			crc32.table = [];
+			for (var c = 0, n = 0; n < 256; c = ++n) {
+				for (var k = 0; k < 8; ++k)
+					c = ((c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1));
+				crc32.table[n] = c;
+			}
+		}
+		var crc = -1;
+		for (var i = 0; i < b.length; ++i)
+			crc = (crc >>> 8) ^ crc32.table[(crc ^ b[i]) & 0xff];
+		return (crc ^ (-1)) >>> 0;
+	}
+
+	function createZipFile(files)
+	{
+		var b = [];
+		var cd = [];
+		var offset = 0;
+
+		for (var i = 0; i < files.length; ++i) {
+			var name = encodeString(files[i].filename);
+			var contents = encodeString(files[i].content);
+			var crc = crc32(contents);
+
+			putU32(b, 0x04034b50); /* signature */
+			putU16(b, 20); /* version needed */
+			putU16(b, 0); /* flags */
+			putU16(b, 0); /* compression method */
+			putU16(b, 0); /* mtime */
+			putU16(b, 0); /* mdate */
+			putU32(b, crc); /* crc32 */
+			putU32(b, contents.length); /* compressed size */
+			putU32(b, contents.length); /* uncompressed size */
+			putU16(b, name.length); /* file name length */
+			putU16(b, 0); /* extra field length */
+			putBytes(b, name);
+			putBytes(b, contents);
+
+			putU32(cd, 0x02014b50); /* signature */
+			putU16(cd, 0); /* version made */
+			putU16(cd, 20); /* version needed */
+			putU16(cd, 0); /* flags */
+			putU16(cd, 0); /* compression method */
+			putU16(cd, 0); /* mtime */
+			putU16(cd, 0); /* mdate */
+			putU32(cd, crc); /* crc32 */
+			putU32(cd, contents.length); /* compressed size */
+			putU32(cd, contents.length); /* uncompressed size */
+			putU16(cd, name.length); /* file name length */
+			putU16(cd, 0); /* extra field length */
+			putU16(cd, 0); /* file comment length */
+			putU16(cd, 0); /* disk number start */
+			putU16(cd, 0); /* internal file attributes */
+			putU32(cd, 32); /* external file attributes - 'archive' bit set (32) */
+			putU32(cd, offset); /* relative offset of local header */
+			putBytes(cd, name); /* file name */
+
+			offset += 30 + contents.length + name.length
+		}
+		putBytes(b, cd); /* central directory */
+		putU32(b, 0x06054b50); /* end of central directory signature */
+		putU16(b, 0); /* number of this disk */
+		putU16(b, 0); /* number of disk with central directory start */
+		putU16(b, files.length); /* number of entries on disk */
+		putU16(b, files.length); /* number of entries */
+		putU32(b, cd.length); /* length of central directory */
+		putU32(b, offset); /* offset to start of central directory */
+		putU16(b, 0); /* zip comment size */
+		return Uint8Array.from(b);
+	}
+
+	window.wireguard = {
+		generateKeypair: function() {
+			var privateKey = generatePrivateKey();
+			var publicKey = generatePublicKey(privateKey);
+			var presharedKey = generatePresharedKey();
+			return {
+				publicKey: keyToBase64(publicKey),
+				privateKey: keyToBase64(privateKey),
+				presharedKey: keyToBase64(presharedKey)
+			};
+		},
+		generatePublicKey: function (privateKey){
+			privateKey = base64ToKey(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);
+		}
+	};
+})();
--- a/src/static/js/wireguard.min.js
+++ b/src/static/js/wireguard.min.js
--- a/src/static/json/manifest.json
+++ b/src/static/json/manifest.json
@@ -0,0 +1,31 @@
+{
+    "theme_color": "#343a40",
+    "background_color": "#343a40",
+    "display": "fullscreen",
+    "scope": "/",
+    "start_url": "/",
+    "name": "WGDashboard",
+    "short_name": "WGDashboard",
+    "icons": [
+        {
+            "src": "/static/img/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/img/icon-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/img/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/img/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -1,64 +1,193 @@
-<html>
+<!-- configuration.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
+<html lang="en">
 {% with title=title%}
    {% include "header.html"%}
 {% endwith %}
 <body>
+    <div class="no-response">
+        <div class="container">
+            <h1 class="text-white display-1"><i class="bi bi-emoji-frown-fill"></i></h1>
+            <h4 class="text-white">Oops!<br>I can't connect to the server.</h4>
+        </div>
+    </div>
 	{% include "navbar.html" %}
-	<div class="container-fluid">
+	<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="" style="display: none">
+                <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="">
            </div>
        </div>
-		<div id="config_body"></div>
+		<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 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>
+                            </div>
+                        </div>
+                        <div class="w-100"></div>
+                        <div class="col">
+                            <small class="text-muted"><strong>STATUS</strong></small>
+                            <h6 style="text-transform: uppercase;" id="conf_status" class="info_loading"></h6>
+                        </div>
+                        <div class="col">
+                            <small class="text-muted"><strong>CONNECTED PEERS</strong></small>
+                            <h6 style="text-transform: uppercase;" id="conf_connected_peers" class="info_loading"></h6>
+                        </div>
+                        <div class="col-sm">
+                            <small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
+                            <h6 style="text-transform: uppercase;" id="conf_total_data_usage" class="info_loading"></h6>
+                        </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>
+                        </div>
+                        <div class="col-sm">
+                            <small class="text-muted"><strong>TOTAL SENT</strong></small>
+                            <h6 style="text-transform: uppercase;" id="conf_total_data_sent" class="info_loading"></h6>
+                        </div>
+                        <div class="w-100"></div>
+                        <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>
+                            </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>
+                        </div>
+                         <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>
+                        </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>
+                            </div>
+                        </div>
+                        <div class="col-sm">
+                            <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>
+                                </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>
+                            <div class="setting_btn_menu">
+                                <a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
+                                <a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="row peer_list"></div>
+                <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 a new peer</h5>
+					<h5 class="modal-title" id="staticBackdropLabel">Add New Peer</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<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="alert alert-warning" role="alert" style="font-size: 0.8rem">
-                            To generate QR code for this new peer, you need to provide the private key, or use the generated key. If you don't need the QR code, simply remove the private key and insert your existed public key.
-                        </div>
-                        <div class="form-group">
+                        <div 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="public_key">
+                                <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"><i class="bi bi-arrow-repeat"></i></button>
+                                   <button type="button" class="btn btn-danger" id="re_generate_key" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
                                </div>
                            </div>
                        </div>
-						<div class="form-group">
+						<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">
+                            <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">
+                            <div class="col-sm-6 non-bulk">
                                <div class="form-group">
                                    <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
-                                    <input type="text" class="form-control" id="allowed_ips">
+                                    <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">
@@ -83,6 +212,12 @@
                                 <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>
@@ -90,7 +225,7 @@
 				</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']}}>Save</button>
+					<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Add</button>
 				</div>
 			</div>
 		</div>
@@ -111,7 +246,7 @@
 						  <span aria-hidden="true">&times;</span>
 						</button>
 					</div>
-					<h6>This action is not reversible.</h6>
+					<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>
@@ -120,13 +255,12 @@
 			</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="peer_name"></h5>
+					<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>
@@ -137,10 +271,14 @@
 						  <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_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>
+                        <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>

@@ -190,28 +328,77 @@
 			</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="peer_name">QR Code</h5>
+					<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 src="" id="qrcode_img" style="width: 100%">
+                    <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">Wireguard Dashboard</strong>
+                  <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>
@@ -223,54 +410,17 @@
    {% 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>
-    var conf_name = "{{ conf_data['name'] }}"
+    /* global peers */
+    let load_timeout;
+    let load_interval = 0;
+    let conf_name = "{{ conf_data['name'] }}"
+    let peers = [];
    $(".sb-"+conf_name+"-url").addClass("active");
-    // Progress Bar
-    let bar = $(".progress-bar")
-    function startProgressBar(){
-        bar.css("width","0%")
-        bar.css("opacity", "100")
-        bar.css("background", "rgb(255,69,69)")
-        bar.css("background", "linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)")
-        bar.css("width","25%")
-        setTimeout(function(){
-            stillLoadingProgressBar();
-        },300)
-    }
-    function stillLoadingProgressBar(){
-        bar.css("transition", "3s ease-in-out")
-        bar.css("width", "75%")
-    }
-    function endProgressBar(){
-        bar.css("transition", "0.3s ease-in-out")
-        bar.css("width","100%")
-        setTimeout(function(){
-            bar.css("opacity", "0")
-        },250)
-
-    }
-	function load_data(search){
-        startProgressBar()
-		$.ajax({
-			method: "GET",
-			url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
-			headers:{
-				"Content-Type": "application/json"
-			},
-			success: function (response){
-				$("#config_body").html(response);
-                $("#search_peer_textbox").css("display", "block")
-                endProgressBar()
-			}
-		})
-	}
-	$(document).ready(function(){
-		load_data($('#search_peer_textbox').val());
-		setInterval(function(){
-			load_data($('#search_peer_textbox').val());
-		}, {{dashboard_refresh_interval}})
+	$(function(){
+		configurations.loadPeers($('#search_peer_textbox').val());
 	});
 </script>
-<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
 </html>	
--- a/src/templates/footer.html
+++ b/src/templates/footer.html
@@ -1,3 +1,3 @@
-<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
-<script src="{{ url_for('static',filename='js/bootstrap.bundle.js') }}"></script>
-<script src="{{ url_for('static',filename='js/tools.js') }}"></script>
+<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>
--- a/src/templates/get_conf.html
+++ b/src/templates/get_conf.html
@@ -1,9 +1,7 @@
 <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
 	<div class="info mt-4">
        {% if conf_data['listen_port'] == "" and conf_data['status'] == "stopped" %}
-            <div class="alert alert-warning" role="alert">
-                Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.
-            </div>
+            <div class="alert alert-warning" role="alert">Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.</div>
        {% endif %}
        {% if conf_data['conf_address'] == "N/A" %}
            <div class="alert alert-warning" role="alert">
@@ -51,7 +49,7 @@
 			<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></small>
+                    <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong>
                </small>
 				<h6><samp class="key">{{conf_data['public_key']}}</samp></h6>
 			</div>
@@ -63,7 +61,6 @@
                    {% else %}
                        {{conf_data['listen_port']}}
                    {% endif %}
-
                </samp></h6>
 			</div>
            <div class="col-sm">
@@ -109,15 +106,12 @@
                    <i class="bi bi-plus-circle-fill" style=""></i> Add Peer
                </button>
            </div>
-            <hr>
 		</div>
 	</div>

    <div class="row peer_list">
        {% if conf_data['peer_data']|length == 0 %}
-            <div class="col-12" style="text-align: center; margin-top: 1.5rem">
-                <h3 class="text-muted">Oops! No peers found ‘︿’</h3>
-            </div>
+            <div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>
        {% endif %}

        {% for i in conf_data['peer_data']%}
@@ -126,26 +120,22 @@
            {% else %}
                <div class="col-sm-6 col-lg-4">
            {% endif %}
-                <div class="card mb-3">
-                <div class="card-header">
+            <div class="card mb-3 card-{{i['status']}}">
+                <div class="card-body">
                    <div class="row">
-                        <div class="col">
-                            <div class="card-header-body ">
+                        <div class="col-sm">
+                            <h4>
                                {% if not i['name']%}
                                    {{ "Untitled" }}
                                {% else %}
                                    {{i['name']}}
                                {% endif %}
-{#                                <span class="dot dot-{{i['status']}}"></span>#}
-                            </div>
+                            </h4>
                        </div>
-                    </div>
-                </div>
-                <div class="card-body">
-                    <div class="row">
+                        <div class="w-100"></div>
                        <div class="col-6">
                            <small class="text-muted"><strong>STATUS</strong></small>
-                            <h6 style="text-transform: uppercase;" class="mb-2"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
+                            <h6 style="text-transform: uppercase;" class="mb-2 h6-dot-{{i['status']}}"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
                        </div>
                        <div class="col-6 peer_data_group" style="text-align: right">
                            <small class="text-muted"><strong>TRANSFER</strong></small>
@@ -162,8 +152,6 @@
                            <small class="text-muted"><strong>ALLOWED IP</strong></small>
                            <h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
                        </div>
-                        <div class="w-100"></div>
-
                        <div class="col-sm">
                            <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
                            <h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
@@ -174,15 +162,10 @@
                            <h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
                        </div>
                        <div class="w-100"></div>
-                        <div class="col-sm">
-                            <hr>
-                            <div class="button-group" style="display:flex">
-
-                                <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button>
-                                <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>
+                        <div class="col-sm"><hr><div class="button-group" style="display:flex"><button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button><button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>
                                {% if i['private_key'] %}
                                    <div class="share_peer_btn_group" style="margin-left: auto !important; display: inline">
-                                        <button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" img_src="{{ qrcode("[Interface]\nPrivateKey = "+i['private_key']+"\nAddress = "+i['allowed_ip']+"\nDNS = "+i['DNS']+"\n\n[Peer]\nPublicKey = "+conf_data['public_key']+"\nAllowedIPs = "+i['endpoint_allowed_ip']+"\nEndpoint = "+wg_ip+":"+conf_data['listen_port']) }}">
+                                        <button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" img_src="/qrcode/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg>
                                        </button>
                                        <a href="/download/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}" class="btn btn-outline-info btn-download-peer btn-control">
@@ -196,11 +179,6 @@
                </div>
            </div>
            </div>
-
-
        {%endfor%}
    </div>
-
-
-
 </main>
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -1,10 +1,18 @@
 <head>
 <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>Wireguard Dashboard | {{ title }}</title>
+	<title>{{ title }} | WGDashboard</title>
+    <link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="e">
+    <meta name="apple-mobile-web-app-title" content="e">
+    <meta name="msapplication-starturl" content="/">
+    <link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
-	<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
+	<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>
-
+</head>
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,4 +1,5 @@
-<html>
+<!-- index.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
+<html lang="en">
 {% with %}
    {% set title="Home" %}
    {% include "header.html"%}
@@ -9,18 +10,27 @@
 	<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">
-            <h1 class="pb-4 mt-4">Home</h1>
+            <div style="display: flex; flex-direction: row; align-items: center;">
+                <h1 class="pb-4 mt-4">Home</h1>
+            </div>
+            {% if msg != "" %}
+                <div class="alert alert-danger" role="alert">
+                    Configuration toggle failed. Please check the following error message:
+                </div>
+                <pre class="index-alert"><code>{{ msg }}</code></pre>
+            {% endif %}
+
            {% if conf == [] %}
                <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">
+				<div class="card mt-3 conf_card">
 					<div class="card-body">
 						<div class="row">
 							<div class="col card-col">
 								<small class="text-muted"><strong>CONFIGURATION</strong></small>
-								<a href="/configuration/{{i['conf']}}">
-									<h6 class="card-title" style="margin:0 !important;">{{i['conf']}}</h6>
+								<a href="/configuration/{{i['conf']}}" class="conf_link">
+									<h6 class="card-title" style="margin:0 !important;"><samp>{{i['conf']}}</samp></h6>
 								</a>
 							</div>
 							<div class="col card-col">
@@ -29,7 +39,7 @@
 							</div>
 							<div class="col-md card-col">
 								<small class="text-muted"><strong>PUBLIC KEY</strong></small>
-								<h6 style="text-transform: uppercase; margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
+								<h6 style="margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
 							</div>
 							<div class="col-md index-switch">
                                {% if i['checked'] == "checked" %}
@@ -51,11 +61,18 @@
 </body>
 {% include "footer.html" %}
 <script>
-	$('.switch').click(function() {
+
+	$('.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")
+	$(".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>
 </html>
--- a/src/templates/navbar.html
+++ b/src/templates/navbar.html
@@ -1,5 +1,5 @@
 <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="/">Wireguard Dashboard</a>
+    <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>
--- a/src/templates/qrcode.html
+++ b/src/templates/qrcode.html
@@ -0,0 +1 @@
+{{ qrcode(i) }}
--- a/src/templates/sidebar.html
+++ b/src/templates/sidebar.html
@@ -9,7 +9,7 @@
                    {% endif %}
                    {% if session['update'] == "true" %}
                    <li class="nav-item sb-update-li">
-                        <a class="nav-link sb-update-url" href="https://github.com/donaldzou/wireguard-dashboard#-how-to-update-the-dashboard">New Update Available!<span class="dot dot-running"></span></a>
+                        <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>
                    </li>
                    {% endif %}
                </ul>
@@ -39,7 +39,7 @@
                    </ul>
                {% endif %}
                 <ul class="nav flex-column">
-                     <li class="nav-item"><a href="https://github.com/donaldzou/wireguard-dashboard/releases/tag/{{ session['dashboard_version'] }}"><small class="nav-link text-muted">{{ session['dashboard_version'] }}</small></a></li>
+                     <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>
        </nav>
--- a/src/templates/signin.html
+++ b/src/templates/signin.html
@@ -1,44 +1,87 @@
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Wireguard Dashboard | Login</title>
-        <link rel="icon" href="{{ url_for('static',filename='logo.png') }}"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
-    </head>
+    {% with title="Sign In"%}
+        {% include "header.html"%}
+    {% endwith %}
+    <style>
+        .login-container-fluid{
+            display: flex;
+            height: calc( 100% - 240px );
+            align-items: center;
+        }
+    </style>
    <body>
        {% include "navbar.html" %}
-        <div class="container-fluid">
-
+        <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-danger" role="alert">
-                                {{ message }}
-                            </div>
+                        {% 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" style="margin-top: 1rem; margin-bottom: 0rem;"></div>
                        <div class="form-group">
-                        <label for="username" class="text-left">Username</label>
-                        <input type="text" class="form-control" id="username" name="username" required>
-                      </div>
-                      <div class="form-group">
-                        <label for="password" class="text-left">Password</label>
-                        <input type="password" class="form-control" id="password" name="password" required>
-                      </div>
-                      <button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button>
+                            <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></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>
                    </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").click(function(){
-        $(this).html("Signing In...")
-    })
+    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){
+                loginButton.html("Sign In");
+                check = false;
+                $(req[i]).addClass("is-invalid");
+                break;
+            }
+        }
+        if (check){
+            $(this).html("Signing In...").attr("disabled", "disabled");
+            $.ajax({
+                url: "/auth",
+                method: "POST",
+                headers:{"Content-Type": "application/json"},
+                data: JSON.stringify({
+                    "username": $("#username").val(),
+                    "password": $("#password").val()
+                })
+            }).done(function(res){
+                if (res.status === true){
+                    const urlParams = new URLSearchParams(window.location.search);
+                    if (urlParams.get("redirect")){
+                        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").fadeIn();
+                    loginButton.html("Sign In").removeAttr("disabled");
+                    $("input[required]").addClass("is-invalid");
+                }
+            });
+        }
+    });
 </script>
 </html>
--- a/src/util.py
+++ b/src/util.py
@@ -0,0 +1,81 @@
+import re
+
+"""
+Helper Functions
+"""
+
+
+# Regex Match
+def regex_match(regex, text):
+    pattern = re.compile(regex)
+    return pattern.search(text) is not None
+
+
+# Check IP format
+def check_IP(ip):
+    ip_patterns = (
+        r"((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|$)){4}",
+        r"[0-9a-fA-F]{0,4}(:([0-9a-fA-F]{0,4})){1,7}$"
+    )
+    for match_pattern in ip_patterns:
+        match_result = regex_match(match_pattern, ip)
+        if match_result:
+            result = match_result
+            break
+    else:
+        result = None
+
+    return result
+
+
+# Clean IP
+def clean_IP(ip):
+    return ip.replace(' ', '')
+
+
+# Clean IP with range
+def clean_IP_with_range(ip):
+    return clean_IP(ip).split(',')
+
+
+# Check IP with range
+def check_IP_with_range(ip):
+    ip_patterns = (
+        r"((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.|\/)){4}([0-9]{1,2})(,|$)",
+        r"[0-9a-fA-F]{0,4}(:([0-9a-fA-F]{0,4})){1,7}\/([0-9]{1,3})(,|$)"
+    )
+
+    for match_pattern in ip_patterns:
+        match_result = regex_match(match_pattern, ip)
+        if match_result:
+            result = match_result
+            break
+    else:
+        result = None
+
+    return result
+
+
+# Check allowed ips list
+def check_Allowed_IPs(ip):
+    ip = clean_IP_with_range(ip)
+    for i in ip:
+        if not check_IP_with_range(i): return False
+    return True
+
+
+# Check DNS
+def check_DNS(dns):
+    dns = dns.replace(' ', '').split(',')
+    status = True
+    for i in dns:
+        if not (check_IP(i) or regex_match("(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z][a-z]{0,61}[a-z]", i)):
+            return False
+    return True
+
+
+# Check remote endpoint
+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))
+
--- a/src/wg-dashboard.service
+++ b/src/wg-dashboard.service
@@ -1,11 +1,14 @@
 [Unit]
-After=netword.service
+After=syslog.target network-online.target
+ConditionPathIsDirectory=/etc/wireguard

 [Service]
-WorkingDirectory=<your dashboard directory full path here>
-ExecStart=/usr/bin/python3 <your dashboard directory full path here>dashboard.py
+Environment="VIRTUAL_ENV={{VIRTUAL_ENV}}"
+WorkingDirectory={{APP_ROOT}}
+ExecStart={{VIRTUAL_ENV}}/bin/python3 {{APP_ROOT}}/dashboard.py
+PrivateTmp=yes
 Restart=always


 [Install]
-WantedBy=default.target
+WantedBy=multi-user.target
--- a/src/wgd.sh
+++ b/src/wgd.sh
@@ -1,92 +1,156 @@
 #!/bin/bash

+# wgd.sh - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]
+# Under Apache-2.0 License
 app_name="dashboard.py"
-app_official_name="Wireguard Dashboard"
+app_official_name="WGDashboard"
+PID_FILE=./gunicorn.pid
+environment=$(if [[ $ENVIRONMENT ]]; then echo $ENVIRONMENT; else echo 'develop'; fi)
+if [[ $CONFIGURATION_PATH ]]; then
+  cb_work_dir=$CONFIGURATION_PATH/letsencrypt/work-dir
+  cb_config_dir=$CONFIGURATION_PATH/letsencrypt/config-dir
+else
+  cb_work_dir=/etc/letsencrypt
+  cb_config_dir=/var/lib/letsencrypt
+fi
+
 dashes='------------------------------------------------------------'
 equals='============================================================'
 help () {
  printf "=================================================================================\n"
-  printf "+ <Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou            +\n"
+  printf "+          <WGDashboard> by Donald Zou - https://github.com/donaldzou           +\n"
  printf "=================================================================================\n"
  printf "| Usage: ./wgd.sh <option>                                                      |\n"
  printf "|                                                                               |\n"
  printf "| Available options:                                                            |\n"
-  printf "|    start: To start Wireguard Dashboard                                        |\n"
-  printf "|    stop: To stop Wireguard Dashboard.                                         |\n"
-  printf "|    debug: To start Wireguard Dashboard in debug mode (i.e run in foreground). |\n"
-  printf "|    update: To update Wireguard Dashboard to the newest version from GitHub.   |\n"
-  printf "|    install: To install Wireguard Dashboard.                                   |\n"
+  printf "|    start: To start WGDashboard.                                               |\n"
+  printf "|    stop: To stop WGDashboard.                                                 |\n"
+  printf "|    debug: To start WGDashboard in debug mode (i.e run in foreground).         |\n"
+  printf "|    update: To update WGDashboard to the newest version from GitHub.           |\n"
+  printf "|    install: To install WGDashboard.                                           |\n"
  printf "| Thank you for using! Your support is my motivation ;)                         |\n"
  printf "=================================================================================\n"
 }

+_check_and_set_venv(){
+    # This function will not be using in v3.0
+    # deb/ubuntu users: might need a 'apt install python3.8-venv'
+    # set up the local environment
+    APP_ROOT=`pwd`
+    VIRTUAL_ENV="${APP_ROOT%/*}/venv"
+    if [ ! -d $VIRTUAL_ENV ]; then
+        python3 -m venv $VIRTUAL_ENV
+    fi
+    . ${VIRTUAL_ENV}/bin/activate
+}
+
 install_wgd(){
-    # Check Python3 version
+    printf "| Starting to install WGDashboard                          |\n"
    version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
    if [ $version_pass == "0" ]
-      then printf "| Wireguard Dashboard required Python3.7+                  |\n"
+      then printf "| WGDashboard required Python 3.7 or above          |\n"
      printf "%s\n" "$dashes"
      exit 1
    fi
-    rm db/hi.txt >  /dev/null 2>&1
+    if [ ! -d "db" ]
+      then mkdir "db"
+    fi
    if [ ! -d "log" ]
      then mkdir "log"
    fi
+    printf "| Upgrading pip                                            |\n"
+    python3 -m pip install -U pip > /dev/null 2>&1
    printf "| Installing latest Python dependencies                    |\n"
-    python3 -m pip install -r requirements.txt >  /dev/null 2>&1
-    printf "| Wireguard Dashboard installed successfully!              |\n"
-    printf "| Starting Dashboard                                       |\n"
-    start_wgd
+    python3 -m pip install -U -r requirements.txt > /dev/null 2>&1
+    printf "| WGDashboard installed successfully!                      |\n"
+    printf "| Enter ./wgd.sh start to start the dashboard              |\n"
 }


 check_wgd_status(){
-  if ps aux | grep '[p]ython3 '$app_name > /dev/null;
-    then
+  if test -f "$PID_FILE"; then
+    if ps aux | grep -v grep | grep $(cat ./gunicorn.pid)  > /dev/null; then
+    return 0
+    else
+      return 1
+    fi
+  else
+    if ps aux | grep -v grep | grep '[p]ython3 '$app_name > /dev/null; then
      return 0
-      else
-        return 1
+    else
+      return 1
+    fi
  fi
 }

+certbot_create_ssl () {
+  certbot certonly --config ./certbot.ini --email "$EMAIL" --work-dir $cb_work_dir --config-dir $cb_config_dir --domain "$SERVERURL"
+}
+
+certbot_renew_ssl () {
+  certbot renew --work-dir $cb_work_dir --config-dir $cb_config_dir
+}
+
+gunicorn_start () {
+  printf "%s\n" "$dashes"
+  printf "| Starting WGDashboard with Gunicorn in the background.    |\n"
+  if [ ! -d "log" ]; then
+    mkdir "log"
+  fi
+  d=$(date '+%Y%m%d%H%M%S')
+  if [[ $USER == root ]]; then
+    export PATH=$PATH:/usr/local/bin:$HOME/.local/bin
+  fi
+  gunicorn --access-logfile log/access_"$d".log \
+  --error-logfile log/error_"$d".log 'dashboard:run_dashboard()'
+  printf "| Log files is under log/                                  |\n"
+  printf "%s\n" "$dashes"
+}
+
+gunicorn_stop () {
+  kill $(cat ./gunicorn.pid)
+}
+
 start_wgd () {
-    printf "%s\n" "$dashes"
-    printf "| Starting Wireguard Dashboard in the background.          |\n"
-    if [ ! -d "log" ]
-      then mkdir "log"
-    fi
-    d=$(date '+%Y%m%d%H%M%S')
-    python3 "$app_name" > log/"$d".txt 2>&1 &
-    printf "| Log files is under log/                                  |\n"
-    printf "%s\n" "$dashes"
+    gunicorn_start
 }

 stop_wgd() {
-  kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
+  if test -f "$PID_FILE"; then
+    gunicorn_stop
+  else
+    kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
+  fi
 }

 start_wgd_debug() {
  printf "%s\n" "$dashes"
-  printf "| Starting Wireguard Dashboard in the foreground.          |\n"
+  printf "| Starting WGDashboard in the foreground.                  |\n"
  python3 "$app_name"
  printf "%s\n" "$dashes"
 }

 update_wgd() {
-  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/wireguard-dashboard/releases/latest').read(); output = json.loads(data);print(output['tag_name'])")
+  new_ver=$(python3 -c "import json; import urllib.request; data = urllib.request.urlopen('https://api.github.com/repos/donaldzou/WGDashboard/releases/latest').read(); output = json.loads(data);print(output['tag_name'])")
  printf "%s\n" "$dashes"
  printf "| Are you sure you want to update to the %s? (Y/N): " "$new_ver"
  read up
  if [ "$up" = "Y" ]; then
-    printf "| Shutting down Wireguard Dashboard...                     |\n"
-    kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
+    printf "| Shutting down WGDashboard...                             |\n"
+    if check_wgd_status; then
+      stop_wgd
+    fi
+    mv wgd.sh wgd.sh.old
    printf "| Downloading %s from GitHub...                            |\n" "$new_ver"
    git stash > /dev/null 2>&1
-    git pull https://github.com/donaldzou/wireguard-dashboard.git $new_ver --force >  /dev/null 2>&1
+    git pull https://github.com/donaldzou/WGDashboard.git $new_ver --force >  /dev/null 2>&1
+    printf "| Upgrading pip                                            |\n"
+    python3 -m pip install -U pip > /dev/null 2>&1
    printf "| Installing latest Python dependencies                    |\n"
-    python3 -m pip install -r requirements.txt >  /dev/null 2>&1
+    python3 -m pip install -U -r requirements.txt > /dev/null 2>&1
    printf "| Update Successfully!                                     |\n"
-    start_wgd
+    printf "%s\n" "$dashes"
+    rm wgd.sh.old
  else
    printf "%s\n" "$dashes"
    printf "| Update Canceled.                                         |\n"
@@ -102,7 +166,7 @@ if [ "$#" != 1 ];
    if [ "$1" = "start" ]; then
        if check_wgd_status; then
          printf "%s\n" "$dashes"
-          printf "| Wireguard Dashboard is already running.                  |\n"
+          printf "| WGDashboard is already running.                          |\n"
          printf "%s\n" "$dashes"
          else
            start_wgd
@@ -111,30 +175,32 @@ if [ "$#" != 1 ];
        if check_wgd_status; then
            printf "%s\n" "$dashes"
            stop_wgd
-            printf "| Wireguard Dashboard is stopped.                          |\n"
+            printf "| WGDashboard is stopped.                                  |\n"
            printf "%s\n" "$dashes"
            else
              printf "%s\n" "$dashes"
-              printf "| Wireguard Dashboard is not running.                      |\n"
+              printf "| WGDashboard is not running.                              |\n"
              printf "%s\n" "$dashes"
        fi
      elif [ "$1" = "update" ]; then
        update_wgd
      elif [ "$1" = "install" ]; then
+        printf "%s\n" "$dashes"
        install_wgd
+        printf "%s\n" "$dashes"
      elif [ "$1" = "restart" ]; then
         if check_wgd_status; then
           printf "%s\n" "$dashes"
           stop_wgd
-           printf "| Wireguard Dashboard is stopped.                          |\n"
-           sleep 2
+           printf "| WGDashboard is stopped.                                  |\n"
+           sleep 4
           start_wgd
        else
          start_wgd
        fi
      elif [ "$1" = "debug" ]; then
        if check_wgd_status; then
-          printf "| Wireguard Dashboard is already running.                  |\n"
+          printf "| WGDashboard is already running.                          |\n"
          else
            start_wgd_debug
        fi
@@ -142,4 +208,3 @@ if [ "$#" != 1 ];
        help
    fi
 fi
-
Author	SHA1	Message	Date
Donald Cheng Hong Zou	d52cd2b17c	Doing a update	2022-03-22 17:28:19 -04:00
Donald Cheng Hong Zou	cefa80f317	Fixed redirect functionality	2022-03-22 16:17:12 -04:00
Donald Cheng Hong Zou	191ff1abec	Merge branch 'main' of https://github.com/donaldzou/WGDashboard	2022-02-28 13:29:25 -05:00
Donald Cheng Hong Zou	3bb86493cc	Minor changes	2022-02-28 13:29:17 -05:00
Donald Zou	d1d3151e1e	Update README.md	2022-02-27 15:50:55 -05:00
Donald Cheng Hong Zou	f9dc9ebdb3	Removed some unnecessary comments	2022-02-11 09:35:58 -05:00
Donald Cheng Hong Zou	3b478bcc2d	OneDrive gone again....	2022-02-04 21:36:46 -05:00
Donald Cheng Hong Zou	77bb78c381	OneDrive caused my whole project folder gone....	2022-02-04 11:44:50 -05:00
Donald Cheng Hong Zou	cafa97f502	Changed version number	2022-01-31 16:09:50 -05:00
Donald Cheng Hong Zou	0d858493d5	Update README.md	2022-01-31 09:56:38 -05:00
Donald Cheng Hong Zou	99fb07c6b3	Fixed public key error with existed private key	2022-01-31 09:38:05 -05:00
Donald Zou	eaad971c0a	Update README.md	2022-01-24 22:06:38 -05:00
Donald Cheng Hong Zou	377abd87fd	Commit	2022-01-24 20:11:35 -05:00
Donald Zou	af71176296	Merge pull request #133 from donaldzou/v3.0.3-pr v3.0.3	2022-01-23 19:34:06 -05:00
Donald Cheng Hong Zou	69737177ef	Changed version number to v3.0.3	2022-01-23 19:30:43 -05:00
Donald Cheng Hong Zou	efae1222c1	Update dashboard.py	2022-01-23 19:25:12 -05:00
Donald Cheng Hong Zou	3caea1a903	Update README.md	2022-01-23 19:21:43 -05:00
Donald Cheng Hong Zou	a43478d627	Fixed no init_dashboard() for debug mode the first time	2022-01-23 19:19:38 -05:00
Donald Cheng Hong Zou	ed2c3f43c7	Added tracking loading time	2022-01-19 10:43:39 -05:00
Donald Cheng Hong Zou	fcfd816cec	Remove pylint	2022-01-19 09:25:27 -05:00
Donald Cheng Hong Zou	2e3977e59c	commit	2022-01-19 09:18:03 -05:00
Donald Cheng Hong Zou	3c68430336	Update pylint.yml	2022-01-19 09:12:57 -05:00
Donald Cheng Hong Zou	43afb86fa8	Update pylint.yml	2022-01-19 09:10:59 -05:00
Donald Cheng Hong Zou	194ccbdbb4	Update pylint.yml	2022-01-19 09:10:07 -05:00
Donald Cheng Hong Zou	7139e230cf	Commit	2022-01-19 09:08:27 -05:00
Donald Zou	120d3b9f54	Update pylint.yml	2022-01-19 09:05:39 -05:00
Donald Zou	712460a040	Update pylint.yml	2022-01-19 09:03:35 -05:00
Donald Zou	be5594f1c9	Create pylint.yml	2022-01-19 09:01:35 -05:00
Donald Cheng Hong Zou	0a885117db	Update README.md	2022-01-18 13:04:00 -05:00
Donald Zou	5b73654544	Update README.md	2022-01-18 12:43:37 -05:00
Donald Cheng Hong Zou	1485b78b7b	Merge branch 'main' of https://github.com/donaldzou/WGDashboard	2022-01-18 12:43:20 -05:00
Donald Cheng Hong Zou	bfec57172a	Update README.md	2022-01-18 12:43:11 -05:00
Donald Zou	9f8559c12d	Update README.md	2022-01-18 12:34:40 -05:00
Donald Zou	83dde12ca9	Merge pull request #126 from donaldzou/Migrate-to-SQLite Production branch for v3.0	2022-01-18 12:33:34 -05:00
Donald Cheng Hong Zou	d17888db4e	Update README.md	2022-01-18 12:33:21 -05:00
Donald Cheng Hong Zou	096529af96	Experimental Functions	2022-01-18 12:16:10 -05:00
Donald Cheng Hong Zou	8a56b22635	Added manifest.json	2022-01-18 11:02:19 -05:00
Donald Cheng Hong Zou	dcdd353981	Removed unnecessary files	2022-01-18 10:49:41 -05:00
Donald Cheng Hong Zou	258564208b	Finalizing everything.	2022-01-18 10:42:23 -05:00
Donald Cheng Hong Zou	e2e8222005	Upload manifest.json	2022-01-16 20:35:24 -05:00
Donald Cheng Hong Zou	75f2826805	Merge branch 'pr/93' into Migrate-to-SQLite	2022-01-13 09:44:47 -05:00
Donald Cheng Hong Zou	730af4f2ee	Finishing documentation	2022-01-13 09:37:23 -05:00
Donald Zou	e5737ebd9d	Merge branch 'main' into Migrate-to-SQLite	2022-01-12 21:41:41 -05:00
Donald Cheng Hong Zou	7f24904164	Bugs	2022-01-12 20:28:12 -05:00
Donald Cheng Hong Zou	9ff7198602	Still finalizing everything	2022-01-12 19:53:36 -05:00
Donald Cheng Hong Zou	6d56967a0f	Getting ready for v3.0	2022-01-08 15:26:17 -05:00
Donald Cheng Hong Zou	584118805a	Feature Added Moved key generating to front-end, by using wireguard.js from WireGuard's official repository. Added "Add Peers by bulk" feature.	2022-01-06 15:17:43 -05:00
Donald Zou	68b3f01082	Merge pull request #127 from pgalonza/refactoring Fixed misprint	2022-01-04 16:41:26 -05:00
Donald Cheng Hong Zou	77a82cb84b	Finished adding available IP and related UI adjustment	2022-01-04 16:32:23 -05:00
Galonza Peter	844b19495d	fixed misprint	2022-01-03 00:51:22 +03:00
Donald Cheng Hong Zou	b8b721f2bd	Delete wgdashboard.db	2022-01-02 14:45:24 -05:00
Donald Cheng Hong Zou	4f93d48ac6	Successfully migrate to SQlite	2022-01-02 14:44:27 -05:00
Donald Zou	02d1bf5a2c	Merge pull request #125 from pgalonza/refactoring Refactoring	2022-01-02 14:41:24 -05:00
Galonza Peter	fb3606c2b7	Refactored Added docstrings like sphinx style, small refactoring and added TODO	2022-01-02 16:35:39 +03:00
Galonza Peter	a5bc2cd48f	wg_conf_path is global variable	2022-01-01 03:20:30 +03:00
Galonza Peter	72151ac6a3	db path is global variable	2022-01-01 02:57:59 +03:00
Donald Cheng Hong Zou	e2c8b3bf02	Removed Semaphore for configuration file	2021-12-31 13:29:37 -05:00
Donald Cheng Hong Zou	06dd641274	Minified all CSS and JS script	2021-12-30 15:21:25 -05:00
Donald Cheng Hong Zou	7d9bf01d27	Cleaned `configuration.js` Removed unused functions and duplicated jQuery selector	2021-12-29 23:26:15 -05:00
Donald Cheng Hong Zou	b9553e0a05	Update dashboard.py Finished refactoring some variable name	2021-12-29 16:15:00 -05:00
Donald Cheng Hong Zou	993dcaf235	Merge branch 'main' of https://github.com/donaldzou/WGDashboard	2021-12-29 15:30:52 -05:00
Donald Cheng Hong Zou	8d7c39bac4	Update dashboard.py Wrapped all reading and writing to dashboard configuration into functions	2021-12-29 15:29:29 -05:00
Donald Zou	80933ab571	Merge pull request #124 from pgalonza/fix-variables Fixed variables name	2021-12-29 14:57:53 -05:00
Donald Cheng Hong Zou	b5b30c8119	Update dashboard.py	2021-12-29 14:57:44 -05:00
Galonza Peter	bca06129d9	fixed variables name	2021-12-29 22:56:19 +03:00
Donald Zou	a136b86d81	Merge pull request #122 from pgalonza/change-path Fixed variable name	2021-12-29 14:20:52 -05:00
Donald Zou	8d555d8ae7	Merge pull request #121 from pgalonza/refactoring Refactoring	2021-12-29 13:57:21 -05:00
Donald Zou	c22e61add2	Merge branch 'main' into refactoring	2021-12-29 13:57:11 -05:00
Donald Zou	2c83f1ce57	Merge pull request #120 from pgalonza/fix-download Fixed download configuration file for peer	2021-12-29 12:21:29 -05:00
Donald Cheng Hong Zou	f2750de153	Feature adding and UI adjustment Added Preshared-Key to all configuration	2021-12-29 12:17:44 -05:00
Galonza Peter	e0934f11d6	Merge branch 'main' into fix-download	2021-12-29 02:00:36 +03:00
Galonza Peter	422924026a	fixed variable name	2021-12-29 02:00:18 +03:00
Galonza Peter	332e22e534	Merge branch 'main' into refactoring # Conflicts: # src/dashboard.py	2021-12-29 01:51:41 +03:00
Galonza Peter	c7bf30e18e	pylint warnings	2021-12-29 00:59:10 +03:00
Galonza Peter	5ade5176c0	fixed download configuration file for peer	2021-12-28 22:55:52 +03:00
Donald Zou	f9e4fafe9f	Merge pull request #96 from pgalonza/change-path Added the ability to change the path for files to be saved	2021-12-27 21:05:34 -05:00
Donald Zou	201f2ef1f0	Merge branch 'main' into change-path	2021-12-27 21:05:25 -05:00
Donald Zou	32af4fdcca	Merge pull request #119 from donaldzou/v3.0-beta Finishing v3.0	2021-12-27 21:01:24 -05:00
Donald Cheng Hong Zou	d254b4cc39	Finishing v3.0	2021-12-27 21:01:02 -05:00
Galonza Peter	d0ad4e05bf	general refactoring	2021-12-28 00:29:26 +03:00
Galonza Peter	c75854cb7b	fixed after merge	2021-12-27 00:35:10 +03:00
Galonza Peter	8cc71913b3	fixed read configuration after merge	2021-12-26 23:17:19 +03:00
Galonza Peter	99abe6bcd2	Merge branch 'main' into change-path	2021-12-26 12:58:44 +03:00
Galonza Peter	f5ad7a49ce	general refactoring	2021-12-26 12:57:57 +03:00
Donald Cheng Hong Zou	e42ecf3c99	Update wgd.sh	2021-12-25 17:45:47 -05:00
Donald Cheng Hong Zou	b58bf9dc17	Update wgd.sh	2021-12-25 17:40:53 -05:00
Donald Cheng Hong Zou	745c8aaf3e	Update wgd.sh	2021-12-25 17:40:08 -05:00
Donald Cheng Hong Zou	0ca73bf80b	Update wgd.sh	2021-12-25 17:38:13 -05:00
Donald Cheng Hong Zou	fd76cabd01	Update wgd.sh	2021-12-25 17:37:43 -05:00
Donald Cheng Hong Zou	fcf9300a49	Update wgd.sh	2021-12-25 17:35:36 -05:00
Donald Cheng Hong Zou	649b66ba1a	Update wgd.sh	2021-12-25 17:20:52 -05:00
Donald Cheng Hong Zou	b5d73a0861	Delete hi.txt	2021-12-25 17:20:31 -05:00
Donald Cheng Hong Zou	1453996ccb	Update wgd.sh	2021-12-25 17:16:50 -05:00
Donald Cheng Hong Zou	5bf9b97d70	Update wgd.sh	2021-12-25 17:15:33 -05:00
Donald Cheng Hong Zou	5c1e46f5a6	Update wgd.sh	2021-12-25 17:13:21 -05:00
Donald Cheng Hong Zou	c2665cbae8	Update wgd.sh	2021-12-25 17:13:08 -05:00
Donald Cheng Hong Zou	3934248a6b	Update wgd.sh	2021-12-25 17:08:59 -05:00
Donald Cheng Hong Zou	7ae3bb5601	Testing update function	2021-12-25 17:07:33 -05:00
Donald Cheng Hong Zou	9890d4f3bc	Removed using `venv` for now	2021-12-25 16:29:33 -05:00
Donald Cheng Hong Zou	5b47fc16d9	Update wgd.sh	2021-12-25 16:08:30 -05:00
Galonza Peter	344770a0a4	Merge branch 'main' into change-path # Conflicts: # src/dashboard.py	2021-12-25 23:42:10 +03:00
Donald Cheng Hong Zou	fc11cacd24	Update wgd.sh	2021-12-25 15:20:56 -05:00
Donald Cheng Hong Zou	737ebdd0c6	Update wgd.sh	2021-12-25 15:20:04 -05:00
Galonza Peter	d06dddfa24	Merge branch 'main' into change-path	2021-12-25 23:17:40 +03:00
Donald Cheng Hong Zou	710d631ffe	Update wgd.sh	2021-12-25 15:17:07 -05:00
Donald Cheng Hong Zou	7d9a845ca0	Update wgd.sh	2021-12-25 14:48:38 -05:00
Donald Cheng Hong Zou	cc6e5ffb97	Update wgd.sh	2021-12-25 14:46:47 -05:00
Donald Cheng Hong Zou	8d29cb7488	Testing Python venv	2021-12-25 14:44:14 -05:00
Donald Cheng Hong Zou	5c588ea01a	Style adjustment Adjusted style and the status light: Added box-shadow and border for connected peer	2021-12-24 00:20:44 -05:00
Donald Zou	dade9935da	Merge pull request #117 from donaldzou/v3.0-Slow-Load-Fix Slow Performance Fixed	2021-12-24 00:19:26 -05:00
Donald Cheng Hong Zou	34cd3aaaca	Slow Performance Fixed	2021-12-23 21:26:24 -05:00
Donald Cheng Hong Zou	78d3f338fb	Update dashboard.py	2021-12-22 11:36:29 -05:00
Donald Zou	d801c5911e	Merge pull request #91 from pgalonza/todo-ipv6 Add IPv6	2021-12-22 11:35:17 -05:00
Galonza Peter	003743c074	Merge branch 'main' into gunicorn	2021-12-21 22:41:03 +03:00
Galonza Peter	4cef39d3b1	Merge branch 'main' into gunicorn-tmp # Conflicts: # src/wgd.sh	2021-12-21 22:38:31 +03:00
Galonza Peter	83f0df32d7	added thread	2021-12-21 22:23:26 +03:00
Galonza Peter	24f269191c	added Let’s Encrypt via certbot	2021-12-21 22:23:13 +03:00
Galonza Peter	94a0d5a0a4	refactored	2021-12-21 22:23:05 +03:00
Galonza Peter	c0fbf4dd0c	optimized performance # Conflicts: # src/gunicorn.conf.py	2021-12-21 22:22:37 +03:00
Galonza Peter	37b6161075	fixed check gunicorn process	2021-12-21 22:20:43 +03:00
Galonza Peter	c9b792c370	fixed update variable	2021-12-21 22:20:31 +03:00
Galonza Peter	2103d547a1	fixed initiation for gunicorn	2021-12-21 22:18:36 +03:00
Galonza Peter	3918e220d2	style	2021-12-21 22:17:32 +03:00
Galonza Peter	c3eaaed43b	fixed stop	2021-12-21 22:17:07 +03:00
Galonza Peter	e0bf648076	added paths when command as root	2021-12-21 22:16:40 +03:00
Galonza Peter	bb298164e4	added gunicorn in requirements	2021-12-21 22:15:55 +03:00
Galonza Peter	898694b9be	fixed gunicorn start and added stop	2021-12-21 22:15:41 +03:00
Galonza Peter	f0f9ac92e6	added gunicorn start	2021-12-21 22:15:23 +03:00
Galonza Peter	ea0229a8ab	added wsgi for gunicorn	2021-12-21 22:15:08 +03:00
Donald Zou	66fc7cd91d	Merge pull request #112 from reafian/main Added MTU and PersistentKeepalive to QR code and download files	2021-12-21 14:12:42 -05:00
Donald Zou	c11d4f01b1	Merge pull request #114 from donaldzou/all-contributors/add-marneu docs: add marneu as a contributor for code	2021-12-21 13:54:03 -05:00
Donald Zou	a8f498f292	Merge pull request #113 from donaldzou/marneu-main Marneu main	2021-12-21 13:53:51 -05:00
allcontributors[bot]	6854e2275f	docs: update .all-contributorsrc [skip ci]	2021-12-21 18:53:40 +00:00
allcontributors[bot]	6662e79ac5	docs: update README.md [skip ci]	2021-12-21 18:53:39 +00:00
Donald Cheng Hong Zou	9e77430634	Added Slash	2021-12-21 13:52:08 -05:00
Richard Newton	b8e070824a	Update get_conf.html Added MTU and PersistentKeepalive back into QR Code. Update dashboard.py Added MTU and PersistentKeepalive to downloaded file.	2021-12-21 16:48:11 +00:00
Donald Cheng Hong Zou	304d4293f3	Update wgd.sh	2021-12-20 19:54:53 -05:00
Donald Zou	a03e7f5b53	Merge pull request #111 from donaldzou/marneu-main Marneu main	2021-12-19 18:18:50 -05:00
Donald Zou	ea57c8cad4	Merge branch 'main' into marneu-main	2021-12-19 18:18:45 -05:00
Donald Cheng Hong Zou	280802cf74	Update .gitignore	2021-12-19 18:16:45 -05:00
Donald Cheng Hong Zou	fbce01d846	Update .gitignore	2021-12-19 18:15:51 -05:00
Markus Neubauer	591b60c336	Update wgd.sh a more automated approach to systemctl	2021-12-19 18:13:15 -05:00
Markus Neubauer	78ef870d91	Update wg-dashboard.service A more automated approach	2021-12-19 18:13:15 -05:00
Donald Zou	bc19d82aed	Merge pull request #105 from marneu/patch-1 An automated way to a systemctl unit	2021-12-19 18:07:35 -05:00
Donald Zou	79b41e1056	Update README.md	2021-12-06 14:15:22 -05:00
Markus Neubauer	805f03d231	Update .gitignore	2021-11-25 16:03:09 +01:00
Donald Zou	62acc1081f	Update README.md	2021-11-19 14:48:46 -05:00
Donald Zou	257a2c2d9f	Update README.md	2021-11-19 14:45:37 -05:00
Donald Zou	ed9b05cdf9	Update README.md	2021-11-19 14:44:40 -05:00
Donald Zou	2cc6fbd643	Update README.md	2021-11-10 11:40:46 -05:00
Galonza Peter	bdfc260dd2	fixed	2021-10-24 13:32:21 +03:00
Galonza Peter	7ad65956c9	fixed, if dir is exists	2021-10-24 12:45:08 +03:00
Galonza Peter	b3dc60b7ca	fixed check ipv6 dns	2021-10-24 12:05:14 +03:00
Galonza Peter	bed08109fa	not needed	2021-10-24 02:10:20 +03:00
Galonza Peter	06cedec090	mistake	2021-10-24 01:58:59 +03:00
Galonza Peter	1d2c468d03	fixed, when database does not create, if no directory	2021-10-24 01:51:04 +03:00
Galonza Peter	e84616f5f5	added the ability to change the path for files to be saved	2021-10-24 00:56:34 +03:00
Galonza Peter	caa9a90476	added dual-stack	2021-10-17 22:55:08 +03:00
Galonza Peter	62be683dd8	fixed search ipv6 in the string with comma	2021-10-17 21:13:18 +03:00
Galonza Peter	ffa63b3f82	completed todo. Added IPv6	2021-10-17 20:22:27 +03:00
Galonza Peter	c5a7788394	optimized pattern	2021-10-17 20:01:16 +03:00
Donald Zou	99c42ff2c1	Merge pull request #90 from pike00/pike00-update-readme Updated README to include username/password	2021-10-14 10:14:38 -04:00
Will Pike	fd2b7bb917	Updated README to include username/password Updated Installation instructions to include default username/password in step 6 on login. It is located in the 'Dashboard Configuration' section, however for readability/ease of setting up the server, I added the default login to the install instructions.	2021-10-14 10:10:17 -04:00
Donald Cheng Hong Zou	922a494df0	Finished	2021-09-09 12:50:38 -04:00
Donald Cheng Hong Zou	c478ec0095	Update README.md	2021-09-09 12:45:09 -04:00
Donald Cheng Hong Zou	3abbe17910	Naming changed	2021-09-09 12:43:49 -04:00
Donald Zou	349076599f	Merge pull request #80 from ikidd/patch-1 Fixed service unit file spelling error	2021-09-09 12:35:44 -04:00
ikidd	92d299507f	Fixed service unit file spelling error	2021-09-08 20:36:53 -06:00
Donald Cheng Hong Zou	6f2d61e918	Update README.md	2021-09-08 22:02:33 -04:00
Donald Cheng Hong Zou	ed13babf6a	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2021-09-08 22:01:01 -04:00
Donald Cheng Hong Zou	80db82eb93	Update dashboard.py	2021-09-08 22:00:53 -04:00
Donald Zou	8d20334d6e	Update README.md	2021-09-08 21:59:15 -04:00
Donald Zou	03a95ad018	Merge pull request #79 from donaldzou/v2.3.1 Update README.md	2021-09-08 21:58:02 -04:00
Donald Cheng Hong Zou	aa59cc8af0	Update README.md	2021-09-08 21:57:50 -04:00
Donald Zou	80d63c2c89	Merge pull request #78 from donaldzou/v2.3.1 Changed dashboard naming to WGDashboard	2021-09-08 21:56:48 -04:00
Donald Cheng Hong Zou	03a4acd72b	Changed dashboard naming to WGDashboard	2021-09-08 21:56:31 -04:00
Donald Cheng Hong Zou	53118cf660	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2021-09-08 16:58:40 -04:00
Donald Cheng Hong Zou	16b1baf81e	Update README.md	2021-09-08 16:58:36 -04:00
Donald Zou	960e0d0965	Update README.md	2021-09-08 14:50:26 -04:00
				`@@ -0,0 +1 @@`
				$(".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")}})});