load detour tags

frontend/src/components/Dial.vue

@@ -2,10 +2,12 @@
   <v-card subtitle="Dial" style="background-color: inherit;">
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
-        label="Forward to Outbound tag"
-        hide-details
-        v-model="dial.detour"></v-text-field>
+        <v-select
+          hide-details
+          label="Forward to Outbound tag"
+          :items="outTags"
+          v-model="dial.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionBind">
         <v-text-field
@@ -133,7 +135,7 @@
 
 <script lang="ts">
 export default {
-  props: ['dial'],
+  props: ['dial', 'outTags'],
   data() {
     return {
       menu: false
@@ -154,7 +156,7 @@ export default {
     },
     optionDetour: {
       get(): boolean { return this.$props.dial.detour != undefined },
-      set(v:boolean) { v ? this.$props.dial.detour = '' : delete this.$props.dial.detour }
+      set(v:boolean) { v ? this.$props.dial.detour = this.outTags[0]?? '' : delete this.$props.dial.detour }
     },
     optionBind: {
       get(): boolean { return this.$props.dial.bind_interface != undefined },

frontend/src/components/Listen.vue

@@ -20,10 +20,12 @@
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
-        label="Forward to Inbound tag"
+        <v-select
+        label="Detour"
         hide-details
-        v-model="inbound.detour"></v-text-field>
+        :items="inTags"
+        v-model="inbound.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-switch v-model="inbound.sniff" color="primary" :label="$t('in.sniffing')" hide-details></v-switch>
@@ -106,7 +108,7 @@
 
 <script lang="ts">
 export default {
-  props: ['inbound'],
+  props: ['inbound', 'inTags'],
   data() {
     return {
       menu: false
@@ -143,7 +145,7 @@ export default {
     },
     optionDetour: {
       get(): boolean { return this.$props.inbound.detour != undefined },
-      set(v:boolean) { this.$props.inbound.detour = v ? '' : undefined }
+      set(v:boolean) { this.$props.inbound.detour = v ? this.inTags[0]?? '' : undefined }
     },
     optionDS: {
       get(): boolean { return this.$props.inbound.domain_strategy != undefined },

frontend/src/components/protocols/ShadowTls.vue

@@ -9,11 +9,11 @@
           v-model="version">
         </v-select>
       </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="inbound.password != undefined">
+      <v-col cols="12" sm="6" md="4" v-if="data.password != undefined">
         <v-text-field
         label="Password"
         hide-details
-        v-model="inbound.password">
+        v-model="data.password">
         </v-text-field>
       </v-col>
     </v-row>
@@ -35,7 +35,7 @@
         </v-text-field>
       </v-col>
     </v-row>
-    <Dial :dial="Inbound.handshake" />
+    <Dial :dial="Inbound.handshake" :outTags="outTags" />
     <v-row v-if="Inbound.handshake_for_server_name != undefined">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
@@ -82,7 +82,7 @@
           </v-text-field>
         </v-col>
       </v-row>
-      <Dial :dial="value" />
+      <Dial :dial="value" :outTags="outTags" />
     </v-card>
   </v-card>
 </template>
@@ -92,7 +92,7 @@ import { ShadowTLS } from '@/types/inbounds'
 import Dial from '../Dial.vue'
 
 export default {
-  props: ['inbound'],
+  props: ['data', 'outTags'],
   data() {
     return {
       handshake_server: ''
@@ -100,7 +100,7 @@ export default {
   },
   methods: {
     addHandshakeServer() {
-      this.inbound.handshake_for_server_name[this.handshake_server] = {}
+      this.data.handshake_for_server_name[this.handshake_server] = {}
       // Clear the input field after adding the server
       this.handshake_server = ''
     }
@@ -141,7 +141,7 @@ export default {
       }
     },
     Inbound(): ShadowTLS {
-      return <ShadowTLS>this.$props.inbound;
+      return <ShadowTLS>this.$props.data;
     },
     server_port: {
       get() { return this.Inbound.handshake.server_port ? this.Inbound.handshake.server_port : 443; },