noises, more option for direct json

web/html/xui/form/outbound.html

@@ -18,51 +18,66 @@
 <!-- freedom settings-->
 <template v-if="outbound.protocol === Protocols.Freedom">
     <a-form-item label='Strategy'>
-        <a-select
-        v-model="outbound.settings.domainStrategy"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-        </a-select>
+      <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
+      </a-select>
     </a-form-item>
     <a-form-item label='Redirect'>
-        <a-input v-model="outbound.settings.redirect"></a-input>
-        </a-form-item>
+      <a-input v-model="outbound.settings.redirect"></a-input>
+    </a-form-item>
     <a-form-item label='Fragment'>
-        <a-switch
-            :checked="Object.keys(outbound.settings.fragment).length >0"
-            @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
-        </a-switch>
+      <a-switch :checked="Object.keys(outbound.settings.fragment).length >0"
+        @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
+      </a-switch>
     </a-form-item>
     <template v-if="Object.keys(outbound.settings.fragment).length >0">
-        <a-form-item label='Packets'>
-            <a-select
-            v-model="outbound.settings.fragment.packets"
-            :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label='Length'>
-            <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
-        </a-form-item>
-        <a-form-item label='Interval'>
-            <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
-        </a-form-item>
+      <a-form-item label='Packets'>
+        <a-select v-model="outbound.settings.fragment.packets" :dropdown-class-name="themeSwitcher.currentTheme">
+          <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label='Length'>
+        <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
+      </a-form-item>
+      <a-form-item label='Interval'>
+        <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
+      </a-form-item>
     </template>
-    <a-form-item label='Noise'>
-        <a-switch
-            :checked="Object.keys(outbound.settings.noise).length >0"
-            @change="checked => outbound.settings.noise = checked ? new Outbound.FreedomSettings.Noise() : {}">
-        </a-switch>
-    </a-form-item>
-    <template v-if="Object.keys(outbound.settings.noise).length >0">
-    <a-form-item label='Packet'>
-        <a-input v-model.trim="outbound.settings.noise.packet"></a-input>
-    </a-form-item>
-    <a-form-item label='Delay'>
-        <a-input v-model.trim="outbound.settings.noise.delay"></a-input>
+
+    <!-- Switch for Noises -->
+    <a-form-item label='Noises'>
+      <a-switch :checked="outbound.settings.noises.length > 0"
+        @change="checked => outbound.settings.noises = checked ? [new Outbound.FreedomSettings.Noise()] : []">
+      </a-switch>
     </a-form-item>
+
+    <!-- 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>
+  </template>
 
 <!-- blackhole settings -->
 <template v-if="outbound.protocol === Protocols.Blackhole">