From 33942945d0188c3384b36f951f45cafb12025d37 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Thu, 1 May 2025 22:28:43 +0800
Subject: [PATCH] commit

---
 .../editConfiguration.vue                     | 359 +++++++++---------
 src/static/app/src/views/newConfiguration.vue |  16 +-
 2 files changed, 187 insertions(+), 188 deletions(-)

diff --git a/src/static/app/src/components/configurationComponents/editConfiguration.vue b/src/static/app/src/components/configurationComponents/editConfiguration.vue
index 6ed3562..b09ccbc 100644
--- a/src/static/app/src/components/configurationComponents/editConfiguration.vue
+++ b/src/static/app/src/components/configurationComponents/editConfiguration.vue
@@ -63,190 +63,201 @@ const editRawConfigurationFileModal = ref(false)
 const backupRestoreModal = ref(false)
 const deleteConfigurationModal = ref(false)
 
+
 </script>
 
 <template>
-	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll" ref="editConfigurationContainer">
-		<TransitionGroup name="zoom">
-			<EditRawConfigurationFile
-				name="EditRawConfigurationFile"
-				v-if="editRawConfigurationFileModal"
-				@close="editRawConfigurationFileModal = false">
-			</EditRawConfigurationFile>
-			<DeleteConfiguration
-				key="DeleteConfiguration"
-				@backup="backupRestoreModal = true"
-				@close="deleteConfigurationModal = false"
-				v-if="deleteConfigurationModal">
-			</DeleteConfiguration>
-			<ConfigurationBackupRestore
-				@close="backupRestoreModal = false"
-				@refreshPeersList="emit('refresh')"
-				v-if="backupRestoreModal">
-			</ConfigurationBackupRestore>
-		</TransitionGroup>
-		
-		<div class="container d-flex h-100 w-100">
-			<div class="m-auto modal-dialog-centered dashboardModal" style="width: 700px">
-				<div class="card rounded-3 shadow flex-grow-1">
-					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
-						<h4 class="mb-0">
-							<LocaleText t="Configuration Settings"></LocaleText>
-						</h4>
-						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
-					</div>
-					<div class="card-body px-4 pb-4">
-						<div class="d-flex gap-2 flex-column">
-							<div class="d-flex align-items-center gap-3" v-if="!updateConfigurationName">
-								<small class="text-muted">
-									<LocaleText t="Name"></LocaleText>
-								</small>
-								<small>{{data.Name}}</small>
-								<button 
-									@click="updateConfigurationName = true"
-									class="btn btn-sm bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 ms-auto">
-									<LocaleText t="Update Name"></LocaleText>
-								</button>
-							</div>
-							<UpdateConfigurationName
-								@close="updateConfigurationName = false"
-								:configuration-name="data.Name"
-								v-if="updateConfigurationName"></UpdateConfigurationName>
-							
-							<template v-else>
-								<hr>
-								<div class="d-flex align-items-center gap-3">
-									<small class="text-muted" style="word-break: keep-all">
-										<LocaleText t="Public Key"></LocaleText>
-									</small>
-									<small class="ms-auto"  style="word-break: break-all">
-										{{data.PublicKey}}
+	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0" ref="editConfigurationContainer">
+		<div class="w-100 h-100  overflow-y-scroll">
+			<TransitionGroup name="zoom">
+				<EditRawConfigurationFile
+					name="EditRawConfigurationFile"
+					v-if="editRawConfigurationFileModal"
+					@close="editRawConfigurationFileModal = false">
+				</EditRawConfigurationFile>
+				<DeleteConfiguration
+					key="DeleteConfiguration"
+					@backup="backupRestoreModal = true"
+					@close="deleteConfigurationModal = false"
+					v-if="deleteConfigurationModal">
+				</DeleteConfiguration>
+				<ConfigurationBackupRestore
+					@close="backupRestoreModal = false"
+					@refreshPeersList="emit('refresh')"
+					v-if="backupRestoreModal">
+				</ConfigurationBackupRestore>
+			</TransitionGroup>
+
+			<div class="container d-flex h-100 w-100">
+				<div class="m-auto modal-dialog-centered dashboardModal" style="width: 700px">
+					<div class="card rounded-3 shadow flex-grow-1">
+						<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
+							<h4 class="mb-0">
+								<LocaleText t="Configuration Settings"></LocaleText>
+							</h4>
+							<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
+						</div>
+						<div class="card-body px-4 pb-4">
+							<div class="d-flex gap-2 flex-column">
+								<div class="d-flex align-items-center gap-3" v-if="!updateConfigurationName">
+									<small class="text-muted">
+										<LocaleText t="Name"></LocaleText>
 									</small>
+									<small>{{data.Name}}</small>
+									<button
+										@click="updateConfigurationName = true"
+										class="btn btn-sm bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 ms-auto">
+										<LocaleText t="Update Name"></LocaleText>
+									</button>
 								</div>
-								<hr>
-								<div>
-									<div class="d-flex">
-										<label for="configuration_private_key" class="form-label">
-											<small class="text-muted d-block">
-												<LocaleText t="Private Key"></LocaleText>
+								<UpdateConfigurationName
+									@close="updateConfigurationName = false"
+									:configuration-name="data.Name"
+									v-if="updateConfigurationName"></UpdateConfigurationName>
+
+								<template v-else>
+									<hr>
+									<div class="d-flex align-items-center gap-3">
+										<small class="text-muted" style="word-break: keep-all">
+											<LocaleText t="Public Key"></LocaleText>
+										</small>
+										<small class="ms-auto"  style="word-break: break-all">
+											{{data.PublicKey}}
+										</small>
+									</div>
+									<hr>
+									<div>
+										<div class="d-flex">
+											<label for="configuration_private_key" class="form-label">
+												<small class="text-muted d-block">
+													<LocaleText t="Private Key"></LocaleText>
+												</small>
+											</label>
+											<div class="form-check form-switch ms-auto">
+												<input class="form-check-input"
+												       type="checkbox" role="switch" id="editPrivateKeySwitch"
+												       v-model="editPrivateKey"
+												>
+												<label class="form-check-label" for="editPrivateKeySwitch">
+													<small>Edit</small>
+												</label>
+											</div>
+										</div>
+										<input type="text" class="form-control form-control-sm rounded-3"
+										       :disabled="saving || !editPrivateKey"
+										       :class="{'is-invalid': !reqField.PrivateKey}"
+										       @keyup="genKey()"
+										       v-model="data.PrivateKey"
+										       id="configuration_private_key">
+									</div>
+									<div>
+										<label for="configuration_ipaddress_cidr" class="form-label">
+											<small class="text-muted">
+												<LocaleText t="IP Address/CIDR"></LocaleText>
 											</small>
 										</label>
-										<div class="form-check form-switch ms-auto">
-											<input class="form-check-input"
-											       type="checkbox" role="switch" id="editPrivateKeySwitch"
-											       v-model="editPrivateKey"
-											>
-											<label class="form-check-label" for="editPrivateKeySwitch">
-												<small>Edit</small>
-											</label>
-										</div>
+										<input type="text" class="form-control form-control-sm rounded-3"
+										       :disabled="saving"
+										       v-model="data.Address"
+										       id="configuration_ipaddress_cidr">
 									</div>
-									<input type="text" class="form-control form-control-sm rounded-3"
-									       :disabled="saving || !editPrivateKey"
-									       :class="{'is-invalid': !reqField.PrivateKey}"
-									       @keyup="genKey()"
-									       v-model="data.PrivateKey"
-									       id="configuration_private_key">
-								</div>
-								<div>
-									<label for="configuration_ipaddress_cidr" class="form-label">
-										<small class="text-muted">
-											<LocaleText t="IP Address/CIDR"></LocaleText>
-										</small>
-									</label>
-									<input type="text" class="form-control form-control-sm rounded-3"
-									       :disabled="saving"
-									       v-model="data.Address"
-									       id="configuration_ipaddress_cidr">
-								</div>
-								<div>
-									<label for="configuration_listen_port" class="form-label">
-										<small class="text-muted">
-											<LocaleText t="Listen Port"></LocaleText>
-										</small>
-									</label>
-									<input type="number" class="form-control form-control-sm rounded-3"
-									       :disabled="saving"
-									       v-model="data.ListenPort"
-									       id="configuration_listen_port">
+									<div>
+										<label for="configuration_listen_port" class="form-label">
+											<small class="text-muted">
+												<LocaleText t="Listen Port"></LocaleText>
+											</small>
+										</label>
+										<input type="number" class="form-control form-control-sm rounded-3"
+										       :disabled="saving"
+										       v-model="data.ListenPort"
+										       id="configuration_listen_port">
 
-								</div>
-								<div>
-									<label for="configuration_table" class="form-label">
-										<small class="text-muted">
-											<LocaleText t="Table"></LocaleText>
-										</small>
-									</label>
-									<input type="text" class="form-control form-control-sm rounded-3"
-									       :disabled="saving"
-									       v-model="data.Table"
-									       id="configuration_table">
-								</div>
-								<div v-for="key in ['PreUp', 'PreDown', 'PostUp', 'PostDown']">
-									<label :for="'configuration_' + key" class="form-label">
-										<small class="text-muted">
-											<LocaleText :t="key"></LocaleText>
-										</small>
-									</label>
-									<input type="text" class="form-control form-control-sm rounded-3"
-									       :disabled="saving"
-									       v-model="data[key]"
-									       :id="'configuration_' + key">
-								</div>
-								<div v-for="key in ['Jc', 'Jmin', 'Jmax', 'S1', 'S2', 'H1', 'H2', 'H3', 'H4']" 
-								     v-if="configurationInfo.Protocol === 'awg'">
-									<label :for="'configuration_' + key" class="form-label">
-										<small class="text-muted">
-											<LocaleText :t="key"></LocaleText>
-										</small>
-									</label>
-									<input type="number" class="form-control form-control-sm rounded-3"
-									       :disabled="saving"
-									       v-model="data[key]"
-									       :id="'configuration_' + key">
-								</div>
-								<div class="d-flex align-items-center gap-2 mt-4">
-									<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto"
-									        @click="resetForm()"
-									        :disabled="!dataChanged || saving">
-										<i class="bi bi-arrow-clockwise me-2"></i>
-										<LocaleText t="Reset"></LocaleText>
-									</button>
-									<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 shadow"
-									        :disabled="!dataChanged || saving"
-									        @click="saveForm()"
-									>
-										<i class="bi bi-save-fill me-2"></i>
-										<LocaleText t="Save"></LocaleText>
-									</button>
-								</div>
-								<hr>
-								<h5 class="mb-3">
-									<LocaleText t="Danger Zone"></LocaleText>
-								</h5>
-								<div class="d-flex gap-2 flex-column">
-									<button
-										@click="backupRestoreModal = true"
-										class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 text-start d-flex">
-										<i class="bi bi-copy me-auto"></i>
-										<LocaleText t="Backup & Restore"></LocaleText>
-									</button>
-									<button
-										@click="editRawConfigurationFileModal = true"
-										class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 d-flex">
-										<i class="bi bi-pen me-auto"></i>
-										<LocaleText t="Edit Raw Configuration File"></LocaleText>
-									</button>
+									</div>
+									<div class="accordion mt-2" id="editConfigurationOptionalAccordion">
+										<div class="accordion-item">
+											<h2 class="accordion-header">
+												<button class="accordion-button collapsed px-3 py-2" type="button" data-bs-toggle="collapse" data-bs-target="#editOptionalAccordionCollapse">
+													<small class="text-muted">
+														<LocaleText t="Optional Settings"></LocaleText>
+													</small>
+												</button>
+											</h2>
+											<div id="editOptionalAccordionCollapse"
+											     class="accordion-collapse collapse" data-bs-parent="#editConfigurationOptionalAccordion">
+												<div class="accordion-body d-flex flex-column gap-3">
+													<div v-for="key in ['Table', 'PreUp', 'PreDown', 'PostUp', 'PostDown']">
+														<label :for="'configuration_' + key" class="form-label">
+															<small class="text-muted">
+																<LocaleText :t="key"></LocaleText>
+															</small>
+														</label>
+														<input type="text" class="form-control form-control-sm rounded-3"
+														       :disabled="saving"
+														       v-model="data[key]"
+														       :id="'configuration_' + key">
+													</div>
+													<div v-for="key in ['Jc', 'Jmin', 'Jmax', 'S1', 'S2', 'H1', 'H2', 'H3', 'H4']"
+													     v-if="configurationInfo.Protocol === 'awg'">
+														<label :for="'configuration_' + key" class="form-label">
+															<small class="text-muted">
+																<LocaleText :t="key"></LocaleText>
+															</small>
+														</label>
+														<input type="number" class="form-control form-control-sm rounded-3"
+														       :disabled="saving"
+														       v-model="data[key]"
+														       :id="'configuration_' + key">
+													</div>
+												</div>
+											</div>
+										</div>
+										
+									</div>
 									
-									<button
-										@click="deleteConfigurationModal = true"
-										class="btn bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 d-flex mt-4">
-										<i class="bi bi-trash-fill me-auto"></i>
-										<LocaleText t="Delete Configuration"></LocaleText>
-									</button>
-								</div>
-								
-							</template>
+									
+									<div class="d-flex align-items-center gap-2 mt-4">
+										<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto"
+										        @click="resetForm()"
+										        :disabled="!dataChanged || saving">
+											<i class="bi bi-arrow-clockwise me-2"></i>
+											<LocaleText t="Reset"></LocaleText>
+										</button>
+										<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 shadow"
+										        :disabled="!dataChanged || saving"
+										        @click="saveForm()"
+										>
+											<i class="bi bi-save-fill me-2"></i>
+											<LocaleText t="Save"></LocaleText>
+										</button>
+									</div>
+									<hr>
+									<h5 class="mb-3">
+										<LocaleText t="Danger Zone"></LocaleText>
+									</h5>
+									<div class="d-flex gap-2 flex-column">
+										<button
+											@click="backupRestoreModal = true"
+											class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 text-start d-flex">
+											<i class="bi bi-copy me-auto"></i>
+											<LocaleText t="Backup & Restore"></LocaleText>
+										</button>
+										<button
+											@click="editRawConfigurationFileModal = true"
+											class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 d-flex">
+											<i class="bi bi-pen me-auto"></i>
+											<LocaleText t="Edit Raw Configuration File"></LocaleText>
+										</button>
+
+										<button
+											@click="deleteConfigurationModal = true"
+											class="btn bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 d-flex mt-4">
+											<i class="bi bi-trash-fill me-auto"></i>
+											<LocaleText t="Delete Configuration"></LocaleText>
+										</button>
+									</div>
+
+								</template>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/src/static/app/src/views/newConfiguration.vue b/src/static/app/src/views/newConfiguration.vue
index 84d91f8..af35c07 100644
--- a/src/static/app/src/views/newConfiguration.vue
+++ b/src/static/app/src/views/newConfiguration.vue
@@ -343,19 +343,7 @@ export default {
 						</div>
 					</div>
 				</div>
-				<div class="card rounded-3 shadow">
-					<div class="card-header">
-						<LocaleText t="Table"></LocaleText>
-					</div>
-					<div class="card-body">
-						<input type="text" class="form-control" placeholder="Ex: off" id="Table" 
-						       v-model="this.newConfiguration.Table"
-						       :disabled="this.loading">
-						<div class="invalid-feedback">
-							<div v-if="this.error">{{this.errorMessage}}</div>
-						</div>
-					</div>
-				</div>
+				
 				<hr>
 				<div class="accordion" id="newConfigurationOptionalAccordion">
 					<div class="accordion-item">
@@ -367,7 +355,7 @@ export default {
 						<div id="newConfigurationOptionalAccordionCollapse" 
 						     class="accordion-collapse collapse" data-bs-parent="#newConfigurationOptionalAccordion">
 							<div class="accordion-body d-flex flex-column gap-3">
-								<div class="card rounded-3" v-for="key in ['PreUp', 'PreDown', 'PostUp', 'PostDown']">
+								<div class="card rounded-3" v-for="key in ['Table', 'PreUp', 'PreDown', 'PostUp', 'PostDown']">
 									<div class="card-header">{{ key }}</div>
 									<div class="card-body">
 										<input type="text"