v2.0-beta-1 Commit

.gitignore

@@ -5,3 +5,5 @@ wg.db
 *.json
 .idea
 src/test.py
+tmp
+__pycache__

requirements.txt

@@ -1,4 +1,4 @@
 Flask==1.1.2
 tinydb==4.3.0
 ifcfg==0.21
-ping3==2.7.0
+configparser==5.0.2

src/dashboard.py

@@ -1,13 +1,22 @@
-import ifcfg
+# Python Built-in Library
 import os
-from flask import Flask, request, render_template, redirect, url_for
+from flask import Flask, request, render_template, redirect, url_for, session, abort
 import subprocess
 from datetime import datetime, date, time, timedelta
 from operator import itemgetter
-from tinydb import TinyDB, Query
+import secrets
+import hashlib
+import json, urllib.request
 
+# PIP installed library
+import ifcfg
+from tinydb import TinyDB, Query
+import configparser
+
+dashboard_conf = 'wg-dashboard.ini'
 conf_location = "/etc/wireguard"
 app = Flask("Wireguard Dashboard")
+app.secret_key = secrets.token_urlsafe(16)
 app.config['TEMPLATES_AUTO_RELOAD'] = True
 conf_data = {}
 
@@ -177,20 +186,20 @@ def get_peers(config_name):
 
 
 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")
+    conf = configparser.ConfigParser(strict=False)
+    conf.read(conf_location+"/"+config_name+".conf")
+    pri = conf.get("Interface", "PrivateKey")
+    pub = subprocess.check_output("echo '" + pri + "' | wg pubkey", shell=True)
+    conf.clear()
+    return pub.decode().strip("\n")
 
 
 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")
+    conf = configparser.ConfigParser(strict=False)
+    conf.read(conf_location + "/" + config_name + ".conf")
+    port = conf.get("Interface", "ListenPort")
+    conf.clear()
+    return port
 
 
 def get_conf_total_data(config_name):
@@ -219,20 +228,154 @@ def get_conf_list():
             if ".conf" in i:
                 i = i.replace('.conf', '')
                 temp = {"conf": i, "status": get_conf_status(i), "public_key": get_conf_pub_key(i)}
+                # get_conf_peers_data(i)
                 if temp['status'] == "running":
                     temp['checked'] = 'checked'
                 else:
                     temp['checked'] = ""
                 conf.append(temp)
-    conf = sorted(conf, key=itemgetter('status'))
+    conf = sorted(conf, key=itemgetter('conf'))
     return conf
 
 
+
+
+@app.before_request
+def auth_req():
+    conf = configparser.ConfigParser(strict=False)
+    conf.read(dashboard_conf)
+    req = conf.get("Server", "auth_req")
+    if req == "true":
+        if '/static/' not in request.path and \
+                request.endpoint != "signin" and \
+                request.endpoint != "signout" and \
+                request.endpoint != "auth" and \
+                "username" not in session:
+            print(request.path)
+            print("not loggedin")
+            return redirect(url_for("signin"))
+    else:
+        if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd', 'update_app_ip_port']:
+            return redirect(url_for("index"))
+
+@app.route('/signin', methods=['GET'])
+def signin():
+    message = ""
+    if "message" in session:
+        message = session['message']
+        session.pop("message")
+    return render_template('signin.html', message=message)
+
+
+@app.route('/signout', methods=['GET'])
+def signout():
+    if "username" in session:
+        session.pop("username")
+    message = "Sign out successfully!"
+    return render_template('signin.html', message=message)
+
+
+
+@app.route('/settings', methods=['GET'])
+def settings():
+    message = ""
+    status = ""
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    if "message" in session and "message_status" in session:
+        message = session['message']
+        status = session['message_status']
+        session.pop("message")
+        session.pop("message_status")
+    required_auth = config.get("Server", "auth_req")
+    return render_template('settings.html',conf=get_conf_list(),message=message, status=status, app_ip = config.get("Server", "app_ip"), app_port = config.get("Server", "app_port"), required_auth=required_auth)
+
+@app.route('/auth', methods=['POST'])
+def auth():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    password = hashlib.sha256(request.form['password'].encode())
+    if password.hexdigest() == config["Account"]["password"] and request.form['username'] == config["Account"]["username"]:
+        session['username'] = request.form['username']
+        config.clear()
+        return redirect(url_for("index"))
+    else:
+        session['message'] = "Username or Password is correct."
+        config.clear()
+        return redirect(url_for("signin"))
+
+@app.route('/update_acct', methods=['POST'])
+def update_acct():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    config.set("Account", "username", request.form['username'])
+    try:
+        config.write(open(dashboard_conf, "w"))
+        session['message'] = "Username update successfully!"
+        session['message_status'] = "success"
+        session['username'] = request.form['username']
+        config.clear()
+        return redirect(url_for("settings"))
+    except Exception:
+        session['message'] = "Username update failed."
+        session['message_status'] = "danger"
+        config.clear()
+        return redirect(url_for("settings"))
+
+@app.route('/update_pwd', methods=['POST'])
+def update_pwd():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    if hashlib.sha256(request.form['currentpass'].encode()).hexdigest() == config.get("Account", "password"):
+        if hashlib.sha256(request.form['newpass'].encode()).hexdigest() ==  hashlib.sha256(request.form['repnewpass'].encode()).hexdigest():
+            config.set("Account", "password", hashlib.sha256(request.form['repnewpass'].encode()).hexdigest())
+            try:
+                config.write(open(dashboard_conf, "w"))
+                session['message'] = "Password update successfully!"
+                session['message_status'] = "success"
+                config.clear()
+                return redirect(url_for("settings"))
+            except Exception:
+                session['message'] = "Password update failed"
+                session['message_status'] = "danger"
+                config.clear()
+                return redirect(url_for("settings"))
+        else:
+            session['message'] = "Your New Password does not match."
+            session['message_status'] = "danger"
+            config.clear()
+            return redirect(url_for("settings"))
+    else:
+        session['message'] = "Your Password does not match."
+        session['message_status'] = "danger"
+        config.clear()
+        return redirect(url_for("settings"))
+
+@app.route('/update_app_ip_port', methods=['POST'])
+def update_app_ip_port():
+    config = configparser.ConfigParser(strict=False)
+    config.read(dashboard_conf)
+    config.set("Server", "app_ip", request.form['app_ip'])
+    config.set("Server", "app_port", request.form['app_port'])
+    config.write(open(dashboard_conf, "w"))
+    config.clear()
+    os.system('bash wgd.sh restart')
+
+@app.route('/check_update_dashboard', methods=['GET'])
+def check_update_dashboard():
+    conf = configparser.ConfigParser(strict=False)
+    conf.read(dashboard_conf)
+    data = urllib.request.urlopen("https://api.github.com/repos/donaldzou/wireguard-dashboard/releases").read()
+    output = json.loads(data)
+    if conf.get("Server", "version") == output[0]["tag_name"]:
+        return "false"
+    else:
+        return "true"
+
 @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 = {
@@ -241,16 +384,15 @@ def conf(config_name):
         "checked": ""
     }
     if conf_data['status'] == "stopped":
-        return redirect('/')
+        conf_data['checked'] = "nope"
     else:
         conf_data['checked'] = "checked"
-        return render_template('configuration.html', conf=get_conf_list(), conf_data=conf_data)
+    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 = {
         "peer_data": get_peers(config_name),
         "name": config_name,
@@ -261,14 +403,18 @@ def get_conf(config_name):
         "running_peer": get_conf_running_peer_number(config_name),
     }
     if conf_data['status'] == "stopped":
-        return redirect('/')
+        # return redirect('/')
+        conf_data['checked'] = "nope"
     else:
         conf_data['checked'] = "checked"
-        return render_template('get_conf.html', conf=get_conf_list(), conf_data=conf_data)
+    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):
+    if "username" not in session:
+        print("not loggedin")
+        return redirect(url_for("signin"))
     status = get_conf_status(config_name)
     if status == "running":
         try:
@@ -301,7 +447,6 @@ def add_peer(config_name):
             return "true"
         except subprocess.CalledProcessError as exc:
             return exc.output.strip()
-
             # return redirect('/configuration/'+config_name)
 
 
@@ -347,4 +492,9 @@ def get_peer_name(config_name):
     return result[0]['name']
 
 if __name__ == "__main__":
-    app.run(host='0.0.0.0', debug=False, port=10086)
+    config = configparser.ConfigParser(strict=False)
+    config.read('wg-dashboard.ini')
+    app_ip = config.get("Server", "app_ip")
+    app_port = config.get("Server", "app_port")
+    config.clear()
+    app.run(host=app_ip, debug=False, port=app_port)

src/static/dashboard.css

@@ -22,11 +22,11 @@ body {
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
-@media (max-width: 767.98px) {
-  .sidebar {
-    top: 5rem;
-  }
-}
+/*@media (max-width: 767.98px) {*/
+/*  .sidebar {*/
+/*    top: 5rem;*/
+/*  }*/
+/*}*/
 
 .sidebar-sticky {
   position: relative;
@@ -47,6 +47,11 @@ body {
 .sidebar .nav-link {
   font-weight: 500;
   color: #333;
+  transition: 0.2s cubic-bezier(0.82, -0.07, 0, 1.01);
+}
+
+.nav-link:hover {
+    padding-left: 30px;
 }
 
 .sidebar .nav-link .feather {
@@ -140,3 +145,20 @@ body {
 .btn-setting-peer:hover{
   color:#007bff
 }
+
+.login-container{
+  padding: 2rem;
+}
+
+@media (max-width: 992px){
+  .card-col{
+    margin-bottom: 1rem;
+  }
+}
+
+.switch{
+  font-size: 2rem;
+}
+.switch:hover{
+  text-decoration: none
+}

src/templates/configuration.html

@@ -1,45 +1,11 @@
 <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>
+{% include "header.html" %}
 
 <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>
+	{% include "navbar.html" %}
 	<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>
+		{% include "sidebar.html" %}
 		<div id="config_body">
 
 		</div>
@@ -150,6 +116,9 @@
 	integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
 	crossorigin="anonymous"></script>
 <script>
+    $(".sb-{{conf_data['name']}}-url").addClass("active");
+
+
 	function load_data(){
 		$.ajax({
 			method: "GET",
@@ -176,16 +145,16 @@
 	});
 </script>
 <script>
-	$('.switch').change(function() {
-		if ($(this).prop('checked') == false){
+    $("body").on("click", ".switch", function (){
+        if ($(this).prop('checked') === true){
 			if (confirm('Are you sure you want to turn off this connection?')){
-				location.replace("/switch/"+$(this).attr('id'));
+				location.replace("/switch/"+$(this).attr('id'))
 			}
 		}
 		else{
-			location.replace("/switch/"+$(this).attr('id'));
+			location.replace("/switch/"+$(this).attr('id'))
 		}
-    });
+    })
 	$("#save_peer").click(function(){
 		if ($("#allowed_ips") != "" && $("#public_key") != ""){
 			var conf = $(this).attr('conf_id')
@@ -287,5 +256,7 @@
             }
         })
     })
+
+
 </script>
 </html>	

src/templates/footer.html

@@ -0,0 +1,20 @@
+<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 src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
+<script>
+    $.ajax({
+        method: "GET",
+        url: "/check_update_dashboard",
+        success: function (response){
+            if (response === "true"){
+                $(".sb-update-url").append("<span class=\"dot dot-running\"></span>")
+            }
+        }
+    })
+</script>

src/templates/get_conf.html

@@ -7,7 +7,13 @@
 			</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">
+{#				<input class="mt-2 switch" id="{{conf_data['name']}}" type="checkbox" data-toggle="toggle"  {{conf_data['checked']}} data-size="sm">#}
+
+                {% if conf_data['checked'] == "checked" %}
+                    <a href="#" id="{{conf_data['name']}}" {{conf_data['checked']}} class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>
+                {% else %}
+                    <a href="#" id="{{conf_data['name']}}" {{conf_data['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i> OFF</a>
+                {% endif %}
 			</div>
 			<div class="w-100"></div>
 			<div class="col-sm">
@@ -96,50 +102,6 @@
 						<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> -->

src/templates/header.html

@@ -0,0 +1,13 @@
+<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="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">
+	<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>
+

src/templates/index.html

@@ -1,70 +1,35 @@
 <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="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>
-
+{% include "header.html" %}
 <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>
+	{% include "navbar.html" %}
 	<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>
+        {% include "sidebar.html" %}
 		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
 			{% for i in conf%}
 				<div class="card mt-3">
 					<div class="card-body">
-						
 						<div class="row">
-							<div class="col">
+							<div class="col card-col">
 								<small class="text-muted"><strong>CONFIGURATION</strong></small>
 								<a href="/configuration/{{i['conf']}}">
-									<h5 class="card-title">{{i['conf']}}</h5>
+									<h6 class="card-title" style="margin:0 !important;">{{i['conf']}}</h6>
 								</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">
+							<div class="col card-col">
 								<small class="text-muted"><strong>STATUS</strong></small>
-								<h6 style="text-transform: uppercase;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>
+								<h6 style="text-transform: uppercase; margin:0 !important;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>
 							</div>
-							<div class="col-sm">
+							<div class="col-md card-col">
 								<small class="text-muted"><strong>PUBLIC KEY</strong></small>
-								<h6 style="text-transform: uppercase;"><samp>{{i['public_key']}}</samp></h6>
+								<h6 style="text-transform: uppercase; margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
+							</div>
+							<div class="col-md">
+                                {% if i['checked'] == "checked" %}
+                                    <a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-primary"><i class="bi bi-toggle2-on"></i></a>
+                                {% else %}
+                                    <a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i></a>
+                                {% endif %}
 							</div>
-							
-
 						</div>
 					</div>
 				</div>
@@ -72,25 +37,11 @@
 		</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 src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
+{% include "footer.html" %}
 <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'))
-		}
+	$('.switch').click(function() {
+		location.replace("/switch/"+$(this).attr('id'))
     });
+	$(".sb-home-url").addClass("active")
 </script>
 </html>

src/templates/navbar.html

@@ -0,0 +1,7 @@
+<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>

src/templates/settings.html

@@ -0,0 +1,107 @@
+<html>
+    {% include "header.html" %}
+    <body>
+       {% include "navbar.html" %}
+        <div class="container-fluid">
+            {% include "sidebar.html" %}
+            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+                <div class="setting-container mt-4">
+                    {% if message != ""%}
+                        <div class="alert alert-{{ status }}" role="alert">
+                            {{ message }}
+                        </div>
+                    {% endif %}
+                    <h1 class="pb-4">Settings</h1>
+                    {% if required_auth == "true" %}
+                    <h3>Account</h3>
+                    <form action="/update_acct" method="post">
+                        <div class="form-group">
+                        <label for="username">Username</label>
+                        <input type="text" class="form-control mb-4" id="username" name="username" value="{{ session['username'] }}">
+                        <button type="submit" class="btn btn-success" >Update Account</button>
+                        </div>
+                    </form>
+                    <hr>
+                    <h3>Security</h3>
+                    <form action="/update_pwd", method="post">
+                        <div class="form-group">
+                        <label for="currentpass">Current Password</label>
+                        <input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
+                        <label for="newpass">New Password</label>
+                        <input type="password" class="form-control mb-2" id="newpass" name="newpass">
+                        <label for="repnewpass">Repeat New Password</label>
+                        <input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
+                        <button type="submit" class="btn btn-danger">Update Password</button>
+                        </div>
+                    </form>
+                    <hr>
+                    {% endif %}
+                    <h3>Dashboard Configuration</h3>
+                    <form action="/update_app_ip_port" method="post" class="update_app_ip_port">
+                        <div class="form-group">
+                            <div class="row">
+                                <div class="col-sm">
+                                    <label for="app_ip" >Dashboard IP</label>
+                                    <input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
+                                    <p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server IP Address.</small></p>
+                                </div>
+                                <div class="col-sm">
+                                    <label for="app_port">Dashboard Port</label>
+                                    <input type="text" class="form-control mb-4" id="app_port" name="app_port" value="{{ app_port }}">
+                                </div>
+                            </div>
+                            <button type="button" class="btn btn-danger confirm_modal" data-toggle="modal" data-target="#confirmModal">Update Configuration & Restart</button>
+                        </div>
+                    </form>
+                </div>
+            </main>
+            <!-- Modal -->
+            <div class="modal fade" id="confirmModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title" id="staticBackdropLabel">Confirm Dashboard Configuration</h5>
+                  </div>
+                  <div class="modal-body">
+                    <small>Dashboard Original IP</small>
+                    <p>{{ app_ip }}</p>
+                    <small style="font-weight: bold" class="text-bold">Dashboard New IP</small>
+                    <p class="app_new_ip text-bold text-danger" style="font-weight: bold"></p>
+                    <small>Dashboard Original Port</small>
+                    <p>{{ app_port }}</p>
+                    <small style="font-weight: bold" class="text-bold">Dashboard New Port</small>
+                    <p class="app_new_port text-bold text-danger" style="font-weight: bold"></p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary cancel_restart" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger confirm_restart">Confirm & Restart Dashboard</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+    </body>
+{% include "footer.html" %}
+<script>
+    $(".sb-settings-url").addClass("active")
+    $(".confirm_modal").click(function (){
+        $(".app_new_ip").html($("#app_ip")[0].value)
+        $(".app_new_port").html($("#app_port")[0].value)
+    })
+
+    $(".confirm_restart").click(function (){
+        $(".cancel_restart").remove()
+        countdown = 7;
+        $.post('/update_app_ip_port', $('.update_app_ip_port').serialize())
+        url = $("#app_ip")[0].value+":"+$("#app_port")[0].value;
+        $(".confirm_restart").attr("disabled", "disabled")
+        setInterval(function (){
+            if (countdown === 0){
+                window.location.replace("http://"+url);
+            }
+            $(".confirm_restart").html("Redirecting you in "+countdown+" seconds.")
+            countdown--;
+        },1000)
+    })
+</script>
+</html>

src/templates/sidebar.html

@@ -0,0 +1,30 @@
+<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 sb-home-url" href="/">Home</a></li>
+                    {% if "username" in session %}
+                        <li class="nav-item"><a class="nav-link sb-settings-url" href="/settings">Settings</a></li>
+                    {% endif %}
+                    <li class="nav-item"><a class="nav-link sb-update-url" href="/">Check Update</a></li>
+                </ul>
+                <hr>
+                <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 sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
+                    {%endfor%}
+                </ul>
+                <hr>
+                {% if "username" in session %}
+                    <ul class="nav flex-column">
+                            <li class="nav-item"><a class="nav-link text-danger" href="/signout" style="font-weight: bold">Sign Out</a></li>
+                    </ul>
+                {% endif %}
+            </div>
+        </nav>
+    </div>
+</div>

src/templates/signin.html

@@ -0,0 +1,43 @@
+<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='dashboard.css') }}">
+    </head>
+    <body>
+        {% include "navbar.html" %}
+        <div class="container-fluid">
+
+            <main role="main" class="container login-container">
+                <div class="login-box" style="margin: auto !important;">
+                    <h3 class="text-center">Sign In</h3>
+
+                    <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>
+                        {% endif %}
+                        <div class="form-group">
+                        <label for="username" class="text-left">User Name</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>
+                      <div class="form-group form-check">
+                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
+                        <label class="form-check-label" for="exampleCheck1">Keep you login</label>
+                      </div>
+                      <button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button>
+                    </form>
+                </div>
+            </main>
+        </div>
+    </body>
+{% include "footer.html" %}
+</html>

src/wg-dashboard.ini

@@ -0,0 +1,9 @@
+[Account]
+username = admin
+password = 8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918
+
+[Server]
+app_ip = 0.0.0.0
+app_port = 10086
+auth_req = true
+version = v2.0

src/wgd.sh

@@ -0,0 +1,86 @@
+#!/bin/bash
+
+app_name="dashboard.py"
+
+help () {
+  printf "<Wireguard Dashboard> by Donald Zou - https://github.com/donaldzou \n"
+  printf "Usage: sh wg-dashboard.sh <option>"
+  printf "\n \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 "Thank you for using this dashboard! Your support is my motivation ;) \n"
+  printf "\n"
+}
+
+check_wgd_status(){
+  if ps aux | grep '[p]ython3 '$app_name > /dev/null;
+    then
+      return 0
+      else
+        return 1
+  fi
+}
+
+start_wgd () {
+    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 file: log/%s""$d"".txt\n"
+}
+
+stop_wgd() {
+  kill "$(ps aux | grep "[p]ython3 $app_name" | awk '{print $2}')"
+}
+
+start_wgd_debug() {
+  printf "Starting Wireguard Dashboard in the foreground. \n"
+  python3 "$app_name"
+}
+
+
+
+if [ "$#" != 1 ];
+  then
+    help
+  else
+    if [ "$1" = "start" ]; then
+        if check_wgd_status; then
+          printf "Wireguard Dashboard is already running. \n"
+          else
+            start_wgd
+        fi
+      elif [ "$1" = "stop" ]; then
+        if check_wgd_status; then
+            stop_wgd
+            printf "Wireguard Dashboard is stopped. \n"
+            else
+              printf "Wireguard Dashboard is not running. \n"
+        fi
+      elif [ "$1" = "update" ]; then
+        echo "update";
+      elif [ "$1" = "restart" ]; then
+         if check_wgd_status; then
+           stop_wgd
+           sleep 2
+           printf "Wireguard Dashboard is stopped. \n"
+           start_wgd_debug
+        else
+          start_wgd_debug
+        fi
+      elif [ "$1" = "debug" ]; then
+        if check_wgd_status; then
+          printf "Wireguard Dashboard is already running. \n"
+          else
+            start_wgd_debug
+        fi
+      else
+        help
+    fi
+fi
+