Fixing some of the issue from users ;)

src/dashboard_new.py

@@ -499,7 +499,7 @@ class DashboardConfig:
 
     def __init__(self):
         self.__config = configparser.ConfigParser(strict=False)
-        self.__config.read_file(open(DASHBOARD_CONF))
+        self.__config.read_file(open(DASHBOARD_CONF, "w+"))
         self.hiddenAttribute = ["totp_key"]
         self.__default = {
             "Account": {
@@ -938,7 +938,7 @@ def API_updatePeerSettings(configName):
                     return ResponseObject(False, f"Allowed IP already taken by another peer.")
             if not _checkIPWithRange(endpoint_allowed_ip):
                 return ResponseObject(False, f"Endpoint Allowed IPs format is incorrect.")
-            if not _checkDNS(dns_addresses):
+            if len(dns_addresses) > 0 and _checkDNS(dns_addresses):
                 return ResponseObject(False, f"DNS format is incorrect.")
             if data['mtu'] < 0 or data['mtu'] > 1460:
                 return ResponseObject(False, "MTU format is not correct.")
@@ -1016,9 +1016,13 @@ def API_downloadPeer(configName):
     peerConfiguration = f'''[Interface]
 PrivateKey = {peer.private_key}
 Address = {peer.allowed_ip}
-DNS = {peer.DNS}
 MTU = {str(peer.mtu)}
 
+
+    '''
+    if len(peer.DNS) > 0:
+        peerConfiguration += f"DNS = {peer.DNS}\n"
+    peerConfiguration += f'''
 [Peer]
 PublicKey = {configuration.PublicKey}
 AllowedIPs = {peer.endpoint_allowed_ip}
@@ -1026,7 +1030,7 @@ Endpoint = {DashboardConfig.GetConfig("Peers", "remote_endpoint")[1]}:{configura
 PersistentKeepalive = {str(peer.keepalive)}
 '''
     if len(peer.preshared_key) > 0:
-        peerConfiguration += f"PresharedKey = {peer.preshared_key}"
+        peerConfiguration += f"PresharedKey = {peer.preshared_key}\n"
     return ResponseObject(data={
         "fileName": filename,
         "file": peerConfiguration

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

@@ -22,6 +22,7 @@ export default {
 	},
 	methods:{
 		checkDNS(){
+			if(this.dns){
 				let i = this.dns.split(',').map(x => x.replaceAll(' ', ''));
 				for(let ip in i){
 					if (!this.store.regexCheckIP(i[ip])){
@@ -36,6 +37,7 @@ export default {
 				this.error = false;
 				this.data.DNS = this.dns;
 			}
+		}
 	},
 	watch: {
 		'dns'(){
@@ -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,22 +88,24 @@ export default {
 </script>
 
 <template>
-	<div class="modal fade" id="peerCreateModal" data-bs-backdrop="static">
+	<div class="container">
-		<div class="modal-dialog " style="max-width: 700px !important;">
+		<div class="mb-4 d-flex align-items-center gap-4">
-			<div class="modal-content rounded-3 border-0 shadow">
+			<RouterLink to="peers">
-				<div class="modal-header border-0 pb-0">
+				<h3 class="mb-0 text-body">
-					<h1 class="modal-title fs-5" id="staticBackdropLabel">Add Peer</h1>
+					<i class="bi bi-chevron-left"></i>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</h3>
+			</RouterLink>
+			<h3 class="text-body mb-0">New Configuration</h3>
 		</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>
+			<DnsInput :saving="saving" :data="data"></DnsInput>
+
 			<hr class="mb-0 mt-2">
 			<div class="row">
 				<div class="col-sm" v-if="!this.data.bulkAdd">
@@ -126,9 +127,6 @@ export default {
 			</div>
 		</div>
 	</div>
-			</div>
-		</div>
-	</div>
 </template>
 
 <style scoped>

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" 
+				<RouterLink
-				   data-bs-toggle="modal" data-bs-target="#peerCreateModal"
+					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, route }">
-		<RouterView v-slot="{ Component }">
 			<Transition name="fade2" mode="out-in">
-				<Component :is="Component"></Component>
+				<Component :is="Component" :key="route.path"></Component>
 			</Transition>
 		</RouterView>
 	</div>