[feature] multi cert per inbound

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

3 files changed, 48 insertions, 40 deletions

diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index 2954957c..efd059f9 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -482,8 +482,8 @@ class TlsStreamSettings extends XrayCommonClass {
         this.settings = settings;
     }
 
-    addCert(cert) {
-        this.certs.push(cert);
+    addCert() {
+        this.certs.push(new TlsStreamSettings.Cert());
     }
 
     removeCert(index) {
@@ -599,8 +599,8 @@ class XtlsStreamSettings extends XrayCommonClass {
         this.settings = settings;
     }
 
-    addCert(cert) {
-        this.certs.push(cert);
+    addCert() {
+        this.certs.push(new XtlsStreamSettings.Cert());
     }
 
     removeCert(index) {
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 81506d8a..9d6c03d6 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -70,27 +70,31 @@
     <a-form-item label="Allow insecure">
         <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
     </a-form-item>
-    <a-form-item label='{{ i18n "certificate" }}'>
-        <a-radio-group v-model="inbound.stream.tls.certs[0].useFile" button-style="solid">
-            <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-            <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-        </a-radio-group>
-    </a-form-item>
-    <template v-if="inbound.stream.tls.certs[0].useFile">
-        <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:300px;"></a-input>
+    <template v-for="cert,index in inbound.stream.tls.certs">
+        <a-form-item label='{{ i18n "certificate" }}'>
+            <a-radio-group v-model="cert.useFile" button-style="solid">
+                <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                <a-button type="primary" size="small" @click="inbound.stream.tls.addCert()" style="margin: 0 10px">+</a-button>
+                <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small" @click="inbound.stream.tls.removeCert(index)">-</a-button>
+            </a-radio-group>
         </a-form-item>
-        <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:300px;"></a-input>
-        </a-form-item>
-        <a-button type="primary" icon="import" @click="setDefaultCertData">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        <template v-if="cert.useFile">
+            <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
+                <a-input v-model.trim="cert.certFile" style="width:300px;"></a-input>
+            </a-form-item>
+            <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                <a-input v-model.trim="cert.keyFile" style="width:300px;"></a-input>
+            </a-form-item>
+            <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        </template>
     </template>
     <template v-else>
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="cert.cert"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].key"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="cert.key"></a-input>
         </a-form-item>
     </template>
 </a-form>
@@ -111,27 +115,31 @@
     <a-form-item label="Allow insecure">
         <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
     </a-form-item>
-    <a-form-item label='{{ i18n "certificate" }}'>
-        <a-radio-group v-model="inbound.stream.xtls.certs[0].useFile" button-style="solid">
-            <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-            <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-        </a-radio-group>
-    </a-form-item>
-    <template v-if="inbound.stream.xtls.certs[0].useFile">
-        <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-            <a-input v-model.trim="inbound.stream.xtls.certs[0].certFile" style="width:300px;"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-            <a-input v-model.trim="inbound.stream.xtls.certs[0].keyFile" style="width:300px;"></a-input>
+    <template v-for="cert,index in inbound.stream.xtls.certs">
+        <a-form-item label='{{ i18n "certificate" }}'>
+            <a-radio-group v-model="cert.useFile" button-style="solid">
+                <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                <a-button type="primary" size="small" @click="inbound.stream.xtls.addCert()" style="margin: 0 10px">+</a-button>
+                <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small" @click="inbound.stream.xtls.removeCert(index)">-</a-button>
+            </a-radio-group>
         </a-form-item>
-        <a-button type="primary" icon="import" @click="setDefaultCertXtls">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        <template v-if="cert.useFile">
+            <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
+                <a-input v-model.trim="cert.certFile" style="width:300px;"></a-input>
+            </a-form-item>
+            <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                <a-input v-model.trim="cert.keyFile" style="width:300px;"></a-input>
+            </a-form-item>
+            <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+        </template>
     </template>
     <template v-else>
         <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.xtls.certs[0].cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="cert.cert"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.xtls.certs[0].key"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="cert.key"></a-input>
         </a-form-item>
     </template>
 </a-form>
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index cb98f6a8..73ed6234 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -100,13 +100,13 @@
                     this.inModal.inbound.reality = false;
                 }
             },
-            setDefaultCertData() {
-                inModal.inbound.stream.tls.certs[0].certFile = app.defaultCert;
-                inModal.inbound.stream.tls.certs[0].keyFile = app.defaultKey;
+            setDefaultCertData(index) {
+                inModal.inbound.stream.tls.certs[index].certFile = app.defaultCert;
+                inModal.inbound.stream.tls.certs[index].keyFile = app.defaultKey;
             },
-            setDefaultCertXtls() {
-                inModal.inbound.stream.xtls.certs[0].certFile = app.defaultCert;
-                inModal.inbound.stream.xtls.certs[0].keyFile = app.defaultKey;
+            setDefaultCertXtls(index) {
+                inModal.inbound.stream.xtls.certs[index].certFile = app.defaultCert;
+                inModal.inbound.stream.xtls.certs[index].keyFile = app.defaultKey;
             },
             async getNewX25519Cert() {
                 inModal.loading(true);