Backup and restore function is done

Completed with SQLDump and .conf backup

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

@@ -34,9 +34,10 @@ const restoreBackup = () => {
 		backupFileName: props.b.filename
 	}, (res) => {
 		loading.value = false;
+		restoreConfirmation.value = false;
 		if (res.status){
 			emit("refresh")
-			store.newMessage("Server", "Backup restored", "success")
+			store.newMessage("Server", "Backup restored with " + props.b.filename, "success")
 		}else{
 			store.newMessage("Server", "Backup failed to restore", "danger")
 		}
@@ -83,7 +84,7 @@ const delaySeconds = computed(() => {
 							<button
 								:disabled="loading"
 								@click="restoreBackup()"
-								class="btn btn-danger rounded-3">
+								class="btn btn-success rounded-3">
 								Yes
 							</button>
 							<button

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

@@ -154,7 +154,7 @@ export default {
 				modalOpen: false
 			},
 			backupRestore: {
-				modalOpen: true
+				modalOpen: false
 			}
 		}
 	},

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

@@ -45,16 +45,17 @@ export default {
 					<LocaleText t="Configuration"></LocaleText>
 				</RouterLink>
 			</div>
-			<Transition name="fade" mode="out-in">
-				<div v-if="this.configurationLoaded">
-					<p class="text-muted" v-if="this.wireguardConfigurationsStore.Configurations.length === 0">
-						<LocaleText t="You don't have any WireGuard configurations yet. Please check the configuration folder or change it in Settings. By default the folder is /etc/wireguard."></LocaleText>
-					</p>
-					<div class="d-flex gap-3 flex-column mb-3" v-else>
-						<ConfigurationCard v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard>
-					</div>
-				</div>
-			</Transition>
+			<TransitionGroup name="fade" tag="div" class="d-flex flex-column gap-3 mb-4">
+				<p class="text-muted" 
+				   key="noConfiguration"
+				   v-if="this.configurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
+					<LocaleText t="You don't have any WireGuard configurations yet. Please check the configuration folder or change it in Settings. By default the folder is /etc/wireguard."></LocaleText>
+				</p>
+				<ConfigurationCard v-for="(c, index) in this.wireguardConfigurationsStore.Configurations"
+				                   :delay="index*0.05 + 's'"
+				                   v-else-if="this.configurationLoaded"
+				                   :key="c.Name" :c="c"></ConfigurationCard>
+			</TransitionGroup>
 			
 		</div>
 	</div>

src/static/app/src/components/configurationListComponents/configurationCard.vue

@@ -12,7 +12,8 @@ export default {
 			Status: Boolean,
 			PublicKey: String,
 			PrivateKey: String
-		}
+		},
+		delay: String
 	},
 	data(){
 		return{
@@ -105,5 +106,7 @@ export default {
 </template>
 
 <style scoped>
-
+.fade-enter-active{
+	transition-delay: v-bind(delay) !important;
+}
 </style>

src/static/app/src/stores/WireguardConfigurationsStore.js

@@ -70,6 +70,7 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
 		async getConfigurations(){
 			await fetchGet("/api/getWireguardConfigurations", {}, (res) => {
 				if (res.status)  this.Configurations = res.data
+				// this.Configurations = []
 			});
 		},
 		regexCheckIP(ip){

src/static/css/dashboard.css

@@ -1038,14 +1038,12 @@ pre.index-alert {
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: all 0.3s ease-in-out;
-    /*position: absolute;*/
-    /*padding-top: 50px*/
+    transition: all 0.5s cubic-bezier(0.42, 0, 0.22, 1.0);
 }
 
 .fade-enter-from,
 .fade-leave-to {
-    transform: translateY(30px);
+    transform: translateY(40px);
     opacity: 0;
 }