Code refactoring (#2865)

* refactor: use vue inline styles in entire application

* refactor: setting row in dashboard page

* refactor: use blob for download file in text modal

* refactor: move all html templates in `web/html` folder

* refactor: `DeviceUtils` -> `MediaQueryMixin`
The transition to mixins has been made, as they can update themselves.

* chore: pretty right buttons in `outbounds` tab in xray settings

* refactor: add translations for system status

* refactor: adjust gutter spacing in setting list item

* refactor: use native `a-input-password` for password field

* chore: return old system status
with new translations

* chore: add missing translation

76 files changed, 570 insertions, 473 deletions

diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index 625af8b9..93416abe 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -83,7 +83,7 @@ class PromiseUtil {
 class RandomUtil {
     static getSeq({ type = "default", hasNumbers = true, hasLowercase = true, hasUppercase = true } = {}) {
         let seq = '';
-        
+
         switch (type) {
             case "hex":
                 seq += "0123456789abcdef";
@@ -488,7 +488,7 @@ class ClipboardManager {
         return new Promise((resolve) => {
             try {
                 const textarea = window.document.createElement('textarea');
-    
+
                 textarea.style.fontSize = '12pt';
                 textarea.style.border = '0';
                 textarea.style.padding = '0';
@@ -498,14 +498,14 @@ class ClipboardManager {
                 textarea.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
                 textarea.setAttribute('readonly', '');
                 textarea.value = content;
-    
+
                 window.document.body.appendChild(textarea);
-    
+
                 textarea.select();
                 window.document.execCommand("copy");
-    
+
                 window.document.body.removeChild(textarea);
-    
+
                 resolve(true)
             } catch {
                 resolve(false)
@@ -558,7 +558,7 @@ class CPUFormatter {
     static cpuSpeedFormat(speed) {
         return speed > 1000 ? (speed / 1000).toFixed(2) + " GHz" : speed.toFixed(2) + " MHz";
     }
-    
+
     static cpuCoreFormat(cores) {
         return cores === 1 ? "1 Core" : cores + " Cores";
     }
@@ -579,7 +579,7 @@ class NumberFormatter {
     static addZero(num) {
         return num < 10 ? "0" + num : num;
     }
-    
+
     static toFixed(num, n) {
         n = Math.pow(10, n);
         return Math.floor(num * n) / n;
@@ -610,7 +610,7 @@ class CookieManager {
         }
         return '';
     }
-    
+
     static setCookie(cname, cvalue, exdays) {
         const d = new Date();
         d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
@@ -630,7 +630,7 @@ class ColorUtils {
             default: return "red";
         }
     }
-    
+
     static clientUsageColor(clientStats, trafficDiff) {
         switch (true) {
             case !clientStats || clientStats.total == 0: return "#7a316f";
@@ -639,7 +639,7 @@ class ColorUtils {
             default: return "#cf3c3c";
         }
     }
-    
+
     static userExpiryColor(threshold, client, isDark = false) {
         if (!client.enable) return isDark ? '#2c3950' : '#bcbcbc';
         let now = new Date().getTime(), expiry = client.expiryTime;
@@ -665,7 +665,7 @@ class URLBuilder {
         if (!host || host.length === 0) host = window.location.hostname;
         if (!port || port.length === 0) port = window.location.port;
         if (isTLS === undefined) isTLS = window.location.protocol === "https:";
-        
+
         const protocol = isTLS ? "https:" : "http:";
         port = String(port);
         if (port === "" || (isTLS && port === "443") || (!isTLS && port === "80")) {
@@ -673,7 +673,7 @@ class URLBuilder {
         } else {
             port = `:${port}`;
         }
-        
+
         return `${protocol}//${host}${port}${base}${path}`;
     }
 }
@@ -744,11 +744,11 @@ class LanguageManager {
 
     static getLanguage() {
         let lang = CookieManager.getCookie("lang");
-    
+
         if (!lang) {
             if (window.navigator) {
                 lang = window.navigator.language || window.navigator.userLanguage;
-    
+
                 if (LanguageManager.isSupportLanguage(lang)) {
                     CookieManager.setCookie("lang", lang, 150);
                 } else {
@@ -760,30 +760,43 @@ class LanguageManager {
                 window.location.reload();
             }
         }
-    
+
         return lang;
     }
-    
+
     static setLanguage(language) {
         if (!LanguageManager.isSupportLanguage(language)) {
             language = "en-US";
         }
-    
+
         CookieManager.setCookie("lang", language, 150);
         window.location.reload();
     }
-    
+
     static isSupportLanguage(language) {
         const languageFilter = LanguageManager.supportedLanguages.filter((lang) => {
             return lang.value === language
         })
-    
+
         return languageFilter.length > 0;
-    }    
+    }
 }
 
-class DeviceUtils {
-    static isMobile() {
-        return window.innerWidth <= 768;
-    }
+const MediaQueryMixin = {
+    data() {
+        return {
+            isMobile: window.innerWidth <= 768,
+        };
+    },
+    methods: {
+        updateDeviceType() {
+            this.isMobile = window.innerWidth <= 768;
+        },
+    },
+    mounted() {
+        window.addEventListener('resize', this.updateDeviceType);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateDeviceType);
+    },
 }
\ No newline at end of file
diff --git a/web/html/xui/component/aClientTable.html b/web/html/component/aClientTable.html
index 2bea96e8..868112d9 100644
--- a/web/html/xui/component/aClientTable.html
+++ b/web/html/component/aClientTable.html
@@ -2,30 +2,30 @@
 <template slot="actions" slot-scope="text, client, index">
   <a-tooltip>
     <template slot="title">{{ i18n "qrCode" }}</template>
-    <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
+    <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
   </a-tooltip>
   <a-tooltip>
     <template slot="title">{{ i18n "pages.client.edit" }}</template>
-    <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
+    <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
   </a-tooltip>
   <a-tooltip>
     <template slot="title">{{ i18n "info" }}</template>
-    <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
+    <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
   </a-tooltip>
   <a-tooltip>
     <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
     <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)" title='{{ i18n "pages.inbounds.resetTrafficContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}' cancel-text='{{ i18n "cancel"}}'>
-      <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: var(--color-primary-100)' : 'color: var(--color-primary-100)'"></a-icon>
-      <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
+      <a-icon slot="icon" type="question-circle-o" :style="{ color: 'var(--color-primary-100)'}"></a-icon>
+      <a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
     </a-popconfirm>
   </a-tooltip>
   <a-tooltip>
     <template slot="title">
-      <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
+      <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
     </template>
     <a-popconfirm @confirm="delClient(record.id,client,false)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
-      <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
-      <a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
+      <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
+      <a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
     </a-popconfirm>
   </a-tooltip>
 </template>
@@ -124,9 +124,9 @@
           </template>
         </span>
       </template>
-      <a-tag style="min-width: 50px; border: none;" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
+      <a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
     </a-popover>
-    <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">
+    <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" :style="{ border: 'none' }" class="infinite-tag">
       <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
         <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
       </svg>
@@ -135,27 +135,27 @@
 </template>
 <template slot="actionMenu" slot-scope="text, client, index">
   <a-dropdown :trigger="['click']">
-    <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon>
+    <a-icon @click="e => e.preventDefault()" type="ellipsis" :style="{ fontSize: '20px' }"></a-icon>
     <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
       <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
-        <a-icon style="font-size: 14px;" type="qrcode"></a-icon>
+        <a-icon :style="{ fontSize: '14px' }" type="qrcode"></a-icon>
         {{ i18n "qrCode" }}
       </a-menu-item>
       <a-menu-item @click="openEditClient(record.id,client);">
-        <a-icon style="font-size: 14px;" type="edit"></a-icon>
+        <a-icon :style="{ fontSize: '14px' }" type="edit"></a-icon>
         {{ i18n "pages.client.edit" }}
       </a-menu-item>
       <a-menu-item @click="showInfo(record.id,client);">
-        <a-icon style="font-size: 14px;" type="info-circle"></a-icon>
+        <a-icon :style="{ fontSize: '14px' }" type="info-circle"></a-icon>
         {{ i18n "info" }}
       </a-menu-item>
       <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
-        <a-icon style="font-size: 14px;" type="retweet"></a-icon>
+        <a-icon :style="{ fontSize: '14px' }" type="retweet"></a-icon>
         {{ i18n "pages.inbounds.resetTraffic" }}
       </a-menu-item>
       <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
-        <a-icon style="font-size: 14px;" type="delete"></a-icon>
-        <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
+        <a-icon :style="{ fontSize: '14px' }" type="delete"></a-icon>
+        <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
       </a-menu-item>
       <a-menu-item>
         <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)"></a-switch>
@@ -169,10 +169,10 @@
     <template slot="content">
       <table>
         <tr>
-          <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
+          <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
         </tr>
         <tr>
-          <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
+          <td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
           <td width="120px" v-if="!client.enable">
             <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
           </td>
@@ -202,14 +202,14 @@
           </td>
         </tr>
         <tr>
-          <td colspan="3" style="text-align: center;">
-            <a-divider style="margin: 0; border-collapse: separate;"></a-divider>
+          <td colspan="3" :style="{ textAlign: 'center' }">
+            <a-divider :style="{ margin: '0', borderCollapse: 'separate' }"></a-divider>
             {{ i18n "pages.inbounds.expireDate" }}
           </td>
         </tr>
         <tr>
           <template v-if="client.expiryTime !=0 && client.reset >0">
-            <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ remainedDays(client.expiryTime) ]] </td>
+            <td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[            
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living