Fixing some of the issue from users ;)

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

@@ -22,19 +22,21 @@ export default {
 	},
 	methods:{
 		checkDNS(){
-			let i = this.dns.split(',').map(x => x.replaceAll(' ', ''));
-			for(let ip in i){
-				if (!this.store.regexCheckIP(i[ip])){
-					if (!this.error){
-						this.dashboardStore.newMessage("WGDashboard", "DNS is invalid", "danger");
+			if(this.dns){
+				let i = this.dns.split(',').map(x => x.replaceAll(' ', ''));
+				for(let ip in i){
+					if (!this.store.regexCheckIP(i[ip])){
+						if (!this.error){
+							this.dashboardStore.newMessage("WGDashboard", "DNS is invalid", "danger");
+						}
+						this.error = true;
+						this.data.DNS = "";
+						return;
 					}
-					this.error = true;
-					this.data.DNS = "";
-					return;
 				}
+				this.error = false;
+				this.data.DNS = this.dns;
 			}
-			this.error = false;
-			this.data.DNS = this.dns;
 		}
 	},
 	watch: {
@@ -48,7 +50,7 @@ export default {
 <template>
 	<div>
 		<label for="peer_DNS_textbox" class="form-label">
-			<small class="text-muted">DNS <code>(Required)</code></small>
+			<small class="text-muted">DNS</small>
 		</label>
 		<input type="text" class="form-control form-control-sm rounded-3"
 		       :class="{'is-invalid': this.error}"

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

@@ -23,7 +23,6 @@ export default {
 		PresharedKeyInput, EndpointAllowedIps, DnsInput, AllowedIPsInput, PrivatePublicKeyInput, NameInput},
 	data(){
 		return{
-			
 			data: {
 				bulkAdd: false,
 				bulkAddAmount: "",
@@ -64,7 +63,7 @@ export default {
 				}
 			}else{
 				let requireFields =
-					["allowed_ip", "private_key", "public_key", "DNS", "endpoint_allowed_ip", "keepalive", "mtu"]
+					["allowed_ip", "private_key", "public_key", "endpoint_allowed_ip", "keepalive", "mtu"]
 
 				requireFields.forEach(x => {
 					if (this.data[x].length === 0) status = false;
@@ -89,43 +88,42 @@ export default {
 </script>
 
 <template>
-	<div class="modal fade" id="peerCreateModal" data-bs-backdrop="static">
-		<div class="modal-dialog " style="max-width: 700px !important;">
-			<div class="modal-content rounded-3 border-0 shadow">
-				<div class="modal-header border-0 pb-0">
-					<h1 class="modal-title fs-5" id="staticBackdropLabel">Add Peer</h1>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+	<div class="container">
+		<div class="mb-4 d-flex align-items-center gap-4">
+			<RouterLink to="peers">
+				<h3 class="mb-0 text-body">
+					<i class="bi bi-chevron-left"></i>
+				</h3>
+			</RouterLink>
+			<h3 class="text-body mb-0">New Configuration</h3>
+		</div>
+		<div class="d-flex flex-column gap-2">
+			<BulkAdd :saving="saving" :data="this.data" :availableIp="this.availableIp"></BulkAdd>
+			<hr class="mb-0 mt-2">
+			<NameInput :saving="saving" :data="this.data" v-if="!this.data.bulkAdd"></NameInput>
+			<PrivatePublicKeyInput :saving="saving" :data="data" v-if="!this.data.bulkAdd"></PrivatePublicKeyInput>
+			<AllowedIPsInput :availableIp="this.availableIp" :saving="saving" :data="data" v-if="!this.data.bulkAdd"></AllowedIPsInput>
+			<EndpointAllowedIps :saving="saving" :data="data"></EndpointAllowedIps>
+			<DnsInput :saving="saving" :data="data"></DnsInput>
+
+			<hr class="mb-0 mt-2">
+			<div class="row">
+				<div class="col-sm" v-if="!this.data.bulkAdd">
+					<PresharedKeyInput :saving="saving" :data="data" :bulk="this.data.bulkAdd"></PresharedKeyInput>
 				</div>
-				<div class="modal-body">
-					<div class="d-flex flex-column gap-2">
-						<BulkAdd :saving="saving" :data="this.data" :availableIp="this.availableIp"></BulkAdd>
-						<hr class="mb-0 mt-2">
-						<NameInput :saving="saving" :data="this.data" v-if="!this.data.bulkAdd"></NameInput>
-						<PrivatePublicKeyInput :saving="saving" :data="data" v-if="!this.data.bulkAdd"></PrivatePublicKeyInput>
-						<AllowedIPsInput :availableIp="this.availableIp" :saving="saving" :data="data" v-if="!this.data.bulkAdd"></AllowedIPsInput>
-						<DnsInput :saving="saving" :data="data"></DnsInput>
-						<EndpointAllowedIps :saving="saving" :data="data"></EndpointAllowedIps>
-						<hr class="mb-0 mt-2">
-						<div class="row">
-							<div class="col-sm" v-if="!this.data.bulkAdd">
-								<PresharedKeyInput :saving="saving" :data="data" :bulk="this.data.bulkAdd"></PresharedKeyInput>
-							</div>
-							<div class="col-sm">
-								<MtuInput :saving="saving" :data="data"></MtuInput>
-							</div>
-							<div class="col-sm">
-								<PersistentKeepAliveInput :saving="saving" :data="data"></PersistentKeepAliveInput>
-							</div>
-						</div>
-						<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"
-							>
-								<i class="bi bi-plus-circle-fill me-2"></i>Add
-							</button>
-						</div>
-					</div>
+				<div class="col-sm">
+					<MtuInput :saving="saving" :data="data"></MtuInput>
 				</div>
+				<div class="col-sm">
+					<PersistentKeepAliveInput :saving="saving" :data="data"></PersistentKeepAliveInput>
+				</div>
+			</div>
+			<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"
+				>
+					<i class="bi bi-plus-circle-fill me-2"></i>Add
+				</button>
 			</div>
 		</div>
 	</div>

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

@@ -116,8 +116,19 @@ export default {
 			}
 		}
 	},
+	mounted() {
+		// console.log('mounted')
+		// this.loading = true;
+		// let id = this.$route.params.id;
+		// this.configurationInfo = [];
+		// this.configurationPeers = [];
+		// if (id){
+		// 	this.getPeers(id)
+		// 	this.setInterval();
+		// }
+	},
 	watch: {
-		'$route.params': {
+		'$route': {
 			immediate: true,
 			handler(){
 				clearInterval(this.interval)
@@ -446,10 +457,10 @@ export default {
 		<div class="mb-4">
 			<div class="d-flex align-items-center gap-3 mb-2 ">
 				<h3>Peers</h3>
-				<a role="button" 
-				   data-bs-toggle="modal" data-bs-target="#peerCreateModal"
+				<RouterLink
+					to="create"				   
 				   class="text-decoration-none ms-auto">
-					<i class="bi bi-plus-circle-fill me-2"></i>Add Peer</a>
+					<i class="bi bi-plus-circle-fill me-2"></i>Add Peer</RouterLink>
 			</div>
 			<PeerSearch></PeerSearch>
 			<TransitionGroup name="list" tag="div" class="row gx-2 gy-2 z-0">
@@ -479,7 +490,7 @@ export default {
 <!--		<Transition name="fade">-->
 <!--			-->
 <!--		</Transition>-->
-		<PeerCreate></PeerCreate>
+		
 	</div>
 </template>
 

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

@@ -101,15 +101,7 @@ export default {
 							       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>
@@ -119,6 +111,15 @@ export default {
 							       v-model="this.data.endpoint_allowed_ip"
 							       id="peer_endpoint_allowed_ips">
 						</div>
+						<div>
+							<label for="peer_DNS_textbox" class="form-label">
+								<small class="text-muted">DNS</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>
 						<hr>
 						<div class="accordion mt-2" id="peerSettingsAccordion">
 							<div class="accordion-item">

src/static/app/src/components/configurationListComponents/configurationCard.vue

@@ -38,7 +38,7 @@ export default {
 
 <template>
 	<div class="card conf_card rounded-3 shadow text-decoration-none">
-		<RouterLink :to="'/configuration/' + c.Name" class="card-body d-flex align-items-center gap-3 flex-wrap text-decoration-none">
+		<RouterLink :to="'/configuration/' + c.Name + '/peers'" class="card-body d-flex align-items-center gap-3 flex-wrap text-decoration-none">
 			<h6 class="mb-0"><span class="dot" :class="{active: c.Status}"></span></h6>
 			<h6 class="card-title mb-0"><samp>{{c.Name}}</samp></h6>
 			<h6 class="mb-0 ms-auto">

src/static/app/src/components/navbar.vue

@@ -29,7 +29,8 @@ export default {
 				</h6>
 				<ul class="nav flex-column">
 					<li class="nav-item">
-						<RouterLink :to="'/configuration/'+c.Name" class="nav-link nav-conf-link" v-for="c in this.wireguardConfigurationsStore.Configurations">
+						<RouterLink :to="'/configuration/'+c.Name + '/peers'" class="nav-link nav-conf-link" 
+						            v-for="c in this.wireguardConfigurationsStore.Configurations">
 							<samp>{{c.Name}}</samp>
 						</RouterLink>
 					</li>

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

@@ -13,6 +13,7 @@ import NewConfiguration from "@/views/newConfiguration.vue";
 import Configuration from "@/views/configuration.vue";
 import PeerSettings from "@/components/configurationComponents/peerSettings.vue";
 import PeerList from "@/components/configurationComponents/peerList.vue";
+import PeerCreate from "@/components/configurationComponents/peerCreate.vue";
 
 const checkAuth = async () => {
   let result = false
@@ -68,9 +69,14 @@ const router = createRouter({
           children: [
             {
               name: "Peers List",
-              path: '',
+              path: 'peers',
               component: PeerList
-            }
+            },
+            {
+              name: "Peers Create",
+              path: 'create',
+              component: PeerCreate
+            },
           ]
         },
         

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

@@ -1,80 +1,14 @@
 <script>
-import {fetchGet} from "@/utilities/fetch.js";
-import Peer from "@/components/configurationComponents/peer.vue";
-import { Line, Bar } from 'vue-chartjs'
-import Fuse from "fuse.js";
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	BubbleController,
-	DoughnutController,
-	LineController,
-	PieController,
-	PolarAreaController,
-	RadarController,
-	ScatterController,
-	CategoryScale,
-	LinearScale,
-	LogarithmicScale,
-	RadialLinearScale,
-	TimeScale,
-	TimeSeriesScale,
-	Decimation,
-	Filler,
-	Legend,
-	Title,
-	Tooltip
-} from 'chart.js';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	BubbleController,
-	DoughnutController,
-	LineController,
-	PieController,
-	PolarAreaController,
-	RadarController,
-	ScatterController,
-	CategoryScale,
-	LinearScale,
-	LogarithmicScale,
-	RadialLinearScale,
-	TimeScale,
-	TimeSeriesScale,
-	Decimation,
-	Filler,
-	Legend,
-	Title,
-	Tooltip
-);
-
-import dayjs from "dayjs";
-import PeerSearch from "@/components/configurationComponents/peerSearch.vue";
-import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
-import {ref} from "vue";
-import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
-import PeerList from "@/components/configurationComponents/peerList.vue";
-
 export default {
 	name: "configuration",
-	components: {PeerList},
 }
 </script>
 
 <template>
 	<div class="mt-5 text-body">
-<!--		<PeerList></PeerList>-->
-		<RouterView v-slot="{ Component }">
+		<RouterView v-slot="{ Component, route }">
 			<Transition name="fade2" mode="out-in">
-				<Component :is="Component"></Component>
+				<Component :is="Component" :key="route.path"></Component>
 			</Transition>
 		</RouterView>
 	</div>