Re-adjust backup & restore location

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

@@ -56,6 +56,7 @@ watch(data, () => {
 	deep: true
 })
 
+const openBackupRestore = ref(false)
 </script>
 
 <template>
@@ -185,11 +186,6 @@ watch(data, () => {
 								>
 									<i class="bi bi-save-fill"></i></button>
 							</div>
-							<hr>
-							<h6>
-								<LocaleText t="Backup & Restore"></LocaleText>
-							</h6>
-							<ConfigurationBackupRestore></ConfigurationBackupRestore>
 						</div>
 					</div>
 				</div>

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

@@ -1,47 +1,74 @@
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
 import {fetchGet} from "@/utilities/fetch.js";
 import {useRoute} from "vue-router";
 import dayjs from "dayjs";
+import LocaleText from "@/components/text/localeText.vue";
 
 const route = useRoute()
 const backups = ref([])
+const loading = ref(false)
+const emit = defineEmits(["close"])
 
 onMounted(() => {
+	loadBackup();
+})
+
+const loadBackup = () => {
+	loading.value = true
 	fetchGet("/api/getWireguardConfigurationBackup", {
 		configurationName: route.params.id
 	}, (res) => {
 		backups.value = res.data;
+		loading.value = false;
 	})
-})
+}
 </script>
 
 <template>
-<div class="card rounded-3" style="height: 400px; overflow-y: scroll">
+<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll" ref="editConfigurationContainer">
-	<div class="card-body d-flex gap-2 flex-column">
+	<div class="d-flex h-100 w-100">
-		<div class="card" v-for="b in backups">
+		<div class="modal-dialog-centered dashboardModal w-100 h-100 overflow-x-scroll flex-column gap-3 mx-3">
-			<div class="card-body p-2 px-3">
+			<div class="my-5 d-flex gap-3 flex-column position-relative">
-				<div class="d-flex gap-3 align-items-center">
+				<div class="title">
+					<div class="d-flex mb-3">
+						<h4 class="mb-0">
+							<LocaleText t="Backup & Restore"></LocaleText>
+						</h4>
+						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
+					</div>
+					<button class="btn bg-primary-subtle text-primary-emphasis border-primary-subtle rounded-3 w-100">
+						<i class="bi bi-plus-circle-fill me-2"></i> Create Backup
+					</button>
+				</div>
+				
+				<div class="position-relative d-flex gap-3 flex-column">
+					<div class="text-center" v-if="loading">
+						<div class="spinner-border"></div>
+					</div>
+					<div class="card animate__animated animate__fadeInUp animate__fast my-0 rounded-3" 
+					     v-else-if="!loading && backups.length === 0">
+						<div class="card-body text-center text-muted">
+							<i class="bi bi-x-circle-fill me-2"></i> No backup yet, click the button above to create backup.
+						</div>
+					</div>
+					<div class="card animate__animated animate__fadeInUp animate__fast my-0 rounded-3"
+					     v-for="(b, index) in backups" :style="{'animation-delay': index*0.05 + 's'}">
+						<div class="card-body">
+							<div class="d-flex gap-3">
 								<div class="d-flex flex-column">
 									<small class="text-muted">
 										Filename
 									</small>
-						<small>
+									<samp>{{b.filename}}</samp>
-							{{b.filename}}
-						</small>
 								</div>
 								<div class="d-flex flex-column">
 									<small class="text-muted">
 										Backup Date
 									</small>
-						<small>
 									{{dayjs(b.backupDate, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss")}}
-						</small>
 								</div>
 								<div class="d-flex gap-2 align-items-center ms-auto">
-						<button class="btn bg-info-subtle text-info-emphasis border-info-subtle rounded-3 btn-sm">
-							<i class="bi bi-eye-fill"></i>
-						</button>
 									<button class="btn bg-warning-subtle text-warning-emphasis border-warning-subtle rounded-3 btn-sm">
 										<i class="bi bi-clock-history"></i>
 									</button>
@@ -50,12 +77,33 @@ onMounted(() => {
 									</button>
 								</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>
 					</div>
+					
+				</div>
+			</div>
+
+		</div>
 	</div>
 </div>
 </template>
 
 <style scoped>
+.card, .title{
+	width: 100%;
+}
 
+@media screen and (min-width: 700px) {
+	.card, .title{
+		width: 700px;
+	}
+}
+
+.animate__fadeInUp{
+	animation-timing-function: cubic-bezier(0.42, 0, 0.22, 1.0)
+}
 </style>

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

@@ -44,6 +44,8 @@ import PeerShareLinkModal from "@/components/configurationComponents/peerShareLi
 import LocaleText from "@/components/text/localeText.vue";
 import EditConfiguration from "@/components/configurationComponents/editConfiguration.vue";
 import SelectPeers from "@/components/configurationComponents/selectPeers.vue";
+import ConfigurationBackupRestore
+	from "@/components/configurationComponents/editConfigurationComponents/configurationBackupRestore.vue";
 
 Chart.register(
 	ArcElement,
@@ -74,6 +76,7 @@ Chart.register(
 export default {
 	name: "peerList",
 	components: {
+		ConfigurationBackupRestore,
 		SelectPeers,
 		EditConfiguration,
 		LocaleText,
@@ -145,10 +148,13 @@ export default {
 				selectedPeer: undefined
 			},
 			editConfiguration: {
-				modalOpen: true
+				modalOpen: false
 			},
 			selectPeers: {
 				modalOpen: false
+			},
+			backupRestore: {
+				modalOpen: true
 			}
 		}
 	},
@@ -598,6 +604,7 @@ export default {
 				@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
 				@editConfiguration="this.editConfiguration.modalOpen = true"
 				@selectPeers="this.selectPeers.modalOpen = true"
+				@backupRestore="this.backupRestore.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"
@@ -672,6 +679,11 @@ export default {
 				@close="this.selectPeers.modalOpen = false"
 			></SelectPeers>
 		</Transition>
+		<Transition name="zoom">
+			<ConfigurationBackupRestore
+				@close="backupRestore.modalOpen = false"
+				v-if="backupRestore.modalOpen"></ConfigurationBackupRestore>
+		</Transition>
 		
 	</div>
 </template>

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

@@ -188,6 +188,17 @@ 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="Configuration"></LocaleText>
+										</small></p>
+										<div class="list-group">
+											<a class="list-group-item list-group-item-action d-flex" role="button"
+											   @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>