Kind of finished revamping add peers

Still need to clean some of the codes but overall is good :)

src/static/app/src/components/configurationComponents/newPeersComponents/allowedIPsInput.vue

@@ -29,14 +29,14 @@ export default {
 		searchAvailableIps(){
 			return this.availableIpSearchString ?
 				this.availableIp.filter(x =>
-					x.includes(this.availableIpSearchString) && !this.data.allowed_ip.includes(x)) :
-				this.availableIp.filter(x => !this.data.allowed_ip.includes(x))
+					x.includes(this.availableIpSearchString) && !this.data.allowed_ips.includes(x)) :
+				this.availableIp.filter(x => !this.data.allowed_ips.includes(x))
 		}
 	},
 	methods: {
 		addAllowedIp(ip){
 			if(this.store.checkCIDR(ip)){
-				this.data.allowed_ip.push(ip);
+				this.data.allowed_ips.push(ip);
 				return true;
 			}
 			return false;
@@ -55,11 +55,11 @@ export default {
 		<label for="peer_allowed_ip_textbox" class="form-label">
 			<small class="text-muted">Allowed IPs <code>(Required)</code></small>
 		</label>
-		<div class="d-flex gap-2 flex-wrap" :class="{'mb-2': this.data.allowed_ip.length > 0}">
+		<div class="d-flex gap-2 flex-wrap" :class="{'mb-2': this.data.allowed_ips.length > 0}">
 			<TransitionGroup name="list">
-									<span class="badge rounded-pill text-bg-success" v-for="(ip, index) in this.data.allowed_ip" :key="ip">
+									<span class="badge rounded-pill text-bg-success" v-for="(ip, index) in this.data.allowed_ips" :key="ip">
 										{{ip}}
-										<a role="button" @click="this.data.allowed_ip.splice(index, 1)">
+										<a role="button" @click="this.data.allowed_ips.splice(index, 1)">
 											<i class="bi bi-x-circle-fill ms-1"></i></a>
 									</span>
 			</TransitionGroup>

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

@@ -1,6 +1,5 @@
 <script>
-// import {Popover, Dropdown} from "bootstrap";
-import {fetchGet} from "@/utilities/fetch.js";
+import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import NameInput from "@/components/configurationComponents/newPeersComponents/nameInput.vue";
 import PrivatePublicKeyInput from "@/components/configurationComponents/newPeersComponents/privatePublicKeyInput.vue";
@@ -27,7 +26,7 @@ export default {
 				bulkAdd: false,
 				bulkAddAmount: "",
 				name: "",
-				allowed_ip: [],
+				allowed_ips: [],
 				private_key: "",
 				public_key: "",
 				DNS: this.dashboardStore.Configuration.Peers.peer_global_dns,
@@ -54,6 +53,19 @@ export default {
 		const dashboardStore = DashboardConfigurationStore();
 		return {store, dashboardStore}
 	}, 
+	methods: {
+		peerCreate(){
+			fetchPost("/api/addPeers/" + this.$route.params.id, this.data, (res) => {
+				if (res.status){
+					this.$router.push(`/configuration/${this.$route.params.id}/peers`)
+					this.dashboardStore.newMessage("Server", "Peer create successfully", "success")
+				}else{
+					this.dashboardStore.newMessage("Server", res.message, "danger")
+				}
+				
+			})
+		}	
+	},
 	computed:{
 		allRequireFieldsFilled(){
 			let status = true;
@@ -63,8 +75,7 @@ export default {
 				}
 			}else{
 				let requireFields =
-					["allowed_ip", "private_key", "public_key", "endpoint_allowed_ip", "keepalive", "mtu"]
-
+					["allowed_ips", "private_key", "public_key", "endpoint_allowed_ip", "keepalive", "mtu"]
 				requireFields.forEach(x => {
 					if (this.data[x].length === 0) status = false;
 				});
@@ -121,6 +132,7 @@ export default {
 			<div class="d-flex mt-2">
 				<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
 				        :disabled="!this.allRequireFieldsFilled"
+				        @click="this.peerCreate()"
 				>
 					<i class="bi bi-plus-circle-fill me-2"></i>Add
 				</button>

src/static/app/src/test.py

@@ -0,0 +1,17 @@
+import subprocess
+
+
+def _generateKeyPairs(amount: int) -> list[list[str]] | None:
+    try:
+        pairs = subprocess.check_output(
+            f'''for ((i = 0 ; i<{amount} ; i++ ));do privateKey=$(wg genkey) presharedKey=$(wg genkey) publicKey=$(wg pubkey <<< "$privateKey") echo "$privateKey,$publicKey,$presharedKey"; done''', shell=True, stderr=subprocess.STDOUT
+        )
+        pairs = pairs.decode().split("\n")
+        print(pairs)
+        return [x.split(",") for x in pairs]
+    except subprocess.CalledProcessError as exp:
+        print(str(exp))
+        return []
+
+
+_generateKeyPairs(20)

src/static/app/src/views/setup.vue

@@ -71,7 +71,7 @@ export default {
 					{{this.errorMessage}}
 				</div>
 				<div class="d-flex flex-column gap-3">
-					<div id="createAccount">
+					<div id="createAccount" class="d-flex flex-column gap-2">
 						<div class="form-group text-body">
 							<label for="username" class="mb-1 text-muted">
 								<small>Pick an username you like</small></label>