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(',') },

frontend/src/layouts/modals/Endpoint.vue

@@ -20,7 +20,7 @@
             <v-text-field v-model="endpoint.tag" :label="$t('objects.tag')" hide-details></v-text-field>
           </v-col>
         </v-row>
-        <Wireguard v-if="endpoint.type == epTypes.Wireguard" :data="endpoint" @newWgKey="newWgKey" />
+        <Wireguard v-if="endpoint.type == epTypes.Wireguard" :data="endpoint" :options="options" @getWgPubKey="getWgPubKey" @newWgKey="newWgKey" />
         <Dial :dial="endpoint" :outTags="tags" />
       </v-card-text>
       <v-card-actions>
@@ -61,9 +61,9 @@ export default {
       endpoint: createEndpoint("wireguard",{ "tag": "" }),
       title: "add",
       tab: "t1",
-      link: "",
       loading: false,
       epTypes: EpTypes,
+      options: <any>{},
     }
   },
   methods: {
@@ -71,21 +71,24 @@ export default {
       if (this.$props.id > 0) {
         const newData = JSON.parse(this.$props.data)
         this.endpoint = createEndpoint(newData.type, newData)
+        this.options = {}
         this.title = "edit"
       }
       else {
         const port = RandomUtil.randomIntRange(10000, 60000)
         const randomIPoctet = RandomUtil.randomIntRange(1, 255)
+        const wgKeys = (await this.genWgKey())
         this.endpoint = createEndpoint("wireguard",{
           tag: "wireguard-" + RandomUtil.randomSeq(3),
           address: ['10.0.0.'+ randomIPoctet.toString() +'/32','fe80::'+ randomIPoctet.toString(16) +'/128'],
           listen_port: port,
-          private_key: (await this.genWgKey()).private_key,
+          private_key: wgKeys.private_key,
           peers: [{
             public_key: (await this.genWgKey()).public_key,
             allowed_ips: ['0.0.0.0/0', '::/0']
           }]
         })
+        this.options.public_key = wgKeys.public_key
         this.title = "add"
       }
       this.tab = "t1"
@@ -130,11 +133,20 @@ export default {
     async newWgKey(){
       const newKeys = await this.genWgKey()
       this.endpoint.private_key = newKeys.private_key
+      this.options.public_key = newKeys.public_key
+    },
+    async getWgPubKey(private_key: string) {
+      this.loading = true
+      const msg = await HttpUtils.get('api/keypairs', { k: "wireguard", o: private_key })
+      if (msg.success) {
+        this.options.public_key = msg.obj        
+      }
+      this.loading = false
     }
   },
   watch: {
-    visible(newValue) {
-      if (newValue) {
+    visible(v) {
+      if (v) {
         this.updateData()
       }
     },