Finished create configuration from backup

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

@@ -156,10 +156,10 @@ export default {
 				modalOpen: false
 			},
 			backupRestore: {
-				modalOpen: true
+				modalOpen: false
 			},
 			deleteConfiguration: {
-				modalOpen: false
+				modalOpen: true
 			}
 		}
 	},
@@ -685,17 +685,19 @@ export default {
 				@close="this.selectPeers.modalOpen = false"
 			></SelectPeers>
 		</Transition>
+		
+		<Transition name="zoom">
+			<DeleteConfiguration
+				@backup="backupRestore.modalOpen = true"
+				@close="deleteConfiguration.modalOpen = false"
+				v-if="deleteConfiguration.modalOpen"></DeleteConfiguration>
+		</Transition>
 		<Transition name="zoom">
 			<ConfigurationBackupRestore
 				@close="backupRestore.modalOpen = false"
 				@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/messageCentreComponent/message.vue

@@ -1,8 +1,10 @@
 <script>
 import LocaleText from "@/components/text/localeText.vue";
+import dayjs from "dayjs";
 
 export default {
 	name: "message",
+	methods: {dayjs},
 	components: {LocaleText},
 	props: {
 		message: Object
@@ -16,16 +18,22 @@ export default {
 </script>
 
 <template>
-	<div class="card shadow rounded-3 position-relative mb-2 message ms-auto" 
+	<div class="card shadow rounded-3 position-relative message ms-auto" 
 	     :class="{
 			'text-bg-danger': this.message.type === 'danger', 
 			'text-bg-success': this.message.type === 'success',
 			'text-bg-warning': this.message.type === 'warning'}"
 	     :id="this.message.id">
 		<div class="card-body">
-			<small class="fw-bold d-block" style="text-transform: uppercase">
-				<LocaleText t="FROM "></LocaleText>
-				{{this.message.from}}</small>
+			<div class="d-flex">
+				<small class="fw-bold d-block" style="text-transform: uppercase">
+					<LocaleText t="FROM "></LocaleText>
+					{{this.message.from}}
+				</small>
+				<small class="ms-auto">
+					{{dayjs().format("hh:mm A")}}
+				</small>
+			</div>
 			{{this.message.content}}
 		</div>
 	</div>

src/static/app/src/components/restoreConfigurationComponents/confirmBackup.vue

@@ -3,13 +3,17 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {parse} from "cidr-tools";
+import {fetchPost} from "@/utilities/fetch.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import {useRouter} from "vue-router";
 
 const props = defineProps({
 	selectedConfigurationBackup: Object
 })
 
 const newConfiguration = reactive({
-	ConfigurationName: props.selectedConfigurationBackup.filename.split("_")[0]
+	ConfigurationName: props.selectedConfigurationBackup.filename.split("_")[0],
+	Backup: props.selectedConfigurationBackup.filename
 })
 
 const lineSplit = props.selectedConfigurationBackup.content.split("\n");
@@ -76,7 +80,6 @@ const validateForm = computed(() => {
 		&& validatePrivateKey.value 
 		&& validateConfigurationName.value
 })
- 
 onMounted(() => {
 	document.querySelector("main").scrollTo({
 		top: 0,
@@ -90,7 +93,6 @@ onMounted(() => {
 		immediate: true
 	})
 })
-
 const availableIPAddress = computed(() => {
 	let p;
 	try{
@@ -100,7 +102,6 @@ const availableIPAddress = computed(() => {
 	}
 	return p.end - p.start
 })
-
 const peersCount = computed(() => {
 	if (props.selectedConfigurationBackup.database){
 		let l = props.selectedConfigurationBackup.databaseContent.split("\n")
@@ -108,7 +109,6 @@ const peersCount = computed(() => {
 	}
 	return 0
 })
-
 const restrictedPeersCount = computed(() => {
 	if (props.selectedConfigurationBackup.database){
 		let l = props.selectedConfigurationBackup.databaseContent.split("\n")
@@ -116,10 +116,19 @@ const restrictedPeersCount = computed(() => {
 	}
 	return 0
 })
-
-
-
-
+const dashboardStore = DashboardConfigurationStore()
+const router = useRouter();
+const submitRestore = async () => {
+	if (validateForm.value){
+		await fetchPost("/api/addWireguardConfiguration", newConfiguration, async (res) => {
+			if (res.status){
+				dashboardStore.newMessage("Server", "Configuration restored", "success")
+				await store.getConfigurations()
+				await router.push(`/configuration/${newConfiguration.ConfigurationName}/peers`)
+			}
+		})
+	}
+}
 </script>
 
 <template>
@@ -137,7 +146,7 @@ const restrictedPeersCount = computed(() => {
 			<input type="text" class="form-control rounded-3" placeholder="ex. wg1" id="ConfigurationName"
 			       v-model="newConfiguration.ConfigurationName"
 			       :class="[validateConfigurationName ? 'is-valid':'is-invalid']"
-			       :disabled="loading"
+			       disabled
 			       required>
 			<div class="invalid-feedback">
 				<div v-if="error">{{errorMessage}}</div>
@@ -162,16 +171,9 @@ const restrictedPeersCount = computed(() => {
 					</small></label>
 					<div class="input-group">
 						<input type="text" class="form-control rounded-start-3" id="PrivateKey" required
-						       :disabled="loading"
 						       :class="[validatePrivateKey ? 'is-valid':'is-invalid']"
 						       v-model="newConfiguration.PrivateKey" disabled
 						>
-						<button class="btn btn-outline-primary rounded-end-3" type="button"
-						        title="Regenerate Private Key"
-						        @click="wireguardGenerateKeypair()"
-						>
-							<i class="bi bi-arrow-repeat"></i>
-						</button>
 					</div>
 				</div>
 			</div>
@@ -195,7 +197,7 @@ const restrictedPeersCount = computed(() => {
 			       max="65353"
 			       v-model="newConfiguration.ListenPort"
 			       :class="[validateListenPort ? 'is-valid':'is-invalid']"
-			       :disabled="loading"
+			       disabled
 			       required>
 			<div class="invalid-feedback">
 				<div v-if="error">{{errorMessage}}</div>
@@ -225,7 +227,7 @@ const restrictedPeersCount = computed(() => {
 			       placeholder="Ex: 10.0.0.1/24" id="Address"
 			       v-model="newConfiguration.Address"
 			       :class="[validateAddress ? 'is-valid':'is-invalid']"
-			       :disabled="loading"
+			       disabled
 			       required>
 			<div class="invalid-feedback">
 				<div v-if="error">{{errorMessage}}</div>
@@ -250,25 +252,33 @@ const restrictedPeersCount = computed(() => {
 							<label class="text-muted mb-1" for="PreUp"><small>
 								<LocaleText t="PreUp"></LocaleText>
 							</small></label>
-							<input type="text" class="form-control rounded-3" id="PreUp" v-model="newConfiguration.PreUp">
+							<input type="text" class="form-control rounded-3" id="PreUp"
+							       disabled
+							       v-model="newConfiguration.PreUp">
 						</div>
 						<div>
 							<label class="text-muted mb-1" for="PreDown"><small>
 								<LocaleText t="PreDown"></LocaleText>
 							</small></label>
-							<input type="text" class="form-control rounded-3" id="PreDown" v-model="newConfiguration.PreDown">
+							<input type="text" class="form-control rounded-3" id="PreDown"
+							       disabled
+							       v-model="newConfiguration.PreDown">
 						</div>
 						<div>
 							<label class="text-muted mb-1" for="PostUp"><small>
 								<LocaleText t="PostUp"></LocaleText>
 							</small></label>
-							<input type="text" class="form-control rounded-3" id="PostUp" v-model="newConfiguration.PostUp">
+							<input type="text" class="form-control rounded-3" id="PostUp"
+							       disabled
+							       v-model="newConfiguration.PostUp">
 						</div>
 						<div>
 							<label class="text-muted mb-1" for="PostDown"><small>
 								<LocaleText t="PostDown"></LocaleText>
 							</small></label>
-							<input type="text" class="form-control rounded-3" id="PostDown" v-model="newConfiguration.PostDown">
+							<input type="text" class="form-control rounded-3" id="PostDown"
+							       disabled
+							       v-model="newConfiguration.PostDown">
 						</div>
 					</div>
 				</div>
@@ -305,9 +315,10 @@ const restrictedPeersCount = computed(() => {
 	</div>
 	<div class="d-flex">
 		<button class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto"
-			:disabled="!validateForm"
+			:disabled="!validateForm || loading"
+		        @click="submitRestore()"
 		>
-			<i class="bi bi-clock-history me-2"></i> Restore
+			<i class="bi bi-clock-history me-2"></i> {{ !loading ? 'Restore':'Restoring...'}}
 		</button>
 	</div>
 </div>

src/static/app/src/stores/DashboardConfigurationStore.js

@@ -32,8 +32,6 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
 			}else{
 				this.CrossServerConfiguration = JSON.parse(currentConfiguration)
 			}
-			
-			
 		},
 		syncCrossServerConfiguration(){
 			window.localStorage.setItem('CrossServerConfiguration', JSON.stringify(this.CrossServerConfiguration))
@@ -82,7 +80,6 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
 		applyLocale(key){
 			if (this.Locale === null) 
 				return key
-			
 			const reg = Object.keys(this.Locale)
 			const match = reg.filter(x => {
 				return key.match(new RegExp('^' + x + '$', 'g')) !== null

src/static/app/src/views/restoreConfiguration.vue

@@ -29,7 +29,7 @@ const selectedConfiguration = ref("")
 					<LocaleText t="Restore Configuration"></LocaleText>
 				</h2>
 			</div>
-			<div name="restore" v-if="backups" >
+			<div v-if="backups" >
 				<div class="d-flex mb-5 align-items-center steps" role="button"
 				     :class="{active: !confirm}"
 				     @click="confirm = false" key="step1">
@@ -58,21 +58,21 @@ const selectedConfiguration = ref("")
 					</Transition>
 				</div>
 				<div id="step1Detail" v-if="!confirm">
+<!--					<div class="mb-4">-->
+<!--						<h5>Backup of existing WireGuard Configurations</h5>-->
+<!--						<hr>-->
+<!--						<div class="d-flex gap-3 flex-column">-->
+<!--							<BackupGroup-->
+<!--								@select="(b) => {selectedConfigurationBackup = b; selectedConfiguration = c; confirm = true}"-->
+<!--								:open="selectedConfiguration === c"-->
+<!--								:selectedConfigurationBackup="selectedConfigurationBackup"-->
+<!--								v-for="c in Object.keys(backups.ExistingConfigurations)"-->
+<!--								:configuration-name="c" :backups="backups.ExistingConfigurations[c]"></BackupGroup>-->
+<!--						</div>-->
+<!--					</div>-->
 					<div class="mb-4">
-						<h5>Backup of existing WireGuard Configurations</h5>
-						<hr>
-						<div class="d-flex gap-3 flex-column">
-							<BackupGroup
-								@select="(b) => {selectedConfigurationBackup = b; selectedConfiguration = c; confirm = true}"
-								:open="selectedConfiguration === c"
-								:selectedConfigurationBackup="selectedConfigurationBackup"
-								v-for="c in Object.keys(backups.ExistingConfigurations)"
-								:configuration-name="c" :backups="backups.ExistingConfigurations[c]"></BackupGroup>
-						</div>
-					</div>
-					<div class="mb-4">
-						<h5>Backup of non-existing WireGuard Configurations</h5>
-						<hr>
+<!--						<h5>Backup of non-existing WireGuard Configurations</h5>-->
+<!--						<hr>-->
 						<div class="d-flex gap-3 flex-column">
 							<BackupGroup
 								@select="(b) => {selectedConfigurationBackup = b; selectedConfiguration = c; confirm = true}"
@@ -80,6 +80,13 @@ const selectedConfiguration = ref("")
 								:open="selectedConfiguration === c"
 								v-for="c in Object.keys(backups.NonExistingConfigurations)"
 								:configuration-name="c" :backups="backups.NonExistingConfigurations[c]"></BackupGroup>
+							<div v-if="Object.keys(backups.NonExistingConfigurations).length === 0">
+								<div class="card rounded-3">
+									<div class="card-body">
+										<p class="mb-0">You don't have any configuration to restore</p>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>