Merge branch 'v4.3.2-dev' into app-prefix

src/static/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "private": true,
   "type": "module",
   "module": "es2022",

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

@@ -134,12 +134,17 @@ export default {
 				</div>
 			</div>
 		</div>
-		<div class="card-footer" role="button" @click="$emit('details')">
+		<div class="card-footer" role="button" @click="$emit('details')" v-if="!this.Peer.restricted">
 			<small class="d-flex align-items-center">
 				<LocaleText t="Details"></LocaleText>
 				<i class="bi bi-chevron-right ms-auto"></i>
 			</small>
 		</div>
+		<div class="card-footer" v-else>
+			<small class="d-flex align-items-center text-muted">
+				<LocaleText t="Allow access to view details"></LocaleText>
+			</small>
+		</div>
 	</div>
 </template>
 

src/static/app/src/components/settingsComponent/dashboardWireguardConfigurationTracking.vue

@@ -4,19 +4,69 @@ import LocaleText from "@/components/text/localeText.vue";
 import ConfigurationTracking
 	from "@/components/settingsComponent/dashboardWireguardConfigurationTrackingComponents/configurationTracking.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {onMounted, ref, watch} from "vue";
+import {fetchGet, fetchPost} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 
 const store = WireguardConfigurationsStore()
+const dashboardStore = DashboardConfigurationStore()
+const peerTrackingStatus = ref(dashboardStore.Configuration.WireGuardConfiguration.peer_tracking)
+const loaded = ref(false)
+const trackingData = ref({})
+onMounted(async () => {
+	if (peerTrackingStatus.value){
+		await loadData()
+	}
+})
+
+const loadData = async () => {
+	await fetchGet("/api/getPeerTrackingTableCounts", {}, (ref) => {
+		if (ref.status){
+			trackingData.value = ref.data
+		}
+		loaded.value = true
+	})
+}
+
+watch(peerTrackingStatus, async (newVal) => {
+	await fetchPost("/api/updateDashboardConfigurationItem", {
+		section: "WireGuardConfiguration",
+		key: "peer_tracking",
+		value: newVal
+	}, async (res) => {
+		if (res.status){
+			dashboardStore.newMessage("Server", newVal ? "Peer tracking enabled" : "Peer tracking disabled", "success")
+			if (newVal) await loadData()
+		}
+	})
+})
 </script>
 
 <template>
 <div class="card">
-	<div class="card-header">
+	<div class="card-header d-flex align-items-center">
 		<h6 class="my-2">
 			<LocaleText t="Peer Tracking"></LocaleText>
 		</h6>
+		<div class="form-check form-switch ms-auto">
+			<input class="form-check-input"
+				   v-model="peerTrackingStatus"
+				   type="checkbox" role="switch" id="peerTrackingStatus">
+			<label class="form-check-label" for="peerTrackingStatus">
+				<LocaleText t="Enabled" v-if="peerTrackingStatus"></LocaleText>
+				<LocaleText t="Disabled" v-else></LocaleText>
+			</label>
+		</div>
 	</div>
-	<div class="card-body d-flex flex-column gap-3">
-		<ConfigurationTracking :configuration="configuration" v-for="configuration in store.Configurations"/>
+	<div class="card-body d-flex flex-column gap-3" v-if="peerTrackingStatus">
+		<template v-if="!loaded">
+			<div class="spinner-border text-body m-auto"></div>
+		</template>
+		<template v-else>
+			<ConfigurationTracking :configuration="configuration"
+								   :trackingData="trackingData"
+								   v-for="configuration in store.Configurations"/>
+		</template>
 	</div>
 </div>
 </template>

src/static/app/src/components/settingsComponent/dashboardWireguardConfigurationTrackingComponents/configurationTracking.vue

@@ -4,7 +4,7 @@ import {onMounted, ref, watch} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 
-const props = defineProps(['configuration'])
+const props = defineProps(['configuration', 'trackingData'])
 const sizes = ref({
 	HistoricalTrackingTableSize: 0,
 	TrafficTrackingTableSize: 0
@@ -13,16 +13,15 @@ const sizeDataLoaded = ref(false)
 const toggling = ref(false)
 
 await onMounted(async () => {
-	await loadSizeData();
+	sizes.value = props.trackingData[props.configuration.Name]
 })
 
 const loadSizeData = async () => {
-	sizeDataLoaded.value = false;
+
 	await fetchGet("/api/getPeerTrackingTableCounts", {
 		configurationName: props.configuration.Name
 	}, (res) => {
 		sizes.value = res.data;
-		sizeDataLoaded.value = true;
 	})
 }
 
@@ -148,8 +147,7 @@ const deleteRecord = async (key) => {
 					<hr />
 					<div class="d-flex align-items-start align-items-md-center flex-column flex-md-row gap-2">
 						<div>
-							<h6 class="placeholder animate__animated animate__flash animate__infinite animate__slower w-100 mb-0" v-if="!sizeDataLoaded"></h6>
-							<h6 v-else class="mb-0">
+							<h6 class="mb-0">
 								{{ sizes.HistoricalTrackingTableSize }} <span class="text-muted fw-normal"><LocaleText t="Records"></LocaleText></span>
 							</h6>
 						</div>

src/static/app/src/views/signin.vue

@@ -176,7 +176,10 @@ export default {
 						<input
 							v-model="this.store.CrossServerConfiguration.Enable"
 							:disabled="loading"
-							class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked">
+							class="form-check-input"
+							type="checkbox"
+							role="switch"
+							id="flexSwitchCheckChecked">
 						<label class="form-check-label" for="flexSwitchCheckChecked">
 							<LocaleText t="Access Remote Server"></LocaleText>
 						</label>
@@ -184,10 +187,20 @@ export default {
 				</div>
 			</div>
 		</div>
-		<small class="text-muted pb-3 d-block w-100 text-center mt-3">
-			WGDashboard {{ this.version }} | Developed with ❤️ by 
-			<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
-		</small>
+		<div class="d-flex container-fluid align-items-center my-1 w-100">
+			<small class="text-muted">
+				WGDashboard <strong>{{ this.version }}</strong> | Made with ❤️ by
+				<a href="https://github.com/WGDashboard"
+				   class="text-decoration-none text-body"
+				   target="_blank"><strong>WGDashboard</strong></a>
+			</small>
+			<a href="./client" target="_blank"
+			   class="text-decoration-none ms-auto text-body"
+			   style="white-space: nowrap">
+				<small><i class="bi bi-box-arrow-up-right me-1"></i>
+					<LocaleText t="Client App" /></small>
+			</a>
+		</div>
 		<div class="messageCentre text-body position-absolute d-flex">
 			<TransitionGroup name="message" tag="div"
 			                 class="position-relative flex-sm-grow-0 flex-grow-1 d-flex align-items-end ms-sm-auto flex-column gap-2">