3x-ui/web/html/xui/client_modal.html

{{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}}