Added the function to remove peers

.gitignore

@@ -1,2 +1,3 @@
+.vscode/sftp.json
 src/.vscode/sftp.json
 .DS_Store

.vscode/sftp.json

@@ -1,9 +0,0 @@
-{
-    "name": "My Server",
-    "host": "38.106.21.18",
-    "protocol": "sftp",
-    "port": 22,
-    "username": "root",
-    "remotePath": "/root/wireguard-dashboard",
-    "uploadOnSave": true
-}

README.md

@@ -3,6 +3,7 @@
 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:**
+- Ubuntu 18.04.1 LTS, other OS might work, but haven't test yet.
 - Wireguard
 - Configuration files under **/etc/wireguard**
 - Python 3.7
@@ -10,7 +11,7 @@ Monitoring Wireguard is not convinient, need to login into server and type wg sh
 
 **Install:**
 1. `git clone https://github.com/donaldzou/Wireguard-Dashboard.git`
-2. `cd Wireguard-Dashboard`
+2. `cd Wireguard-Dashboard\src`
 3. `python3 dashboard.py`
 4. Access your server! e.g (http://your_server_ip:10086)
 

src/dashboard.py

@@ -24,8 +24,21 @@ def get_conf_peer_key(config_name):
     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):
     peer_data = {}
@@ -44,9 +57,9 @@ def get_conf_peers_data(config_name):
     download_total = 0
     total = 0
     for i in range(int(len(data_usage)/3)):
-        peer_data[data_usage[count]]['total_recive'] = int(data_usage[count+1])/(1024**3)
-        peer_data[data_usage[count]]['total_sent'] = int(data_usage[count+2])/(1024**3)
-        peer_data[data_usage[count]]['total_data'] = (int(data_usage[count+2])+int(data_usage[count+1]))/(1024**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
@@ -112,9 +125,9 @@ def get_conf_total_data(config_name):
         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)
+    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]
 
@@ -151,6 +164,7 @@ def conf(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),
+        "running_peer": get_conf_running_peer_number(config_name),
         "checked": ""
     }
     if conf_data['status'] == "stopped":
@@ -182,12 +196,29 @@ def add_peer(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)
-            status = subprocess.check_output("wg-quick save "+config_name, shell=True)
-            return "Good"
-        except Exception: return redirect('/configuration/'+config_name)
-        
+            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):
+    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)
+            return "true"
+        except subprocess.CalledProcessError as exc:
+            return exc.output.strip()
 
 app.run(host='0.0.0.0',debug=False, port=10086)

src/templates/configuration.html

@@ -7,7 +7,7 @@
 	<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">
 </head>
 
 <body>
@@ -54,6 +54,10 @@
 						<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>
@@ -78,7 +82,7 @@
 				</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="#staticBackdrop">
+					<button type="button" class="btn btn-outline-primary btn-sm mb-3" data-toggle="modal" data-target="#add_modal">
 						<strong>ADD PEER</strong>
 					</button>
 					
@@ -95,7 +99,7 @@
 							</div>
 							<div class="col-sm">
 								<small class="text-muted"><strong>PEER</strong></small>
-								<h6 style="text-transform: uppercase;"><samp>{{i}}</samp></h6>
+								<h6><samp>{{i}}</samp></h6>
 							</div>
 							
 							<div class="w-100"></div>
@@ -126,11 +130,9 @@
 							</div>
 							<div class="w-100"></div>
 							<div class="col-sm">
-								<small class="text-muted"><strong>ACTION</strong></small>
+								<!-- <small class="text-muted"><strong>ACTION</strong></small> -->
 								<div class="button-group">
-									<button type="button" class="btn btn-outline-primary btn-sm">QR CODE</button>
-									<button type="button" class="btn btn-outline-info btn-sm">CONF FILE</button>
-									<button type="button" class="btn btn-outline-danger btn-sm">DELETE</button>
+									<button type="button" class="btn btn-outline-danger btn-sm btn-delete-peer" id="{{i}}" data-toggle="modal" data-target="#delete_modal"><span class="material-icons">delete_forever</span></button>
 								</div>
 								
 							</div>
@@ -140,7 +142,7 @@
 			{%endfor%}
 		</main>
 	</div>
-	<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
+	<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">
@@ -151,6 +153,11 @@
 					</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>
@@ -169,6 +176,31 @@
 			</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>
 </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"
@@ -182,11 +214,11 @@
 	$('.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'))
+				location.replace("/switch/"+$(this).attr('id'));
 			}
 		}
 		else{
-			location.replace("/switch/"+$(this).attr('id'))
+			location.replace("/switch/"+$(this).attr('id'));
 		}
     });
 
@@ -202,13 +234,47 @@
 				},
 				data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
 				success: function (response){
-					console.log(response);
+					if(response != "true"){
+						$("#add_peer_alert").html(response+$("#add_peer_alert").html());
+						$("#add_peer_alert").removeClass("d-none");
+					}
+					else{
+						location.reload();
+					}
 				}
 			})
 		}
-		
 	})
 
+	$(".btn-delete-peer").click(function(){
+		var peer_id = $(this).attr("id");
+		$("#delete_peer").attr("peer_id", peer_id);
+	});
+
+	$("#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();
+					}
+			}
+		})
+	});
+
+
+
 	// setInterval(function(){
 	// 	location.reload();
 	// }, 10000)

src/test.py

@@ -1,4 +1,4 @@
 from tinydb import TinyDB, Query
 conf_db = TinyDB("json/conf.json")
 
-print(conf_db.all())
+print(conf_db.all())