Autostart feature is done

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">

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"
 	>

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">

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

@@ -64,11 +64,10 @@ export default {
 
 <template>
 	<div class="card rounded-3" >
-		<div class="card-body position-relative d-flex flex-column gap-2" >
+		<div class="card-header d-flex align-items-center" :class="{'border-bottom-0 rounded-3': !this.value}">
-			<div class="d-flex align-items-center">
+			<h6 class="my-2">
-				<h5 class="mb-0">
 				<LocaleText t="API Keys"></LocaleText>
-				</h5>
+			</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"
@@ -80,7 +79,7 @@ export default {
 				</label>
 			</div>
 		</div>
-			<div v-if="this.value" class="d-flex flex-column gap-2">
+		<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()"
@@ -108,7 +107,6 @@ export default {
 				                    @close="this.newDashboardAPIKey = false"
 				></NewDashboardAPIKey>
 			</Transition>
-			</div>
 			
 		</div>
 	</div>

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">

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

@@ -66,6 +66,13 @@ export default {
 </script>
 
 <template>
+	<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>
@@ -100,6 +107,8 @@ export default {
 				</div>
 
 			</div>
+		</div>
+	</div>
 </template>
 
 

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="">
+<div class="card rounded-3">
-	<h5>
+	<div class="card-header">
-		<LocaleText t="Autostart"></LocaleText>
+		<h6 class="my-2">
-	</h5>
+			<LocaleText t="Toggle When Start Up"></LocaleText>
-	<div class="d-flex gap-2">
+		</h6>
-		<button class="btn btn-outline-primary" v-for="c in configurations">
+	</div>
-			<i class="bi-circle me-2"></i> {{c}}
+	<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>

src/static/app/src/views/settings.vue

@@ -35,6 +35,11 @@ export default {
 		const dashboardConfigurationStore = DashboardConfigurationStore()
 		return {dashboardConfigurationStore}
 	},
+	data(){
+		return{
+			activeTab: "WireGuardConfiguration"
+		}
+	}
 }
 </script>
 
@@ -42,12 +47,43 @@ 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>
+				<ul class="nav nav-pills nav-justified align-items-center gap-2">
-				</h2>
+					<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>
-					<div class="card-body">
+					<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"
@@ -55,18 +91,16 @@ export default {
 								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="d-flex gap-3 flex-column" v-else-if="activeTab === 'Peers'">
-				<div class="card rounded-3 mb-3">
+							<div class="card rounded-3">
-					<div class="card-body">
+								<div class="card-header">
-						<h5>
+									<h6 class="my-2">
 										<LocaleText t="Peer Default Settings"></LocaleText>
-						</h5>
+									</h6>
+								</div>
+								<div class="card-body">
 									<div>
 										<PeersDefaultSettingsInput
 											targetData="peer_global_dns" title="DNS"></PeersDefaultSettingsInput>
@@ -84,13 +118,13 @@ export default {
 								</div>
 							</div>
 						</div>
-			<div>
+						<div class="d-flex gap-3 flex-column" v-else-if="activeTab === 'WGDashboard'">
-				<h2>
-					<LocaleText t="WGDashboard Settings"></LocaleText>
-				</h2>
-				<hr>
-				<div class="d-flex flex-column gap-3">
 							<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">
@@ -103,34 +137,50 @@ export default {
 								</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>
-								<h5>
-									<LocaleText t="Account Settings"></LocaleText>
-								</h5>
 										<AccountSettingsInputUsername targetData="username"
 										                              title="Username"
 										></AccountSettingsInputUsername>
 									</div>
+									<hr>
 									<div>
-								<h6>
-									<LocaleText t="Update Password"></LocaleText>
-								</h6>
 										<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>
+					</Transition>
+					
+				</div>
 			</div>
 		</div>
 	</div>