Update

src/static/app/dist/assets/editConfiguration.css

@@ -0,0 +1 @@
+@media screen and (max-width: 567px){.inputGroup{&[data-v-4be4f48a]{flex-direction:column}h3[data-v-4be4f48a]{transform:rotate(90deg)}}}

src/static/app/dist/assets/peerConfigurationFile.js

@@ -0,0 +1 @@
+import{L as l}from"./localeText.js";import{D as u,a as p,c as m,b as e,d as b}from"./index.js";const g={class:"peerSettingContainer w-100 h-100 position-absolute top-0 start-0"},f={class:"container d-flex h-100 w-100"},h={class:"m-auto modal-dialog-centered dashboardModal justify-content-center"},_={class:"card rounded-3 shadow w-100"},x={class:"card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0"},C={class:"mb-0"},v={class:"card-body"},y=["value"],D={__name:"peerConfigurationFile",props:{configurationFile:String},emits:["close"],setup(s,{emit:a}){const n=a,i=s,t=u(),r=async()=>{if(navigator.clipboard&&navigator.clipboard.writeText)return navigator.clipboard.writeText(i.configurationFile).then(()=>{t.newMessage("WGDashboard","Configuration file copied with ClipboardAPI","success")});document.querySelector("#peerConfigurationFile").select(),document.execCommand("copy")?t.newMessage("WGDashboard","Text copied to clipboard using execCommand","success"):t.newMessage("WGDashboard","Failed to copy text with execCommand","danger")};return(c,o)=>(p(),m("div",g,[e("div",f,[e("div",h,[e("div",_,[e("div",x,[e("h4",C,[b(l,{t:"Configuration File"})]),e("button",{type:"button",class:"btn-close ms-auto",onClick:o[0]||(o[0]=d=>n("close"))})]),e("div",v,[e("button",{onClick:o[1]||(o[1]=d=>r()),class:"btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3"}," Copy "),e("textarea",{style:{height:"300px"},class:"form-control w-100 rounded-3",disabled:"",id:"peerConfigurationFile",value:s.configurationFile},null,8,y)])])])])]))}};export{D as default};

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

@@ -93,6 +93,7 @@ export default {
 					<Transition name="slide-fade">
 						<PeerSettingsDropdown 
 							@qrcode="(file) => this.$emit('qrcode', file)"
+							@configurationFile="(file) => this.$emit('configurationFile', file)"
 							@setting="this.$emit('setting')"
 							@jobs="this.$emit('jobs')"
 							@refresh="this.$emit('refresh')"

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

@@ -0,0 +1,102 @@
+<script setup>
+import LocaleText from "@/components/text/localeText.vue";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import {ref} from "vue";
+const emit = defineEmits(['close'])
+const props = defineProps({
+	configurationFile: String
+})
+const store = DashboardConfigurationStore()
+const copied = ref(false)
+const copy = async () => {
+	if (navigator.clipboard && navigator.clipboard.writeText){
+		navigator.clipboard.writeText(props.configurationFile).then(() => {
+			copied.value = true;
+			setTimeout(() => {
+				copied.value = false;
+			}, 3000)
+		}).catch(() => {
+			store.newMessage("WGDashboard","Failed to copy", "danger");
+		})
+	}else{
+		const ele = document.querySelector("#peerConfigurationFile");
+		ele.select();
+		const successful = document.execCommand("copy");
+		if (successful) {
+			copied.value = true;
+			setTimeout(() => {
+				copied.value = false;
+			}, 3000)
+		} else {
+			store.newMessage("WGDashboard","Failed to copy", "danger");
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0">
+		<div class="container d-flex h-100 w-100">
+			<div class="m-auto modal-dialog-centered dashboardModal justify-content-center">
+				<div class="card rounded-3 shadow w-100">
+					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
+						<h4 class="mb-0">
+							<LocaleText t="Peer Configuration File"></LocaleText>
+						</h4>
+						<button type="button" class="btn-close ms-auto" 
+						        @click="emit('close')"></button>
+					</div>
+					<div class="card-body p-4">
+						<div class="d-flex">
+							<button
+								@click="copy()"
+								:disabled="copied"
+								class="ms-auto btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 position-relative">
+								<Transition name="slide-up" mode="out-in">
+									<span v-if="!copied" class="d-block">
+										<i class="bi bi-clipboard-fill"></i>
+									</span>
+									<span v-else class="d-block" id="check">
+										<i class="bi bi-check-circle-fill"></i>
+									</span>
+								</Transition>
+							</button>
+						</div>
+						
+						<textarea 
+							style="height: 300px"
+							class="form-control w-100 rounded-3 mt-2" 
+							disabled
+							id="peerConfigurationFile"
+							:value="configurationFile"></textarea>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+	transition: all 0.2s cubic-bezier(0.42, 0, 0.22, 1);
+}
+
+.slide-up-enter-from, .slide-up-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+@keyframes spin {
+	from{
+		transform: rotate(0deg);
+	}
+	to{
+		transform: rotate(360deg);
+	}
+}
+
+#check{
+	animation: cubic-bezier(0.42, 0, 0.22, 1.3) 0.7s spin;
+}
+</style>

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

@@ -58,6 +58,8 @@ export default {
 			defineAsyncComponent(() => import("@/components/configurationComponents/peerCreate.vue")),
 		PeerQRCode:
 			defineAsyncComponent(() => import("@/components/configurationComponents/peerQRCode.vue")),
+		PeerConfigurationFile:
+			defineAsyncComponent(() => import("@/components/configurationComponents/peerConfigurationFile.vue")),
 		PeerSettings:
 			defineAsyncComponent(() => import("@/components/configurationComponents/peerSettings.vue")), 
 		PeerSearch, 
@@ -116,6 +118,10 @@ export default {
 				modalOpen: false,
 				peerConfigData: undefined
 			},
+			peerConfigurationFile: {
+				modalOpen: false,
+				peerConfigData: undefined
+			},
 			peerCreate: {
 				modalOpen: false
 			},
@@ -599,6 +605,7 @@ export default {
 					      @jobs="peerScheduleJobs.modalOpen = true; peerScheduleJobs.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
 					      @setting="peerSetting.modalOpen = true; peerSetting.selectedPeer = this.configurationPeers.find(x => x.id === peer.id)"
 					      @qrcode="(file) => {this.peerQRCode.peerConfigData = file; this.peerQRCode.modalOpen = true;}"
+					      @configurationFile="(file) => {this.peerConfigurationFile.peerConfigData = file; this.peerConfigurationFile.modalOpen = true;}"
 					></Peer>
 				</div>
 			</TransitionGroup>
@@ -675,6 +682,13 @@ export default {
 				@refreshPeersList="this.getPeers()"
 				v-if="backupRestore.modalOpen"></ConfigurationBackupRestore>
 		</Transition>
+		<Transition name="zoom">
+			<PeerConfigurationFile
+				@close="peerConfigurationFile.modalOpen = false"
+				v-if="peerConfigurationFile.modalOpen"
+				:configurationFile="peerConfigurationFile.peerConfigData"
+			></PeerConfigurationFile>
+		</Transition>
 	</div>
 </template>
 

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

@@ -40,12 +40,12 @@ export default {
 				}
 			})
 		},
-		downloadQRCode(){
+		downloadQRCode(emit){
 			fetchGet("/api/downloadPeer/"+this.$route.params.id, {
 				id: this.Peer.id
 			}, (res) => {
 				if (res.status){
-					this.$emit("qrcode", res.data.file)					
+					this.$emit(emit, res.data.file)					
 				}else{
 					this.dashboardStore.newMessage("Server", res.message, "danger")
 				}
@@ -108,7 +108,6 @@ export default {
 							<LocaleText t="Download & QR Code is not available due to no private key set for this peer"></LocaleText>
 						</small>
 					</li>
-
 				</template>
 				<template v-else>
 					<li class="d-flex" style="padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
@@ -116,9 +115,13 @@ export default {
 							<i class="me-auto bi bi-download"></i>
 						</a>
 						<a class="dropdown-item text-center px-0 rounded-3" role="button"
-						   @click="this.downloadQRCode()">
+						   @click="this.downloadQRCode('qrcode')">
 							<i class="me-auto bi bi-qr-code"></i>
 						</a>
+						<a class="dropdown-item text-center px-0 rounded-3" role="button"
+						   @click="this.downloadQRCode('configurationFile')">
+							<i class="me-auto bi bi-body-text"></i>
+						</a>
 						<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.$emit('share')">
 							<i class="me-auto bi bi-share"></i>
 						</a>