Finished revamping peer edit

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

@@ -74,6 +74,7 @@ export default {
 					</a>
 					<Transition name="slide-fade">
 						<PeerSettingsDropdown 
+							@setting="this.$emit('setting')"
 							:Peer="Peer"
 							v-if="this.subMenuOpened"
 							ref="target"

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

@@ -33,6 +33,7 @@ import {
 	Tooltip
 } from 'chart.js';
 import dayjs from "dayjs";
+import PeerSettings from "@/components/configurationComponents/peerSettings.vue";
 
 Chart.register(
 	ArcElement,
@@ -62,7 +63,7 @@ Chart.register(
 
 export default {
 	name: "peerList",
-	components: {PeerSearch, Peer, Line, Bar},
+	components: {PeerSettings, PeerSearch, Peer, Line, Bar},
 	setup(){
 		const dashboardConfigurationStore = DashboardConfigurationStore();
 		const wireguardConfigurationStore = WireguardConfigurationsStore();
@@ -100,10 +101,14 @@ export default {
 					},
 				],
 			},
+			peerSetting: {
+				modalOpen: false,
+				selectedPeer: undefined
+			}
 		}
 	},
 	watch: {
-		'$route.params.id': {
+		'$route.params': {
 			immediate: true,
 			handler(){
 				clearInterval(this.interval)
@@ -430,17 +435,9 @@ export default {
 			</div>
 		</div>
 		<div class="mb-4">
-			<RouterView v-slot="{Component}">
-				<Transition name="fade3" mode="out-in">
-					<Component :is="Component"></Component>
-				</Transition>
-			</RouterView>
 			<div class="d-flex align-items-center gap-3 mb-2 ">
 				<h3>Peers</h3>
-				<RouterLink
-					to="./peer_settings"
-					class="ms-auto text-secondary text-decoration-none"><i class="bi bi-sliders2 me-2"></i>Peer Settings</RouterLink>
-				<a href="#" class="text-decoration-none"><i class="bi bi-plus-circle-fill me-2"></i>Add Peer</a>
+				<a href="#" class="text-decoration-none ms-auto"><i class="bi bi-plus-circle-fill me-2"></i>Add Peer</a>
 			</div>
 			<PeerSearch></PeerSearch>
 
@@ -448,11 +445,17 @@ export default {
 				<div class="col-12 col-lg-6 col-xl-4"
 				     :key="peer.id"
 				     v-for="peer in this.searchPeers">
-					<Peer :Peer="peer"></Peer>
+					<Peer :Peer="peer" @setting="peerSetting.modalOpen = true; peerSetting.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"></Peer>
 				</div>
 			</TransitionGroup>
-			
 		</div>
+		<Transition name="fade">
+			<PeerSettings v-if="this.peerSetting.modalOpen" 
+			              :selectedPeer="this.peerSetting.selectedPeer"
+			              @refresh="this.getPeers(this.$route.params.id)"
+			              @close="this.peerSetting.modalOpen = false">
+			</PeerSettings>
+		</Transition>
 	</div>
 </template>
 

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

@@ -1,32 +1,198 @@
 <script>
+import {fetchPost} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+
 export default {
-	name: "peerSettings"
+	name: "peerSettings",
+	props: {
+		selectedPeer: Object
+	},
+	data(){
+		return {
+			data: undefined,
+			dataChanged: false,
+			showKey: false,
+			saving: false
+		}
+	},
+	setup(){
+		const dashboardConfigurationStore = DashboardConfigurationStore();
+		return {dashboardConfigurationStore}
+	},
+	methods: {
+		reset(){
+			if (this.selectedPeer){
+				this.data = JSON.parse(JSON.stringify(this.selectedPeer))
+				this.dataChanged = false;
+			}
+		},
+		savePeer(){
+			this.saving = true;
+			fetchPost(`/api/updatePeerSettings/${this.$route.params.id}`, this.data, (res) => {
+				this.saving = false;
+				if (res.status){
+					this.dashboardConfigurationStore.newMessage("Server", "Peer Updated!", "success")
+				}else{
+					this.dashboardConfigurationStore.newMessage("Server", res.message, "danger")
+				}
+				this.$emit("refresh")
+			})
+		}
+	},
+	beforeMount() {
+		this.reset();
+	},
+	mounted() {
+		this.$el.querySelectorAll("input").forEach(x => {
+			x.addEventListener("keyup", () => {
+				this.dataChanged = true;
+			});
+		})
+	}
 }
 </script>
 
 <template>
 	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0">
 		<div class="container d-flex h-100 w-100">
-			<div class="card m-auto rounded-3 w-100">
+			<div class="card m-auto rounded-3 shadow" style="width: 700px">
 				<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
 					<h4 class="mb-0">Peer Settings</h4>
-					<router-link to="./" class="ms-auto btn">
-						<i class="bi bi-x-lg"></i>
-					</router-link>
+					<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 				</div>
-				
-				<div class="card-body p-4">
+				<div class="card-body px-4 pb-4" v-if="this.data">
+					<div class="d-flex flex-column gap-2 mb-4">
+						<div>
+							<small class="text-muted">Public Key</small><br>
+							<small><samp>{{this.data.id}}</samp></small>
+						</div>
+						<div>
+							<label for="peer_name_textbox" class="form-label">
+								<small class="text-muted">Name</small>
+							</label>
+							<input type="text" class="form-control form-control-sm rounded-3"
+							       :disabled="this.saving"
+							       v-model="this.data.name"
+							       id="peer_name_textbox" placeholder="">
+						</div>
+						<div>
+							<div class="d-flex position-relative">
+								<label for="peer_private_key_textbox" class="form-label">
+									<small class="text-muted">Private Key <code>(Required for QR Code and Download)</code></small>
+								</label>
+								<a role="button" class="ms-auto text-decoration-none toggleShowKey"
+									@click="this.showKey = !this.showKey"
+								>
+									<i class="bi" :class="[this.showKey ? 'bi-eye-slash-fill':'bi-eye-fill']"></i>
+								</a>
+							</div>
+							<input :type="[this.showKey ? 'text':'password']" class="form-control form-control-sm rounded-3"
+							       :disabled="this.saving"
+							       v-model="this.data.private_key"
+							       id="peer_private_key_textbox"
+							       style="padding-right: 40px">
+						</div>
+						<div>
+							<label for="peer_allowed_ip_textbox" class="form-label">
+								<small class="text-muted">Allowed IPs <code>(Required)</code></small>
+							</label>
+							<input type="text" class="form-control form-control-sm rounded-3"
+							       :disabled="this.saving"
+							       v-model="this.data.allowed_ip"
+							       id="peer_allowed_ip_textbox">
+						</div>
+						<div>
+							<label for="peer_DNS_textbox" class="form-label">
+								<small class="text-muted">DNS <code>(Required)</code></small>
+							</label>
+							<input type="text" class="form-control form-control-sm rounded-3"
+							       :disabled="this.saving"
+							       v-model="this.data.DNS"
+							       id="peer_DNS_textbox">
+						</div>
+						<div>
+							<label for="peer_endpoint_allowed_ips" class="form-label">
+								<small class="text-muted">Endpoint Allowed IPs <code>(Required)</code></small>
+							</label>
+							<input type="text" class="form-control form-control-sm rounded-3"
+							       :disabled="this.saving"
+							       v-model="this.data.endpoint_allowed_ip"
+							       id="peer_endpoint_allowed_ips">
+						</div>
+						<hr>
+						<div class="accordion mt-2" id="peerSettingsAccordion">
+							<div class="accordion-item">
+								<h2 class="accordion-header">
+									<button class="accordion-button rounded-3 collapsed" type="button" 
+									        data-bs-toggle="collapse" data-bs-target="#peerSettingsAccordionOptional">
+										Optional Settings
+									</button>
+								</h2>
+								<div id="peerSettingsAccordionOptional" class="accordion-collapse collapse" 
+								     data-bs-parent="#peerSettingsAccordion">
+									<div class="accordion-body d-flex flex-column gap-2 mb-2">
+										<div>
+											<label for="peer_preshared_key_textbox" class="form-label">
+												<small class="text-muted">Pre-Shared Key</small>
+											</label>
+											<input type="text" class="form-control form-control-sm rounded-3"
+											       :disabled="this.saving"
+											       v-model="this.data.preshared_key"
+											       id="peer_preshared_key_textbox">
+										</div>
+										<div>
+											<label for="peer_mtu" class="form-label"><small class="text-muted">MTU</small></label>
+											<input type="number" class="form-control form-control-sm rounded-3"
+											       :disabled="this.saving"
+											       v-model="this.data.mtu"
+											       id="peer_mtu">
+										</div>
+										<div>
+											<label for="peer_keep_alive" class="form-label">
+												<small class="text-muted">Persistent Keepalive</small>
+											</label>
+											<input type="number" class="form-control form-control-sm rounded-3"
+											       :disabled="this.saving"
+											       v-model="this.data.keepalive"
+											       id="peer_keep_alive">
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="d-flex align-items-center gap-2">
+						<button class="btn btn-secondary rounded-3 shadow" 
+						        @click="this.reset()"
+						        :disabled="!this.dataChanged || this.saving">
+							Reset <i class="bi bi-arrow-clockwise ms-2"></i>
+						</button>
+						
+						<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
+						        :disabled="!this.dataChanged || this.saving"
+						        @click="this.savePeer()"
+						>
+							Save Peer<i class="bi bi-save-fill ms-2"></i></button>
+					</div>
+					
+					
+					
 					
 				</div>
 			</div>
 		</div>
-		
+
 	</div>
 </template>
 
 <style scoped>
-.peerSettingContainer{
+.peerSettingContainer {
 	background-color: #00000060;
 	z-index: 1000;
 }
+.toggleShowKey{
+	position: absolute;
+	top: 35px;
+	right: 12px;
+}
 </style>

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

@@ -21,7 +21,9 @@ export default {
 		</template>
 		
 		<li>
-			<a class="dropdown-item d-flex" role="button">
+			<a class="dropdown-item d-flex" role="button"
+				@click="this.$emit('setting')"
+			>
 				<i class="me-auto bi bi-pen"></i> Edit
 			</a>
 		</li>

src/static/app/src/components/configurationList.vue

@@ -18,7 +18,7 @@ export default {
 	<div class="mt-4">
 		<div class="container">
 			<div class="d-flex mb-4 ">
-				<h3 class="text-body">Wireguard Configurations</h3>
+				<h3 class="text-body">WireGuard Configurations</h3>
 				<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3">
 					Configuration
 					<i class="bi bi-plus-circle-fill ms-2"></i>

src/static/app/src/router/index.js

@@ -30,34 +30,46 @@ const router = createRouter({
       path: '/',
       component: Index,
       meta: {
-        requiresAuth: true
+        requiresAuth: true,
+        
       },
       children: [
         {
           name: "Configuration List",
           path: '',
-          component: ConfigurationList
+          component: ConfigurationList,
+          meta: {
+            title: "WireGuard Configurations"
+          }
         },
         {
           name: "Settings",
           path: '/settings',
-          component: Settings
+          component: Settings,
+          meta: {
+            title: "Settings"
+          }
         },
         {
           name: "New Configuration",
           path: '/new_configuration',
-          component: NewConfiguration
+          component: NewConfiguration,
+          meta: {
+            title: "New Configuration"
+          }
         },
         {
           name: "Configuration",
-          path: '/configuration/:id/',
+          path: '/configuration/:id',
           component: Configuration,
+          meta: {
+            title: "Configuration"
+          },
           children: [
-              
             {
-              name: "Peer Settings",
-              path: 'peer_settings',
-              component: PeerSettings
+              name: "Peers List",
+              path: '',
+              component: PeerList
             }
           ]
         },
@@ -65,7 +77,10 @@ const router = createRouter({
       ]
     },
     {
-      path: '/signin', component: Signin
+      path: '/signin', component: Signin,
+      meta: {
+        title: "Sign In"
+      }
     },
     {
       path: '/welcome', component: Setup,
@@ -80,6 +95,15 @@ router.beforeEach(async (to, from, next) => {
   const wireguardConfigurationsStore = WireguardConfigurationsStore();
   const dashboardConfigurationStore = DashboardConfigurationStore();
   
+  if (to.meta.title){
+    if (to.params.id){
+      document.title = to.params.id + " | WGDashboard";
+    }else{
+      document.title = to.meta.title + " | WGDashboard";
+    }
+  }else{
+    document.title = "WGDashboard"
+  }
   
   if (to.meta.requiresAuth){
     if (cookie.getCookie("authToken") && await checkAuth()){

src/static/app/src/views/configuration.vue

@@ -71,7 +71,12 @@ export default {
 
 <template>
 	<div class="mt-5 text-body">
-		<PeerList></PeerList>
+<!--		<PeerList></PeerList>-->
+		<RouterView v-slot="{ Component }">
+			<Transition name="fade2" mode="out-in">
+				<Component :is="Component"></Component>
+			</Transition>
+		</RouterView>
 	</div>
 </template>