Merge pull request #381 from hamid-gh98/main

[FIX] bug logout path + [UPDATE] login UI and more ... 

30 files changed, 1247 insertions, 1117 deletions

diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
index 4b8a13d0..17a65ec1 100644
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -1,7 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
@@ -36,12 +36,12 @@
         },
         confirm() {},
         open({
-                title='',
-                type='text',
-                value='',
-                okText='{{ i18n "sure"}}',
-                confirm=() => {},
-            }) {
+            title = '',
+            type = 'text',
+            value = '',
+            okText = '{{ i18n "sure"}}',
+            confirm = () => {},
+        }) {
             this.title = title;
             this.type = type;
             this.value = value;
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index f492dabb..2bd2f00f 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,10 +1,12 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :footer="null"
          width="300px">
-    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
+    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
+        {{ i18n "pages.inbounds.clickOnQRcode" }}
+    </a-tag>
     <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas>
 </a-modal>
 
@@ -19,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', dbInbound=new DBInbound(), copyText='') {
+        show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '') {
             this.title = title;
             this.content = content;
             this.dbInbound = dbInbound;
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index ce77d0ca..1514051b 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,7 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
@@ -21,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', fileName='') {
+        show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;
diff --git a/web/html/login.html b/web/html/login.html
index 2f4cb3e6..1b6478de 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -18,6 +18,12 @@
         border-radius: 30px;
     }
 
+    .ant-input-group-addon {
+        border-radius: 0 30px 30px 0;
+        width: 50px;
+        font-size: 18px;
+    }
+
     .ant-input-affix-wrapper .ant-input-prefix {
         left: 23px;
     }
@@ -26,20 +32,26 @@
         padding-left: 50px;
     }
 
-    .selectLang{
+    .centered {
         display: flex;
         text-align: center;
+        align-items: center;
         justify-content: center;
     }
 
+    .title {
+        font-size: 32px;
+        font-weight: bold;
+    }
+
 </style>
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.darkClass">
     <transition name="list" appear>
         <a-layout-content>
             <a-row type="flex" justify="center">
                 <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
-                    <h1>{{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
@@ -48,35 +60,33 @@
                         <a-form-item>
                             <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                      @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
+                                <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                             </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-input type="password" v-model.trim="user.password"
-                                     placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
-                            </a-input>
+                            <password-input icon="lock" v-model.trim="user.password"
+                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-form-item>
                         <a-form-item v-if="secretEnable">
-                            <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login">
-                            <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/>
+                            <password-input icon="key" v-model.trim="user.loginSecret"
+                                            placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button>
+                            <a-row justify="center" class="centered">
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
+                            </a-row>
                         </a-form-item>
                         <a-form-item>
-
-                            <a-row justify="center" class="selectLang">
-                                <a-col :span="5"><span>Language :</span></a-col>
-
-                                <a-col :span="7">
-                                    <a-select
-                                            ref="selectLang"
-                                            v-model="lang"
-                                            @change="setLang(lang)"
-                                    >
-                                        <a-select-option  :value="l.value" label="English" v-for="l in supportLangs" >
+                            <a-row justify="center" class="centered">
+                                <a-col :span="12">
+                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
                                             <span role="img" aria-label="l.name" v-text="l.icon"></span>
                                             &nbsp;&nbsp;<span v-text="l.name"></span>
                                         </a-select-option>
@@ -84,6 +94,11 @@
                                 </a-col>
                             </a-row>
                         </a-form-item>
+                        <a-form-item>
+                            <a-row justify="center" class="centered">
+                                <theme-switch />
+                            </a-row>
+                        </a-form-item>
                     </a-form>
                 </a-col>
             </a-row>
@@ -91,24 +106,24 @@
     </transition>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
 <script>
-    const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
-    const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
-    const deg = RandomUtil.randomIntRange(0, 360);
-    const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
-    document.querySelector('#app').style.background = background;
+
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
+            themeSwitcher,
             loading: false,
             user: new User(),
             secretEnable: false,
-            lang : ""
+            lang: ""
         },
-        created(){
-          this.lang = getLang();
-          this.secretEnable = this.getSecretStatus();
+        created() {
+            this.updateBackground();
+            this.lang = getLang();
+            this.secretEnable = this.getSecretStatus();
         },
         methods: {
             async login() {
@@ -120,16 +135,29 @@
                 }
             },
             async getSecretStatus() {
-                this.loading= true;
+                this.loading = true;
                 const msg = await HttpUtil.post('/getSecretStatus');
                 this.loading = false;
-                if (msg.success){
+                if (msg.success) {
                     this.secretEnable = msg.obj;
                     return msg.obj;
                 }
-            }
-        }
+            },
+            updateBackground() {
+                const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
+                const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
+                const deg = RandomUtil.randomIntRange(0, 360);
+                const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
+                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
+            },
+        },
+        watch: {
+            'themeSwitcher.isDarkTheme'(newVal, oldVal) {
+                this.updateBackground();
+            },
+        },
     });
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index d35d7278..076579a9 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -1,11 +1,11 @@
 {{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"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
         <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option :value="0">Random</a-select-option>
                 <a-select-option :value="1">Random+Prefix</a-select-option>
                 <a-select-option :value="2">Random+Prefix+Num</a-select-option>
@@ -71,20 +71,20 @@
         </a-form-item>
         <br>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option value="">{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.inbound.canEnableTlsFlow()" label="Flow" layout="inline">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -104,7 +104,7 @@
         </a-form-item>
         <a-form-item v-else>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -113,7 +113,7 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                           :dropdown-class-name="themeSwitcher.darkCardClass"
                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-form>
@@ -143,37 +143,42 @@
         delayedStart: false,
         ok() {
             clients = [];
-            method=clientsBulkModal.emailMethod;
-            if(method>1){
-                start=clientsBulkModal.firstNum;
-                end=clientsBulkModal.lastNum + 1;
+            method = clientsBulkModal.emailMethod;
+            if (method > 1) {
+                start = clientsBulkModal.firstNum;
+                end = clientsBulkModal.lastNum + 1;
             } else {
-                start=0;
-                end=clientsBulkModal.quantity;
+                start = 0;
+                end = clientsBulkModal.quantity;
             }
-            prefix = (method>0 && clientsBulkModal.emailPrefix.length>0) ? clientsBulkModal.emailPrefix : "";
-            useNum=(method>1);
-            postfix = (method>2 && clientsBulkModal.emailPostfix.length>0) ? clientsBulkModal.emailPostfix : "";
+            prefix = (method > 0 && clientsBulkModal.emailPrefix.length > 0) ? clientsBulkModal.emailPrefix : "";
+            useNum = (method > 1);
+            postfix = (method > 2 && clientsBulkModal.emailPostfix.length > 0) ? clientsBulkModal.emailPostfix : "";
             for (let i = start; i < end; i++) {
                 newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
-                if(method==4) newClient.email = "";
+                if (method == 4) newClient.email = "";
                 newClient.email += useNum ? prefix + i.toString() + postfix : prefix + postfix;
                 newClient.subId = clientsBulkModal.subId;
                 newClient.tgId = clientsBulkModal.tgId;
                 newClient.limitIp = clientsBulkModal.limitIp;
                 newClient._totalGB = clientsBulkModal.totalGB;
                 newClient._expiryTime = clientsBulkModal.expiryTime;
-                if(clientsBulkModal.inbound.canEnableTlsFlow()){
+                if (clientsBulkModal.inbound.canEnableTlsFlow()) {
                     newClient.flow = clientsBulkModal.flow;
                 }
-                if(clientsBulkModal.inbound.xtls){
+                if (clientsBulkModal.inbound.xtls) {
                     newClient.flow = clientsBulkModal.flow;
                 }
                 clients.push(newClient);
             }
             ObjectUtil.execute(clientsBulkModal.confirm, clients, clientsBulkModal.dbInbound.id);
         },
-        show({ title='', okText='{{ i18n "sure" }}', dbInbound=null, confirm=(inbound, dbInbound)=>{} }) {
+        show({
+            title = '',
+            okText = '{{ i18n "sure" }}',
+            dbInbound = null,
+            confirm = (inbound, dbInbound) => { }
+        }) {
             this.visible = true;
             this.title = title;
             this.okText = okText;
@@ -181,21 +186,21 @@
             this.quantity = 1;
             this.totalGB = 0;
             this.expiryTime = 0;
-            this.emailMethod= 0;
-            this.limitIp= 0;
-            this.firstNum= 1;
-            this.lastNum= 1;
-            this.emailPrefix= "";
-            this.emailPostfix= "";
-            this.subId= "";
-            this.tgId= "";
-            this.flow= "";
+            this.emailMethod = 0;
+            this.limitIp = 0;
+            this.firstNum = 1;
+            this.lastNum = 1;
+            this.emailPrefix = "";
+            this.emailPostfix = "";
+            this.subId = "";
+            this.tgId = "";
+            this.flow = "";
             this.dbInbound = new DBInbound(dbInbound);
             this.inbound = dbInbound.toInbound();
             this.delayedStart = false;
         },
         getClients(protocol, clientSettings) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.VMESS: return clientSettings.vmesses;
                 case Protocols.VLESS: return clientSettings.vlesses;
                 case Protocols.TROJAN: return clientSettings.trojans;
@@ -230,10 +235,11 @@
             get delayedExpireDays() {
                 return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
             },
-            set delayedExpireDays(days){
+            set delayedExpireDays(days) {
                 this.clientsBulkModal.expiryTime = -86400000 * days;
             },
         },
     });
+
 </script>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index e459b520..89175f31 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -1,7 +1,7 @@
 {{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 : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/client"}}
 </a-modal>
@@ -23,13 +23,13 @@
         isExpired: false,
         delayedStart: false,
         ok() {
-            if(clientModal.isEdit){
+            if (clientModal.isEdit) {
                 ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id, clientModal.oldClientId);
             } else {
                 ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id);
             }
         },
-        show({ title='', okText='{{ i18n "sure" }}', index=null, dbInbound=null, confirm=()=>{}, isEdit=false  }) {
+        show({ title = '', okText = '{{ i18n "sure" }}', index = null, dbInbound = null, confirm = () => { }, isEdit = false }) {
             this.visible = true;
             this.title = title;
             this.okText = okText;
@@ -40,11 +40,11 @@
             this.index = index === null ? this.clients.length : index;
             this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false;
             this.delayedStart = false;
-            if (isEdit){
-                if (this.clients[index].expiryTime < 0){
+            if (isEdit) {
+                if (this.clients[index].expiryTime < 0) {
                     this.delayedStart = true;
                 }
-                this.oldClientId = this.getClientId(dbInbound.protocol,clients[index]);
+                this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]);
             } else {
                 this.addClient(this.inbound.protocol, this.clients);
             }
@@ -52,7 +52,7 @@
             this.confirm = confirm;
         },
         getClients(protocol, clientSettings) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.VMESS: return clientSettings.vmesses;
                 case Protocols.VLESS: return clientSettings.vlesses;
                 case Protocols.TROJAN: return clientSettings.trojans;
@@ -61,7 +61,7 @@
             }
         },
         getClientId(protocol, client) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.TROJAN: return client.password;
                 case Protocols.SHADOWSOCKS: return client.email;
                 default: return client.id;
@@ -103,24 +103,24 @@
                 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
+                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'
+                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){
+            set delayedExpireDays(days) {
                 this.client.expiryTime = -86400000 * days;
             },
         },
@@ -129,13 +129,13 @@
                 var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
                 var string = '';
                 var len = 6 + Math.floor(Math.random() * 5);
-                for(var ii=0; ii<len; ii++){
+                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);
+            async getDBClientIps(email, event) {
+                const msg = await HttpUtil.post('/xui/inbound/clientIps/' + email);
                 if (!msg.success) {
                     return;
                 }
@@ -149,22 +149,22 @@
                 }
             },
             async clearDBClientIps(email) {
-                const msg = await HttpUtil.post('/xui/inbound/clearClientIps/'+ email);
+                const msg = await HttpUtil.post('/xui/inbound/clearClientIps/' + email);
                 if (!msg.success) {
                     return;
                 }
                 document.getElementById("clientIPs").value = ""
             },
-            resetClientTraffic(email,dbInboundId,iconElement) {
+            resetClientTraffic(email, dbInboundId, iconElement) {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         iconElement.disabled = true;
-                        const msg = await HttpUtil.postWithModal('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ email);
+                        const msg = await HttpUtil.postWithModal('/xui/inbound/' + dbInboundId + '/resetClientTraffic/' + email);
                         if (msg.success) {
                             this.clientModal.clientStats.up = 0;
                             this.clientModal.clientStats.down = 0;
@@ -175,5 +175,6 @@
             },
         },
     });
+
 </script>
 {{end}}
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index d059e920..94a2e4a3 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -23,17 +23,14 @@
 
 
 {{define "commonSider"}}
-<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
-            <a-switch :default-checked="siderDrawer.isDarkTheme"
-            checked-children="☀"
-            un-checked-children="🌙"
-            @change="siderDrawer.changeTheme()"></a-switch>
+            <theme-switch />
         </a-menu-item>
     </a-menu>
-    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
@@ -41,32 +38,25 @@
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
           :visible="siderDrawer.visible"
-          :wrap-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''"
+          :wrap-class-name="themeSwitcher.darkDrawerClass"
           :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
-            <a-switch :default-checked="siderDrawer.isDarkTheme"
-            checked-children="☀"
-            un-checked-children="🌙"
-            @change="siderDrawer.changeTheme()"></a-switch>
+            <theme-switch />
         </a-menu-item>
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living