Fixed issue #352

Fixed issue when allowed_ips have more than 1 IP Address, allow access will crash

src/dashboard.py

@@ -697,7 +697,7 @@ class WireguardConfiguration:
                     with open(f"{uid}", "w+") as f:
                         f.write(p['preshared_key'])
                         
-                subprocess.check_output(f"wg set {self.Name} peer {p['id']} allowed-ips {p['allowed_ip']}{f' preshared-key {uid}' if presharedKeyExist else ''}",
+                subprocess.check_output(f"wg set {self.Name} peer {p['id']} allowed-ips {p['allowed_ip'].replace(' ', '')}{f' preshared-key {uid}' if presharedKeyExist else ''}",
                                         shell=True, stderr=subprocess.STDOUT)
                 if presharedKeyExist: os.remove(str(uid))
             else:

src/static/app/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && git commit -a",
+    "build": "vite build && git commit -a && git push",
     "build electron": "vite build && vite build --mode electron && cd ../../../../WGDashboard-Desktop && electron-builder --mac --win",
     "preview": "vite preview"
   },

src/static/app/src/components/configurationComponents/peer.vue

@@ -111,7 +111,7 @@ export default {
 <style scoped>
 
 .slide-fade-leave-active, .slide-fade-enter-active{
-	transition: all 0.2s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+	transition: all 0.2s cubic-bezier(0.82, 0.58, 0.17, 1.3);
 }
 
 .slide-fade-enter-from,

src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue

@@ -18,6 +18,7 @@ export default {
 			deleteBtnDisabled: false,
 			restrictBtnDisabled: false,
 			allowAccessBtnDisabled: false,
+			confirmDelete: false,
 		}
 	},
 	methods: {
@@ -88,7 +89,7 @@ export default {
 	<ul class="dropdown-menu mt-2 shadow-lg d-block rounded-3" style="max-width: 200px">
 		
 		<template v-if="!this.Peer.restricted">
-	
+			<template v-if="!this.confirmDelete">
 				<template v-if="this.Peer.status === 'running'">
 					<li style="font-size: 0.8rem; padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
 				<span class="text-body d-flex">
@@ -138,8 +139,6 @@ export default {
 						<i class="me-auto bi bi-app-indicator"></i> <LocaleText t="Schedule Jobs"></LocaleText>
 					</a>
 				</li>
-			
-
 				<li><hr class="dropdown-divider"></li>
 				<li>
 					<a class="dropdown-item d-flex text-warning"
@@ -154,7 +153,7 @@ export default {
 				</li>
 				<li>
 					<a class="dropdown-item d-flex fw-bold text-danger"
-				   @click="this.deletePeer()"
+					   @click="this.confirmDelete = true"
 					   :class="{disabled: this.deleteBtnDisabled}"
 					   role="button">
 						<i class="me-auto bi bi-trash"></i>
@@ -163,6 +162,26 @@ export default {
 					</a>
 				</li>
 			</template>
+			<template v-else>
+				<li class="confirmDelete">
+					<small style="white-space: break-spaces" class="mb-2 d-block fw-bold">Are you sure to delete this peer?</small>
+					<div class="d-flex w-100 gap-2">
+						<button
+							:disabled="this.deleteBtnDisabled"
+							@click="this.confirmDelete = false"
+							class="flex-grow-1 btn btn-sm bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">
+							<LocaleText t="No"></LocaleText>
+						</button>
+						<button 
+							@click="this.deletePeer()"
+							:disabled="this.deleteBtnDisabled"
+							class="flex-grow-1 ms-auto btn btn-sm bg-danger">
+							<LocaleText t="Yes"></LocaleText>
+						</button>
+					</div>
+				</li>
+			</template>
+		</template>
 		<template v-else>
 			<li>
 				<a class="dropdown-item d-flex text-warning"
@@ -172,7 +191,6 @@ export default {
 					<i class="me-auto bi bi-unlock"></i>
 					<LocaleText t="Allow Access" v-if="!this.allowAccessBtnDisabled"></LocaleText>
 					<LocaleText t="Allowing Access..." v-else></LocaleText>
-
 				</a>
 			</li>
 		</template>
@@ -188,4 +206,8 @@ export default {
 .dropdown-item.disabled, .dropdown-item:disabled{
 	opacity: 0.7;
 }
+
+.confirmDelete{
+	padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+}
 </style>

src/static/css/dashboard.css

@@ -1051,17 +1051,17 @@ pre.index-alert {
 
 .fade2-enter-active,
 .fade2-leave-active {
-    transition: all 0.2s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+    transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 1.3);
 }
 
 .fade2-enter-from{
-    transform: translateY(30px);
-    filter: blur(3px);
+    transform: translateY(-30px);
+    /*filter: blur(3px);*/
     opacity: 0;
 }
 
 .fade2-leave-to {
-    transform: translateY(-30px);
+    transform: translateY(30px);
     filter: blur(3px);
     opacity: 0;
 }