better clients info tables

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

5 files changed, 33 insertions, 11 deletions

diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index e9b01ea5..7af96373 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -96,10 +96,12 @@
         <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.shadowsockses.length">
             <table width="100%">
                 <tr class="client-table-header">
-                    <th v-for="col in Object.keys(inbound.settings.shadowsockses[0]).slice(0, 3)">[[ col ]]</th>
+                    <th>{{ i18n "pages.inbounds.email" }}</th>
+                    <th>Password</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                    <td>[[ client.email ]]</td>
+                    <td>[[ client.password ]]</td>
                 </tr>
             </table>
         </a-collapse-panel>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index f494adb9..46ae5e32 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -102,10 +102,12 @@
         <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
             <table width="100%">
                 <tr class="client-table-header">
-                    <th v-for="col in Object.keys(inbound.settings.trojans[0]).slice(0, 3)">[[ col ]]</th>
+                    <th>{{ i18n "pages.inbounds.email" }}</th>
+                    <th>Password</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                    <td>[[ client.email ]]</td>
+                    <td>[[ client.password ]]</td>
                 </tr>
             </table>
         </a-collapse-panel>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index f661a839..12729eff 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -108,10 +108,14 @@
         <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
             <table width="100%">
                 <tr class="client-table-header">
-                    <th v-for="col in Object.keys(inbound.settings.vlesses[0]).slice(0, 3)">[[ col ]]</th>
+                    <th>{{ i18n "pages.inbounds.email" }}</th>
+                    <th>Flow</th>
+                    <th>ID</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                    <td>[[ client.email ]]</td>
+                    <td>[[ client.flow ]]</td>
+                    <td>[[ client.id ]]</td>
                 </tr>
             </table>
         </a-collapse-panel>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index b58ecaee..a37f8468 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -97,10 +97,12 @@
         <a-collapse-panel :header="'{{ i18n "pages.client.clientCount" }}: ' + inbound.settings.vmesses.length">
             <table width="100%">
                     <tr class="client-table-header">
-                    <th v-for="col in Object.keys(inbound.settings.vmesses[0]).slice(0, 3)">[[ col ]]</th>
+                        <th>{{ i18n "pages.inbounds.email" }}</th>
+                        <th>ID</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                    <td>[[ client.email ]]</td>
+                    <td>[[ client.id ]]</td>
                 </tr>
             </table>
         </a-collapse-panel>
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index 23bd5af1..d44634a0 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -68,9 +68,21 @@
     <template v-if="infoModal.clientSettings">
     <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
     <table style="margin-bottom: 10px;">
-        <tr v-for="col,index in Object.keys(infoModal.clientSettings).slice(0, 3)">
-            <td>[[ col ]]</td>
-            <td><a-tag color="green">[[ infoModal.clientSettings[col] ]]</a-tag></td>
+        <tr>
+            <td>{{ i18n "pages.inbounds.email" }}</td>
+            <td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td>
+        </tr>
+        <tr v-if="infoModal.clientSettings.id">
+            <td>ID</td>
+            <td><a-tag color="green">[[ infoModal.clientSettings.id ]]</a-tag></td>
+        </tr>
+        <tr v-if="infoModal.inbound.canEnableTlsFlow()">
+            <td>Flow</td>
+            <td><a-tag color="green">[[ infoModal.clientSettings.flow ]]</a-tag></td>
+        </tr>
+        <tr v-if="infoModal.clientSettings.password">
+            <td>Password</td>
+            <td><a-tag color="green">[[ infoModal.clientSettings.password ]]</a-tag></td>
         </tr>
         <tr>
             <td>{{ i18n "status" }}</td>