add or remove noise

3 files changed, 90 insertions, 56 deletions

diff --git a/web/html/xui/form/outbound.html b/web/html/xui/form/outbound.html
index 21fedd88..bbad5c85 100644
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -46,21 +46,39 @@
             <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
           </a-form-item>
         </template>
+
+        <!-- Switch for Noises -->
         <a-form-item label='Noises'>
-          <a-switch :checked="Object.keys(outbound.settings.noises).length >0" @change="checked => outbound.settings.noises = checked ? new Outbound.FreedomSettings.Noises() : {}"></a-switch>
+          <a-switch :checked="outbound.settings.noises.length > 0"
+            @change="checked => outbound.settings.noises = checked ? [new Outbound.FreedomSettings.Noise()] : []">
+          </a-switch>
         </a-form-item>
-        <template v-if="Object.keys(outbound.settings.noises).length >0">
-          <a-form-item label='Type'>
-            <a-select v-model="outbound.settings.noises.type" :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option v-for="s in ['rand','base64','str']" :value="s">[[ s ]]</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label='Packet'>
-            <a-input v-model.trim="outbound.settings.noises.packet"></a-input>
-          </a-form-item>
-          <a-form-item label='Delay'>
-            <a-input v-model.trim="outbound.settings.noises.delay"></a-input>
+
+        <!-- Add Noise Button -->
+        <template v-if="outbound.settings.noises.length > 0">
+          <a-form-item label="Noises">
+            <a-button icon="plus" type="primary" size="small" @click="outbound.settings.addNoise()"></a-button>
           </a-form-item>
+        
+        <!-- Noise Configurations -->
+          <a-form v-for="(noise, index) in outbound.settings.noises" :key="index" :colon="false" :label-col="{ md: {span:8} }"
+            :wrapper-col="{ md: {span:14} }">
+            <a-divider style="margin:0;"> Noise [[ index + 1 ]]
+              <a-icon v-if="outbound.settings.noises.length > 1" type="delete" @click="() => outbound.settings.delNoise(index)"
+                style="color: rgb(255, 77, 79); cursor: pointer;"></a-icon>
+            </a-divider>
+            <a-form-item label='Type'>
+              <a-select v-model="noise.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in ['rand','base64','str']" :value="s">[[ s ]]</a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item label='Packet'>
+              <a-input v-model.trim="noise.packet"></a-input>
+            </a-form-item>
+            <a-form-item label='Delay'>
+              <a-input v-model.trim="noise.delay"></a-input>
+            </a-form-item>
+          </a-form>
         </template>
       </template>
 
diff --git a/web/html/xui/form/stream/stream_splithttp.html b/web/html/xui/form/stream/stream_splithttp.html
index f03a039c..453263de 100644
--- a/web/html/xui/form/stream/stream_splithttp.html
+++ b/web/html/xui/form/stream/stream_splithttp.html
@@ -34,17 +34,17 @@
     <a-form-item label="No SSE Header">
         <a-switch v-model="inbound.stream.splithttp.noSSEHeader"></a-switch>
     </a-form-item>
-    <a-form-item label="Max Connections">
-        <a-input-number v-model.trim="inbound.stream.splithttp.xmux.maxConnections"></a-input-number>
-    </a-form-item>
     <a-form-item label="Max Concurrency">
-        <a-input-number v-model.trim="inbound.stream.splithttp.xmux.maxConcurrency"></a-input-number>
+        <a-input-number v-model="inbound.stream.splithttp.xmux.maxConcurrency"></a-input-number>
+    </a-form-item>
+    <a-form-item label="Max Connections">
+        <a-input-number v-model="inbound.stream.splithttp.xmux.maxConnections"></a-input-number>
     </a-form-item>
     <a-form-item label="Max Reuse Times">
-        <a-input-number v-model.trim="inbound.stream.splithttp.xmux.cMaxReuseTimes"></a-input-number>
+        <a-input-number v-model="inbound.stream.splithttp.xmux.cMaxReuseTimes"></a-input-number>
     </a-form-item>
     <a-form-item label="Max Lifetime (ms)">
-        <a-input-number v-model.trim="inbound.stream.splithttp.xmux.cMaxLifetimeMs"></a-input-number>
+        <a-input-number v-model="inbound.stream.splithttp.xmux.cMaxLifetimeMs"></a-input-number>
     </a-form-item>
 </a-form>
 {{end}}
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index b95ce0a5..4ffbb0b7 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -314,23 +314,29 @@
                       </a-col>
                     </a-row>
                     <a-collapse v-if="noises" style="margin-top: 14px;">
-                      <a-collapse-panel header='{{ i18n "pages.settings.noisesSett"}}' v-if="noises">
+                      <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise ${index + 1}`">
                         <a-list-item style="padding: 10px 20px">
                           <a-row>
                             <a-col :lg="24" :xl="12">
                               <a-list-item-meta title='Type'></a-list-item-meta>
                             </a-col>
                             <a-col :lg="24" :xl="12">
-                              <a-select v-model="noisesType" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str']"> [[ p ]] </a-select-option>
+                              <a-select :value="noise.type" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme"
+                                @change="(value) => updateNoiseType(index, value)">
+                                <a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str']" :key="p">
+                                  [[ p ]] </a-select-option>
                               </a-select>
                             </a-col>
                           </a-row>
                         </a-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Packet (ms)' v-model="noisesPacket" placeholder="5-10"></setting-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Delay (ms)' v-model="noisesDelay" placeholder="10-20"></setting-list-item>
+                        <setting-list-item style="padding: 10px 20px" type="text" title='Packet' :value="noise.packet"
+                          @input="(value) => updateNoisePacket(index, value)" placeholder="5-10"></setting-list-item>
+                        <setting-list-item style="padding: 10px 20px" type="text" title='Delay (ms)' :value="noise.delay"
+                          @input="(value) => updateNoiseDelay(index, value)" placeholder="10-20"></setting-list-item>
+                        <a-button type="danger" @click="removeNoise(index)">Remove</a-button>
                       </a-collapse-panel>
                     </a-collapse>
+                    <a-button v-if="noises" type="primary" @click="addNoise" style="margin-top: 10px">Add Noise</a-button>
                   </a-list-item>
                   <a-list-item style="padding: 20px">
                     <a-row>
@@ -436,11 +442,9 @@
         protocol: "freedom",
         settings: {
           domainStrategy: "AsIs",
-          noises: {
-            type: "rand",
-            packet: "10-20",
-            delay: "10-16",
-          }
+          noises: [
+            { type: "rand", packet: "10-20", delay: "10-16" },
+          ],
         },
       },
       defaultMux: {
@@ -604,6 +608,30 @@
           this.user.loginSecret = "";
         }
       },
+      addNoise() {
+        const newNoise = { type: "rand", packet: "10-20", delay: "10-16" };
+        this.noisesArray = [...this.noisesArray, newNoise];
+      },
+      removeNoise(index) {
+        const newNoises = [...this.noisesArray];
+        newNoises.splice(index, 1);
+        this.noisesArray = newNoises;
+      },
+      updateNoiseType(index, value) {
+        const updatedNoises = [...this.noisesArray];
+        updatedNoises[index] = { ...updatedNoises[index], type: value };
+        this.noisesArray = updatedNoises;
+      },
+      updateNoisePacket(index, value) {
+        const updatedNoises = [...this.noisesArray];
+        updatedNoises[index] = { ...updatedNoises[index], packet: value };
+        this.noisesArray = updatedNoises;
+      },
+      updateNoiseDelay(index, value) {
+        const updatedNoises = [...this.noisesArray];
+        updatedNoises[index] = { ...updatedNoises[index], delay: value };
+        this.noisesArray = updatedNoises;
+      },
     },
     computed: {
       fragment: {
@@ -643,37 +671,25 @@
         }
       },
       noises: {
-        get: function () { return this.allSetting?.subJsonNoises != ""; },
-        set: function (v) {
-          this.allSetting.subJsonNoises = v ? JSON.stringify(this.defaultNoises) : "";
-        }
-      },
-      noisesType: {
-        get: function () { return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises.type : ""; },
-        set: function (v) {
-          if (v != "") {
-            newNoises = JSON.parse(this.allSetting.subJsonNoises);
-            newNoises.settings.noises.type = v;
-            this.allSetting.subJsonNoises = JSON.stringify(newNoises);
-          }
-        }
-      },
-      noisesPacket: {
-        get: function () { return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises.packet : ""; },
-        set: function (v) {
-          if (v != "") {
-            newNoises = JSON.parse(this.allSetting.subJsonNoises);
-            newNoises.settings.noises.packet = v;
-            this.allSetting.subJsonNoises = JSON.stringify(newNoises);
+        get() {
+          return this.allSetting?.subJsonNoises != "";
+        },
+        set(v) {
+          if (v) {
+            this.allSetting.subJsonNoises = JSON.stringify(this.defaultNoises);
+          } else {
+            this.allSetting.subJsonNoises = "";
           }
         }
       },
-      noisesDelay: {
-        get: function () { return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises.delay : ""; },
-        set: function (v) {
-          if (v != "") {
-            newNoises = JSON.parse(this.allSetting.subJsonNoises);
-            newNoises.settings.noises.delay = v;
+      noisesArray: {
+        get() {
+          return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises : [];
+        },
+        set(value) {
+          if (this.noises) {
+            const newNoises = JSON.parse(this.allSetting.subJsonNoises);
+            newNoises.settings.noises = value;
             this.allSetting.subJsonNoises = JSON.stringify(newNoises);
           }
         }