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

63 files changed, 392 insertions, 429 deletions

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' }"> [[ remainedDays(client.expiryTime) ]] </td>
             <td width="120px" class="infinite-bar">
               <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                 <template slot="content">
@@ -230,7 +230,7 @@
             <td width="60px">[[ client.reset + "d" ]]</td>
           </template>
           <template v-else>
-            <td colspan="3" style="text-align: center;">
+            <td colspan="3" :style="{ textAlign: 'center' }">
               <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
                 <template slot="content">
                   <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
@@ -244,7 +244,7 @@
                     </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="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
                 <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
@@ -257,8 +257,8 @@
       </table>
     </template>
     <a-badge>
-      <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
-      <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;">
+      <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
+      <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
         <a-icon type="solution"></a-icon>
       </a-button>
     </a-badge>
diff --git a/web/html/xui/component/aCustomStatistic.html b/web/html/component/aCustomStatistic.html
index 0bff128d..0bff128d 100644
--- a/web/html/xui/component/aCustomStatistic.html
+++ b/web/html/component/aCustomStatistic.html
diff --git a/web/html/xui/component/aPersianDatepicker.html b/web/html/component/aPersianDatepicker.html
index 58132ddd..ebd85a08 100644
--- a/web/html/xui/component/aPersianDatepicker.html
+++ b/web/html/component/aPersianDatepicker.html
@@ -5,7 +5,7 @@
             @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
             :placeholder="placeholder">
             <template #addonAfter>
-                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
+                <a-icon type="calendar" :style="{ fontSize: '14px', opacity: '0.5' }" />
             </template>
         </a-input>
     </div>
diff --git a/web/html/xui/component/aSettingListItem.html b/web/html/component/aSettingListItem.html
index 6a7d31d0..27a7abac 100644
--- a/web/html/xui/component/aSettingListItem.html
+++ b/web/html/component/aSettingListItem.html
@@ -1,6 +1,6 @@
 {{define "component/settingListItem"}}
 <a-list-item :style="{ padding: padding }">
-    <a-row>
+    <a-row :gutter="[8,16]">
         <a-col :lg="24" :xl="12">
             <a-list-item-meta>
                 <template #title>
diff --git a/web/html/xui/component/aSidebar.html b/web/html/component/aSidebar.html
index dfaebb17..dfaebb17 100644
--- a/web/html/xui/component/aSidebar.html
+++ b/web/html/component/aSidebar.html
diff --git a/web/html/xui/component/aTableSortable.html b/web/html/component/aTableSortable.html
index 7dbc3d0a..443ac50c 100644
--- a/web/html/xui/component/aTableSortable.html
+++ b/web/html/component/aTableSortable.html
@@ -1,5 +1,5 @@
 {{define "component/sortableTableTrigger"}}
-<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
+<a-icon type="drag" class="sortable-icon" :style="{ cursor: 'move' }" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
   @click="clickHandler" />
 {{end}}
 
diff --git a/web/html/xui/component/aThemeSwitch.html b/web/html/component/aThemeSwitch.html
index 2f76cd1b..ccc17714 100644
--- a/web/html/xui/component/aThemeSwitch.html
+++ b/web/html/component/aThemeSwitch.html
@@ -8,13 +8,13 @@
       </span>
       <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
         <span>{{ i18n "menu.dark" }}</span>
-        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
+        <a-switch :style="{ marginLeft: '2px' }" size="small" :default-checked="themeSwitcher.isDarkTheme"
           @change="themeSwitcher.toggleTheme()"></a-switch>
       </a-menu-item>
       <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
         @mousedown="themeSwitcher.animationsOffUltra()">
         <span>{{ i18n "menu.ultraDark" }}</span>
-        <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra"
+        <a-checkbox :style="{ marginLeft: '2px' }" :checked="themeSwitcher.isUltra"
           @click="themeSwitcher.toggleUltra()"></a-checkbox>
       </a-menu-item>
     </a-sub-menu>
diff --git a/web/html/xui/form/allocate.html b/web/html/form/allocate.html
index aba8d5c9..aba8d5c9 100644
--- a/web/html/xui/form/allocate.html
+++ b/web/html/form/allocate.html
diff --git a/web/html/xui/form/client.html b/web/html/form/client.html
index 3aff67e0..c67f1470 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/form/client.html
@@ -66,7 +66,7 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-input-number style="width: 50%" v-model.number="client.tgId" min="0"></a-input-number>
+        <a-input-number :style="{ width: '50%' }" v-model.number="client.tgId" min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-if="client.email" label='{{ i18n "comment" }}'>
         <a-input v-model.trim="client.comment"></a-input>
@@ -97,7 +97,7 @@
             <template slot="title">
                 <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
             </template>
-            <span style="color: #FF4D4F">
+            <span :style="{ color: '#FF4D4F' }">
                 <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
             </span>
         </a-tooltip>
diff --git a/web/html/xui/form/inbound.html b/web/html/form/inbound.html
index e0521c69..021a51c7 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/form/inbound.html
@@ -54,7 +54,7 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-date-picker style="width: 100%;" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
+        <a-date-picker :style="{ width: '100%' }" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
             format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
             v-model="dbInbound._expiryTime"></a-date-picker>
         <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'