From 9b981fcea8b49d6bdbdb0c06c957dcd457163ff3 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Thu, 31 Oct 2024 22:13:00 +0800
Subject: [PATCH] Autostart feature is done

---
 .../app/src/components/configurationList.vue  |   1 -
 src/static/app/src/components/navbar.vue      |   2 +-
 .../settingsComponent/accountSettingsMFA.vue  |   4 +-
 .../settingsComponent/dashboardAPIKeys.vue    |  78 ++++---
 .../dashboardIPPortInput.vue                  |   3 -
 ...ettingsInputWireguardConfigurationPath.vue |  69 +++---
 ...ettingsWireguardConfigurationAutostart.vue |  65 +++++-
 src/static/app/src/views/settings.vue         | 208 +++++++++++-------
 8 files changed, 263 insertions(+), 167 deletions(-)

diff --git a/src/static/app/src/components/configurationList.vue b/src/static/app/src/components/configurationList.vue
index 58db822..049ae51 100644
--- a/src/static/app/src/components/configurationList.vue
+++ b/src/static/app/src/components/configurationList.vue
@@ -31,7 +31,6 @@ export default {
 </script>
 
 <template>
-	
 	<div class="mt-md-5 mt-3">
 		<div class="container-md">
 			<div class="d-flex mb-4 configurationListTitle align-items-center gap-3">
diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
index 5582511..d70f64e 100644
--- a/src/static/app/src/components/navbar.vue
+++ b/src/static/app/src/components/navbar.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-	<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container"
+	<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container"
 	     :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
 	     :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
 	>
diff --git a/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue b/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
index 8669f38..2533480 100644
--- a/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
+++ b/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
@@ -44,9 +44,7 @@ export default {
 
 <template>
 <div>
-	<h6>
-		<LocaleText t="Multi-Factor Authentication (MFA)"></LocaleText>
-	</h6>
+	
 	<div class="d-flex align-items-center">
 
 		<div class="form-check form-switch">
diff --git a/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue b/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
index 904f03f..6fac5ad 100644
--- a/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
+++ b/src/static/app/src/components/settingsComponent/dashboardAPIKeys.vue
@@ -63,52 +63,50 @@ export default {
 </script>
 
 <template>
-	<div class="card rounded-3">
-		<div class="card-body position-relative d-flex flex-column gap-2" >
-			<div class="d-flex align-items-center">
-				<h5 class="mb-0">
-					<LocaleText t="API Keys"></LocaleText>
-				</h5>
-				<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" >
-					<input class="form-check-input" type="checkbox"
-					       v-model="this.value"
-					       @change="this.toggleDashboardAPIKeys()"
-					       role="switch" id="allowAPIKeysSwitch">
-					<label class="form-check-label" for="allowAPIKeysSwitch">
-						<LocaleText t="Enabled" v-if="this.value"></LocaleText>
-						<LocaleText t="Disabled" v-else></LocaleText>
-					</label>
-				</div>
+	<div class="card rounded-3" >
+		<div class="card-header d-flex align-items-center" :class="{'border-bottom-0 rounded-3': !this.value}">
+			<h6 class="my-2">
+				<LocaleText t="API Keys"></LocaleText>
+			</h6>
+			<div class="form-check form-switch ms-auto" v-if="!this.store.getActiveCrossServer()" >
+				<input class="form-check-input" type="checkbox"
+				       v-model="this.value"
+				       @change="this.toggleDashboardAPIKeys()"
+				       role="switch" id="allowAPIKeysSwitch">
+				<label class="form-check-label" for="allowAPIKeysSwitch">
+					<LocaleText t="Enabled" v-if="this.value"></LocaleText>
+					<LocaleText t="Disabled" v-else></LocaleText>
+				</label>
 			</div>
-			<div v-if="this.value" class="d-flex flex-column gap-2">
-				<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
-				        @click="this.newDashboardAPIKey = true"
-				        v-if="!this.store.getActiveCrossServer()"
-				>
-					<i class="bi bi-plus-circle-fill me-2"></i>
-					<LocaleText t="API Key"></LocaleText>
-				</button>
-				<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
-					<div class="card-body d-flex text-muted">
+		</div>
+		<div class="card-body position-relative d-flex flex-column gap-2" v-if="this.value">
+			<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm"
+			        @click="this.newDashboardAPIKey = true"
+			        v-if="!this.store.getActiveCrossServer()"
+			>
+				<i class="bi bi-plus-circle-fill me-2"></i>
+				<LocaleText t="API Key"></LocaleText>
+			</button>
+			<div class="card" style="height: 300px" v-if="this.apiKeys.length === 0">
+				<div class="card-body d-flex text-muted">
 						<span class="m-auto">
 							<LocaleText t="No WGDashboard API Key"></LocaleText>
 						</span>
-					</div>
 				</div>
-				<div class="d-flex flex-column gap-2 position-relative" v-else style="min-height: 300px">
-					<TransitionGroup name="apiKey">
-						<DashboardAPIKey v-for="key in this.apiKeys" :apiKey="key"
-						                 :key="key.Key"
-						                 @deleted="(nkeys) => this.apiKeys = nkeys"></DashboardAPIKey>
-					</TransitionGroup>
-				</div>
-				<Transition name="zoomReversed">
-					<NewDashboardAPIKey v-if="this.newDashboardAPIKey"
-					                    @created="(data) => this.apiKeys = data"
-					                    @close="this.newDashboardAPIKey = false"
-					></NewDashboardAPIKey>
-				</Transition>
 			</div>
+			<div class="d-flex flex-column gap-2 position-relative" v-else style="min-height: 300px">
+				<TransitionGroup name="apiKey">
+					<DashboardAPIKey v-for="key in this.apiKeys" :apiKey="key"
+					                 :key="key.Key"
+					                 @deleted="(nkeys) => this.apiKeys = nkeys"></DashboardAPIKey>
+				</TransitionGroup>
+			</div>
+			<Transition name="zoomReversed">
+				<NewDashboardAPIKey v-if="this.newDashboardAPIKey"
+				                    @created="(data) => this.apiKeys = data"
+				                    @close="this.newDashboardAPIKey = false"
+				></NewDashboardAPIKey>
+			</Transition>
 			
 		</div>
 	</div>
diff --git a/src/static/app/src/components/settingsComponent/dashboardIPPortInput.vue b/src/static/app/src/components/settingsComponent/dashboardIPPortInput.vue
index 947f2bd..2446ccd 100644
--- a/src/static/app/src/components/settingsComponent/dashboardIPPortInput.vue
+++ b/src/static/app/src/components/settingsComponent/dashboardIPPortInput.vue
@@ -59,9 +59,6 @@ export default {
 
 <template>
 <div>
-	<h5>
-		<LocaleText t="Dashboard IP Address & Listen Port"></LocaleText>
-	</h5>
 	<div class="row g-2">
 		<div class="col-sm">
 			<div class="form-group">
diff --git a/src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue b/src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue
index d96997d..193805f 100644
--- a/src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue
+++ b/src/static/app/src/components/settingsComponent/dashboardSettingsInputWireguardConfigurationPath.vue
@@ -66,39 +66,48 @@ export default {
 </script>
 
 <template>
-	<div class="form-group">
-		<label :for="this.uuid" class="text-muted mb-1">
-			<strong><small>
-				<LocaleText :t="this.title"></LocaleText>
-			</small></strong>
-		</label>
-		<div class="d-flex gap-2 align-items-start">
-			<div class="flex-grow-1">
-				<input type="text" class="form-control rounded-3"
-				       :class="{'is-invalid': this.showInvalidFeedback, 'is-valid': this.isValid}"
-				       :id="this.uuid"
-				       v-model="this.value"
-				       @keydown="this.changed = true"
-				       :disabled="this.updating"
+	<div class="card">
+		<div class="card-header">
+			<h6 class="my-2">
+				<LocaleText t="Path"></LocaleText>
+			</h6>
+		</div>
+		<div class="card-body">
+			<div class="form-group">
+				<label :for="this.uuid" class="text-muted mb-1">
+					<strong><small>
+						<LocaleText :t="this.title"></LocaleText>
+					</small></strong>
+				</label>
+				<div class="d-flex gap-2 align-items-start">
+					<div class="flex-grow-1">
+						<input type="text" class="form-control rounded-3"
+						       :class="{'is-invalid': this.showInvalidFeedback, 'is-valid': this.isValid}"
+						       :id="this.uuid"
+						       v-model="this.value"
+						       @keydown="this.changed = true"
+						       :disabled="this.updating"
+						>
+						<div class="invalid-feedback fw-bold">{{this.invalidFeedback}}</div>
+					</div>
+					<button
+						@click="this.useValidation()"
+						:disabled="!this.changed"
+						class="ms-auto btn rounded-3 border-success-subtle bg-success-subtle text-success-emphasis">
+						<i class="bi bi-save2-fill" v-if="!this.updating"></i>
+						<span class="spinner-border spinner-border-sm" v-else></span>
+					</button>
+				</div>
+				<div class="px-2 py-1 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 d-inline-block mt-1 mb-2"
+				     v-if="warning"
 				>
-				<div class="invalid-feedback fw-bold">{{this.invalidFeedback}}</div>
+					<small><i class="bi bi-exclamation-triangle-fill me-2"></i>
+						<LocaleText :t="warningText"></LocaleText>
+					</small>
+				</div>
+
 			</div>
-			<button
-				@click="this.useValidation()"
-				:disabled="!this.changed"
-				class="ms-auto btn rounded-3 border-success-subtle bg-success-subtle text-success-emphasis">
-				<i class="bi bi-save2-fill" v-if="!this.updating"></i>
-				<span class="spinner-border spinner-border-sm" v-else></span>
-			</button>
 		</div>
-		<div class="px-2 py-1 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 d-inline-block mt-1 mb-2"
-		     v-if="warning"
-		>
-			<small><i class="bi bi-exclamation-triangle-fill me-2"></i>
-				<LocaleText :t="warningText"></LocaleText>
-			</small>
-		</div>
-		
 	</div>
 </template>
 
diff --git a/src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue b/src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue
index d586cce..1e6fa03 100644
--- a/src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue
+++ b/src/static/app/src/components/settingsComponent/dashboardSettingsWireguardConfigurationAutostart.vue
@@ -1,8 +1,9 @@
 <script setup>
 import LocaleText from "@/components/text/localeText.vue";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
-import {computed, ref} from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {fetchPost} from "@/utilities/fetch.js";
 const store = DashboardConfigurationStore()
 const wireguardConfigurationStore = WireguardConfigurationsStore()
 const data = ref(store.Configuration.WireGuardConfiguration.autostart)
@@ -10,21 +11,65 @@ const data = ref(store.Configuration.WireGuardConfiguration.autostart)
 const configurations = computed(() => {
 	return wireguardConfigurationStore.Configurations.map(x => x.Name)
 })
+
+const updateAutostart = async () => {
+	console.log(data.value)
+	await fetchPost("/api/updateDashboardConfigurationItem", {
+		section: "WireGuardConfiguration",
+		key: "autostart",
+		value: data.value
+	}, async (res) => {
+		console.log(res);
+	})
+}
+
+const toggle = (c) => {
+	if (data.value.includes(c)){
+		data.value = data.value.filter(x => x !== c)
+	}else{
+		data.value.push(c)
+	}
+}
+
+watch(data.value, () => {
+	updateAutostart()
+})
+
 </script>
 
 <template>
-<div class="">
-	<h5>
-		<LocaleText t="Autostart"></LocaleText>
-	</h5>
-	<div class="d-flex gap-2">
-		<button class="btn btn-outline-primary" v-for="c in configurations">
-			<i class="bi-circle me-2"></i> {{c}}
-		</button>
+<div class="card rounded-3">
+	<div class="card-header">
+		<h6 class="my-2">
+			<LocaleText t="Toggle When Start Up"></LocaleText>
+		</h6>
+	</div>
+	<div class="card-body d-flex gap-2">
+		<div class="list-group w-100">
+			<button type="button" 
+			        :key="c"
+			        @click="toggle(c)"
+			        class="list-group-item list-group-item-action py-2 w-100 d-flex align-items-center"
+			        v-for="c in configurations">
+				<samp>{{c}}</samp>
+				<i class="ms-auto" :class="[data.includes(c) ? 'bi-check-circle-fill':'bi-circle']"></i>
+			</button>
+		</div>
 	</div>
 </div>
 </template>
 
 <style scoped>
-
+.list-group{
+	
+	&:first-child{
+		border-top-left-radius: var(--bs-border-radius-lg);
+		border-top-right-radius: var(--bs-border-radius-lg)
+	}
+	&:last-child{
+		border-bottom-left-radius: var(--bs-border-radius-lg);
+		border-bottom-right-radius: var(--bs-border-radius-lg)
+	}
+	
+}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/views/settings.vue b/src/static/app/src/views/settings.vue
index 604f47c..d89f7a5 100644
--- a/src/static/app/src/views/settings.vue
+++ b/src/static/app/src/views/settings.vue
@@ -35,6 +35,11 @@ export default {
 		const dashboardConfigurationStore = DashboardConfigurationStore()
 		return {dashboardConfigurationStore}
 	},
+	data(){
+		return{
+			activeTab: "WireGuardConfiguration"
+		}
+	}
 }
 </script>
 
@@ -42,94 +47,139 @@ export default {
 	<div class="mt-md-5 mt-3 text-body mb-3">
 		<div class="container-md d-flex flex-column gap-4">
 			<div>
-				<h2>
-					<LocaleText t="WireGuard Configuration Settings"></LocaleText>
-				</h2>
+				
+				<ul class="nav nav-pills nav-justified align-items-center gap-2">
+					<li class="nav-item">
+						<a class="nav-link rounded-3"
+						   @click="this.activeTab = 'WGDashboard'"
+						   :class="{active: this.activeTab === 'WGDashboard'}"
+						   role="button">
+							<h6 class="my-2">
+								WGDashboard Settings
+							</h6>
+						</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link rounded-3"
+						   @click="this.activeTab = 'Peers'"
+						   :class="{active: this.activeTab === 'Peers'}"
+						   role="button">
+							<h6 class="my-2">
+								Peers Settings
+							</h6>
+						</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link rounded-3" 
+						   @click="this.activeTab = 'WireGuardConfiguration'"
+						   :class="{active: this.activeTab === 'WireGuardConfiguration'}"
+						   role="button">
+							<h6 class="my-2">
+								WireGuard Configuration Settings
+							</h6>
+						</a>
+					</li>
+				</ul>
 				<hr>
-				<div class="card rounded-3 mb-3">
-					<div class="card-body">
-						<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>
-					</div>
-				</div>
-				<div class="card rounded-3 mb-3">
-					<div class="card-body">
-						<DashboardSettingsWireguardConfigurationAutostart></DashboardSettingsWireguardConfigurationAutostart>
-					</div>
-				</div>
-				<div class="card rounded-3 mb-3">
-					<div class="card-body">
-						<h5>
-							<LocaleText t="Peer Default Settings"></LocaleText>
-						</h5>
-						<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>
+					<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>
-				</div>
-			</div>
-			<div>
-				<h2>
-					<LocaleText t="WGDashboard Settings"></LocaleText>
-				</h2>
-				<hr>
-				<div class="d-flex flex-column gap-3">
-					<div class="card rounded-3">
-						<div class="card-body">
-							<div class="row g-2">
-								<div class="col-sm">
-									<DashboardTheme></DashboardTheme>
+						<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="col-sm">
-									<DashboardLanguage></DashboardLanguage>
+								<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>
-					<div class="card">
-						<div class="card-body">
-							<DashboardIPPortInput></DashboardIPPortInput>
-						</div>
-					</div>
-					<div class="card">
-						<div class="card-body d-flex flex-column gap-3">
-							<div>
-								<h5>
-									<LocaleText t="Account Settings"></LocaleText>
-								</h5>
-								<AccountSettingsInputUsername targetData="username"
-								                              title="Username"
-								></AccountSettingsInputUsername>
+						<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>
-								<h6>
-									<LocaleText t="Update Password"></LocaleText>
-								</h6>
-								<AccountSettingsInputPassword
-									targetData="password">
-								</AccountSettingsInputPassword>
+							<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>
-
-							<AccountSettingsMFA v-if="!this.dashboardConfigurationStore.getActiveCrossServer()"></AccountSettingsMFA>
+							<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>
 						</div>
-					</div>
-					<DashboardAPIKeys></DashboardAPIKeys>
+					</Transition>
+					
 				</div>
 			</div>
 		</div>