prepare frontend for different WireGuard backends (#426)

2025-10-04 07:26:18 +00:00 · 2025-05-18 19:49:31 +02:00
parent 7fd2bbad02
commit 33dcc80078
17 changed files with 154 additions and 27 deletions
--- a/frontend/src/components/InterfaceEditModal.vue
+++ b/frontend/src/components/InterfaceEditModal.vue
@@ -10,11 +10,13 @@ import isCidr from "is-cidr";
 import {isIP} from 'is-ip';
 import { freshInterface } from '@/helpers/models';
 import {peerStore} from "@/stores/peers";
+import {settingsStore} from "@/stores/settings";

 const { t } = useI18n()

 const interfaces = interfaceStore()
 const peers = peerStore()
+const settings = settingsStore()

 const props = defineProps({
  interfaceId: String,
@@ -314,13 +316,21 @@ async function del() {
              <label class="form-label mt-4">{{ $t('modals.interface-edit.identifier.label') }}</label>
              <input v-model="formData.Identifier" class="form-control" :placeholder="$t('modals.interface-edit.identifier.placeholder')" type="text">
            </div>
-            <div class="form-group">
-              <label class="form-label mt-4">{{ $t('modals.interface-edit.mode.label') }}</label>
-              <select v-model="formData.Mode" class="form-select">
-                <option value="server">{{ $t('modals.interface-edit.mode.server') }}</option>
-                <option value="client">{{ $t('modals.interface-edit.mode.client') }}</option>
-                <option value="any">{{ $t('modals.interface-edit.mode.any') }}</option>
-              </select>
+            <div class="row">
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.mode.label') }}</label>
+                <select v-model="formData.Mode" class="form-select">
+                  <option value="server">{{ $t('modals.interface-edit.mode.server') }}</option>
+                  <option value="client">{{ $t('modals.interface-edit.mode.client') }}</option>
+                  <option value="any">{{ $t('modals.interface-edit.mode.any') }}</option>
+                </select>
+              </div>
+              <div class="form-group col-md-6">
+                <label class="form-label mt-4">{{ $t('modals.interface-edit.backend.label') }}</label>
+                <select v-model="formData.Backend" class="form-select">
+                  <option v-for="backend in settings.Setting('AvailableBackends')" :value="backend.Id">{{ backend.Id === 'local' ? $t(backend.Name) : backend.Name }}</option>
+                </select>
+              </div>
            </div>
            <div class="form-group">
              <label class="form-label mt-4">{{ $t('modals.interface-edit.display-name.label') }}</label>
@@ -385,12 +395,14 @@ async function del() {
                <label class="form-label mt-4">{{ $t('modals.interface-edit.mtu.label') }}</label>
                <input v-model="formData.Mtu" class="form-control" :placeholder="$t('modals.interface-edit.mtu.placeholder')" type="number">
              </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6" v-if="formData.Backend==='local'">
                <label class="form-label mt-4">{{ $t('modals.interface-edit.firewall-mark.label') }}</label>
                <input v-model="formData.FirewallMark" class="form-control" :placeholder="$t('modals.interface-edit.firewall-mark.placeholder')" type="number">
              </div>
+              <div class="form-group col-md-6" v-else>
+              </div>
            </div>
-            <div class="row">
+            <div class="row" v-if="formData.Backend==='local'">
              <div class="form-group col-md-6">
                <label class="form-label mt-4">{{ $t('modals.interface-edit.routing-table.label') }}</label>
                <input v-model="formData.RoutingTable" aria-describedby="routingTableHelp" class="form-control" :placeholder="$t('modals.interface-edit.routing-table.placeholder')" type="text">
--- a/frontend/src/helpers/models.js
+++ b/frontend/src/helpers/models.js
@@ -5,6 +5,7 @@ export function freshInterface() {
    DisplayName: "",
    Identifier: "",
    Mode: "server",
+    Backend: "local",

    PublicKey: "",
    PrivateKey: "",
--- a/frontend/src/lang/translations/de.json
+++ b/frontend/src/lang/translations/de.json
@@ -102,7 +102,7 @@
    },
    "interface": {
      "headline": "Schnittstellenstatus für",
-      "mode": "Modus",
+      "backend": "Backend",
      "key": "Öffentlicher Schlüssel",
      "endpoint": "Öffentlicher Endpunkt",
      "port": "Port",
--- a/frontend/src/lang/translations/en.json
+++ b/frontend/src/lang/translations/en.json
@@ -102,7 +102,7 @@
    },
    "interface": {
      "headline": "Interface status for",
-      "mode": "mode",
+      "backend": "Backend",
      "key": "Public Key",
      "endpoint": "Public Endpoint",
      "port": "Listening Port",
@@ -357,6 +357,10 @@
        "client": "Client Mode",
        "any": "Unknown Mode"
      },
+      "backend": {
+        "label": "Interface Backend",
+        "local": "Local WireGuard Backend"
+      },
      "display-name": {
        "label": "Display Name",
        "placeholder": "The descriptive name for the interface"
--- a/frontend/src/lang/translations/fr.json
+++ b/frontend/src/lang/translations/fr.json
@@ -99,7 +99,7 @@
    },
    "interface": {
      "headline": "État de l'interface pour",
-      "mode": "mode",
+      "backend": "backend",
      "key": "Clé publique",
      "endpoint": "Point de terminaison public",
      "port": "Port d'écoute",
--- a/frontend/src/lang/translations/ko.json
+++ b/frontend/src/lang/translations/ko.json
@@ -100,7 +100,7 @@
      },
      "interface": {
        "headline": "인터페이스 상태:",
-        "mode": "모드",
+        "backend": "백엔드",
        "key": "공개 키",
        "endpoint": "공개 엔드포인트",
        "port": "수신 포트",
--- a/frontend/src/lang/translations/pt.json
+++ b/frontend/src/lang/translations/pt.json
@@ -101,7 +101,7 @@
    },
    "interface": {
      "headline": "Status da interface para",
-      "mode": "modo",
+      "mode": "backend",
      "key": "Chave Pública",
      "endpoint": "Endpoint Público",
      "port": "Porta de Escuta",
--- a/frontend/src/lang/translations/ru.json
+++ b/frontend/src/lang/translations/ru.json
@@ -99,7 +99,7 @@
    },
    "interface": {
      "headline": "Статус интерфейса для",
-      "mode": "режим",
+      "backend": "бэкэнд",
      "key": "Публичный ключ",
      "endpoint": "Публичная конечная точка",
      "port": "Порт прослушивания",
--- a/frontend/src/lang/translations/uk.json
+++ b/frontend/src/lang/translations/uk.json
@@ -99,7 +99,7 @@
    },
    "interface": {
      "headline": "Статус інтерфейсу для",
-      "mode": "режим",
+      "backend": "бекенд",
      "key": "Публічний ключ",
      "endpoint": "Публічна кінцева точка",
      "port": "Порт прослуховування",
--- a/frontend/src/lang/translations/vi.json
+++ b/frontend/src/lang/translations/vi.json
@@ -98,7 +98,7 @@
    },
    "interface": {
      "headline": "Trạng thái giao diện cho",
-      "mode": "chế độ",
+      "backend": "phần sau",
      "key": "Khóa Công khai",
      "endpoint": "Điểm cuối Công khai",
      "port": "Cổng Nghe",
--- a/frontend/src/lang/translations/zh.json
+++ b/frontend/src/lang/translations/zh.json
@@ -98,7 +98,7 @@
      },
      "interface": {
        "headline": "接口状态",
-        "mode": "模式",
+        "backend": "后端",
        "key": "公钥",
        "endpoint": "公开节点",
        "port": "监听端口",
--- a/frontend/src/views/InterfaceView.vue
+++ b/frontend/src/views/InterfaceView.vue
@@ -5,17 +5,20 @@ import PeerMultiCreateModal from "../components/PeerMultiCreateModal.vue";
 import InterfaceEditModal from "../components/InterfaceEditModal.vue";
 import InterfaceViewModal from "../components/InterfaceViewModal.vue";

-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {peerStore} from "@/stores/peers";
 import {interfaceStore} from "@/stores/interfaces";
 import {notify} from "@kyvg/vue3-notification";
 import {settingsStore} from "@/stores/settings";
 import {humanFileSize} from '@/helpers/utils';
+import {useI18n} from "vue-i18n";

 const settings = settingsStore()
 const interfaces = interfaceStore()
 const peers = peerStore()

+const { t } = useI18n()
+
 const viewedPeerId = ref("")
 const editPeerId = ref("")
 const multiCreatePeerId = ref("")
@@ -45,6 +48,20 @@ function calculateInterfaceName(id, name) {
  return result
 }

+const calculateBackendName = computed(() => {
+  let backendId = interfaces.GetSelected.Backend
+
+  let backendName = "Unknown"
+  let availableBackends = settings.Setting('AvailableBackends') || []
+  availableBackends.forEach(backend => {
+    if (backend.Id === backendId) {
+      backendName = backend.Id === 'local' ? t(backend.Name) : backend.Name
+    }
+  })
+  return backendName
+})
+
+
 async function download() {
  await interfaces.LoadInterfaceConfig(interfaces.GetSelected.Identifier)

@@ -141,7 +158,7 @@ onMounted(async () => {
        <div class="card-header">
          <div class="row">
            <div class="col-12 col-lg-8">
-              {{ $t('interfaces.interface.headline') }} <strong>{{interfaces.GetSelected.Identifier}}</strong> ({{interfaces.GetSelected.Mode}} {{ $t('interfaces.interface.mode') }})
+              {{ $t('interfaces.interface.headline') }} <strong>{{interfaces.GetSelected.Identifier}}</strong> ({{ $t('modals.interface-edit.mode.' + interfaces.GetSelected.Mode )}} | {{ $t('interfaces.interface.backend') + ": " + calculateBackendName }})
              <span v-if="interfaces.GetSelected.Disabled" class="text-danger"><i class="fa fa-circle-xmark" :title="interfaces.GetSelected.DisabledReason"></i></span>
            </div>
            <div class="col-12 col-lg-4 text-lg-end">