{{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" :class="siderDrawer.isDarkTheme ? darkClass : ''" :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, clientIps: null, isExpired: false, delayedStart: 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; this.delayedStart = false; if (!isEdit){ this.addClient(this.inbound.protocol, this.clients); } else { if (this.clients[index].expiryTime < 0){ this.delayedStart = true; } } 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' }, get delayedExpireDays() { return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0; }, set delayedExpireDays(days){ this.client.expiryTime = -86400000 * days; }, }, 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; }, async getDBClientIps(email,event) { const msg = await HttpUtil.post('/xui/inbound/clientIps/'+ email); if (!msg.success) { return; } try { ips = JSON.parse(msg.obj) ips = ips.join(",") event.target.value = ips } catch (error) { // text event.target.value = msg.obj } }, async clearDBClientIps(email) { const msg = await HttpUtil.post('/xui/inbound/clearClientIps/'+ email); if (!msg.success) { return; } document.getElementById("clientIPs").value = "" }, }, }); </script> {{end}}