support for raw-wireguard and wg-quick style peer configurations (#441) (#473)

This commit is contained in:
h44z
2025-06-29 19:47:53 +02:00
committed by GitHub
parent dd28a8dddf
commit f08740991b
14 changed files with 149 additions and 51 deletions

View File

@@ -50,7 +50,7 @@ const selectedStats = computed(() => {
if (!s) {
if (!!props.peerId || props.peerId.length) {
p = profile.Statistics(props.peerId)
s = profile.Statistics(props.peerId)
} else {
s = freshStats() // dummy stats to avoid 'undefined' exceptions
}
@@ -79,13 +79,19 @@ const title = computed(() => {
}
})
const configStyle = ref("wgquick")
watch(() => props.visible, async (newValue, oldValue) => {
if (oldValue === false && newValue === true) { // if modal is shown
await peers.LoadPeerConfig(selectedPeer.value.Identifier)
await peers.LoadPeerConfig(selectedPeer.value.Identifier, configStyle.value)
configString.value = peers.configuration
}
}
)
})
watch(() => configStyle.value, async () => {
await peers.LoadPeerConfig(selectedPeer.value.Identifier, configStyle.value)
configString.value = peers.configuration
})
function download() {
// credit: https://www.bitdegree.org/learn/javascript-download
@@ -103,7 +109,7 @@ function download() {
}
function email() {
peers.MailPeerConfig(settings.Setting("MailLinkOnly"), [selectedPeer.value.Identifier]).catch(e => {
peers.MailPeerConfig(settings.Setting("MailLinkOnly"), configStyle.value, [selectedPeer.value.Identifier]).catch(e => {
notify({
title: "Failed to send mail with peer configuration!",
text: e.toString(),
@@ -114,7 +120,7 @@ function email() {
function ConfigQrUrl() {
if (props.peerId.length) {
return apiWrapper.url(`/peer/config-qr/${base64_url_encode(props.peerId)}`)
return apiWrapper.url(`/peer/config-qr/${base64_url_encode(props.peerId)}?style=${configStyle.value}`)
}
return ''
}
@@ -124,6 +130,15 @@ function ConfigQrUrl() {
<template>
<Modal :title="title" :visible="visible" @close="close">
<template #default>
<div class="d-flex justify-content-end align-items-center mb-1">
<span class="me-2">{{ $t('modals.peer-view.style-label') }}: </span>
<div class="btn-group btn-switch-group" role="group" aria-label="Configuration Style">
<input type="radio" class="btn-check" name="configstyle" id="raw" value="raw" autocomplete="off" checked="" v-model="configStyle">
<label class="btn btn-outline-primary btn-sm" for="raw">Raw</label>
<input type="radio" class="btn-check" name="configstyle" id="wgquick" value="wgquick" autocomplete="off" checked="" v-model="configStyle">
<label class="btn btn-outline-primary btn-sm" for="wgquick">WG-Quick</label>
</div>
</div>
<div class="accordion" id="peerInformation">
<div class="accordion-item">
<h2 class="accordion-header">
@@ -213,6 +228,14 @@ function ConfigQrUrl() {
</template>
</Modal></template>
<style>.config-qr-img {
<style>
.config-qr-img {
max-width: 100%;
}</style>
}
.btn-switch-group .btn {
border-width: 1px;
padding: 5px;
line-height: 1;
}
</style>

View File

@@ -467,7 +467,8 @@
"connected-since": "Verbunden seit",
"endpoint": "Endpunkt",
"button-download": "Konfiguration herunterladen",
"button-email": "Konfiguration per E-Mail senden"
"button-email": "Konfiguration per E-Mail senden",
"style-label": "Konfigurationsformat"
},
"peer-edit": {
"headline-edit-peer": "Peer bearbeiten:",

View File

@@ -468,7 +468,8 @@
"connected-since": "Connected since",
"endpoint": "Endpoint",
"button-download": "Download configuration",
"button-email": "Send configuration via E-Mail"
"button-email": "Send configuration via E-Mail",
"style-label": "Configuration Style"
},
"peer-edit": {
"headline-edit-peer": "Edit peer:",

View File

@@ -142,8 +142,8 @@ export const peerStore = defineStore('peers', {
})
})
},
async MailPeerConfig(linkOnly, ids) {
return apiWrapper.post(`${baseUrl}/config-mail`, {
async MailPeerConfig(linkOnly, style, ids) {
return apiWrapper.post(`${baseUrl}/config-mail?style=${style}`, {
Identifiers: ids,
LinkOnly: linkOnly
})
@@ -158,8 +158,8 @@ export const peerStore = defineStore('peers', {
throw new Error(error)
})
},
async LoadPeerConfig(id) {
return apiWrapper.get(`${baseUrl}/config/${base64_url_encode(id)}`)
async LoadPeerConfig(id, style) {
return apiWrapper.get(`${baseUrl}/config/${base64_url_encode(id)}?style=${style}`)
.then(this.setPeerConfig)
.catch(error => {
this.configuration = ""