From e26639cdc44de4b9b03c1accdf0c54acad650db2 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Wed, 20 Aug 2025 21:18:31 +0800
Subject: [PATCH] Adjusted settings page

---
 .../settingsComponent/dashboardWebHooks.vue   |  11 ++
 .../settingsComponent/peerDefaultSettings.vue |  37 ++++++
 .../settingsComponent/wgdashboardSettings.vue |  86 ++++++++++++
 .../wireguardConfigurationSettings.vue        |  24 ++++
 src/static/app/src/router/router.js           |  26 ++++
 src/static/app/src/views/clients.vue          |   1 -
 src/static/app/src/views/settings.vue         | 122 ++----------------
 7 files changed, 195 insertions(+), 112 deletions(-)
 create mode 100644 src/static/app/src/components/settingsComponent/dashboardWebHooks.vue
 create mode 100644 src/static/app/src/components/settingsComponent/peerDefaultSettings.vue
 create mode 100644 src/static/app/src/components/settingsComponent/wgdashboardSettings.vue
 create mode 100644 src/static/app/src/components/settingsComponent/wireguardConfigurationSettings.vue

diff --git a/src/static/app/src/components/settingsComponent/dashboardWebHooks.vue b/src/static/app/src/components/settingsComponent/dashboardWebHooks.vue
new file mode 100644
index 00000000..96c0baf2
--- /dev/null
+++ b/src/static/app/src/components/settingsComponent/dashboardWebHooks.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/components/settingsComponent/peerDefaultSettings.vue b/src/static/app/src/components/settingsComponent/peerDefaultSettings.vue
new file mode 100644
index 00000000..eeccaf8b
--- /dev/null
+++ b/src/static/app/src/components/settingsComponent/peerDefaultSettings.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import LocaleText from "@/components/text/localeText.vue";
+import PeersDefaultSettingsInput from "@/components/settingsComponent/peersDefaultSettingsInput.vue";
+</script>
+
+<template>
+	<div class="d-flex gap-3 flex-column">
+		<div class="card rounded-3">
+			<div class="card-header">
+				<h6 class="my-2">
+					<LocaleText t="Peer Default Settings"></LocaleText>
+				</h6>
+			</div>
+			<div class="card-body">
+				<div>
+					<PeersDefaultSettingsInput
+						targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
+					<PeersDefaultSettingsInput
+						targetData="peer_endpoint_allowed_ip" title="Endpoint Allowed IPs"></PeersDefaultSettingsInput>
+					<PeersDefaultSettingsInput
+						targetData="peer_mtu" title="MTU"></PeersDefaultSettingsInput>
+					<PeersDefaultSettingsInput
+						targetData="peer_keep_alive" title="Persistent Keepalive"></PeersDefaultSettingsInput>
+					<PeersDefaultSettingsInput
+						targetData="remote_endpoint" title="Peer Remote Endpoint"
+						:warning="true" warningText="This will be changed globally, and will be apply to all peer's QR code and configuration file."
+					></PeersDefaultSettingsInput>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/components/settingsComponent/wgdashboardSettings.vue b/src/static/app/src/components/settingsComponent/wgdashboardSettings.vue
new file mode 100644
index 00000000..b23929f1
--- /dev/null
+++ b/src/static/app/src/components/settingsComponent/wgdashboardSettings.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+
+import LocaleText from "@/components/text/localeText.vue";
+import DashboardLanguage from "@/components/settingsComponent/dashboardLanguage.vue";
+import AccountSettingsInputPassword from "@/components/settingsComponent/accountSettingsInputPassword.vue";
+import DashboardTheme from "@/components/settingsComponent/dashboardTheme.vue";
+import DashboardAPIKeys from "@/components/settingsComponent/dashboardAPIKeys.vue";
+import DashboardIPPortInput from "@/components/settingsComponent/dashboardIPPortInput.vue";
+import AccountSettingsMFA from "@/components/settingsComponent/accountSettingsMFA.vue";
+import AccountSettingsInputUsername from "@/components/settingsComponent/accountSettingsInputUsername.vue";
+import DashboardEmailSettings from "@/components/settingsComponent/dashboardEmailSettings.vue";
+import DashboardWebHooks from "@/components/settingsComponent/dashboardWebHooks.vue";
+
+const dashboardConfigurationStore = DashboardConfigurationStore()
+
+</script>
+
+<template>
+	<div class="d-flex gap-3 flex-column">
+		<div class="card rounded-3">
+			<div class="card-header">
+				<h6 class="my-2">
+					<LocaleText t="Appearance"></LocaleText>
+				</h6>
+			</div>
+			<div class="card-body">
+				<div class="row g-2">
+					<div class="col-sm">
+						<DashboardTheme></DashboardTheme>
+					</div>
+					<div class="col-sm">
+						<DashboardLanguage></DashboardLanguage>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-header">
+				<h6 class="my-2">
+					<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
+				</h6>
+			</div>
+			<div class="card-body">
+				<DashboardIPPortInput></DashboardIPPortInput>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-header">
+				<h6 class="my-2">
+					<LocaleText t="Account Settings"></LocaleText>
+				</h6>
+			</div>
+			<div class="card-body d-flex flex-column gap-3">
+				<div>
+					<AccountSettingsInputUsername targetData="username"
+												  title="Username"
+					></AccountSettingsInputUsername>
+				</div>
+				<hr>
+				<div>
+					<AccountSettingsInputPassword
+						targetData="password">
+					</AccountSettingsInputPassword>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-header">
+				<h6 class="my-2">
+					<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
+				</h6>
+			</div>
+			<div class="card-body">
+				<AccountSettingsMFA v-if="!dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
+			</div>
+		</div>
+		<DashboardAPIKeys></DashboardAPIKeys>
+		<DashboardEmailSettings></DashboardEmailSettings>
+		<DashboardWebHooks></DashboardWebHooks>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/components/settingsComponent/wireguardConfigurationSettings.vue b/src/static/app/src/components/settingsComponent/wireguardConfigurationSettings.vue
new file mode 100644
index 00000000..55a7b344
--- /dev/null
+++ b/src/static/app/src/components/settingsComponent/wireguardConfigurationSettings.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+
+import DashboardSettingsInputWireguardConfigurationPath
+	from "@/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue";
+import DashboardSettingsWireguardConfigurationAutostart
+	from "@/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue";
+</script>
+
+<template>
+	<div class="d-flex gap-3 flex-column" >
+		<DashboardSettingsInputWireguardConfigurationPath
+			targetData="wg_conf_path"
+			title="Configurations Directory"
+			:warning="true"
+			warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
+		>
+		</DashboardSettingsInputWireguardConfigurationPath>
+		<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/router/router.js b/src/static/app/src/router/router.js
index 24a81fbf..e73b835c 100644
--- a/src/static/app/src/router/router.js
+++ b/src/static/app/src/router/router.js
@@ -42,6 +42,32 @@ const router = createRouter({
 					name: "Settings",
 					path: 'settings',
 					component: () => import('@/views/settings.vue'),
+                    children: [
+                        {
+                            name: "WGDashboard Settings",
+                            path: "",
+                            component: () => import("@/components/settingsComponent/wgdashboardSettings.vue"),
+                            meta: {
+                                title: "WGDashboard Settings"
+                            }
+                        },
+                        {
+                            name: "Peers Settings",
+                            path: "peers_settings",
+                            component: () => import("@/components/settingsComponent/peerDefaultSettings.vue"),
+                            meta: {
+                                title: "Peers Default Settings"
+                            }
+                        },
+                        {
+                            name: "WireGuard Configuration Settings",
+                            path: "wireguard_settings",
+                            component: () => import("@/components/settingsComponent/wireguardConfigurationSettings.vue"),
+                            meta: {
+                                title: "WireGuard Configuration Settings"
+                            }
+                        }
+                    ],
 					meta: {
 						title: "Settings"
 					}
diff --git a/src/static/app/src/views/clients.vue b/src/static/app/src/views/clients.vue
index e0891a98..878edb7e 100644
--- a/src/static/app/src/views/clients.vue
+++ b/src/static/app/src/views/clients.vue
@@ -30,7 +30,6 @@ const deleteSuccess = async () => {
 
 <template>
 	<div class="text-body w-100 h-100 pb-2 position-relative">
-
 		<div class="w-100 h-100 card rounded-3">
 			<Transition name="zoom">
 				<ClientSettings v-if="settings" @close="settings = false"></ClientSettings>
diff --git a/src/static/app/src/views/settings.vue b/src/static/app/src/views/settings.vue
index dc090022..b8f27113 100644
--- a/src/static/app/src/views/settings.vue
+++ b/src/static/app/src/views/settings.vue
@@ -40,15 +40,15 @@ export default {
 			activeTab: "WGDashboard",
 			tabs: [
 				{
-					id: "WGDashboard",
+					id: "",
 					title: "WGDashboard Settings"
 				},
 				{
-					id: "Peers",
+					id: "peers_settings",
 					title: "Peers Settings"
 				},
 				{
-					id: "WireGuardConfiguration",
+					id: "wireguard_settings",
 					title: "WireGuard Configuration Settings"
 				}
 			]
@@ -59,123 +59,23 @@ export default {
 
 <template>
 	<div class="mt-md-5 mt-3 text-body mb-3">
-		<div class="container-md d-flex flex-column gap-4">
-			<div>
+		<div class="container-md d-flex flex-column gap-3">
+			<div class="border-bottom pb-3">
 				<ul class="nav nav-pills nav-justified align-items-center gap-2">
 					<li class="nav-item" v-for="t in this.tabs">
-						<a class="nav-link rounded-3"
-						   @click="this.activeTab = t.id"
-						   :class="{active: this.activeTab === t.id}"
+						<RouterLink
+							:to="{name: t.title}"
+							class="nav-link rounded-3"
+						   exact-active-class="active"
 						   role="button">
 							<h6 class="my-2">
 								<LocaleText :t="t.title"></LocaleText>
 							</h6>
-						</a>
+						</RouterLink>
 					</li>
 				</ul>
-				<hr>
-				<div>
-					<Transition name="fade2" mode="out-in">
-						<div class="d-flex gap-3 flex-column" v-if="activeTab === 'WireGuardConfiguration'">
-							<DashboardSettingsInputWireguardConfigurationPath
-								targetData="wg_conf_path"
-								title="Configurations Directory"
-								:warning="true"
-								warning-text="Remember to remove / at the end of your path. e.g /etc/wireguard"
-							>
-							</DashboardSettingsInputWireguardConfigurationPath>
-							<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
-						</div>
-						<div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'Peers'">
-							<div class="card rounded-3">
-								<div class="card-header">
-									<h6 class="my-2">
-										<LocaleText t="Peer Default Settings"></LocaleText>
-									</h6>
-								</div>
-								<div class="card-body">
-									<div>
-										<PeersDefaultSettingsInput
-											targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
-										<PeersDefaultSettingsInput
-											targetData="peer_endpoint_allowed_ip" title="Endpoint Allowed IPs"></PeersDefaultSettingsInput>
-										<PeersDefaultSettingsInput
-											targetData="peer_mtu" title="MTU"></PeersDefaultSettingsInput>
-										<PeersDefaultSettingsInput
-											targetData="peer_keep_alive" title="Persistent Keepalive"></PeersDefaultSettingsInput>
-										<PeersDefaultSettingsInput
-											targetData="remote_endpoint" title="Peer Remote Endpoint"
-											:warning="true" warningText="This will be changed globally, and will be apply to all peer's QR code and configuration file."
-										></PeersDefaultSettingsInput>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'WGDashboard'">
-							<div class="card rounded-3">
-								<div class="card-header">
-									<h6 class="my-2">
-										<LocaleText t="Appearance"></LocaleText>
-									</h6>
-								</div>
-								<div class="card-body">
-									<div class="row g-2">
-										<div class="col-sm">
-											<DashboardTheme></DashboardTheme>
-										</div>
-										<div class="col-sm">
-											<DashboardLanguage></DashboardLanguage>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="card">
-								<div class="card-header">
-									<h6 class="my-2">
-										<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
-									</h6>
-								</div>
-								<div class="card-body">
-									<DashboardIPPortInput></DashboardIPPortInput>
-								</div>
-							</div>
-							<div class="card">
-								<div class="card-header">
-									<h6 class="my-2">
-										<LocaleText t="Account Settings"></LocaleText>
-									</h6>
-								</div>
-								<div class="card-body d-flex flex-column gap-3">
-									<div>
-										<AccountSettingsInputUsername targetData="username"
-										                              title="Username"
-										></AccountSettingsInputUsername>
-									</div>
-									<hr>
-									<div>
-										<AccountSettingsInputPassword
-											targetData="password">
-										</AccountSettingsInputPassword>
-									</div>
-								</div>
-							</div>
-							<div class="card">
-								<div class="card-header">
-									<h6 class="my-2">
-										<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
-									</h6>
-								</div>
-								<div class="card-body">
-									<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
-								</div>
-							</div>
-							<DashboardAPIKeys></DashboardAPIKeys>
-							<DashboardEmailSettings></DashboardEmailSettings>
-						</div>
-					</Transition>
-					
-				</div>
 			</div>
+			<RouterView></RouterView>
 		</div>
 	</div>
 </template>