Doing a update

v3.0.3

.gitignore

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

README.md

@@ -10,6 +10,7 @@
 <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>
@@ -18,17 +19,18 @@
 
 - 🎉  **New Features**
   - **Moved from TinyDB to SQLite**: SQLite provide a better performance and loading speed when getting peers! Also avoided crashing the database due to **race condition**.
-  - **Added Gunicorn WSGI Server**: This could provide more stable on handling HTTP request, and more flexibility in the future (such as HTTPS support). **BIG THANKS to @pgalonza :heart: **
-  - **Add Peers by Bulk: ** User can add peers by bulk, just simply set the amount and click add.
+  - **Added Gunicorn WSGI Server**: This could provide more stable on handling HTTP request, and more flexibility in the future (such as HTTPS support). **BIG THANKS to @pgalonza :heart:**
+  - **Add Peers by Bulk:** User can add peers by bulk, just simply set the amount and click add.
   - **Delete Peers by Bulk**: User can delete peers by bulk, without deleting peers one by one.
   - **Download Peers in Zip**: User can download all *downloadable* peers in a zip.
   - **Added Pre-shared Key to peers:** Now each peer can add with a pre-shared key to enhance security. Previously added peers can add the pre-shared key through the peer setting button.
   - **Redirect Back to Previous Page:** The dashboard will now redirect you back to your previous page if the current session got timed out and you need to sign in again.
+  - **Added Some [🥘 Experimental Functions](#-experimental-functions)** 
   
 - 🪚  **Bug Fixed**
   - [IP Sorting range issues #99](https://github.com/donaldzou/WGDashboard/issues/99) [❤️ @barryboom]
-  - [INvalid character written to tunnel json file #108](https://github.com/donaldzou/WGDashboard/issues/108) [❤️ @ ikidd]
-  - [Add IPv6 #91](https://github.com/donaldzou/WGDashboard/pull/91) [❤️ @ pgalonza]
+  - [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**
@@ -40,7 +42,9 @@
 
 *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: 
+>  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>
 
@@ -57,6 +61,7 @@
   - [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)
@@ -111,7 +116,7 @@
 1. Download WGDashboard
 
    ```shell
-   git clone -b v3.0 https://github.com/donaldzou/WGDashboard.git wgdashboard
+   git clone -b v3.0.6 https://github.com/donaldzou/WGDashboard.git wgdashboard
    
 2. Open the WGDashboard folder
 
@@ -297,7 +302,7 @@ Since version 2.0, WGDashboard will be using a configuration file called `wg-das
 | `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`                                               | **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            |
 |                              |                                                              |                                                      |                |
@@ -344,19 +349,56 @@ Endpoint = 0.0.0.0:51820
 
 <hr>
 
+#### Update Method 1 (For `v3.0` or above)
+
+1. Change your directory to `wgdashboard/src`
+
+   ```bash
+   cd wgdashboard/src
+   ```
+
+2. Update the dashboard with the following
+
+   ```bash
+   ./wgd.sh update
+   ```
+
+   > If this doesn't work, please use the method below. Sorry about that :(
+
+#### Update Method 2
+
+
 1. Change your directory to `wgdashboard` 
-    
+   
     ```shell
-    cd wgdashboard
+    cd wgdashboard/src
     ```
     
 2. Update the dashboard
     ```shell
-    git pull https://github.com/donaldzou/WGDashboard.git v3.0 --force
+    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)

src/dashboard.py

@@ -4,7 +4,6 @@ Under Apache-2.0 License
 """
 
 import sqlite3
-from flask import g
 import configparser
 import hashlib
 import ipaddress
@@ -22,7 +21,7 @@ from datetime import datetime, timedelta
 from operator import itemgetter
 # PIP installed library
 import ifcfg
-from flask import Flask, request, render_template, redirect, url_for, session, jsonify
+from flask import Flask, request, render_template, redirect, url_for, session, jsonify, g
 from flask_qrcode import QRcode
 from icmplib import ping, traceroute
 
@@ -31,22 +30,27 @@ from util import regex_match, check_DNS, check_Allowed_IPs, check_remote_endpoin
     check_IP_with_range, clean_IP_with_range
 
 # Dashboard Version
-DASHBOARD_VERSION = 'v3.0'
+DASHBOARD_VERSION = 'v3.0.6'
+
 # WireGuard's configuration path
 WG_CONF_PATH = None
+
 # Dashboard Config Name
 configuration_path = os.getenv('CONFIGURATION_PATH', '.')
 DB_PATH = os.path.join(configuration_path, 'db')
 if not os.path.isdir(DB_PATH):
     os.mkdir(DB_PATH)
 DASHBOARD_CONF = os.path.join(configuration_path, 'wg-dashboard.ini')
+
 # Upgrade Required
 UPDATE = None
+
 # Flask App Configuration
 app = Flask("WGDashboard")
 app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 5206928
 app.secret_key = secrets.token_urlsafe(16)
 app.config['TEMPLATES_AUTO_RELOAD'] = True
+
 # Enable QR Code Generator
 QRcode(app)
 
@@ -66,9 +70,9 @@ def get_dashboard_conf():
     Get dashboard configuration
     @return: configparser.ConfigParser
     """
-    config = configparser.ConfigParser(strict=False)
-    config.read(DASHBOARD_CONF)
-    return config
+    r_config = configparser.ConfigParser(strict=False)
+    r_config.read(DASHBOARD_CONF)
+    return r_config
 
 
 def set_dashboard_conf(config):
@@ -99,7 +103,6 @@ def get_conf_peer_key(config_name):
         return config_name + " is not running."
 
 
-# Get numbers of connected peer of a configuration
 def get_conf_running_peer_number(config_name):
     """
     Get number of running peers on wireguard interface.
@@ -128,7 +131,6 @@ def get_conf_running_peer_number(config_name):
     return running
 
 
-# Read [Interface] section from configuration file
 def read_conf_file_interface(config_name):
     """
     Get interface settings.
@@ -161,7 +163,6 @@ def read_conf_file(config_name):
     @rtype: dict
     """
 
-    # Read Configuration File Start
     conf_location = WG_CONF_PATH + "/" + config_name + ".conf"
     f = open(conf_location, 'r')
     file = f.read().split("\n")
@@ -190,7 +191,7 @@ def read_conf_file(config_name):
                 conf_peer_data["Peers"].append({})
             elif peer > -1:
                 if len(i) > 0:
-                    tmp = re.split('\s*=\s*', i, 1)
+                    tmp = re.split(r'\s*=\s*', i, 1)
                     if len(tmp) == 2:
                         conf_peer_data["Peers"][peer][tmp[0]] = tmp[1]
 
@@ -224,10 +225,10 @@ def get_latest_handshake(config_name):
             status = "stopped"
         if int(data_usage[count + 1]) > 0:
             g.cur.execute("UPDATE %s SET latest_handshake = '%s', status = '%s' WHERE id='%s'"
-                          % (config_name, str(minus).split(".", maxsplit=1)[0], status, data_usage[count]))
+            % (config_name, str(minus).split(".", maxsplit=1)[0], status, data_usage[count]))
         else:
             g.cur.execute("UPDATE %s SET latest_handshake = '(None)', status = '%s' WHERE id='%s'"
-                          % (config_name, status, data_usage[count]))
+            % (config_name, status, data_usage[count]))
         count += 2
 
 
@@ -294,6 +295,7 @@ def get_endpoint(config_name):
         count += 2
 
 
+
 def get_allowed_ip(conf_peer_data, config_name):
     """
     Get allowed ips from all peers of a configuration
@@ -626,7 +628,6 @@ def close_DB(exception):
         g.db.close()
 
 
-# Before request
 @app.before_request
 def auth_req():
     """
@@ -652,7 +653,10 @@ def auth_req():
             else:
                 session['message'] = ""
             conf.clear()
-            return redirect("/signin?redirect=" + str(request.url))
+            redirectURL = str(request.url)
+            redirectURL = redirectURL.replace("http://", "")
+            redirectURL = redirectURL.replace("https://", "")
+            return redirect("/signin?redirect=" + redirectURL)
     else:
         if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
                                 'update_app_ip_port', 'update_wg_conf_path']:
@@ -678,7 +682,7 @@ def signin():
     if "message" in session:
         message = session['message']
         session.pop("message")
-    return render_template('signin.html', message=message)
+    return render_template('signin.html', message=message, version=DASHBOARD_VERSION)
 
 
 # Sign Out
@@ -901,7 +905,8 @@ def update_app_ip_port():
     config.set("Server", "app_port", request.form['app_port'])
     set_dashboard_conf(config)
     config.clear()
-    os.system('./wgd.sh restart')
+    subprocess.Popen('bash wgd.sh restart', shell=True)
+    return ""
 
 
 # Update WireGuard configuration file path
@@ -918,7 +923,7 @@ def update_wg_conf_path():
     config.clear()
     session['message'] = "WireGuard Configuration Path Update Successfully!"
     session['message_status'] = "success"
-    os.system('./wgd.sh restart')
+    subprocess.Popen('bash wgd.sh restart', shell=True)
 
 
 @app.route('/update_dashboard_sort', methods=['POST'])
@@ -1699,11 +1704,11 @@ def get_host_bind():
     config.read('wg-dashboard.ini')
     app_ip = config.get("Server", "app_ip")
     app_port = config.get("Server", "app_port")
-
     return app_ip, app_port
 
 
 if __name__ == "__main__":
+    init_dashboard()
     UPDATE = check_update()
     config = configparser.ConfigParser(strict=False)
     config.read('wg-dashboard.ini')

src/static/css/dashboard.css

@@ -1,5 +1,6 @@
 body {
     font-size: .875rem;
+    /*font-family: 'Poppins', sans-serif;*/
 }
 
 .feather {
@@ -407,8 +408,26 @@ main{
 
 .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;
 }

src/static/js/configuration.js

@@ -338,8 +338,12 @@
      * Load Peers from server to configuration page
      * @param searchString
      */
+    let d1 = new Date();
+    let time = 0;
+    let count = 0;
     function loadPeers(searchString){
         startProgressBar();
+        d1 = new Date();
         $.ajax({
             method: "GET",
             url: `/get_config/${conf_name}?search=${encodeURIComponent(searchString)}`,
@@ -354,6 +358,12 @@
             $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
             $("i[data-toggle='tooltip']").tooltip();
             endProgressBar();
+            let d2 = new Date();
+            let seconds = (d2 - d1);
+            time += seconds;
+            count += 1;
+            console.log(`Average ${time/count}ms`);
+            $("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
         }).fail(function(){
             noResponding();
         });

src/static/js/wireguard.js

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

src/templates/configuration.html

@@ -11,7 +11,6 @@
         </div>
     </div>
 	{% include "navbar.html" %}
-
 	<div class="container-fluid" id="right_body">
 		{% include "sidebar.html" %}
         <div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
@@ -120,6 +119,7 @@
                     </div>
                 </div>
                 <div class="row peer_list"></div>
+                <small id="peer_loading_time" class="text-muted"></small>
             </main>
         </div>
 	</div>

src/templates/signin.html

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

src/wgd.sh

@@ -33,6 +33,7 @@ help () {
 }
 
 _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`
@@ -192,7 +193,7 @@ if [ "$#" != 1 ];
            printf "%s\n" "$dashes"
            stop_wgd
            printf "| WGDashboard is stopped.                                  |\n"
-           sleep 2
+           sleep 4
            start_wgd
         else
           start_wgd