refac: some WGDashboard code

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

@@ -0,0 +1,31 @@
+<script>
+import LocaleText from "@/components/text/localeText.vue";
+
+export default {
+	name: "notesInput",
+	components: {LocaleText},
+	props: {
+		bulk: Boolean,
+		data: Object,
+		saving: Boolean
+	}
+}
+</script>
+
+<template>
+	<div :class="{inactiveField: this.bulk}">
+		<label for="peer_notes_textbox" class="form-label">
+			<small class="text-muted">
+				<LocaleText t="Notes"></LocaleText>
+			</small>
+		</label>
+		<input type="text" class="form-control form-control-sm rounded-3"
+		       :disabled="this.saving || this.bulk"
+		       v-model="this.data.notes"
+		       id="peer_notes_textbox" placeholder="">
+	</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -15,6 +15,7 @@ import MtuInput from "@/components/configurationComponents/newPeersComponents/mt
 import PersistentKeepAliveInput
 	from "@/components/configurationComponents/newPeersComponents/persistentKeepAliveInput.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import NotesInput from "./newPeersComponents/notesInput.vue";
 
 const dashboardStore = DashboardConfigurationStore()
 const wireguardStore = WireguardConfigurationsStore()
@@ -27,11 +28,11 @@ const peerData = ref({
 	public_key: "",
 	DNS: dashboardStore.Configuration.Peers.peer_global_dns,
 	endpoint_allowed_ip: dashboardStore.Configuration.Peers.peer_endpoint_allowed_ip,
+	notes: "",
 	keepalive: parseInt(dashboardStore.Configuration.Peers.peer_keep_alive),
 	mtu: parseInt(dashboardStore.Configuration.Peers.peer_mtu),
 	preshared_key: "",
 	preshared_key_bulkAdd: false,
-	advanced_security: "off",
 	allowed_ips_validation: true,
 })
 const availableIp = ref([])
@@ -105,6 +106,7 @@ watch(() => {
 							<template v-if="!peerData.bulkAdd">
 								<hr class="mb-0 mt-2">
 								<NameInput :saving="saving" :data="peerData"></NameInput>
+								<NotesInput :saving="saving" :data="peerData"></NotesInput>
 								<PrivatePublicKeyInput :saving="saving" :data="peerData"></PrivatePublicKeyInput>
 								<AllowedIPsInput :availableIp="availableIp" :saving="saving" :data="peerData"></AllowedIPsInput>
 							</template>
@@ -118,7 +120,7 @@ watch(() => {
 										<LocaleText t="Advanced Options"></LocaleText>
 									</button>
 								</h2>
-								<div id="peerAddModalAccordionAdvancedOptions" 
+								<div id="peerAddModalAccordionAdvancedOptions"
 								     class="accordion-collapse collapse collapsed" data-bs-parent="#peerAddModalAccordion">
 									<div class="accordion-body rounded-bottom-3">
 										<div class="d-flex flex-column gap-2">

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

@@ -37,7 +37,6 @@ export default {
 				mtu: parseInt(this.dashboardStore.Configuration.Peers.peer_mtu),
 				preshared_key: "",
 				preshared_key_bulkAdd: false,
-				advanced_security: "off",
 			},
 			availableIp: undefined,
 			availableIpSearchString: "",

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

@@ -49,13 +49,16 @@ defineEmits(['close'])
 						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
 					</div>
 					<div class="card-body px-4">
-						<div>
-							<p class="mb-0 text-muted"><small>
-								<LocaleText t="Peer"></LocaleText>
-							</small></p>
-							<h2>
-								{{ selectedPeer.name }}
-							</h2>
+						<div class="d-flex justify-content-between align-items-start mb-2">
+							<div>
+								<p class="mb-0 text-muted"><small><LocaleText t="Peer" /></small></p>
+								<h2 class="mb-0">{{ selectedPeer.name }}</h2>
+							</div>
+
+							<div v-if="selectedPeer.notes" class="text-end">
+								<p class="mb-0 text-muted"><small><LocaleText t="Notes" /></small></p>
+								<p class="mb-0" style="white-space: pre-wrap">{{ selectedPeer.notes }}</p>
+							</div>
 						</div>
 						<div class="row mt-3 gy-2 gx-2 mb-2">
 							<div class="col-12 col-lg-3">

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

@@ -99,6 +99,17 @@ export default {
 								       v-model="this.data.name"
 								       id="peer_name_textbox" placeholder="">
 							</div>
+							<div>
+								<label for="peer_notes_textbox" class="form-label">
+									<small class="text-muted">
+										<LocaleText t="Notes"></LocaleText>
+									</small>
+								</label>
+								<input type="text" class="form-control form-control-sm rounded-3"
+								       :disabled="this.saving"
+								       v-model="this.data.notes"
+								       id="peer_notes_textbox" placeholder="">
+							</div>
 							<div>
 								<div class="d-flex position-relative">
 									<label for="peer_private_key_textbox" class="form-label">