Added ip limit data and controls to client info modal (#2617)

1 files changed, 59 insertions, 0 deletions

diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index 7796cf1e..1e30aa83 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -185,6 +185,25 @@
             <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
           </td>
         </tr>
+        <tr v-if="app.ipLimitEnable">
+          <td>{{ i18n "pages.inbounds.IPLimit" }}</td>
+          <td>
+            <a-tag>[[ infoModal.clientSettings.limitIp ]]</a-tag>
+          </td>
+        </tr>
+        <tr v-if="app.ipLimitEnable">
+          <td>{{ i18n "pages.inbounds.IPLimitlog" }}</td>
+          <td>
+            <a-tag>[[ infoModal.clientIps ]]</a-tag>
+            <a-icon type="sync" :spin="refreshing" @click="refreshIPs" style="margin: 0 5px;"></a-icon>
+            <a-tooltip :title="[[ dbInbound.address ]]">
+              <template slot="title">
+                <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
+              </template>
+              <a-icon type="delete" @click="clearClientIps"></a-icon>
+            </a-tooltip>
+          </td>
+        </tr>
       </table>
       <table style="display: inline-table; margin-block: 10px; width: 100%; text-align: center;">
         <tr>
@@ -417,6 +436,18 @@
     </template>
 </a-modal>
 <script>
+  function refreshIPs(email) {
+    return HttpUtil.post(`/panel/inbound/clientIps/${email}`).then((msg) => {
+      if (msg.success) {
+        try {
+          return JSON.parse(msg.obj).join(', ');
+        } catch (e) {
+          return msg.obj;
+        }
+      }
+    });
+  }
+
   const infoModal = {
     visible: false,
     inbound: new Inbound(),
@@ -431,6 +462,7 @@
     isExpired: false,
     subLink: '',
     subJsonLink: '',
+    clientIps: '',
     show(dbInbound, index) {
       this.index = index;
       this.inbound = dbInbound.toInbound();
@@ -438,6 +470,12 @@
       this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
       this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index) : this.dbInbound.isExpiry;
       this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
+
+      if (app.ipLimitEnable && this.clientSettings.limitIp) {
+        refreshIPs(this.clientStats.email).then((ips) => {
+          this.clientIps = ips;
+        })
+      }
       if (this.inbound.protocol == Protocols.WIREGUARD) {
         this.links = this.inbound.genInboundLinks(dbInbound.remark).split('\r\n')
       } else {
@@ -466,6 +504,7 @@
     el: '#inbound-info-modal',
     data: {
       infoModal,
+      refreshing: false,
       get dbInbound() {
         return this.infoModal.dbInbound;
       },
@@ -502,6 +541,26 @@
         remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats.down;
         return remained > 0 ? sizeFormat(remained) : '-';
       },
+      refreshIPs() {
+        this.refreshing = true;
+        refreshIPs(this.infoModal.clientStats.email)
+          .then((ips) => {
+            this.infoModal.clientIps = ips;
+          })
+          .finally(() => {
+            this.refreshing = false;
+          });
+      },
+      clearClientIps() {
+        HttpUtil.post(`/panel/inbound/clearClientIps/${this.infoModal.clientStats.email}`)
+          .then((msg) => {
+            if (!msg.success) {
+              return;
+            }
+            this.infoModal.clientIps = 'No IP Record';
+          })
+          .catch(() => {});
+      },
     },
   });
 </script>