Merge pull request #4 from donaldzou/v20210403-alpha

v20210403 Bug Fixed
Update dashboard.py
2025-10-03 15:56:17 +00:00 · 2021-04-03 14:31:11 -04:00 · 2021-04-03 14:30:02 -04:00 · 2021-04-03 14:10:07 -04:00 · 2021-04-03 14:06:21 -04:00 · 2021-04-02 22:22:41 -04:00
20 changed files with 922 additions and 301 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,7 @@
 .vscode/sftp.json
+src/.vscode/sftp.json
+.DS_Store
+wg.db
+*.json
+.idea
+src/test.py
--- a/README.md
+++ b/README.md
@@ -1,19 +1,49 @@
-# Wireguard-Dashboard
-## Intro
-Monitoring Wireguard is not convinient, need to login into server and type wg show. That's why this platform is being created, to view all configurations in a more straight forward way.
-## Installation
-**Requirement:**
- Wireguard
+# Wireguard Dashboard
+Monitoring Wireguard is not convinient, need to login into server and type `wg show`. That's why this platform is being created, to view all configurations in a more straight forward way.
+
+## 💡Features
+
+- Add peers in configuration
+- Manage peer names
+- Delete peers
+- And many more coming up! Welcome to contribute to this project!
+
+## 📝Requirement
+
+- Ubuntu 18.04.1 LTS, other OS might work, but haven't test yet.
+- **Wireguard**
 - Configuration files under **/etc/wireguard**
 - Python 3.7
-  - Flask

-**Install:**
-1. `git clone https://github.com/donaldzou/Wireguard-Dashboard.git`
-2. `cd Wireguard-Dashboard`
-3. `python3 dashboard.py`
-4. Access your server! e.g (http://your_server_ip:10086)
+## 🛠Install

-## Example
-![Index Image](https://github.com/donaldzou/Wireguard-Dashboard/raw/main/static/index.png)
-![Conf Image](https://github.com/donaldzou/Wireguard-Dashboard/raw/main/static/configuration.png)
+**1. Install Python Dependencies**
+
+```
+$ python3 -m pip install flask tinydb
+```
+
+**2. Install Wireguard Dashboard**
+
+```
+$ git clone https://github.com/donaldzou/Wireguard-Dashboard.git
+$ cd Wireguard-Dashboard/src
+$ python3 dashboard.py
+```
+
+Access your server with port `10086` ! e.g (http://your_server_ip:10086)
+
+**3. Install with Production Mode (Optional)**
+
+```
+$ cd Wireguard-Dashboard/src
+$ export FLASK_APP=dashboard.py
+$ export FLASK_RUN_HOST=0.0.0.0
+$ export FLASK_ENV=development
+$ export FLASK_DEBUG=0
+$ flask run
+```
+
+## 🔍Example
+![Index Image](https://github.com/donaldzou/Wireguard-Dashboard/raw/main/src/static/index.png)
+![Conf Image](https://github.com/donaldzou/Wireguard-Dashboard/raw/main/src/static/configuration.png)
--- a/dashboard.py
+++ b/dashboard.py
@@ -1,139 +0,0 @@
-import os
-from flask import Flask, request, render_template
-from tinydb import TinyDB, Query
-import subprocess
-from datetime import datetime, date, time, timedelta
-
-conf_location = "/etc/wireguard"
-
-app = Flask("Wireguard Dashboard")
-app.config['TEMPLATES_AUTO_RELOAD'] = True
-css = ""
-
-def get_conf_peers_data(config_name):
-    peer_data = {}
-    # Get key
-    try: peer_key = subprocess.check_output("wg show "+config_name+" peers", shell=True)
-    except Exception: return "stopped"
-    peer_key = peer_key.decode("UTF-8").split()
-    for i in peer_key: peer_data[i] = {}
-
-    #Get transfer
-    try: data_usage = subprocess.check_output("wg show "+config_name+" transfer", shell=True)
-    except Exception: return "stopped"
-    data_usage = data_usage.decode("UTF-8").split()
-    count = 0
-    upload_total = 0
-    download_total = 0
-    total = 0
-    for i in range(int(len(data_usage)/3)):
-        peer_data[data_usage[count]]['total_recive'] = round(int(data_usage[count+1])/(1024**3), 4)
-        peer_data[data_usage[count]]['total_sent'] = round(int(data_usage[count+2])/(1024**3),4)
-        peer_data[data_usage[count]]['total_data'] = round((int(data_usage[count+2])+int(data_usage[count+1]))/(1024**3),4)
-        count += 3
-
-    #Get endpoint
-    try: data_usage = subprocess.check_output("wg show "+config_name+" endpoints", shell=True)
-    except Exception: return "stopped"
-    data_usage = data_usage.decode("UTF-8").split()
-    count = 0
-    for i in range(int(len(data_usage)/2)):
-        peer_data[data_usage[count]]['endpoint'] = data_usage[count+1]
-        count += 2
-
-    #Get latest handshakes
-    try: data_usage = subprocess.check_output("wg show "+config_name+" latest-handshakes", shell=True)
-    except Exception: return "stopped"
-    data_usage = data_usage.decode("UTF-8").split()
-    count = 0
-    now = datetime.now()
-    b = timedelta(minutes=2)
-    for i in range(int(len(data_usage)/2)):
-        minus = now - datetime.fromtimestamp(int(data_usage[count+1]))
-        
-        if minus < b:
-            peer_data[data_usage[count]]['status'] = "running"
-        else:
-            peer_data[data_usage[count]]['status'] = "stopped"
-        peer_data[data_usage[count]]['latest_handshake'] = minus
-        count += 2
-    
-    #Get allowed ip
-    try: data_usage = subprocess.check_output("wg show "+config_name+" allowed-ips", shell=True)
-    except Exception: return "stopped"
-    data_usage = data_usage.decode("UTF-8").split()
-    count = 0
-    for i in range(int(len(data_usage)/2)):
-        peer_data[data_usage[count]]['allowed_ip'] = data_usage[count+1]
-        count += 2
-
-    return peer_data
-
-
-
-
-def get_conf_pub_key(config_name):
-    try: pub_key = subprocess.check_output("wg show "+config_name+" public-key", shell=True)
-    except Exception: return "stopped"
-    return pub_key.decode("UTF-8")
-
-def get_conf_listen_port(config_name):
-    try: pub_key = subprocess.check_output("wg show "+config_name+" listen-port", shell=True)
-    except Exception: return "stopped"
-    return pub_key.decode("UTF-8")
-    
-
-def get_conf_total_data(config_name):
-    try: data_usage = subprocess.check_output("wg show "+config_name+" transfer", shell=True)
-    except Exception: return "stopped"
-    data_usage = data_usage.decode("UTF-8").split()
-    count = 0
-    upload_total = 0
-    download_total = 0
-    total = 0
-    for i in range(int(len(data_usage)/3)):
-        upload_total += int(data_usage[count+1])
-        download_total += int(data_usage[count+2])
-        count += 3
-    
-    total = round(((((upload_total+download_total)/1024)/1024)/1024),3)
-    upload_total = round(((((upload_total)/1024)/1024)/1024),3)
-    download_total = round(((((download_total)/1024)/1024)/1024),3)
-    
-    return [total, upload_total, download_total]
-
-
-def get_conf_status(config_name):
-    try: status = subprocess.check_output("wg show "+config_name, shell=True)
-    except Exception: return "stopped"
-    else: return "running" 
-
-
-def get_conf_list():
-    conf = []
-    for i in os.listdir(conf_location):
-        if ".conf" in i:
-            i = i.replace('.conf','')
-            temp = {"conf":i, "status":get_conf_status(i), "public_key": get_conf_pub_key(i)} 
-            conf.append(temp)
-    return conf
-
-@app.route('/',methods=['GET'])
-def index():
-    return render_template('index.html', conf=get_conf_list())
-
-
-@app.route('/configuration/<config_name>', methods=['GET'])
-def conf(config_name):
-    
-    conf_data = {
-        "name": config_name,
-        "status": get_conf_status(config_name),
-        "total_data_usage": get_conf_total_data(config_name),
-        "public_key": get_conf_pub_key(config_name),
-        "listen_port": get_conf_listen_port(config_name),
-        "peer_data":get_conf_peers_data(config_name)
-    }
-    return render_template('configuration.html', conf=get_conf_list(), conf_data=conf_data)
- 
-app.run(host='0.0.0.0',debug=False, port=10086)
--- a/requirements.txt
+++ b/requirements.txt
@@ -0,0 +1,2 @@
+Flask==1.1.2
+tinydb==4.3.0
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -0,0 +1,375 @@
+import os
+from flask import Flask, request, render_template, redirect, url_for
+import subprocess
+from datetime import datetime, date, time, timedelta
+from operator import itemgetter
+from tinydb import TinyDB, Query
+
+conf_location = "/etc/wireguard"
+app = Flask("Wireguard Dashboard")
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+css = ""
+conf_data = {}
+
+
+def get_conf_peer_key(config_name):
+    keys = []
+    try:
+        peer_key = subprocess.check_output("wg show " + config_name + " peers", shell=True)
+    except Exception:
+        return "stopped"
+    peer_key = peer_key.decode("UTF-8").split()
+    for i in peer_key: keys.append(i)
+    return keys
+
+
+def get_conf_running_peer_number(config_name):
+    running = 0
+    # Get latest handshakes
+    try:
+        data_usage = subprocess.check_output("wg show " + config_name + " latest-handshakes", shell=True)
+    except Exception:
+        return "stopped"
+    data_usage = data_usage.decode("UTF-8").split()
+    count = 0
+    now = datetime.now()
+    b = timedelta(minutes=2)
+    for i in range(int(len(data_usage) / 2)):
+        minus = now - datetime.fromtimestamp(int(data_usage[count + 1]))
+        if minus < b:
+            running += 1
+        count += 2
+    return running
+
+
+def get_conf_peers_data(config_name):
+    db = TinyDB('db/' + config_name + '.json')
+    peers = Query()
+    peer_data = {}
+
+    # Read Configuration File Start
+    conf_location = "/etc/wireguard/"+config_name+".conf"
+    f = open(conf_location, 'r')
+    file = f.read().split("\n")
+    conf_peer_data = {
+        "Interface": {},
+        "Peers": []
+    }
+    interface = []
+    peers_start = 0
+    for i in range(len(file)):
+        if file[i] == "[Peer]":
+            peers_start = i
+            break
+        else:
+            if len(file[i]) > 0:
+                if file[i] != "[Interface]":
+                    tmp = file[i].replace(" ", "").split("=", 1)
+                    if len(tmp) == 2:
+                        conf_peer_data['Interface'][tmp[0]] = tmp[1]
+    conf_peers = file[peers_start:]
+    peer = -1
+    for i in conf_peers:
+        if i == "[Peer]":
+            peer += 1
+            conf_peer_data["Peers"].append({})
+        else:
+            if len(i) > 0:
+                tmp = i.replace(" ", "").split("=", 1)
+                if len(tmp) == 2:
+                    conf_peer_data["Peers"][peer][tmp[0]] = tmp[1]
+    # Read Configuration File End
+
+    # Get key
+    try:
+        peer_key = subprocess.check_output("wg show " + config_name + " peers", shell=True)
+    except Exception:
+        return "stopped"
+    peer_key = peer_key.decode("UTF-8").split()
+    now = datetime.now()
+    current_time = now.strftime("%Y-%m-%d %H:%M:%S")
+    for i in peer_key:
+        peer_data[i] = {}
+        if not db.search(peers.id == i):
+            db.insert({
+                "id": i,
+                "name": "",
+                "total_receive": 0,
+                "total_sent": 0,
+                "total_data": 0,
+                "endpoint": 0,
+                "status": 0,
+                "latest_handshake": 0,
+                "allowed_ip": 0,
+                "traffic": []
+            })
+
+    # Get transfer
+    try:
+        data_usage = subprocess.check_output("wg show " + config_name + " transfer", shell=True)
+    except Exception:
+        return "stopped"
+    data_usage = data_usage.decode("UTF-8").split()
+    count = 0
+    for i in range(int(len(data_usage) / 3)):
+        db.update({"total_receive": round(int(data_usage[count + 1]) / (1024 ** 3), 4),
+                   "total_sent": round(int(data_usage[count + 2]) / (1024 ** 3), 4),
+                   "total_data": round((int(data_usage[count + 2]) + int(data_usage[count + 1])) / (1024 ** 3), 4)},
+                  peers.id == data_usage[count])
+        peer_data[data_usage[count]]['total_receive'] = round(int(data_usage[count + 1]) / (1024 ** 3), 4)
+        peer_data[data_usage[count]]['total_sent'] = round(int(data_usage[count + 2]) / (1024 ** 3), 4)
+        peer_data[data_usage[count]]['total_data'] = round(
+            (int(data_usage[count + 2]) + int(data_usage[count + 1])) / (1024 ** 3), 4)
+        traffic = db.search(peers.id == data_usage[count])[0]['traffic']
+        traffic.append({"time": current_time, "total_receive": round(int(data_usage[count + 1]) / (1024 ** 3), 4),
+                        "total_sent": round(int(data_usage[count + 2]) / (1024 ** 3), 4)})
+        db.update({"traffic": traffic}, peers.id == data_usage[count])
+        count += 3
+    # Get endpoint
+    try:
+        data_usage = subprocess.check_output("wg show " + config_name + " endpoints", shell=True)
+    except Exception:
+        return "stopped"
+    data_usage = data_usage.decode("UTF-8").split()
+    count = 0
+    for i in range(int(len(data_usage) / 2)):
+        db.update({"endpoint": data_usage[count + 1]}, peers.id == data_usage[count])
+
+        peer_data[data_usage[count]]['endpoint'] = data_usage[count + 1]
+        count += 2
+
+    # Get latest handshakes
+    try:
+        data_usage = subprocess.check_output("wg show " + config_name + " latest-handshakes", shell=True)
+    except Exception:
+        return "stopped"
+    data_usage = data_usage.decode("UTF-8").split()
+    count = 0
+    now = datetime.now()
+    b = timedelta(minutes=2)
+    for i in range(int(len(data_usage) / 2)):
+        minus = now - datetime.fromtimestamp(int(data_usage[count + 1]))
+        status = ""
+        if minus < b:
+            peer_data[data_usage[count]]['status'] = "running"
+            status = "running"
+        else:
+            peer_data[data_usage[count]]['status'] = "stopped"
+            status = "stopped"
+
+        db.update({"latest_handshake": str(minus).split(".")[0], "status": status}, peers.id == data_usage[count])
+        peer_data[data_usage[count]]['latest_handshake'] = str(minus).split(".")[0]
+        count += 2
+
+    # Get allowed ip
+    for i in conf_peer_data["Peers"]:
+        db.update({"allowed_ip":i['AllowedIPs']}, peers.id == i["PublicKey"])
+
+def getdb(config_name):
+    get_conf_peers_data(config_name)
+    db = TinyDB('db/' + config_name + '.json')
+    result = db.all()
+    result = sorted(result, key=lambda d: d['status'])
+    return result
+
+
+def get_conf_pub_key(config_name):
+    try:
+        pub_key = subprocess.check_output("wg show " + config_name + " public-key", shell=True,
+                                          stderr=subprocess.STDOUT)
+    except Exception:
+        return "stopped"
+    return pub_key.decode("UTF-8")
+
+
+def get_conf_listen_port(config_name):
+    try:
+        pub_key = subprocess.check_output("wg show " + config_name + " listen-port", shell=True,
+                                          stderr=subprocess.STDOUT)
+    except Exception:
+        return "stopped"
+    return pub_key.decode("UTF-8")
+
+
+def get_conf_total_data(config_name):
+    try:
+        data_usage = subprocess.check_output("wg show " + config_name + " transfer", shell=True,
+                                             stderr=subprocess.STDOUT)
+    except Exception:
+        return "stopped"
+    data_usage = data_usage.decode("UTF-8").split()
+    count = 0
+    upload_total = 0
+    download_total = 0
+    total = 0
+    for i in range(int(len(data_usage) / 3)):
+        upload_total += int(data_usage[count + 1])
+        download_total += int(data_usage[count + 2])
+        count += 3
+
+    total = round(((((upload_total + download_total) / 1024) / 1024) / 1024), 4)
+    upload_total = round(((((upload_total) / 1024) / 1024) / 1024), 4)
+    download_total = round(((((download_total) / 1024) / 1024) / 1024), 4)
+
+    return [total, upload_total, download_total]
+
+
+def get_conf_status(config_name):
+    try:
+        status = subprocess.check_output("wg show " + config_name, shell=True, stderr=subprocess.STDOUT)
+    except Exception:
+        return "stopped"
+    else:
+        return "running"
+
+
+def get_conf_list():
+    conf = []
+    for i in os.listdir(conf_location):
+        if ".conf" in i:
+            i = i.replace('.conf', '')
+            temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i)}
+            if temp['status'] == "running":
+                temp['checked'] = 'checked'
+            else:
+                temp['checked'] = ""
+            conf.append(temp)
+    conf = sorted(conf, key=itemgetter('status'))
+    return conf
+
+
+def get_running_conf_list():
+    conf = []
+    for i in os.listdir(conf_location):
+        if ".conf" in i:
+            i = i.replace('.conf', '')
+            if get_conf_status(i) == "running":
+                conf.append(i)
+
+    return conf
+
+
+@app.route('/', methods=['GET'])
+def index():
+    return render_template('index.html', conf=get_conf_list())
+
+
+@app.route('/configuration/<config_name>', methods=['GET'])
+def conf(config_name):
+    conf_data = {
+        "name": config_name,
+        "status": get_conf_status(config_name),
+        "checked": ""
+    }
+    if conf_data['status'] == "stopped":
+        return redirect('/')
+    else:
+        conf_data['checked'] = "checked"
+        return render_template('configuration.html', conf=get_conf_list(), conf_data=conf_data)
+
+
+@app.route('/get_config/<config_name>', methods=['GET'])
+def get_conf(config_name):
+    db = TinyDB('db/' + config_name + '.json')
+
+    conf_data = {
+        "name": config_name,
+        "status": get_conf_status(config_name),
+        "total_data_usage": get_conf_total_data(config_name),
+        "public_key": get_conf_pub_key(config_name),
+        "listen_port": get_conf_listen_port(config_name),
+        "peer_data": getdb(config_name),
+        "running_peer": get_conf_running_peer_number(config_name),
+    }
+    if conf_data['status'] == "stopped":
+        return redirect('/')
+    else:
+        conf_data['checked'] = "checked"
+        return render_template('get_conf.html', conf=get_conf_list(), conf_data=conf_data)
+
+
+@app.route('/switch/<config_name>', methods=['GET'])
+def switch(config_name):
+    status = get_conf_status(config_name)
+    if status == "running":
+        try:
+            status = subprocess.check_output("wg-quick down " + config_name, shell=True)
+        except Exception:
+            return redirect('/')
+    elif status == "stopped":
+        try:
+            status = subprocess.check_output("wg-quick up " + config_name, shell=True)
+        except Exception:
+            return redirect('/')
+    return redirect('/')
+
+
+@app.route('/add_peer/<config_name>', methods=['POST'])
+def add_peer(config_name):
+    data = request.get_json()
+    public_key = data['public_key']
+    allowed_ips = data['allowed_ips']
+    keys = get_conf_peer_key(config_name)
+    if public_key in keys:
+        return "Key already exist."
+    else:
+        status = ""
+        try:
+            status = subprocess.check_output(
+                "wg set " + config_name + " peer " + public_key + " allowed-ips " + allowed_ips, shell=True,
+                stderr=subprocess.STDOUT)
+            status = subprocess.check_output("wg-quick save " + config_name, shell=True, stderr=subprocess.STDOUT)
+            return "true"
+        except subprocess.CalledProcessError as exc:
+            return exc.output.strip()
+
+            # return redirect('/configuration/'+config_name)
+
+
+@app.route('/remove_peer/<config_name>', methods=['POST'])
+def remove_peer(config_name):
+    db = TinyDB("db/" + config_name + ".json")
+    peers = Query()
+    data = request.get_json()
+    delete_key = data['peer_id']
+    keys = get_conf_peer_key(config_name)
+    if delete_key not in keys:
+        return "This key does not exist"
+    else:
+        try:
+            status = subprocess.check_output("wg set " + config_name + " peer " + delete_key + " remove", shell=True,
+                                             stderr=subprocess.STDOUT)
+            status = subprocess.check_output("wg-quick save " + config_name, shell=True, stderr=subprocess.STDOUT)
+            db.remove(peers.id == delete_key)
+            return "true"
+        except subprocess.CalledProcessError as exc:
+            return exc.output.strip()
+
+
+@app.route('/save_peer_name/<config_name>', methods=['POST'])
+def save_peer_name(config_name):
+    data = request.get_json()
+    id = data['id']
+    name = data['name']
+    db = TinyDB("db/" + config_name + ".json")
+    peers = Query()
+
+    db.update({"name": name}, peers.id == id)
+    return id + " " + name
+
+
+@app.route('/get_peer_name/<config_name>', methods=['POST'])
+def get_peer_name(config_name):
+    data = request.get_json()
+    id = data['id']
+    db = TinyDB("db/" + config_name + ".json")
+    peers = Query()
+    result = db.search(peers.id == id)
+    return result[0]['name']
+    # db.update({"name": name}, peers.id == id)
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', debug=False, port=10086)
+    # for i in get_running_conf_list():
+    #     p = Process(target=get_conf_peers_data, args=(i,))
+    #     p.start()
--- a/src/db/hi.txt
+++ b/src/db/hi.txt
@@ -0,0 +1 @@
+You can delete this later ;)
--- a/src/json/conf.json
+++ b/src/json/conf.json
--- a/src/static/.DS_Store
+++ b/src/static/.DS_Store
--- a/src/static/bootstrap4-toggle.min.js
+++ b/src/static/bootstrap4-toggle.min.js
@@ -0,0 +1 @@
+!function(a){"use strict";function l(t,e){this.$element=a(t),this.options=a.extend({},this.defaults(),e),this.render()}l.VERSION="3.6.0",l.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"light",size:"normal",style:"",width:null,height:null},l.prototype.defaults=function(){return{on:this.$element.attr("data-on")||l.DEFAULTS.on,off:this.$element.attr("data-off")||l.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||l.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||l.DEFAULTS.offstyle,size:this.$element.attr("data-size")||l.DEFAULTS.size,style:this.$element.attr("data-style")||l.DEFAULTS.style,width:this.$element.attr("data-width")||l.DEFAULTS.width,height:this.$element.attr("data-height")||l.DEFAULTS.height}},l.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var t="large"===this.options.size||"lg"===this.options.size?"btn-lg":"small"===this.options.size||"sm"===this.options.size?"btn-sm":"mini"===this.options.size||"xs"===this.options.size?"btn-xs":"",e=a('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.on).addClass(this._onstyle+" "+t),s=a('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.off).addClass(this._offstyle+" "+t),o=a('<span class="toggle-handle btn btn-light">').addClass(t),i=a('<div class="toggle-group">').append(e,s,o),l=a('<div class="toggle btn" data-toggle="toggle" role="button">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(t).addClass(this.options.style);this.$element.wrap(l),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:e,$toggleOff:s,$toggleGroup:i}),this.$toggle.append(i);var n=this.options.width||Math.max(e.outerWidth(),s.outerWidth())+o.outerWidth()/2,h=this.options.height||Math.max(e.outerHeight(),s.outerHeight());e.addClass("toggle-on"),s.addClass("toggle-off"),this.$toggle.css({width:n,height:h}),this.options.height&&(e.css("line-height",e.height()+"px"),s.css("line-height",s.height()+"px")),this.update(!0),this.trigger(!0)},l.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},l.prototype.on=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),t||this.trigger()},l.prototype.off=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),t||this.trigger()},l.prototype.enable=function(){this.$toggle.removeClass("disabled"),this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},l.prototype.disable=function(){this.$toggle.addClass("disabled"),this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},l.prototype.update=function(t){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(t):this.off(t)},l.prototype.trigger=function(t){this.$element.off("change.bs.toggle"),t||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},l.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var t=a.fn.bootstrapToggle;a.fn.bootstrapToggle=function(o){var i=Array.prototype.slice.call(arguments,1)[0];return this.each(function(){var t=a(this),e=t.data("bs.toggle"),s="object"==typeof o&&o;e||t.data("bs.toggle",e=new l(this,s)),"string"==typeof o&&e[o]&&"boolean"==typeof i?e[o](i):"string"==typeof o&&e[o]&&e[o]()})},a.fn.bootstrapToggle.Constructor=l,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=t,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(t){a(this).find("input[type=checkbox]").bootstrapToggle("toggle"),t.preventDefault()})}(jQuery);
--- a/src/static/configuration.png
+++ b/src/static/configuration.png
--- a/src/static/dashboard.css
+++ b/src/static/dashboard.css
@@ -121,4 +121,22 @@ body {

 .info h6{
  line-break: anywhere;
+}
+
+.btn-control{
+  border: none !important;
+  padding: 0;
+  padding-right: 0.5rem;
+}
+
+.btn-control:hover{
+  background: white;
+}
+
+.btn-delete-peer:hover{
+  color: #dc3545;
+}
+
+.btn-setting-peer:hover{
+  color:#007bff
 }
--- a/src/static/index.png
+++ b/src/static/index.png
--- a/src/static/logo.png
+++ b/src/static/logo.png
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -0,0 +1,291 @@
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Wireguard Dashboard</title>
+	<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='dashboard.css') }}">
+	<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.min.js"></script>
+</head>
+
+<body>
+	<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>
+		<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
+			data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+	</nav>
+	<div class="container-fluid">
+		<div class="row">
+			<div class="row">
+				<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+					<div class="sidebar-sticky pt-3">
+						<ul class="nav flex-column">
+							<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+						</ul>
+						<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+							<span>Configurations</span>
+						</h6>
+						<ul class="nav flex-column">
+							{% for i in conf%}
+								<li class="nav-item"><a class="nav-link" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
+							{%endfor%}
+						</ul>
+					</div>
+				</nav>
+			</div>
+		</div>
+		<div id="config_body">
+
+		</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">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="staticBackdropLabel">Add a 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 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>
+						<div class="form-group">
+							<label for="public_key">Public Key</label>
+							<input type="text" class="form-control" id="public_key" aria-describedby="public_key">
+						</div>
+						<div class="form-group">
+							<label for="allowed_ips">Allowed IPs</label>
+							<input type="text" class="form-control" id="allowed_ips">
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Save</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal fade" id="delete_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this peer?</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<div id="remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
+						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+						  <span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<h6>This action is not reversible.</h6>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+					<button type="button" class="btn btn-danger" id="delete_peer" conf_id={{conf_data['name']}} peer_id="">Yes</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+    <div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="peer_name"></h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+
+					<div class="mb-3">
+                      <label for="peer_name" class="form-label">Name</label>
+                      <input type="text" class="form-control" id="peer_name_textbox" placeholder="">
+                    </div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-primary" id="save_peer_name" conf_id={{conf_data['name']}} peer_id="">Save</button>
+				</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>
+                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+            </div>
+            <div class="toast-body">
+            </div>
+          </div>
+    </div>
+</body>
+<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
+	integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
+	crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
+	integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
+	crossorigin="anonymous"></script>
+<script>
+	function load_data(){
+		$.ajax({
+			method: "GET",
+			url: "/get_config/"+"{{conf_data['name']}}",
+			headers:{
+				"Content-Type": "application/json"
+			},
+			async:false,
+			success: function (response){
+				$("#config_body").html(response);
+				$.ajax({
+					url: "{{ url_for('static',filename='bootstrap4-toggle.min.js') }}",
+					dataType: "script",
+            		cache: true
+				});
+			}
+		})
+	}
+	$(document).ready(function(){
+		load_data();
+		setInterval(function(){
+			load_data();
+		}, 15000)
+	});
+</script>
+<script>
+	$('.switch').change(function() {
+		if ($(this).prop('checked') == false){
+			if (confirm('Are you sure you want to turn off this connection?')){
+				location.replace("/switch/"+$(this).attr('id'));
+			}
+		}
+		else{
+			location.replace("/switch/"+$(this).attr('id'));
+		}
+    });
+	$("#save_peer").click(function(){
+		if ($("#allowed_ips") != "" && $("#public_key") != ""){
+			var conf = $(this).attr('conf_id')
+
+			$.ajax({
+				method: "POST",
+				url: "/add_peer/"+conf,
+				headers:{
+					"Content-Type": "application/json"
+				},
+				data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
+				success: function (response){
+					if(response != "true"){
+						$("#add_peer_alert").html(response+$("#add_peer_alert").html());
+						$("#add_peer_alert").removeClass("d-none");
+					}
+					else{
+						location.reload();
+					}
+				}
+			})
+		}
+	})
+
+    $("body").on("click", ".btn-delete-peer", function(){
+        var peer_id = $(this).attr("id");
+		$("#delete_peer").attr("peer_id", peer_id);
+    })
+
+	$(".btn-delete-peer").click(function(){
+
+	});
+
+	$("#delete_peer").click(function(){
+		var peer_id = $(this).attr("peer_id");
+		var config = $(this).attr("conf_id");
+		$.ajax({
+			method: "POST",
+			url: "/remove_peer/"+config,
+			headers:{
+				"Content-Type": "application/json"
+			},
+			data: JSON.stringify({"action": "delete", "peer_id": peer_id}),
+			success: function (response){
+				if(response != "true"){
+						$("#remove_peer_alert").html(response+$("#add_peer_alert").html());
+						$("#remove_peer_alert").removeClass("d-none");
+					}
+					else{
+						location.reload();
+					}
+			}
+		})
+	});
+
+
+
+	var myModal = new bootstrap.Modal(document.getElementById('setting_modal'), {
+        keyboard: false
+    })
+	$("body").on("click", ".btn-setting-peer", function(){
+        myModal.toggle();
+        var peer_id = $(this).attr("id");
+		$("#save_peer_name").attr("peer_id", peer_id);
+        $.ajax({
+            method: "POST",
+            url: "/get_peer_name/"+$("#setting_modal").attr("conf_id"),
+            headers:{
+				"Content-Type": "application/json"
+			},
+			data: JSON.stringify({"id": peer_id}),
+            success: function(response){
+                if (response == ""){
+                    $("#setting_modal .peer_name").html("Untitled Peer");
+                    $("#peer_name_textbox").val("")
+                }else{
+                    $("#setting_modal .peer_name").html(response);
+                    $("#peer_name_textbox").val(response)
+                }
+            }
+        })
+    });
+
+
+	$("#save_peer_name").click(function (){
+	    var peer_id = $(this).attr("peer_id");
+	    $.ajax({
+            method: "POST",
+            url: "/save_peer_name/"+"{{conf_data['name']}}",
+            headers:{
+				"Content-Type": "application/json"
+			},
+            data: JSON.stringify({id: peer_id, name: $("#peer_name_textbox").val()}),
+            success: function (response){
+                myModal.toggle();
+                load_data();
+                $('#alertToast').toast('show');
+                $('#alertToast .toast-body').html("Name Saved!");
+            }
+        })
+    })
+</script>
+</html>	
--- a/src/templates/get_conf.html
+++ b/src/templates/get_conf.html
@@ -0,0 +1,156 @@
+<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4">
+	<div class="info mt-4">
+		<div class="row">
+			<div class="col-sm">
+				<small class="text-muted"><strong>CONFIGURATION</strong></small>
+				<h1 class="mb-3">{{conf_data['name']}}</h1>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>ACTION</strong></small><br>
+				<input class="mt-2 switch" id="{{conf_data['name']}}" type="checkbox" data-toggle="toggle"  {{conf_data['checked']}} data-size="sm">
+			</div>
+			<div class="w-100"></div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>STATUS</strong></small>
+				<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
+				<h6 style="text-transform: uppercase;">{{conf_data['running_peer']}}</h6>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
+				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
+				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>TOTAL SENT</strong></small>
+				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
+			</div>
+			<div class="w-100"></div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>PUBLIC KEY</strong></small>
+				<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
+			</div>
+			<div class="col-sm">
+				<small class="text-muted"><strong>LISTEN PORT</strong></small>
+				<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
+			</div>
+		</div>
+		<hr>
+		<div class="button-div" style="text-align: right;">
+			<button type="button" class="btn btn-outline-primary btn-sm mb-3" data-toggle="modal" data-target="#add_modal">
+				<strong>ADD PEER</strong>
+			</button>
+			
+		</div>
+	</div>
+	
+	{% for i in conf_data['peer_data']%}
+		<div class="card mb-3">
+            <div class="card-header">
+                <div class="row">
+                    <div class="col">
+                        <div class="card-header-body ">
+                            {% if not i['name']%}
+                                {{ "Untitled Peer" }}
+                            {% else %}
+                                {{i['name']}}
+                            {% endif %}
+                            <span class="dot dot-{{i['status']}}"></span>
+                        </div>
+                    </div>
+                    <div class="col" style="text-align: right">
+                        <p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
+                        <p class="text-success" style="text-transform: uppercase;  display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
+                    </div>
+
+                </div>
+
+
+            </div>
+			<div class="card-body">
+				<div class="row">
+{#					<div class="col-sm">#}
+{#						<small class="text-muted"><strong>STATUS</strong></small>#}
+{#						<h6 style="text-transform: uppercase;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>#}
+{#					</div>#}
+					<div class="col-sm">
+						<small class="text-muted"><strong>PEER</strong></small>
+						<h6><samp class="ml-auto">{{i['id']}}</samp></h6>
+					</div>
+					<div class="col-sm">
+						<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>
+					</div>
+					<div class="col-sm">
+						<small class="text-muted"><strong>END POINT</strong></small>
+						<h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
+					</div>
+{#					<div class="w-100"></div>#}
+{#                    <div class="col-sm">#}
+{#                        <canvas id="{{ i['id'] }}_chart" style="width: 100%" height="200"></canvas>#}
+{#                    </div>#}
+{#                    <script>#}
+{#                        var data = "{{  i['traffic'] }}";#}
+{#                        data = data.replaceAll("&#39;", "\"")#}
+{#                        data = JSON.parse(data)#}
+{#                        y_label = [];#}
+{#                        data_point = [];#}
+{#                        for (var i = 1; i < data.length; i++){#}
+{#                            y_label.push(data[i]['time'])#}
+{#                            data_point.push(data[i]['total_sent'] - data[i-1]['total_sent']);#}
+{#                        }#}
+{#                        var ctx = document.getElementById('{{ i['id'] }}_chart');#}
+{#                        var plot_data =#}
+{#                            {#}
+{#                                labels: y_label,#}
+{#                                datasets:[{#}
+{#                                    label: "Traffic",#}
+{#                                    data: data_point,#}
+{#                                    fill: false,#}
+{#                                    borderColor: 'rgb(75, 192, 192)',#}
+{#                                    tension: 0.1#}
+{#                                }],#}
+{#                                options: {#}
+{#                                    scales: {#}
+{#                                        xAxes: [{#}
+{#                                            type: 'time',#}
+{#                                            ticks: {#}
+{#                                                autoSkip: true,#}
+{#                                                maxTicksLimit: 12#}
+{#                                            }#}
+{#                                        }]#}
+{#                                    },#}
+{#                                    responsive: true#}
+{#                                }#}
+{#                            }#}
+{##}
+{#                        var myLineChart = new Chart(ctx, {#}
+{#                            type: 'line',#}
+{#                            data: plot_data#}
+{#                        });#}
+{#                    </script>#}
+                    <div class="w-100"></div>
+					<div class="col-sm">
+						<!-- <small class="text-muted"><strong>ACTION</strong></small> -->
+						<div class="button-group">
+                            <hr>
+                            <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" data-target="#delete_modal"><i class="bi bi-x-circle-fill"></i></button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{%endfor%}
+</main>
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -4,8 +4,10 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<title>Wireguard Dashboard</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='dashboard.css') }}">
+	<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
 </head>

 <body>
@@ -40,10 +42,19 @@
 			{% for i in conf%}
 				<div class="card mt-3">
 					<div class="card-body">
-						<a href="/configuration/{{i['conf']}}">
-							<h5 class="card-title">{{i['conf']}}</h5>
-						</a>
+						
 						<div class="row">
+							<div class="col">
+								<small class="text-muted"><strong>CONFIGURATION</strong></small>
+								<a href="/configuration/{{i['conf']}}">
+									<h5 class="card-title">{{i['conf']}}</h5>
+								</a>
+							</div>
+							<div class="col">
+								<input class="mt-2 switch" id="{{i['conf']}}"  type="checkbox" data-toggle="toggle"  {{i['checked']}} data-size="sm">
+							</div>
+							
+							<div class="w-100"></div>
 							<div class="col-sm">
 								<small class="text-muted"><strong>STATUS</strong></small>
 								<h6 style="text-transform: uppercase;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>
@@ -52,6 +63,8 @@
 								<small class="text-muted"><strong>PUBLIC KEY</strong></small>
 								<h6 style="text-transform: uppercase;"><samp>{{i['public_key']}}</samp></h6>
 							</div>
+							
+
 						</div>
 					</div>
 				</div>
@@ -67,12 +80,17 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
 	integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
 	crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
 <script>
-	// $.get("/get_conf", function(data, status){
-	// 	for (var i = 0; i < data['data'].length; i++){
-	// 		$(".nav").append('<li class="nav-item"><a class="nav-link" href="/conf/'+data['data'][i]['conf']+'">'+data['data'][i]['conf']+'</a></li>');
-	// 		$("main").append('<div class="card mt-3"><div class="card-body"><a href="/conf/'+data['data'][i]['conf']+'"><h5 class="card-title">'+data['data'][i]['conf']+'</h5></a><h6 class="card-subtitle mb-2 text-muted">Status: '+data['data'][i]['status']+'<span class="dot dot-'+data['data'][i]['status']+'"></span></h6></div></div>')
-	// 	}
-    // });
+	$('.switch').change(function() {
+		if ($(this).prop('checked') == false){
+			if (confirm('Are you sure you want to turn off this connection?')){
+				location.replace("/switch/"+$(this).attr('id'))
+			}
+		}
+		else{
+			location.replace("/switch/"+$(this).attr('id'))
+		}
+    });
 </script>
 </html>
--- a/static/configuration.png
+++ b/static/configuration.png
--- a/static/index.png
+++ b/static/index.png
--- a/templates/configuration.html
+++ b/templates/configuration.html
@@ -1,133 +0,0 @@
-<html>
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>Wireguard Dashboard</title>
-	<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='dashboard.css') }}">
-</head>
-
-<body>
-	<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>
-		<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
-			data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-	</nav>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="row">
-				<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-					<div class="sidebar-sticky pt-3">
-						<ul class="nav flex-column">
-							<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-						</ul>
-						<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-							<span>Configurations</span>
-						</h6>
-						<ul class="nav flex-column">
-							{% for i in conf%}
-								<li class="nav-item"><a class="nav-link" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
-							{%endfor%}
-						</ul>
-					</div>
-				</nav>
-			</div>
-		</div>
-		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4">
-			<div class="info mt-4">
-				<small class="text-muted"><strong>CONFIGURATION</strong></small>
-				<h1 class="mb-3">{{conf_data['name']}}</h1>
-				<div class="row">
-					<div class="col-sm">
-						<small class="text-muted"><strong>STATUS</strong></small>
-						<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
-					</div>
-					<div class="col-sm">
-						<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
-						<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
-					</div>
-					<div class="col-sm">
-						<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
-						<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
-					</div>
-					<div class="col-sm">
-						<small class="text-muted"><strong>TOTAL SENT</strong></small>
-						<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
-					</div>
-					<div class="w-100"></div>
-					<div class="col-sm">
-						<small class="text-muted"><strong>PUBLIC KEY</strong></small>
-						<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
-					</div>
-					<div class="col-sm">
-						<small class="text-muted"><strong>LISTEN PORT</strong></small>
-						<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
-					</div>
-				</div>
-				<hr>
-			</div>
-			{% for i in conf_data['peer_data']%}
-				<div class="card mb-3">
-					<div class="card-body">
-						<div class="row">
-							<div class="col-sm">
-								<small class="text-muted"><strong>STATUS</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['status']}}<span class="dot dot-{{conf_data['peer_data'][i]['status']}}"></span></h6>
-							</div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>PEER</strong></small>
-								<h6 style="text-transform: uppercase;"><samp>{{i}}</samp></h6>
-							</div>
-							
-							<div class="w-100"></div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>ALLOWED IP</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['allowed_ip']}}</h6>
-							</div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['latest_handshake']}}</h6>
-							</div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>END POINT</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['endpoint']}}</h6>
-							</div>
-							<div class="w-100"></div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_data']}} GB</h6>
-							</div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_recive']}} GB</h6>
-							</div>
-							<div class="col-sm">
-								<small class="text-muted"><strong>TOTAL SENT</strong></small>
-								<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_sent']}} GB</h6>
-							</div>
-						</div>
-					</div>
-				</div>
-			{%endfor%}
-			
-		</main>
-	</div>
-</body>
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"
-	integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
-	integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
-	crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
-	integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
-	crossorigin="anonymous"></script>
-
-<script>
-	setInterval(function(){
-		location.reload();
-	},10000)
-</script>
-</html>
--- a/test.py
+++ b/test.py
@@ -1,5 +0,0 @@
-import os
-import subprocess
-try: status = subprocess.check_output("wg show wg0", shell=True)
-except Exception: print("false")
-else:print(status.decode("UTF-8"))
Author	SHA1	Message	Date
Donald Zou	742191111b	Merge pull request #4 from donaldzou/v20210403-alpha v20210403 Bug Fixed	2021-04-03 14:31:11 -04:00
Donald Cheng Hong Zou	8dc0031475	Update dashboard.py	2021-04-03 14:30:02 -04:00
Donald Cheng Hong Zou	19fb90a300	Update dashboard.py	2021-04-03 14:10:07 -04:00
Donald Cheng Hong Zou	0c3960d8d9	Commit	2021-04-03 14:06:21 -04:00
Donald Cheng Hong Zou	7e770b9b5d	v20210402.2	2021-04-02 22:22:41 -04:00
Donald Zou	b95f391f02	Update README.md	2021-04-02 21:15:50 -04:00
Donald Zou	4ed861ffce	Update README.md	2021-04-02 21:15:28 -04:00
Donald Zou	2c0b3be900	Update README.md	2021-04-02 21:14:51 -04:00
Donald Cheng Hong Zou	145e163670	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2021-04-02 21:14:06 -04:00
Donald Cheng Hong Zou	d5497843eb	v20210403.2	2021-04-02 21:12:46 -04:00
Donald Zou	3799f6fe49	Update README.md	2021-04-02 20:49:41 -04:00
Donald Cheng Hong Zou	07678300da	v20210402 Added more features	2021-04-02 20:48:00 -04:00
Donald Zou	881c8f30ef	Update README.md	2021-03-24 02:07:01 -04:00
Donald Zou	5d02fbbdea	Update README.md	2021-01-12 13:36:13 -05:00
donaldzou	4c969f5524	Update	2020-12-27 00:02:36 -05:00
donaldzou	f361e178f1	Added the function to remove peers	2020-12-26 23:42:41 -05:00
donaldzou	edc77be8ef	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2020-12-26 00:17:43 -05:00
donaldzou	55ba5801af	Added connected peers	2020-12-26 00:17:42 -05:00
Donald Zou	6d9c35f7cc	Update README.md	2020-10-28 10:12:39 -04:00
Donald Zou	320b82dc18	Update README.md	2020-10-23 17:51:11 -04:00
donaldzou	d22d695312	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2020-10-23 01:51:03 -04:00
donaldzou	ba5eeeba07	Commit	2020-10-23 01:50:52 -04:00
Donald Zou	0b5b2b6243	Delete sftp.json	2020-10-23 01:50:04 -04:00
donaldzou	0efef135d6	Merge branch 'main' of https://github.com/donaldzou/Wireguard-Dashboard into main	2020-10-23 01:31:15 -04:00
donaldzou	ea52529e06	Able to add peer	2020-10-23 01:31:10 -04:00
Donald Zou	259bd325af	Update README.md	2020-10-21 20:30:16 -04:00
Donald Zou	faf05bad6a	Delete .DS_Store	2020-10-20 10:47:02 -04:00
Donald Zou	0576906907	Delete .DS_Store	2020-10-20 10:46:53 -04:00
donaldzou	8c88440c3e	commit	2020-10-20 10:45:29 -04:00
donaldzou	2f327ed49a	File arrangement	2020-10-20 10:44:41 -04:00
donaldzou	96af266c38	Update configuration.html	2020-10-19 11:48:08 -04:00
Donald Zou	397e448899	Update README.md	2020-10-18 20:20:02 -04:00
donaldzou	cabb6df477	Update configuration.html	2020-10-18 20:19:41 -04:00
donaldzou	032ea1d967	On/Off Switch	2020-10-18 12:23:38 -04:00
				`@@ -0,0 +1 @@`
				!function(a){"use strict";function l(t,e){this.$element=a(t),this.options=a.extend({},this.defaults(),e),this.render()}l.VERSION="3.6.0",l.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"light",size:"normal",style:"",width:null,height:null},l.prototype.defaults=function(){return{on:this.$element.attr("data-on")\|\|l.DEFAULTS.on,off:this.$element.attr("data-off")\|\|l.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")\|\|l.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")\|\|l.DEFAULTS.offstyle,size:this.$element.attr("data-size")\|\|l.DEFAULTS.size,style:this.$element.attr("data-style")\|\|l.DEFAULTS.style,width:this.$element.attr("data-width")\|\|l.DEFAULTS.width,height:this.$element.attr("data-height")\|\|l.DEFAULTS.height}},l.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var t="large"===this.options.size\|\|"lg"===this.options.size?"btn-lg":"small"===this.options.size\|\|"sm"===this.options.size?"btn-sm":"mini"===this.options.size\|\|"xs"===this.options.size?"btn-xs":"",e=a('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.on).addClass(this._onstyle+" "+t),s=a('<label for="'+this.$element.prop("id")+'" class="btn">').html(this.options.off).addClass(this._offstyle+" "+t),o=a('<span class="toggle-handle btn btn-light">').addClass(t),i=a('<div class="toggle-group">').append(e,s,o),l=a('<div class="toggle btn" data-toggle="toggle" role="button">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(t).addClass(this.options.style);this.$element.wrap(l),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:e,$toggleOff:s,$toggleGroup:i}),this.$toggle.append(i);var n=this.options.width\|\|Math.max(e.outerWidth(),s.outerWidth())+o.outerWidth()/2,h=this.options.height\|\|Math.max(e.outerHeight(),s.outerHeight());e.addClass("toggle-on"),s.addClass("toggle-off"),this.$toggle.css({width:n,height:h}),this.options.height&&(e.css("line-height",e.height()+"px"),s.css("line-height",s.height()+"px")),this.update(!0),this.trigger(!0)},l.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},l.prototype.on=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),t\|\|this.trigger()},l.prototype.off=function(t){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),t\|\|this.trigger()},l.prototype.enable=function(){this.$toggle.removeClass("disabled"),this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},l.prototype.disable=function(){this.$toggle.addClass("disabled"),this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},l.prototype.update=function(t){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(t):this.off(t)},l.prototype.trigger=function(t){this.$element.off("change.bs.toggle"),t\|\|this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},l.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var t=a.fn.bootstrapToggle;a.fn.bootstrapToggle=function(o){var i=Array.prototype.slice.call(arguments,1)[0];return this.each(function(){var t=a(this),e=t.data("bs.toggle"),s="object"==typeof o&&o;e\|\|t.data("bs.toggle",e=new l(this,s)),"string"==typeof o&&e[o]&&"boolean"==typeof i?e[o](i):"string"==typeof o&&e[o]&&e[o]()})},a.fn.bootstrapToggle.Constructor=l,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=t,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(t){a(this).find("input[type=checkbox]").bootstrapToggle("toggle"),t.preventDefault()})}(jQuery);