From 6dc823e21512a6d26d5f5be5073edb4857f2b99d Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza.ahmadi@tzconnect.com>
Date: Thu, 2 Mar 2023 21:48:56 +0100
Subject: [PATCH] Improved Add Client process alireza0/x-ui#35

---
 web/html/xui/client_bulk_modal.html | 215 +++++++++++++--------------
 web/html/xui/client_modal.html      | 219 ++++++++++++++--------------
 2 files changed, 218 insertions(+), 216 deletions(-)

diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index a5537562..ea43feb2 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -1,107 +1,108 @@
-{{define "clientsBulkModal"}}
-<a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
-         :closable="true" :mask-closable="false"
-         :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
-    <a-form layout="inline">
-        <a-form-item>
-            <span slot="label">{{ i18n "pages.client.clientCount" }}</span>
-            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-        <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
-    </a-form>
-</a-modal>
-<script>
-
-    const clientsBulkModal = {
-        visible: false,
-        title: '',
-        okText: '',
-        confirm: null,
-        dbInbound: new DBInbound(),
-        inbound: new Inbound(),
-        clients: [],
-        quantity: 1,
-        totalGB: 0,
-        expiryTime: '',
-        ok() {
-            for (let i = 0; i < clientsBulkModal.quantity; i++) {
-                newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
-                newClient._totalGB = clientsBulkModal.totalGB;
-                newClient._expiryTime = clientsBulkModal.expiryTime;
-                clientsBulkModal.clients.push(newClient);
-            }
-            ObjectUtil.execute(clientsBulkModal.confirm, clientsBulkModal.inbound, clientsBulkModal.dbInbound);
-        },
-        show({ title='', okText='{{ i18n "sure" }}', dbInbound=null, confirm=(inbound, dbInbound)=>{} }) {
-            this.visible = true;
-            this.title = title;
-            this.okText = okText;
-            this.confirm = confirm;
-            this.quantity = 1;
-            this.totalGB = 0;
-            this.expiryTime = '';
-            this.dbInbound = new DBInbound(dbInbound);
-            this.inbound = dbInbound.toInbound();
-            this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
-        },
-        getClients(protocol, clientSettings) {
-            switch(protocol){
-                case Protocols.VMESS: return clientSettings.vmesses;
-                case Protocols.VLESS: return clientSettings.vlesses;
-                case Protocols.TROJAN: return clientSettings.trojans;
-                default: return null;
-            }
-        },
-        newClient(protocol) {
-            switch (protocol) {
-                case Protocols.VMESS: return new Inbound.VmessSettings.Vmess();
-                case Protocols.VLESS: return new Inbound.VLESSSettings.VLESS();
-                case Protocols.TROJAN: return new Inbound.TrojanSettings.Trojan();
-                default: return null;
-            }
-        },
-        close() {
-            clientsBulkModal.visible = false;
-            clientsBulkModal.loading(false);
-        },
-        loading(loading) {
-            clientsBulkModal.confirmLoading = loading;
-        },
-    };
-    
-    const clientsBulkModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#client-bulk-modal',
-        data: {
-            clientsBulkModal,
-            get inbound() {
-                return this.clientsBulkModal.inbound;
-            },
-        },
-    });
-</script>
-{{end}}
\ No newline at end of file
+{{define "clientsBulkModal"}}
+<a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
+         :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
+         :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
+    <a-form layout="inline">
+        <a-form-item>
+            <span slot="label">{{ i18n "pages.client.clientCount" }}</span>
+            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+        </a-form-item>
+        <a-form-item>
+            <span slot="label">
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+        <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item>
+            <span slot="label">
+                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
+        </a-form-item>
+    </a-form>
+</a-modal>
+<script>
+
+    const clientsBulkModal = {
+        visible: false,
+        confirmLoading: false,
+        title: '',
+        okText: '',
+        confirm: null,
+        dbInbound: new DBInbound(),
+        inbound: new Inbound(),
+        clients: [],
+        quantity: 1,
+        totalGB: 0,
+        expiryTime: '',
+        ok() {
+            for (let i = 0; i < clientsBulkModal.quantity; i++) {
+                newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
+                newClient._totalGB = clientsBulkModal.totalGB;
+                newClient._expiryTime = clientsBulkModal.expiryTime;
+                clientsBulkModal.clients.push(newClient);
+            }
+            ObjectUtil.execute(clientsBulkModal.confirm, clientsBulkModal.inbound, clientsBulkModal.dbInbound);
+        },
+        show({ title='', okText='{{ i18n "sure" }}', dbInbound=null, confirm=(inbound, dbInbound)=>{} }) {
+            this.visible = true;
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.quantity = 1;
+            this.totalGB = 0;
+            this.expiryTime = '';
+            this.dbInbound = new DBInbound(dbInbound);
+            this.inbound = dbInbound.toInbound();
+            this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
+        },
+        getClients(protocol, clientSettings) {
+            switch(protocol){
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                default: return null;
+            }
+        },
+        newClient(protocol) {
+            switch (protocol) {
+                case Protocols.VMESS: return new Inbound.VmessSettings.Vmess();
+                case Protocols.VLESS: return new Inbound.VLESSSettings.VLESS();
+                case Protocols.TROJAN: return new Inbound.TrojanSettings.Trojan();
+                default: return null;
+            }
+        },
+        close() {
+            clientsBulkModal.visible = false;
+            clientsBulkModal.loading(false);
+        },
+        loading(loading) {
+            clientsBulkModal.confirmLoading = loading;
+        },
+    };
+
+    const clientsBulkModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#client-bulk-modal',
+        data: {
+            clientsBulkModal,
+            get inbound() {
+                return this.clientsBulkModal.inbound;
+            },
+        },
+    });
+</script>
+{{end}}
diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index b3b56ce6..129d2cc5 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -1,109 +1,110 @@
-{{define "clientsModal"}}
-<a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
-         :closable="true" :mask-closable="false"
-         :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
-    {{template "form/client"}}
-</a-modal>
-<script>
-
-    const clientModal = {
-        visible: false,
-        title: '',
-        okText: '',
-        dbInbound: new DBInbound(),
-        inbound: new Inbound(),
-        clients: [],
-        clientStats: [],
-        index: null,
-        isExpired: false,
-        ok() {
-            ObjectUtil.execute(clientModal.confirm, clientModal.inbound, clientModal.dbInbound, clientModal.index);
-        },
-        show({ title='', okText='{{ i18n "sure" }}', index=null, dbInbound=null, confirm=(index, dbInbound)=>{}, isEdit=false  }) {
-            this.visible = true;
-            this.title = title;
-            this.okText = okText;
-            this.isEdit = isEdit;
-            this.dbInbound = new DBInbound(dbInbound);
-            this.inbound = dbInbound.toInbound();
-            this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
-            this.index = index === null ? this.clients.length : index;
-            this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false;
-            if (!isEdit){
-                this.addClient(this.inbound.protocol, this.clients);
-            }
-            this.clientStats = this.dbInbound.clientStats.find(row => row.email === this.clients[this.index].email);
-            this.confirm = confirm;
-        },
-        getClients(protocol, clientSettings) {
-            switch(protocol){
-                case Protocols.VMESS: return clientSettings.vmesses;
-                case Protocols.VLESS: return clientSettings.vlesses;
-                case Protocols.TROJAN: return clientSettings.trojans;
-                default: return null;
-            }
-        },
-        addClient(protocol, clients) {
-            switch (protocol) {
-                case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
-                case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
-                case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
-                default: return null;
-            }
-        },
-        close() {
-            clientModal.visible = false;
-            clientModal.loading(false);
-        },
-        loading(loading) {
-            clientModal.confirmLoading = loading;
-        },
-    };
-    
-    const clientModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#client-modal',
-        data: {
-            clientModal,
-            get inbound() {
-                return this.clientModal.inbound;
-            },
-            get client() {
-                return this.clientModal.clients[this.clientModal.index];
-            },
-            get clientStats() {
-                return this.clientModal.clientStats;
-            },
-            get isEdit() {
-                return this.clientModal.isEdit;
-            },
-            get isTrafficExhausted() {
-                if(!clientStats) return false
-                if(clientStats.total == 0) return false
-                if(clientStats.up + clientStats.down < clientStats.total) return false
-                return true
-            },
-            get isExpiry() {
-                return this.clientModal.isExpired
-            },
-            get statsColor() {
-                if(!clientStats) return 'blue'
-                if(clientStats.total === 0) return 'blue'
-                else if(clientStats.total > 0 && (clientStats.down+clientStats.up) < clientStats.total) return 'cyan'
-                else return 'red'
-            }
-        },
-        methods: {
-            getNewEmail(client) {
-                var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
-                var string = '';
-                var len = 6 + Math.floor(Math.random() * 5);
-                for(var ii=0; ii<len; ii++){
-                    string += chars[Math.floor(Math.random() * chars.length)];
-                }
-                client.email = string;
-            },
-        },
-    });
-</script>
-{{end}}
\ No newline at end of file
+{{define "clientsModal"}}
+<a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
+         :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
+         :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
+    {{template "form/client"}}
+</a-modal>
+<script>
+
+    const clientModal = {
+        visible: false,
+        confirmLoading: false,
+        title: '',
+        okText: '',
+        dbInbound: new DBInbound(),
+        inbound: new Inbound(),
+        clients: [],
+        clientStats: [],
+        index: null,
+        isExpired: false,
+        ok() {
+            ObjectUtil.execute(clientModal.confirm, clientModal.inbound, clientModal.dbInbound, clientModal.index);
+        },
+        show({ title='', okText='{{ i18n "sure" }}', index=null, dbInbound=null, confirm=(index, dbInbound)=>{}, isEdit=false  }) {
+            this.visible = true;
+            this.title = title;
+            this.okText = okText;
+            this.isEdit = isEdit;
+            this.dbInbound = new DBInbound(dbInbound);
+            this.inbound = dbInbound.toInbound();
+            this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
+            this.index = index === null ? this.clients.length : index;
+            this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false;
+            if (!isEdit){
+                this.addClient(this.inbound.protocol, this.clients);
+            }
+            this.clientStats = this.dbInbound.clientStats.find(row => row.email === this.clients[this.index].email);
+            this.confirm = confirm;
+        },
+        getClients(protocol, clientSettings) {
+            switch(protocol){
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                default: return null;
+            }
+        },
+        addClient(protocol, clients) {
+            switch (protocol) {
+                case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
+                case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
+                case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
+                default: return null;
+            }
+        },
+        close() {
+            clientModal.visible = false;
+            clientModal.loading(false);
+        },
+        loading(loading) {
+            clientModal.confirmLoading = loading;
+        },
+    };
+
+    const clientModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#client-modal',
+        data: {
+            clientModal,
+            get inbound() {
+                return this.clientModal.inbound;
+            },
+            get client() {
+                return this.clientModal.clients[this.clientModal.index];
+            },
+            get clientStats() {
+                return this.clientModal.clientStats;
+            },
+            get isEdit() {
+                return this.clientModal.isEdit;
+            },
+            get isTrafficExhausted() {
+                if(!clientStats) return false
+                if(clientStats.total == 0) return false
+                if(clientStats.up + clientStats.down < clientStats.total) return false
+                return true
+            },
+            get isExpiry() {
+                return this.clientModal.isExpired
+            },
+            get statsColor() {
+                if(!clientStats) return 'blue'
+                if(clientStats.total === 0) return 'blue'
+                else if(clientStats.total > 0 && (clientStats.down+clientStats.up) < clientStats.total) return 'cyan'
+                else return 'red'
+            }
+        },
+        methods: {
+            getNewEmail(client) {
+                var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
+                var string = '';
+                var len = 6 + Math.floor(Math.random() * 5);
+                for(var ii=0; ii<len; ii++){
+                    string += chars[Math.floor(Math.random() * chars.length)];
+                }
+                client.email = string;
+            },
+        },
+    });
+</script>
+{{end}}