[feature] add multi domain tls (CDN ready)

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

web/html/xui/form/tls_settings.html

@@ -33,7 +33,21 @@
 
 <!-- tls settings -->
 <a-form v-if="inbound.tls" layout="inline">
-    <a-form-item label='{{ i18n "domainName" }}'>
+    <a-form-item label='Multi Domain'>
+        <a-switch v-model="multiDomain"></a-switch>
+        <a-button v-if="multiDomain" size="small" @click="inbound.stream.tls.settings.domains.push({remark: '', domain: ''})">+</a-button>
+    </a-form-item>
+    <a-form-item v-if="multiDomain" label='Domains'>
+        <a-input-group v-for="(row, index) in inbound.stream.tls.settings.domains">
+            <a-input style="width: 40%" v-model.trim="row.remark" addon-before='{{ i18n "remark" }}'></a-input>
+            <a-input style="width: 60%" v-model.trim="row.domain" addon-before='{{ i18n "host" }}'>
+                <template slot="addonAfter">
+                    <a-button size="small" style="margin: 0px" @click="inbound.stream.tls.settings.domains.splice(index, 1)">-</a-button>
+                </template>
+            </a-input>
+        </a-input-group>
+    </a-form-item>
+    <a-form-item v-else label='{{ i18n "domainName" }}'>
         <a-input v-model.trim="inbound.stream.tls.server" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="CipherSuites">

web/html/xui/inbound_client_table.html

@@ -29,7 +29,7 @@
     <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag>
 </template>                                    
 <template slot="traffic" slot-scope="text, client">
-    <a-tag :color="statsColor(record, client.email)" @click="alert(usageColor(0,1024,512))">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag>
+    <a-tag :color="statsColor(record, client.email)">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag>
     <template v-if="client._totalGB > 0">
         <a-tag :color="statsColor(record, client.email)">[[client._totalGB]]GB</a-tag>
     </template>

web/html/xui/inbound_info_modal.html

@@ -59,10 +59,9 @@
             </td>
             <td v-else-if="inbound.reality">
                 reality: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-                reality {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+                reality Destination: <a-tag :color="inbound.stream.reality.dest ? 'green' : 'orange'">[[ inbound.stream.reality.dest ]]</a-tag>
             </td>
-            <td v-else>
-                tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
+            <td v-else>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
             </td>
         </tr>
     </table>
@@ -110,17 +109,16 @@
             </td>
         </tr>
     </table>
-    <table v-if="infoModal.clientSettings.subId + infoModal.clientSettings.tgId" style="margin-bottom: 10px;">
-        <tr v-if="infoModal.clientSettings.subId">
-            <td>Subscription link</td>
-            <td><a :href="[[ subBase + infoModal.clientSettings.subId ]]" target="_blank">[[ subBase + infoModal.clientSettings.subId ]]</a></td>
-            <td><a-icon id="copy-sub-link" type="snippets" @click="copyToClipboard('copy-sub-link', subBase + infoModal.clientSettings.subId)"></a-icon></td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.tgId">
-            <td>Telegram ID</td>
-            <td><a :href="[[ tgBase + infoModal.clientSettings.tgId ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></td>
-        </tr>
-    </table>
+    <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
+        <a-divider>Subscription link</a-divider>
+        <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
+        <a-icon id="copy-sub-link" type="snippets" @click="copyToClipboard('copy-sub-link', infoModal.subLink)"></a-icon>
+    </template>
+    <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
+        <a-divider>Telegram Username</a-divider>
+        <a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a>
+        <a-icon id="copy-tg-link" type="snippets" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)"></a-icon>
+    </template>
     </template>
     <template v-else>
         <a-divider></a-divider>
@@ -190,8 +188,14 @@
     </template>
     <div v-if="dbInbound.hasLink()">
         <a-divider>URL</a-divider>
-        <p>[[ infoModal.link ]]</p>
-        <button class="ant-btn ant-btn-primary" id="copy-url-link" @click="copyToClipboard('copy-url-link', infoModal.link)"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button>
+        <a-row v-for="(link,index) in infoModal.links">
+            <a-col :span="21"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+            <a-col :span="3" style="text-align: right;">
+                <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
+                    <a-icon type="snippets"></a-icon>{{ i18n "copy" }}
+                </button>
+            </a-col>
+        </a-row>
     </div>
 </a-modal>
 <script>
@@ -206,23 +210,56 @@
         upStats: 0,
         downStats: 0,
         clipboard: null,
-        link: null,
+        links: [],
         index: null,
         isExpired: false,
+        subLink: '',
+        tgLink: '',
         show(dbInbound, index) {
             this.index = index;
             this.inbound = dbInbound.toInbound();
             this.dbInbound = new DBInbound(dbInbound);
-            this.link = dbInbound.genLink(index);
             this.settings = JSON.parse(this.inbound.settings);
             this.clientSettings = this.settings.clients ? Object.values(this.settings.clients)[index] : null;
             this.isExpired = this.inbound.isExpiry(index);
             this.clientStats = this.settings.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
+            remark = this.dbInbound.remark + "-" + this.clientSettings.email;
+            address = this.dbInbound.address;
+            this.links = [];
+            if (this.inbound.tls && !ObjectUtil.isArrEmpty(this.inbound.stream.tls.settings.domains)) {
+                this.inbound.stream.tls.settings.domains.forEach((domain) => {
+                    this.links.push({
+                        remark: remark + "-" + domain.remark,
+                        link: this.inbound.genLink(domain.domain, remark + "-" + domain.remark, index)
+                    });
+                });
+            } else {
+                this.links.push({
+                    remark: remark,
+                    link: this.inbound.genLink(address, remark, index)
+                });
+            }
+            if (this.clientSettings) {
+                if (this.clientSettings.subId) {
+                    this.subLink = this.genSubLink(this.clientSettings.subId);
+                }
+                if (this.clientSettings.tgId) {
+                    this.tgLink = "https://t.me/" + this.clientSettings.tgId;
+                }
+            }
             this.visible = true;
         },
         close() {
             infoModal.visible = false;
         },
+        genSubLink(subID) {
+            protocol = app.subSettings.tls ? "https://" : "http://";
+            hostName = app.subSettings.domain === "" ? window.location.hostname : app.subSettings.domain;
+            subPort = app.subSettings.port;
+            port = (subPort === 443 && app.subSettings.tls) || (subPort === 80 && !app.subSettings.tls) ? "" : ":" + String(subPort);
+            subPath = app.subSettings.path;
+            return protocol + hostName + port + subPath + subID;
+        }
     };
 
     const infoModalApp = new Vue({
@@ -248,12 +285,6 @@
                 }
                 return infoModal.dbInbound.isEnable;
             },
-            get subBase() {
-                return window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "") + basePath + "sub/";
-            },
-            get tgBase() {
-                return "https://t.me/"
-            },
         },
         methods: {
             copyToClipboard(elmentId, content) {

web/html/xui/inbound_modal.html

@@ -90,6 +90,18 @@
             set delayedExpireDays(days) {
                 this.client.expiryTime = -86400000 * days;
             },
+            get multiDomain() {
+                return this.inbound.stream.tls.settings.domains.length > 0;
+            },
+            set multiDomain(value) {
+                if (value) {
+                    inModal.inbound.stream.tls.server = "";
+                    inModal.inbound.stream.tls.settings.domains = [{remark: "", domain: window.location.host.split(":")[0]}];
+                } else {
+                    inModal.inbound.stream.tls.server = "";
+                    inModal.inbound.stream.tls.settings.domains = [];
+                }
+            }
         },
         methods: {
             streamNetworkChange() {

web/html/xui/inbounds.html

@@ -746,9 +746,7 @@
                 }
             },
             showQrcode(dbInbound, clientIndex) {
-                const clientName = JSON.parse(dbInbound.settings).clients[clientIndex].email;
-                const link = dbInbound.genLink(clientIndex);
-                qrModal.show('{{ i18n "qrCode"}}', link, dbInbound, '', clientName);
+                qrModal.show('{{ i18n "qrCode"}}', dbInbound, clientIndex);
             },
             showInfo(dbInbound, index) {
                 infoModal.show(dbInbound, index);