inbound : finalmask

4 files changed, 120 insertions, 59 deletions

diff --git a/web/html/form/outbound.html b/web/html/form/outbound.html
index 074137f7..9ca0eab6 100644
--- a/web/html/form/outbound.html
+++ b/web/html/form/outbound.html
@@ -407,21 +407,6 @@
 
         <!-- kcp -->
         <template v-if="outbound.stream.network === 'kcp'">
-          <a-form-item label='{{ i18n "camouflage" }}'>
-            <a-select v-model="outbound.stream.kcp.type"
-              :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option value="none">None</a-select-option>
-              <a-select-option value="srtp">SRTP</a-select-option>
-              <a-select-option value="utp">uTP</a-select-option>
-              <a-select-option value="wechat-video">WeChat</a-select-option>
-              <a-select-option value="dtls">DTLS 1.2</a-select-option>
-              <a-select-option value="wireguard">WireGuard</a-select-option>
-              <a-select-option value="dns">DNS</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label='{{ i18n "password" }}'>
-            <a-input v-model="outbound.stream.kcp.seed"></a-input>
-          </a-form-item>
           <a-form-item label='MTU'>
             <a-input-number v-model.number="outbound.stream.kcp.mtu"
               min="0"></a-input-number>
@@ -607,7 +592,7 @@
       <template v-if="outbound.canEnableStream()">
         <a-form-item label="UDP Masks">
           <a-button icon="plus" type="primary" size="small"
-            @click="outbound.stream.addUdpMask(outbound.protocol === Protocols.Hysteria ? 'salamander' : 'mkcp-aes128gcm')"></a-button>
+            @click="outbound.stream.addUdpMask(outbound.protocol === Protocols.Hysteria ? 'salamander' : (outbound.stream.network === 'kcp' ? 'mkcp-aes128gcm' : 'xdns'))"></a-button>
         </a-form-item>
         <template
           v-if="outbound.stream.finalmask.udp && outbound.stream.finalmask.udp.length > 0">
@@ -623,25 +608,39 @@
               <a-select v-model="mask.type"
                 @change="(type) => mask.settings = mask._getDefaultSettings(type, {})"
                 :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-if="outbound.protocol === Protocols.Hysteria" value="salamander">
+                <!-- Salamander for Hysteria2 only -->
+                <a-select-option v-if="outbound.protocol === Protocols.Hysteria"
+                  value="salamander">
                   Salamander (Hysteria2)</a-select-option>
-                <a-select-option value="mkcp-aes128gcm">
+                <!-- mKCP-specific masks -->
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="mkcp-aes128gcm">
                   mKCP AES-128-GCM</a-select-option>
-                <a-select-option value="header-dns">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-dns">
                   Header DNS</a-select-option>
-                <a-select-option value="header-dtls">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-dtls">
                   Header DTLS 1.2</a-select-option>
-                <a-select-option value="header-srtp">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-srtp">
                   Header SRTP</a-select-option>
-                <a-select-option value="header-utp">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-utp">
                   Header uTP</a-select-option>
-                <a-select-option value="header-wechat">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-wechat">
                   Header WeChat Video</a-select-option>
-                <a-select-option value="header-wireguard">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="header-wireguard">
                   Header WireGuard</a-select-option>
-                <a-select-option value="mkcp-original">
+                <a-select-option v-if="outbound.stream.network === 'kcp'"
+                  value="mkcp-original">
                   mKCP Original</a-select-option>
-                <a-select-option value="xdns">
+                <!-- xDNS for TCP/WS/HTTPUpgrade/XHTTP -->
+                <a-select-option
+                  v-if="['tcp', 'ws', 'httpupgrade', 'xhttp'].includes(outbound.stream.network)"
+                  value="xdns">
                   xDNS (Experimental)</a-select-option>
               </a-select>
             </a-form-item>
diff --git a/web/html/form/stream/stream_finalmask.html b/web/html/form/stream/stream_finalmask.html
new file mode 100644
index 00000000..4ed7d6a1
--- /dev/null
+++ b/web/html/form/stream/stream_finalmask.html
@@ -0,0 +1,70 @@
+{{define "form/streamFinalMask"}}
+<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }"
+    :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="UDP Masks">
+        <a-button icon="plus" type="primary" size="small"
+            @click="inbound.stream.addUdpMask(inbound.stream.network === 'kcp' ? 'mkcp-aes128gcm' : 'xdns')"></a-button>
+    </a-form-item>
+    <template
+        v-if="inbound.stream.finalmask.udp && inbound.stream.finalmask.udp.length > 0">
+        <a-form v-for="(mask, index) in inbound.stream.finalmask.udp"
+            :key="index" :colon="false"
+            :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+            <a-divider :style="{ margin: '0' }"> UDP Mask [[ index + 1 ]]
+                <a-icon type="delete"
+                    @click="() => inbound.stream.delUdpMask(index)"
+                    :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
+            </a-divider>
+            <a-form-item label='Type'>
+                <a-select v-model="mask.type"
+                    @change="(type) => mask.settings = mask._getDefaultSettings(type, {})"
+                    :dropdown-class-name="themeSwitcher.currentTheme">
+                    <!-- mKCP-specific masks -->
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="mkcp-aes128gcm">
+                        mKCP AES-128-GCM</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-dns">
+                        Header DNS</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-dtls">
+                        Header DTLS 1.2</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-srtp">
+                        Header SRTP</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-utp">
+                        Header uTP</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-wechat">
+                        Header WeChat Video</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="header-wireguard">
+                        Header WireGuard</a-select-option>
+                    <a-select-option v-if="inbound.stream.network === 'kcp'"
+                        value="mkcp-original">
+                        mKCP Original</a-select-option>
+                    <!-- xDNS for TCP/WS/HTTPUpgrade/XHTTP -->
+                    <a-select-option
+                        v-if="['tcp', 'ws', 'httpupgrade', 'xhttp'].includes(inbound.stream.network)"
+                        value="xdns">
+                        xDNS (Experimental)</a-select-option>
+                </a-select>
+            </a-form-item>
+            <!-- Settings for password-based masks -->
+            <a-form-item label='Password'
+                v-if="['mkcp-aes128gcm'].includes(mask.type)">
+                <a-input v-model.trim="mask.settings.password"
+                    placeholder="Obfuscation password"></a-input>
+            </a-form-item>
+            <!-- Settings for domain-based masks -->
+            <a-form-item label='Domain'
+                v-if="['header-dns', 'xdns'].includes(mask.type)">
+                <a-input v-model.trim="mask.settings.domain"
+                    placeholder="e.g., www.example.com"></a-input>
+            </a-form-item>
+        </a-form>
+    </template>
+</a-form>
+{{end}}
diff --git a/web/html/form/stream/stream_kcp.html b/web/html/form/stream/stream_kcp.html
index 50794574..11f89ebd 100644
--- a/web/html/form/stream/stream_kcp.html
+++ b/web/html/form/stream/stream_kcp.html
@@ -1,48 +1,32 @@
 {{define "form/streamKCP"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="none">None</a-select-option>
-            <a-select-option value="srtp">SRTP</a-select-option>
-            <a-select-option value="utp">uTP</a-select-option>
-            <a-select-option value="wechat-video">WeChat</a-select-option>
-            <a-select-option value="dtls">DTLS 1.2</a-select-option>
-            <a-select-option value="wireguard">WireGuard</a-select-option>
-            <a-select-option value="dns">DNS</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
-                </template>
-                {{ i18n "password" }}
-                <a-icon @click="inbound.stream.kcp.seed = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="inbound.stream.kcp.seed"></a-input>
-    </a-form-item>
+<a-form :colon="false" :label-col="{ md: {span:8} }"
+    :wrapper-col="{ md: {span:14} }">
     <a-form-item label='MTU'>
-        <a-input-number v-model.number="inbound.stream.kcp.mtu" :min="576" :max="1460"></a-input-number>
+        <a-input-number v-model.number="inbound.stream.kcp.mtu" :min="576"
+            :max="1460"></a-input-number>
     </a-form-item>
     <a-form-item label='TTI (ms)'>
-        <a-input-number v-model.number="inbound.stream.kcp.tti" :min="10" :max="100"></a-input-number>
+        <a-input-number v-model.number="inbound.stream.kcp.tti" :min="10"
+            :max="100"></a-input-number>
     </a-form-item>
     <a-form-item label='Uplink (MB/s)'>
-        <a-input-number v-model.number="inbound.stream.kcp.upCap" :min="0"></a-input-number>
-    </a-form-item> 
+        <a-input-number v-model.number="inbound.stream.kcp.upCap"
+            :min="0"></a-input-number>
+    </a-form-item>
     <a-form-item label='Downlink (MB/s)'>
-        <a-input-number v-model.number="inbound.stream.kcp.downCap" :min="0"></a-input-number>
+        <a-input-number v-model.number="inbound.stream.kcp.downCap"
+            :min="0"></a-input-number>
     </a-form-item>
     <a-form-item label='Congestion'>
         <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
     </a-form-item>
     <a-form-item label='Read Buffer (MB)'>
-        <a-input-number v-model.number="inbound.stream.kcp.readBuffer" :min="0"></a-input-number>
+        <a-input-number v-model.number="inbound.stream.kcp.readBuffer"
+            :min="0"></a-input-number>
     </a-form-item>
     <a-form-item label='Write Buffer (MB)'>
-        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer" :min="0"></a-input-number>
+        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"
+            :min="0"></a-input-number>
     </a-form-item>
 </a-form>
 {{end}}
diff --git a/web/html/form/stream/stream_settings.html b/web/html/form/stream/stream_settings.html
index f6b17cc6..5b00ef25 100644
--- a/web/html/form/stream/stream_settings.html
+++ b/web/html/form/stream/stream_settings.html
@@ -1,8 +1,10 @@
 {{define "form/streamSettings"}}
 <!-- select stream network -->
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+<a-form :colon="false" :label-col="{ md: {span:8} }"
+    :wrapper-col="{ md: {span:14} }">
     <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" :style="{ width: '75%' }" @change="streamNetworkChange"
+        <a-select v-model="inbound.stream.network" :style="{ width: '75%' }"
+            @change="streamNetworkChange"
             :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp">TCP (RAW)</a-select-option>
             <a-select-option value="kcp">mKCP</a-select-option>
@@ -48,4 +50,10 @@
 <template>
     {{template "form/streamSockopt"}}
 </template>
+
+<!-- finalmask - only for TCP, WS, HTTPUpgrade, XHTTP, mKCP -->
+<template
+    v-if="['tcp', 'ws', 'httpupgrade', 'xhttp', 'kcp'].includes(inbound.stream.network)">
+    {{template "form/streamFinalMask"}}
+</template>
 {{end}}