Rename configuration done

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

@@ -4,6 +4,8 @@ import {onMounted, reactive, ref, useTemplateRef, watch} from "vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import UpdateConfigurationName
+	from "@/components/configurationComponents/editConfigurationComponents/updateConfigurationName.vue";
 const props = defineProps({
 	configurationInfo: Object
 })
@@ -47,6 +49,8 @@ const saveForm = ()  => {
 		}
 	})
 }
+const updateConfigurationName = ref(false)
+
 watch(data, () => {
 	dataChanged.value = JSON.stringify(data) !== JSON.stringify(props.configurationInfo);
 }, {
@@ -67,120 +71,137 @@ watch(data, () => {
 					</div>
 					<div class="card-body px-4 pb-4">
 						<div class="d-flex gap-2 flex-column">
-							<div class="d-flex align-items-center">
+							<div class="d-flex align-items-center gap-3" v-if="!updateConfigurationName">
 								<small class="text-muted">
 									<LocaleText t="Name"></LocaleText>
 								</small>
-								<small class="ms-auto"><samp>{{data.Name}}</samp></small>
-							</div>
-							<div class="d-flex align-items-center">
-								<small class="text-muted">
-									<LocaleText t="Public Key"></LocaleText>
-								</small>
-								<small class="ms-auto"><samp>{{data.PublicKey}}</samp></small>
-							</div>
-							<hr>
-							<div>
-								<label for="configuration_private_key" class="form-label d-flex">
-									<small class="text-muted d-block">
-										<LocaleText t="Private Key"></LocaleText>
-									</small>
-									<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>
-								</label>
-								<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>
-							<div>
-								<label for="configuration_preup" class="form-label">
-									<small class="text-muted">
-										<LocaleText t="PreUp"></LocaleText>
-									</small>
-								</label>
-								<input type="text" class="form-control form-control-sm rounded-3"
-								       :disabled="saving"
-								       v-model="data.PreUp"
-								       id="configuration_preup">
-							</div>
-							<div>
-								<label for="configuration_predown" class="form-label">
-									<small class="text-muted">
-										<LocaleText t="PreDown"></LocaleText>
-									</small>
-								</label>
-								<input type="text" class="form-control form-control-sm rounded-3"
-								       :disabled="saving"
-								       v-model="data.PreDown"
-								       id="configuration_predown">
-							</div>
-							<div>
-								<label for="configuration_postup" class="form-label">
-									<small class="text-muted">
-										<LocaleText t="PostUp"></LocaleText>
-									</small>
-								</label>
-								<input type="text" class="form-control form-control-sm rounded-3"
-								       :disabled="saving"
-								       v-model="data.PostUp"
-								       id="configuration_postup">
-							</div>
-							<div>
-								<label for="configuration_postdown" class="form-label">
-									<small class="text-muted">
-										<LocaleText t="PostDown"></LocaleText>
-									</small>
-								</label>
-								<input type="text" class="form-control form-control-sm rounded-3"
-								       :disabled="saving"
-								       v-model="data.PostDown"
-								       id="configuration_postdown">
-							</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"></i>
+								<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">
+									Update Name
 								</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"></i></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}}
+									</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>
+									<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>
+								<div>
+									<label for="configuration_preup" class="form-label">
+										<small class="text-muted">
+											<LocaleText t="PreUp"></LocaleText>
+										</small>
+									</label>
+									<input type="text" class="form-control form-control-sm rounded-3"
+									       :disabled="saving"
+									       v-model="data.PreUp"
+									       id="configuration_preup">
+								</div>
+								<div>
+									<label for="configuration_predown" class="form-label">
+										<small class="text-muted">
+											<LocaleText t="PreDown"></LocaleText>
+										</small>
+									</label>
+									<input type="text" class="form-control form-control-sm rounded-3"
+									       :disabled="saving"
+									       v-model="data.PreDown"
+									       id="configuration_predown">
+								</div>
+								<div>
+									<label for="configuration_postup" class="form-label">
+										<small class="text-muted">
+											<LocaleText t="PostUp"></LocaleText>
+										</small>
+									</label>
+									<input type="text" class="form-control form-control-sm rounded-3"
+									       :disabled="saving"
+									       v-model="data.PostUp"
+									       id="configuration_postup">
+								</div>
+								<div>
+									<label for="configuration_postdown" class="form-label">
+										<small class="text-muted">
+											<LocaleText t="PostDown"></LocaleText>
+										</small>
+									</label>
+									<input type="text" class="form-control form-control-sm rounded-3"
+									       :disabled="saving"
+									       v-model="data.PostDown"
+									       id="configuration_postdown">
+								</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"></i>
+									</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"></i></button>
+								</div>
+							</template>
 						</div>
 					</div>
 				</div>

src/static/app/src/components/configurationComponents/editConfigurationComponents/updateConfigurationName.vue

@@ -0,0 +1,110 @@
+<script setup>
+import {onMounted, reactive, ref, watch} from "vue";
+import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import LocaleText from "@/components/text/localeText.vue";
+import {fetchPost} from "@/utilities/fetch.js";
+import {useRouter} from "vue-router";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+const props = defineProps({
+	configurationName: String
+})
+const emit = defineEmits(['close'])
+const newConfigurationName = reactive({
+	data: "",
+	valid: false
+});
+const store = WireguardConfigurationsStore()
+
+onMounted(() => {
+	watch(() => newConfigurationName.data, (newVal) => {
+		newConfigurationName.valid = /^[a-zA-Z0-9_=+.-]{1,15}$/.test(newVal) && newVal.length > 0 && !store.Configurations.find(x => x.Name === newVal);
+	})
+})
+const dashboardConfigurationStore = DashboardConfigurationStore()
+const loading = ref(false)
+const router = useRouter()
+const rename = async () => {
+	if (newConfigurationName.data){
+		loading.value = true
+		clearInterval(dashboardConfigurationStore.Peers.RefreshInterval)
+		await fetchPost("/api/renameWireguardConfiguration", {
+			Name: props.configurationName,
+			NewConfigurationName: newConfigurationName.data
+		}, async (res) => {
+			if (res.status){
+				await store.getConfigurations()
+				dashboardConfigurationStore.newMessage("Server", "Configuration renamed", "success")
+				router.push(`/configuration/${newConfigurationName.data}/peers`)
+			}else{
+				dashboardConfigurationStore.newMessage("Server", res.message, "danger")
+				loading.value = false
+			}
+			
+		})
+	}
+}
+</script>
+
+<template>
+<div class="card rounded-3 flex-grow-1 bg-danger-subtle border-danger-subtle border shadow">
+	<div class="card-body">
+		<p>
+			<LocaleText t="To update this configuration's name, WGDashboard will execute the following operations:"></LocaleText>
+		</p>
+		<ol>
+			<li>
+				<LocaleText t="Duplicate current configuration's database table and .conf file with the new name"></LocaleText>
+			</li>
+			<li>
+				<LocaleText t="Delete current configuration's database table and .conf file"></LocaleText>
+			</li>
+		</ol>
+		<div class="d-flex align-items-center gap-3 inputGroup">
+			<input class="form-control form-control-sm rounded-3" :value="configurationName" disabled>
+			<h3 class="mb-0">
+				<i class="bi bi-arrow-right"></i>
+			</h3>
+			<input class="form-control form-control-sm rounded-3"
+			       id="newConfigurationName"
+			       :class="[newConfigurationName.data ? (newConfigurationName.valid ? 'is-valid' : 'is-invalid') : '']"
+			       v-model="newConfigurationName.data">
+		</div>
+		<div class="invalid-feedback" :class="{'d-block': !newConfigurationName.valid && newConfigurationName.data}">
+			<LocaleText t="Configuration name is invalid. Possible reasons:"></LocaleText>
+			<ul class="mb-0">
+				<li>
+					<LocaleText t="Configuration name already exist."></LocaleText>
+				</li>
+				<li>
+					<LocaleText t="Configuration name can only contain 15 lower/uppercase alphabet, numbers, underscore, equal sign, plus sign, period and hyphen."></LocaleText>
+				</li>
+			</ul>
+		</div>
+		<div class="d-flex mt-3">
+			<button
+				@click="emit('close')"
+				class="btn btn-sm bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3">
+				<LocaleText t="Cancel"></LocaleText>
+			</button>
+			<button
+				@click="rename()"
+				:disabled="!newConfigurationName.data || loading"
+				class="btn btn-sm btn-danger rounded-3 ms-auto">
+				<LocaleText t="Save"></LocaleText>
+			</button>
+		</div>
+	</div>
+</div>
+</template>
+
+<style scoped>
+@media screen and (max-width: 567px) {
+	.inputGroup{
+		flex-direction: column;
+		
+		h3{
+			transform: rotate(90deg);
+		}
+	}
+}
+</style>

src/static/app/src/views/newConfiguration.vue

@@ -165,7 +165,6 @@ export default {
 									</li>
 								</ul>
 							</div>
-							
 						</div>
 					</div>
 				</div>
@@ -199,9 +198,7 @@ export default {
 							       v-model="this.newConfiguration.PublicKey" disabled
 							>
 						</div>
-						
 					</div>
-					
 				</div>
 				<div class="card rounded-3 shadow">
 					<div class="card-header">