fix wireguard and peer data types

frontend/src/components/WgPeer.vue

@@ -13,7 +13,7 @@
       type="number"
       min="0"
       hide-details
-      v-model="port">
+      v-model.number="port">
       </v-text-field>
     </v-col>
     <v-col cols="12" sm="6" md="4">
@@ -21,8 +21,9 @@
       label="KeepAlive"
       type="number"
       min="0"
+      :suffix="$t('date.s')"
       hide-details
-      v-model="data.persistent_keepalive_interval">
+      v-model.number="keepAlive">
       </v-text-field>
     </v-col>
   </v-row>
@@ -72,6 +73,10 @@ export default {
     port: {
       get() { return this.$props.data.port },
       set(v:number) { this.$props.data.port = v > 0 ? v : undefined }
+    },
+    keepAlive: {
+      get() { return this.$props.data.persistent_keepalive_interval?? 0 },
+      set(v:number) { this.$props.data.persistent_keepalive_interval = v > 0 ? v : undefined }
     }
   }
 }

frontend/src/components/protocols/Wireguard.vue

@@ -10,6 +10,16 @@
           hide-details>
         </v-text-field>
       </v-col>
+      <v-col cols="12" sm="8">
+        <v-text-field
+          v-model="options.public_key"
+          disabled
+          :label="$t('tls.pubKey')"
+          append-icon="mdi-refresh"
+          @click:append="getWgPubKey()"
+          hide-details>
+        </v-text-field>
+      </v-col>
       <v-col cols="12" sm="8">
         <v-text-field v-model="address" :label="$t('types.wg.localIp') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
       </v-col>
@@ -59,11 +69,11 @@
       <v-col cols="12" sm="6" md="4">
         <v-switch v-model="data.system" color="primary" :label="$t('types.wg.sysIf')" hide-details></v-switch>
       </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="data.name != undefined">
+      <v-col cols="12" sm="6" md="4" v-if="data.system">
         <v-text-field
           :label="$t('types.wg.ifName')"
           hide-details
-          v-model="data.name">
+          v-model="ifName">
         </v-text-field>
       </v-col>
     </v-row>
@@ -84,9 +94,6 @@
             <v-list-item>
               <v-switch v-model="optionMtu" color="primary" label="MTU" hide-details></v-switch>
             </v-list-item>
-            <v-list-item>
-              <v-switch v-model="optionInterface" color="primary" :label="$t('types.wg.ifName')" hide-details></v-switch>
-            </v-list-item>
           </v-list>
         </v-card>
       </v-menu>
@@ -111,8 +118,8 @@
 import Peer from '@/components/WgPeer.vue'
 
 export default {
-  props: ['data'],
-  emits: ["newWgKey"],
+  props: ['data', 'options'],
+  emits: ['newWgKey', 'getWgPubKey'],
   data() {
     return {
       menu: false,
@@ -125,6 +132,11 @@ export default {
     newKey() {
       this.$emit('newWgKey')
     },
+    getWgPubKey() {
+      const privKey = this.$props.data.private_key
+      if (privKey.length == 0) return
+      this.$emit('getWgPubKey', privKey)
+    },
   },
   computed: {
     optionUdp: {
@@ -143,9 +155,9 @@ export default {
       get(): boolean { return this.$props.data.mtu != undefined },
       set(v:boolean) { this.$props.data.mtu = v ? 1408 : undefined }
     },
-    optionInterface: {
-      get(): boolean { return this.$props.data.name != undefined },
-      set(v:boolean) { this.$props.data.name = v ? "" : undefined }
+    ifName: {
+      get() { return this.$props.data.name?? '' },
+      set(v:string) { this.$props.data.name = v.length > 0 ? v : undefined }
     },
     address: {
       get() { return this.$props.data.address?.join(',') },