From ddd1b71fa985c0d3886d629a164eee29eaa258f6 Mon Sep 17 00:00:00 2001
From: Hossin Asaadi <hossin.asaadi@gmail.com>
Date: Wed, 9 Nov 2022 06:49:03 -0500
Subject: [PATCH] merge multi user with IP Limit

---
 web/assets/js/model/xray.js              | 18 +++----
 web/html/common/qrcode_modal.html        | 64 +++++++++++++++++++++++-
 web/html/xui/component/inbound_info.html | 18 ++++---
 web/html/xui/form/protocol/vless.html    | 52 ++++++++++++++++---
 web/html/xui/form/protocol/vmess.html    | 56 ++++++++++++++++++---
 web/html/xui/inbound_modal.html          | 45 +++++++++++++++--
 web/html/xui/inbounds.html               |  2 +-
 7 files changed, 216 insertions(+), 39 deletions(-)

diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index 4526ef1a..cb15842b 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -881,7 +881,7 @@ class Inbound extends XrayCommonClass {
         this.sniffing = new Sniffing();
     }
 
-    genVmessLink(address='', remark='') {
+    genVmessLink(address='', remark='', clientIndex=0) {
         if (this.protocol !== Protocols.VMESS) {
             return '';
         }
@@ -934,8 +934,8 @@ class Inbound extends XrayCommonClass {
             ps: remark,
             add: address,
             port: this.port,
-            id: this.settings.vmesses[0].id,
-            aid: this.settings.vmesses[0].alterId,
+            id: this.settings.vmesses[clientIndex].id,
+            aid: this.settings.vmesses[clientIndex].alterId,
             net: network,
             type: type,
             host: host,
@@ -945,9 +945,9 @@ class Inbound extends XrayCommonClass {
         return 'vmess://' + base64(JSON.stringify(obj, null, 2));
     }
 
-    genVLESSLink(address = '', remark='') {
+    genVLESSLink(address = '', remark='', clientIndex=0) {
         const settings = this.settings;
-        const uuid = settings.vlesses[0].id;
+        const uuid = settings.vlesses[clientIndex].id;
         const port = this.port;
         const type = this.stream.network;
         const params = new Map();
@@ -1009,7 +1009,7 @@ class Inbound extends XrayCommonClass {
         }
 
         if (this.xtls) {
-            params.set("flow", this.settings.vlesses[0].flow);
+            params.set("flow", this.settings.vlesses[clientIndex].flow);
         }
 
         const link = `vless://${uuid}@${address}:${port}`;
@@ -1036,10 +1036,10 @@ class Inbound extends XrayCommonClass {
         return `trojan://${settings.clients[0].password}@${address}:${this.port}#${encodeURIComponent(remark)}`;
     }
 
-    genLink(address='', remark='') {
+    genLink(address='', remark='', clientIndex=0) {
         switch (this.protocol) {
-            case Protocols.VMESS: return this.genVmessLink(address, remark);
-            case Protocols.VLESS: return this.genVLESSLink(address, remark);
+            case Protocols.VMESS: return this.genVmessLink(address, remark, clientIndex);
+            case Protocols.VLESS: return this.genVLESSLink(address, remark, clientIndex);
             case Protocols.SHADOWSOCKS: return this.genSSLink(address, remark);
             case Protocols.TROJAN: return this.genTrojanLink(address, remark);
             default: return '';
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 9a3359d5..e071f46a 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -3,6 +3,20 @@
          :closable="true" width="300px" :ok-text="qrModal.okText"
          cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
     <canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
+    <a-tag color="green" style="margin-bottom: 10px" >click on QR Code to Copy</a-tag>
+    <canvas v-if="qrModal.inbound.protocol != Protocols.VMESS && qrModal.inbound.protocol != Protocols.VLESS" id="qrCode" style="width: 100%; height: 100%;"></canvas>
+
+    <template v-if="qrModal.inbound.protocol === Protocols.VMESS" v-for="(vmess, index) in qrModal.inbound.settings.vmesses">
+        <a-tag color="red" style="margin-bottom: 10px" v-text="vmess.id"></a-tag>
+        <canvas @click="copyTextToClipboard(`qrCode-vmess-${vmess.id}`,index)" :id="`qrCode-vmess-${vmess.id}`" style="width: 100%; height: 100%;"></canvas>
+        <a-divider style="height: 2px; background-color: #7e7e7e" />
+    </template>
+
+    <template v-if="qrModal.inbound.protocol === Protocols.VLESS" v-for="(vless, index) in qrModal.inbound.settings.vlesses">
+        <a-tag color="red" style="margin-bottom: 10px" v-text="vless.id"></a-tag>
+        <canvas @click="copyTextToClipboard(`qrCode-vless-${vless.id}`,index)" :id="`qrCode-vless-${vless.id}`" style="width: 100%; height: 100%;"></canvas>
+        <a-divider style="height: 2px; background-color: #7e7e7e" />
+    </template>
 </a-modal>
 
 <script>
@@ -10,14 +24,18 @@
     const qrModal = {
         title: '',
         content: '',
+        inbound: new Inbound(),
+        dbInbound: new DBInbound(),
         okText: '',
         copyText: '',
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', okText='{{ i18n "copy" }}', copyText='') {
+        show: function (title='', content='', dbInbound=new DBInbound(),okText='{{ i18n "copy" }}', copyText='') {
             this.title = title;
             this.content = content;
+            this.dbInbound = dbInbound;
+            this.inbound = dbInbound.toInbound();
             this.okText = okText;
             if (ObjectUtil.isEmpty(copyText)) {
                 this.copyText = content;
@@ -53,6 +71,50 @@
         data: {
             qrModal: qrModal,
         },
+        methods: {
+            setQrCode(elmentId,index) {
+                content = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index)
+
+                new QRious({
+                        element: document.querySelector('#'+elmentId),
+                        size: 260,
+                        value: content,
+                    });
+            },
+            copyTextToClipboard(elmentId,index) {
+                link = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index)
+                this.qrModal.copyText = link
+
+                this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
+                        text: () => link,
+                    });
+                this.qrModal.clipboard.on('success', () => { 
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.qrModal.clipboard.destroy();
+                });
+
+
+            }
+        },
+        updated()  {
+            switch (qrModal.inbound.protocol) {
+                    case Protocols.VMESS: 
+                        vmesses = qrModal.inbound.settings.vmesses
+                        for (const index in vmesses) {
+                            this.setQrCode("qrCode-vmess-" + vmesses[index].id ,index)
+                        }
+                    break;
+                    case Protocols.VLESS: 
+                        vlesses = qrModal.inbound.settings.vlesses
+
+                        for (const index in vlesses) {
+                            this.setQrCode("qrCode-vless-" + vlesses[index].id ,index)
+                        }
+                    break;
+                    default: return null;
+            }
+
+        }
     });
 
 </script>
diff --git a/web/html/xui/component/inbound_info.html b/web/html/xui/component/inbound_info.html
index b3eca115..cbf156d1 100644
--- a/web/html/xui/component/inbound_info.html
+++ b/web/html/xui/component/inbound_info.html
@@ -32,10 +32,10 @@
     <p>tls: <a-tag color="red">{{ i18n "closure" }}</a-tag></p>
 </template>
 <p v-if="inbound.tls">
-    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '{{ i18n "none" }}' ]]</a-tag>
+    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
 </p>
 <p v-if="inbound.xtls">
-    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '{{ i18n "none" }}' ]]</a-tag>
+    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
 </p>
 {{end}}
 
@@ -46,14 +46,16 @@
     <p>{{ i18n "pages.inbounds.address"}}: <a-tag color="blue">[[ dbInbound.address ]]</a-tag></p>
     <p>{{ i18n "pages.inbounds.port"}}: <a-tag color="green">[[ dbInbound.port ]]</a-tag></p>
 
-    <template v-if="dbInbound.isVMess">
-        <p>uuid: <a-tag color="green">[[ inbound.uuid ]]</a-tag></p>
-        <p>alterId: <a-tag color="green">[[ inbound.alterId ]]</a-tag></p>
+    <template v-if="dbInbound.isVMess" v-for="(vmess, index) in inbound.settings.vmesses">
+        <p>uuid: <a-tag color="green">[[ vmess.id ]]</a-tag></p>
+        <p>alterId: <a-tag color="green">[[ vmess.alterId ]]</a-tag></p>
+        <a-divider style="height: 2px; background-color: #7e7e7e" />
     </template>
 
-    <template v-if="dbInbound.isVLess">
-        <p>uuid: <a-tag color="green">[[ inbound.uuid ]]</a-tag></p>
-        <p v-if="inbound.isXTls">flow: <a-tag color="green">[[ inbound.flow ]]</a-tag></p>
+    <template v-if="dbInbound.isVLess" v-for="(vless, index) in inbound.settings.vlesses">
+        <p>uuid: <a-tag color="green">[[ vless.id ]]</a-tag></p>
+        <p v-if="inbound.isXTls">flow: <a-tag color="green">[[ vless.flow ]]</a-tag></p>
+        <a-divider style="height: 2px; background-color: #7e7e7e" />
     </template>
 
     <template v-if="dbInbound.isTrojan">
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index deba14b0..65f4f393 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,8 +1,9 @@
 {{define "form/vless"}}
-<a-form layout="inline">
+<a-form layout="inline" v-for="(vless, index) in inbound.settings.vlesses"
+:key="`vless-${index}`">
     <a-form layout="inline">
         <a-form-item label="Email">
-            <a-input v-model.trim="inbound.settings.vlesses[0].email"></a-input>
+            <a-input v-model.trim="vless.email"></a-input>
         </a-form-item>
         <a-form-item>
             <span slot="label">
@@ -15,9 +16,9 @@
                 </a-tooltip>
             </span>
 
-            <a-input type="number" v-model.number="inbound.settings.vlesses[0].limitIp"></a-input>
+            <a-input type="number" v-model.number="vless.limitIp"></a-input>
         </a-form-item>
-        <a-form-item v-if="inbound.settings.vlesses[0].email && inbound.settings.vlesses[0].limitIp > 0 && isEdit">
+        <a-form-item v-if="vless.email && vless.limitIp > 0 && isEdit">
             <span slot="label">
                 client IP log
                 <a-tooltip>
@@ -28,21 +29,56 @@
                 </a-tooltip>
             </span>
 
-            <a-textarea disabled :input="getDBClientIps(inbound.settings.vlesses[0].email)" v-model="clientIps" :auto-size="{ minRows: 3, maxRows: 3 }">
+            <a-textarea disabled :value="getIPsByIndex(index)"   :auto-size="{ minRows: 1, maxRows: 1 }">
             </a-textarea>
 
-            <a-button type="danger" @click="clearDBClientIps(inbound.settings.vlesses[0].email)" >clear log</a-button>
+            <a-button type="danger" @click="clearDBClientIps(vless.email)" >clear log</a-button>
         </a-form-item>
     </a-form>
     <a-form-item label="id">
-        <a-input v-model.trim="inbound.settings.vlesses[0].id"></a-input>
+        <a-input v-model.trim="vless.id"></a-input>
     </a-form-item>
     <a-form-item v-if="inbound.xtls" label="flow">
-        <a-select v-model="inbound.settings.vlesses[0].flow" style="width: 150px">
+        <a-select v-model="vless.flow" style="width: 150px">
             <a-select-option value="" v-text='{{ i18n "none" }}'></a-select-option>
             <a-select-option v-for="key in FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
+
+        <!--Add Svg Icon-->
+        <svg
+
+        @click="addClient(inbound.protocol,vless, inbound.settings.vlesses)"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        class="ml-2 cursor-pointer"
+        >
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path
+        fill="green"
+        d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
+        />
+    </svg>
+
+    <!--Remove Svg Icon-->
+    <svg
+        v-show="inbound.settings.vlesses.length > 1"
+        @click="removeClient(index, inbound.settings.vlesses)"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        class="ml-2 cursor-pointer"
+        >
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path
+        fill="#EC4899"
+        d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
+        />
+    </svg>
+    <a-divider style="height: 2px; background-color: #7e7e7e" />
 </a-form>
 
 <a-form layout="inline">
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index ea0c62a9..e358bee1 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,8 +1,9 @@
 {{define "form/vmess"}}
-<a-form layout="inline">
+<a-form layout="inline" v-for="(vmess, index) in inbound.settings.vmesses"
+:key="`vmess-${index}`">
     <a-form layout="inline">
         <a-form-item label="Email">
-            <a-input v-model.trim="inbound.settings.vmesses[0].email"></a-input>
+            <a-input v-model.trim="vmess.email"></a-input>
         </a-form-item>
         <a-form-item>
             <span slot="label">
@@ -15,9 +16,9 @@
                 </a-tooltip>
             </span>
         
-            <a-input type="number" v-model.number="inbound.settings.vmesses[0].limitIp"></a-input>
+            <a-input type="number" v-model.number="vmess.limitIp"></a-input>
         </a-form-item>
-        <a-form-item v-if="inbound.settings.vmesses[0].email && inbound.settings.vmesses[0].limitIp > 0 && isEdit">
+        <a-form-item v-if="vmess.email && vmess.limitIp > 0 && isEdit">
             <span slot="label">
                 Client IP Log 
                 <a-tooltip>
@@ -28,21 +29,60 @@
                 </a-tooltip>
             </span>
             
-            <a-textarea disabled :input="getDBClientIps(inbound.settings.vmesses[0].email)" v-model="clientIps" :auto-size="{ minRows: 3, maxRows: 3 }">
+            <a-textarea disabled :input="getDBClientIps(vmess.email)" v-model="clientIps" :auto-size="{ minRows: 1, maxRows: 1 }">
             </a-textarea>
 
-            <a-button type="danger" @click="clearDBClientIps(inbound.settings.vmesses[0].email)" >clear log</a-button>
+            <a-button type="danger" @click="clearDBClientIps(vmess.email)" >clear log</a-button>
         </a-form-item>
 
     </a-form>
     <a-form-item label="id">
-        <a-input v-model.trim="inbound.settings.vmesses[0].id"></a-input>
+        <a-input v-model.trim="vmess.id"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "additional" }} ID'>
-        <a-input type="number" v-model.number="inbound.settings.vmesses[0].alterId"></a-input>
+        <a-input type="number" v-model.number="vmess.alterId"></a-input>
     </a-form-item>
+        <!--Add Svg Icon-->
+            <svg
+
+            @click="addClient(inbound.protocol,vmess, inbound.settings.vmesses)"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            class="ml-2 cursor-pointer"
+            >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+            fill="green"
+            d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
+            />
+        </svg>
+    
+        <!--Remove Svg Icon-->
+        <svg
+            v-show="inbound.settings.vmesses.length > 1"
+            @click="removeClient(index, inbound.settings.vmesses)"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            class="ml-2 cursor-pointer"
+            >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+            fill="#EC4899"
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
+            />
+        </svg>
+        <a-divider style="height: 2px; background-color: #7e7e7e" />
+    
+    </a-form>
+</a-form>
+<a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.disableInsecureEncryption" }}'>
         <a-switch v-model.number="inbound.settings.disableInsecure"></a-switch>
     </a-form-item>
 </a-form>
+
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index dfe86923..d4797c9a 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -15,7 +15,7 @@
         confirm: null,
         inbound: new Inbound(),
         dbInbound: new DBInbound(),
-        clientIps: "",
+        clientIps: [],
         ok() {
             ObjectUtil.execute(inModal.confirm, inModal.inbound, inModal.dbInbound);
         },
@@ -81,7 +81,18 @@
                     this.inModal.inbound.tls = false;
                 }
             },
-            async getDBClientIps(email) {
+            addClient(protocol,value, clients) {
+                switch (protocol) {
+                    case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
+                    case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
+                    default: return null;
+                }
+            },
+            removeClient(index, clients) {
+                clients.splice(index, 1);
+            },
+
+            async getDBClientIps(index, email) {
 
                 const msg = await HttpUtil.post('/xui/inbound/clientIps/'+ email);
                 if (!msg.success) {
@@ -90,10 +101,10 @@
                 try {
                     ips = JSON.parse(msg.obj)
                     ips = ips.join(",")
-                    this.inModal.clientIps =  ips
+                    this.inModal.clientIps[index] =  ips
                 } catch (error) {
                     // text
-                    this.inModal.clientIps =  msg.obj
+                    this.inModal.clientIps[index] =  msg.obj
 
                 }
 
@@ -105,8 +116,34 @@
                 }
                 this.inModal.clientIps =  ""
             },
+            getIPsByIndex(index) {
+                return inModal.clientIps[index]
+            },
 
         },
+        updated()  {
+            switch (inModal.inbound.protocol) {
+                    case Protocols.VMESS: 
+                        vmesses = inModal.inbound.settings.vmesses
+                        for (const index in vmesses) {
+                            if(vmesses[index].email)
+                                this.getDBClientIps(index, vmesses[index].email)
+                        }
+                    break;
+                    case Protocols.VLESS: 
+                        vlesses = inModal.inbound.settings.vlesses
+
+                        for (const index in vlesses) {
+                            if(vlesses[index].email)
+                                this.getDBClientIps(index, vlesses[index].email)
+
+                        }
+                    break;
+                    default: return null;
+            }
+            console.log(this.inModal.clientIps)
+
+        }
      
     });
 
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 3c5aafb5..3844d49c 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -324,7 +324,7 @@
             },
             showQrcode(dbInbound) {
                 const link = dbInbound.genLink();
-                qrModal.show('{{ i18n "qrCode"}}', link);
+                qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
             },
             showInfo(dbInbound) {
                 infoModal.show(dbInbound);