Delete configuration, restore configuration

src/static/app/src/components/configurationComponents/backupRestoreComponents/backup.vue

@@ -47,6 +47,8 @@ const restoreBackup = () => {
 const delaySeconds = computed(() => {
 	return props.delay + 's'
 })
+
+const showContent = ref(false);
 </script>
  
 <template>
@@ -100,7 +102,7 @@ const delaySeconds = computed(() => {
 			<div class="d-flex gap-3">
 				<div class="d-flex flex-column">
 					<small class="text-muted">
-						Filename
+						Backup
 					</small>
 					<samp>{{b.filename}}</samp>
 				</div>
@@ -124,9 +126,32 @@ const delaySeconds = computed(() => {
 				</div>
 			</div>
 			<hr>
-			<textarea class="form-control rounded-3" :value="b.content"
-			          disabled
-			          style="height: 400px; font-family: var(--bs-font-monospace),sans-serif !important;"></textarea>
+			<div class="card rounded-3">
+				<a role="button" class="card-header d-flex text-decoration-none align-items-center" 
+				   :class="{'border-bottom-0': !showContent}"
+				   style="cursor: pointer" @click="showContent = !showContent">
+					<small>.conf File
+						</small>
+					<i class="bi bi-chevron-down ms-auto"></i>
+				</a>
+				<div class="card-body" v-if="showContent">
+					<textarea class="form-control rounded-3" :value="b.content"
+					          disabled
+					          style="height: 300px; font-family: var(--bs-font-monospace),sans-serif !important;"></textarea>
+				</div>
+			</div>
+			<hr>
+			<div class="d-flex">
+				<span>
+					<i class="bi bi-database me-1"></i>
+					Database
+				</span>
+				<i class="bi ms-auto"
+					:class="[b.database ? 'text-success bi-check-circle-fill' : 'text-danger bi-x-circle-fill']"
+				></i>
+			</div>
+			
+			
 		</div>
 	</div>
 </template>

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

@@ -0,0 +1,69 @@
+<script setup>
+import LocaleText from "@/components/text/localeText.vue";
+import {useRoute, useRouter} from "vue-router";
+import {ref} from "vue";
+import {fetchPost} from "@/utilities/fetch.js";
+import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+const route = useRoute()
+const configurationName = route.params.id;
+const input = ref("")
+const router = useRouter()
+const store = DashboardConfigurationStore()
+const deleting = ref(false)
+
+const deleteConfiguration = () => {
+	clearInterval(store.Peers.RefreshInterval)
+	deleting.value = true;
+	fetchPost("/api/deleteWireguardConfiguration", {
+		Name: configurationName
+	}, (res) => {
+		if (res.status){
+			router.push('/')
+			store.newMessage("Server", "Configuration deleted", "success")
+		}else{
+			deleting.value = false;
+		}
+	})
+}
+</script>
+
+<template>
+	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll" ref="editConfigurationContainer">
+		<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 bg-danger-subtle border-danger-subtle">
+					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
+						<h5 class="mb-0">
+							Are you sure to delete this configuration?
+						</h5>
+						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
+					</div>
+					<div class="card-body px-4">
+						
+						<p class="text-muted">
+							Once you deleted, all connected peers will get disconnected; Both configuration file 
+							(<code>.conf</code>) and database table related to this configuration will get deleted.
+						</p>
+						<hr>
+						<p>If you're sure, please type in the configuration name below and click Delete.</p>
+						<input class="form-control rounded-3 mb-3" 
+						       :placeholder="configurationName"
+						       v-model="input"
+						       type="text">
+						<button class="btn btn-danger w-100" 
+						        @click="deleteConfiguration()"
+						        :disabled="input !== configurationName || deleting">
+							<i class="bi bi-trash-fill me-2 rounded-3"></i>
+							Delete
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -172,12 +172,12 @@ const openBackupRestore = ref(false)
 								       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 px-3 py-2"
+								<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 px-3 py-2 shadow"
+								<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 shadow"
 								        :disabled="!dataChanged || saving"
 								        @click="saveForm()"
 								>

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

@@ -46,6 +46,7 @@ import EditConfiguration from "@/components/configurationComponents/editConfigur
 import SelectPeers from "@/components/configurationComponents/selectPeers.vue";
 import ConfigurationBackupRestore
 	from "@/components/configurationComponents/configurationBackupRestore.vue";
+import DeleteConfiguration from "@/components/configurationComponents/deleteConfiguration.vue";
 
 Chart.register(
 	ArcElement,
@@ -76,6 +77,7 @@ Chart.register(
 export default {
 	name: "peerList",
 	components: {
+		DeleteConfiguration,
 		ConfigurationBackupRestore,
 		SelectPeers,
 		EditConfiguration,
@@ -154,6 +156,9 @@ export default {
 				modalOpen: false
 			},
 			backupRestore: {
+				modalOpen: true
+			},
+			deleteConfiguration: {
 				modalOpen: false
 			}
 		}
@@ -605,6 +610,7 @@ export default {
 				@editConfiguration="this.editConfiguration.modalOpen = true"
 				@selectPeers="this.selectPeers.modalOpen = true"
 				@backupRestore="this.backupRestore.modalOpen = true"
+				@deleteConfiguration="this.deleteConfiguration.modalOpen = true"
 				:configuration="this.configurationInfo"></PeerSearch>
 			<TransitionGroup name="list" tag="div" class="row gx-2 gy-2 z-0">
 				<div class="col-12 col-lg-6 col-xl-4"
@@ -685,7 +691,11 @@ export default {
 				@refreshPeersList="this.getPeers()"
 				v-if="backupRestore.modalOpen"></ConfigurationBackupRestore>
 		</Transition>
-		
+		<Transition name="zoom">
+			<DeleteConfiguration
+				@close="deleteConfiguration.modalOpen = false"
+				v-if="deleteConfiguration.modalOpen"></DeleteConfiguration>
+		</Transition>
 	</div>
 </template>
 

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

@@ -188,6 +188,26 @@ export default {
 									<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
 								</div>
 								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column pt-0">
+									
+									<div>
+										<p class="text-muted fw-bold mb-2"><small>
+											<LocaleText t="Peers"></LocaleText>
+										</small></p>
+										<div class="list-group">
+											<a class="list-group-item list-group-item-action d-flex" role="button"
+											   @click="this.$emit('selectPeers')">
+												<LocaleText t="Select Peers"></LocaleText>
+											</a>
+											<a class="list-group-item list-group-item-action d-flex" role="button"
+											   @click="this.$emit('jobsAll')">
+												<LocaleText t="Active Jobs"></LocaleText>
+											</a>
+											<a class="list-group-item list-group-item-action d-flex" role="button"
+											   @click="this.$emit('jobLogs')">
+												<LocaleText t="Logs"></LocaleText>
+											</a>
+										</div>
+									</div>
 									<div>
 										<p class="text-muted fw-bold mb-2"><small>
 											<LocaleText t="Configuration"></LocaleText>
@@ -197,31 +217,9 @@ export default {
 											   @click="this.$emit('backupRestore')">
 												<LocaleText t="Backup & Restore"></LocaleText>
 											</a>
-										</div>
-									</div>
-									<div>
-										<p class="text-muted fw-bold mb-2"><small>
-											<LocaleText t="Manage Peers"></LocaleText>
-										</small></p>
-										<div class="list-group">
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('selectPeers')">
-												<LocaleText t="Select Peers"></LocaleText>
-											</a>
-										</div>
-									</div>
-									<div>
-										<p class="text-muted fw-bold mb-2"><small>
-											<LocaleText t="Peer Jobs"></LocaleText>
-										</small></p>
-										<div class="list-group">
-											<a class="list-group-item list-group-item-action d-flex" role="button" 
-											   @click="this.$emit('jobsAll')">
-												<LocaleText t="Active Jobs"></LocaleText>
-											</a>
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('jobLogs')">
-												<LocaleText t="Logs"></LocaleText>
+											<a class="list-group-item list-group-item-action d-flex text-danger fw-bold" role="button"
+											   @click="this.$emit('deleteConfiguration')">
+												<LocaleText t="Delete"></LocaleText>
 											</a>
 										</div>
 									</div>

src/static/app/src/components/configurationList.vue

@@ -34,16 +34,19 @@ export default {
 	
 	<div class="mt-md-5 mt-3">
 		<div class="container-md">
-			<div class="d-flex mb-4 configurationListTitle">
-				<h3 class="text-body d-flex">
-					<i class="bi bi-body-text me-2"></i>
+			<div class="d-flex mb-4 configurationListTitle align-items-center gap-3">
+				<h2 class="text-body d-flex">
 					<span>
 						<LocaleText t="WireGuard Configurations"></LocaleText>
-					</span></h3>
-				<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3">
-					<i class="bi bi-plus-circle-fill me-2"></i>
-					<LocaleText t="Configuration"></LocaleText>
+					</span>
+				</h2>
+				<RouterLink to="/new_configuration"
+				            class="btn btn-dark btn-brand rounded-3 p-2 shadow ms-auto rounded-3">
+					<h2 class="mb-0" style="line-height: 0">
+						<i class="bi bi-plus-circle"></i>
+					</h2>
 				</RouterLink>
+				
 			</div>
 			<TransitionGroup name="fade" tag="div" class="d-flex flex-column gap-3 mb-4">
 				<p class="text-muted" 
@@ -63,6 +66,13 @@ export default {
 </template>
 
 <style scoped>
+.configurationListTitle{
+	.btn{
+		border-radius: 50% !important;
+	}
+}
+
+
 @media screen and (max-width: 768px) {
 	.configurationListTitle{
 		flex-direction: column;

src/static/app/src/router/index.js

@@ -16,6 +16,7 @@ import Ping from "@/views/ping.vue";
 import Traceroute from "@/views/traceroute.vue";
 import Totp from "@/components/setupComponent/totp.vue";
 import Share from "@/views/share.vue";
+import RestoreConfiguration from "@/views/restoreConfiguration.vue";
 
 const checkAuth = async () => {
 	let result = false
@@ -77,6 +78,14 @@ const router = createRouter({
 						title: "New Configuration"
 					}
 				},
+				{
+					name: "Restore Configuration",
+					path: '/restore_configuration',
+					component: RestoreConfiguration,
+					meta: {
+						title: "Restore Configuration"
+					}
+				},
 				{
 					name: "Configuration",
 					path: '/configuration/:id',