visualize invalid backend selections (#426)

frontend/src/components/InterfaceEditModal.vue

@@ -51,6 +51,23 @@ const currentTags = ref({
 })
 const formData = ref(freshInterface())
 
+const isBackendValid = computed(() => {
+  if (!props.visible || !selectedInterface.value) {
+    return true // if modal is not visible or no interface is selected, we don't care about backend validity
+  }
+
+  let backendId = selectedInterface.value.Backend
+
+  let valid = false
+  let availableBackends = settings.Setting('AvailableBackends') || []
+  availableBackends.forEach(backend => {
+    if (backend.Id === backendId) {
+      valid = true
+    }
+  })
+  return valid
+})
+
 // functions
 
 watch(() => props.visible, async (newValue, oldValue) => {
@@ -326,10 +343,11 @@ async function del() {
                 </select>
               </div>
               <div class="form-group col-md-6">
-                <label class="form-label mt-4">{{ $t('modals.interface-edit.backend.label') }}</label>
+                <label class="form-label mt-4" for="ifaceBackendSelector">{{ $t('modals.interface-edit.backend.label') }}</label>
-                <select v-model="formData.Backend" class="form-select">
+                <select id="ifaceBackendSelector" v-model="formData.Backend" class="form-select" aria-describedby="backendHelp">
                   <option v-for="backend in settings.Setting('AvailableBackends')" :value="backend.Id">{{ backend.Id === 'local' ? $t(backend.Name) : backend.Name }}</option>
                 </select>
+                <small v-if="!isBackendValid" id="backendHelp" class="form-text text-warning">{{ $t('modals.interface-edit.backend.invalid-label') }}</small>
               </div>
             </div>
             <div class="form-group">

frontend/src/lang/translations/de.json

@@ -103,6 +103,8 @@
     "interface": {
       "headline": "Schnittstellenstatus für",
       "backend": "Backend",
+      "unknown-backend": "Unbekannt",
+      "wrong-backend": "Ungültiges Backend, das lokale WireGuard Backend wird stattdessen verwendet!",
       "key": "Öffentlicher Schlüssel",
       "endpoint": "Öffentlicher Endpunkt",
       "port": "Port",
@@ -357,6 +359,11 @@
         "client": "Client-Modus",
         "any": "Unbekannter Modus"
       },
+      "backend": {
+        "label": "Schnittstellenbackend",
+        "invalid-label": "Ursprüngliches Backend ist ungültig, das lokale WireGuard Backend wird stattdessen verwendet!",
+        "local": "Lokales WireGuard Backend"
+      },
       "display-name": {
         "label": "Anzeigename",
         "placeholder": "Der beschreibende Name für die Schnittstelle"

frontend/src/lang/translations/en.json

@@ -103,6 +103,8 @@
     "interface": {
       "headline": "Interface status for",
       "backend": "Backend",
+      "unknown-backend": "Unknown",
+      "wrong-backend": "Invalid backend, using local WireGuard backend instead!",
       "key": "Public Key",
       "endpoint": "Public Endpoint",
       "port": "Listening Port",
@@ -359,6 +361,7 @@
       },
       "backend": {
         "label": "Interface Backend",
+        "invalid-label": "Original backend is no longer available, using local WireGuard backend instead!",
         "local": "Local WireGuard Backend"
       },
       "display-name": {

frontend/src/views/InterfaceView.vue

@@ -51,7 +51,7 @@ function calculateInterfaceName(id, name) {
 const calculateBackendName = computed(() => {
   let backendId = interfaces.GetSelected.Backend
 
-  let backendName = "Unknown"
+  let backendName = t('interfaces.interface.unknown-backend')
   let availableBackends = settings.Setting('AvailableBackends') || []
   availableBackends.forEach(backend => {
     if (backend.Id === backendId) {
@@ -61,6 +61,19 @@ const calculateBackendName = computed(() => {
   return backendName
 })
 
+const isBackendValid = computed(() => {
+  let backendId = interfaces.GetSelected.Backend
+
+  let valid = false
+  let availableBackends = settings.Setting('AvailableBackends') || []
+  availableBackends.forEach(backend => {
+    if (backend.Id === backendId) {
+      valid = true
+    }
+  })
+  return valid
+})
+
 
 async function download() {
   await interfaces.LoadInterfaceConfig(interfaces.GetSelected.Identifier)
@@ -158,7 +171,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> ({{ $t('modals.interface-edit.mode.' + interfaces.GetSelected.Mode )}} | {{ $t('interfaces.interface.backend') + ": " + calculateBackendName }})
+              {{ $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="!isBackendValid" :title="t('interfaces.interface.wrong-backend')" class="ms-1 me-1"><i class="fa-solid fa-triangle-exclamation"></i></span>)
               <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">