add tun inbound #207

frontend/src/components/Listen.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card :subtitle="$t('objects.listen')">
-    <v-row>
+    <v-row v-if="inbound.type != 'tun'">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
         :label="$t('in.addr')"
@@ -78,7 +78,7 @@
           </v-select>
       </v-col>
     </v-row>
-    <v-card-actions class="pt-0">
+    <v-card-actions class="pt-0" v-if="inbound.type != 'tun'">
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start">
         <template v-slot:activator="{ props }">

frontend/src/components/protocols/Tun.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-card subtitle="Tun">
+    <v-row>
+      <v-col cols="12" sm="8">
+        <v-text-field v-model="addrs" :label="$t('types.tun.addr') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.interface_name" :label="$t('types.tun.ifName')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field type="number" v-model.number="data.mtu" label="MTU" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+          type="number"
+          v-model.number="udpTimeout"
+          label="UDP timeout"
+          min="1"
+          :suffix="$t('date.m')"
+          hide-details>
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          v-model="data.stack"
+          label="Stack"
+          :items="['system','gvisor','mixed']"
+          hide-details
+        ></v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.endpoint_independent_nat" color="primary" label="Independent NAT" hide-details></v-switch>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      menu: false
+    }
+  },
+  computed: {
+    addrs: {
+      get() { return this.$props.data.address?.join(',') },
+      set(v:string) { this.$props.data.address = v.length > 0 ? v.split(',') : undefined }
+    },
+    udpTimeout: {
+      get() { return this.$props.data.udp_timeout ? parseInt(this.$props.data.udp_timeout.replace('m','')) : 5 },
+      set(v:number) { this.$props.data.udp_timeout = v > 0 ? v + 'm' : '5m' }
+    }
+  },
+}
+</script>