option warp endpoint #345

frontend/src/components/protocols/Warp.vue

@@ -0,0 +1,152 @@
+<template>
+  <v-card subtitle="Warp">
+    <template v-if="data.id>0">
+      <table dir="ltr" width="100%">
+        <tr>
+          <td>Device ID</td>
+          <td>{{ data.ext.device_id }}</td>
+        </tr>
+        <tr>
+          <td>Access Token</td>
+          <td>{{ data.ext.access_token }}</td>
+        </tr>
+        <tr>
+          <td>{{ $t('types.wg.privKey') }}</td>
+          <td>{{ data.private_key }}</td>
+        </tr>
+        <tr>
+          <td>{{ $t('types.wg.localIp') }}</td>
+          <td>{{ data.address.join(',') }}</td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <v-text-field
+              v-model="data.ext.license_key"
+              label="License Key"
+              hide-details>
+            </v-text-field>
+          </td>
+        </tr>
+      </table>
+      <v-card :subtitle="$t('types.wg.peer')">
+        <table dir="ltr" width="100%">
+          <tr>
+            <td>{{ $t('out.addr') }}</td>
+            <td>{{ data.peers[0].address + ":" + data.peers[0].port }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('types.wg.pubKey') }}</td>
+            <td>{{ data.peers[0].public_key }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('types.wg.allowedIp') }}</td>
+            <td>{{ data.peers[0].allowed_ips.join(',') }}</td>
+          </tr>
+          <tr>
+            <td>Reserved</td>
+            <td>[{{ data.peers[0].reserved.join(',') }}]</td>
+          </tr>
+        </table>
+      </v-card>
+    </template>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="data.udp_timeout != undefined">
+        <v-text-field
+          label="UDP Timeout"
+          hide-details
+          type="number"
+          min=0
+          :suffix="$t('date.m')"
+          v-model.number="udp_timeout">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.workers != undefined">
+        <v-text-field
+        :label="$t('types.wg.worker')"
+          hide-details
+          type="number"
+          min=1
+          v-model.number="data.workers">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.mtu != undefined">
+        <v-text-field
+          label="MTU"
+          hide-details
+          type="number"
+          min=0
+          v-model.number="data.mtu">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <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.system">
+        <v-text-field
+          :label="$t('types.wg.ifName')"
+          hide-details
+          v-model="ifName">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.wg.options') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="optionUdp" color="primary" label="UDP Timeout" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionWorker" color="primary" :label="$t('types.wg.worker')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionMtu" color="primary" label="MTU" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      menu: false,
+    }
+  },
+  methods: {
+  },
+  computed: {
+    optionUdp: {
+      get(): boolean { return this.$props.data.udp_timeout != undefined },
+      set(v:boolean) { this.$props.data.udp_timeout = v ? "5m" : undefined }
+    },
+    optionWorker: {
+      get(): boolean { return this.$props.data.workers != undefined },
+      set(v:boolean) { this.$props.data.workers = v ? 2 : undefined }
+    },
+    optionMtu: {
+      get(): boolean { return this.$props.data.mtu != undefined },
+      set(v:boolean) { this.$props.data.mtu = v ? 1408 : undefined }
+    },
+    ifName: {
+      get() { return this.$props.data.name?? '' },
+      set(v:string) { this.$props.data.name = v.length > 0 ? v : undefined }
+    },
+    udp_timeout: {
+      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>

frontend/src/layouts/modals/Endpoint.vue

@@ -21,6 +21,7 @@
           </v-col>
         </v-row>
         <Wireguard v-if="endpoint.type == epTypes.Wireguard" :data="endpoint" :options="options" @getWgPubKey="getWgPubKey" @newWgKey="newWgKey" />
+        <Warp v-if="endpoint.type == epTypes.Warp" :data="endpoint" />
         <Dial :dial="endpoint" :outTags="tags" />
       </v-card-text>
       <v-card-actions>
@@ -50,6 +51,7 @@ import { EpTypes, createEndpoint } from '@/types/endpoints'
 import RandomUtil from '@/plugins/randomUtil'
 import Dial from '@/components/Dial.vue'
 import Wireguard from '@/components/protocols/Wireguard.vue'
+import Warp from '@/components/protocols/Warp.vue'
 import HttpUtils from '@/plugins/httputil'
 import { push } from 'notivue'
 import { i18n } from '@/locales'
@@ -151,6 +153,6 @@ export default {
       }
     },
   },
-  components: { Dial, Wireguard }
+  components: { Dial, Wireguard, Warp }
 }
 </script>

frontend/src/types/endpoints.ts

@@ -2,6 +2,7 @@ import { Dial } from "./outbounds"
 
 export const EpTypes = {
   Wireguard: 'wireguard',
+  Warp: 'warp',
 }
 
 type EpType = typeof EpTypes[keyof typeof EpTypes]
@@ -34,6 +35,10 @@ export interface WireGuard extends EndpointBasics, Dial {
   workers?: number
 }
 
+export interface Warp extends WireGuard {
+  ext: any
+}
+
 // Create interfaces dynamically based on EpTypes keys
 type InterfaceMap = {
   [Key in keyof typeof EpTypes]: {
@@ -48,6 +53,7 @@ export type Endpoint = InterfaceMap[keyof InterfaceMap]
 // Create defaultValues object dynamically
 const defaultValues: Record<EpType, Endpoint> = {
   wireguard: { type: EpTypes.Wireguard, address: ['10.0.0.2/32','fe80::2/128'], private_key: '', listen_port: 0, peers: [{ address: '', port: 0, public_key: ''}] },
+  warp: { type: EpTypes.Warp, address: [], private_key: '', listen_port: 0, mtu: 1420, peers: [{ address: '', port: 0, public_key: ''}] },
 }
 
 export function createEndpoint<T extends Endpoint>(type: string,json?: Partial<T>): Endpoint {

frontend/src/views/Endpoints.vue

@@ -38,7 +38,7 @@
           <v-row>
             <v-col>{{ $t('in.port') }}</v-col>
             <v-col>
-              {{ item.listen_port?? '-' }}
+              {{ item.listen_port>0 ? item.listen_port : '-' }}
             </v-col>
           </v-row>
           <v-row>

frontend/src/views/Rules.vue

@@ -223,7 +223,7 @@ const outboundTags = computed((): string[] => {
 })
 
 const inboundTags = computed((): string[] => {
-  return [...Data().inbounds?.map((o:any) => o.tag), ...Data().endpoints?.map((e:any) => e.tag)]
+  return [...Data().inbounds?.map((o:any) => o.tag), ...Data().endpoints?.filter((e:any) => e.listen_port > 0).map((e:any) => e.tag)]
 })
 
 let delRuleOverlay = ref(new Array<boolean>)