Merge pull request #2823 from shishkevichd/refactor/refactor-5

Code refactoring

33 files changed, 1738 insertions, 1327 deletions

diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
deleted file mode 100644
index 97114c15..00000000
--- a/web/html/xui/common_sider.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{{define "menuItems"}}
-<a-menu-item key="{{ .base_path }}panel/">
-  <a-icon type="dashboard"></a-icon>
-  <span>{{ i18n "menu.dashboard"}}</span>
-</a-menu-item>
-<a-menu-item key="{{ .base_path }}panel/inbounds">
-  <a-icon type="user"></a-icon>
-  <span>{{ i18n "menu.inbounds"}}</span>
-</a-menu-item>
-<a-menu-item key="{{ .base_path }}panel/settings">
-  <a-icon type="setting"></a-icon>
-  <span>{{ i18n "menu.settings"}}</span>
-</a-menu-item>
-<a-menu-item key="{{ .base_path }}panel/xray">
-  <a-icon type="tool"></a-icon>
-  <span>{{ i18n "menu.xray"}}</span>
-</a-menu-item>
-<a-menu-item key="{{ .base_path }}logout">
-  <a-icon type="logout"></a-icon>
-  <span>{{ i18n "menu.logout"}}</span>
-</a-menu-item>
-{{end}}
-
-
-{{define "commonSider"}}
-<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md">
-  <a-theme-switch></a-theme-switch>
-  <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>
-</a-layout-sider>
-<a-drawer id="sider-drawer" placement="left" :closable="false" @close="siderDrawer.close()" :visible="siderDrawer.visible" :wrap-class-name="themeSwitcher.currentTheme" :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-theme-switch></a-theme-switch>
-  <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>
-</a-drawer>
-<script>
-  const siderDrawer = {
-    visible: false,
-    show() {
-      this.visible = true;
-    },
-    close() {
-      this.visible = false;
-    },
-    change() {
-      this.visible = !this.visible;
-    },
-  };
-</script>
-{{end}}
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/component/aClientTable.html
index fbf0699a..2bea96e8 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/component/aClientTable.html
@@ -1,4 +1,4 @@
-{{define "client_table"}}
+{{define "component/aClientTable"}}
 <template slot="actions" slot-scope="text, client, index">
   <a-tooltip>
     <template slot="title">{{ i18n "qrCode" }}</template>
diff --git a/web/html/xui/component/aSidebar.html b/web/html/xui/component/aSidebar.html
new file mode 100644
index 00000000..0ddaa176
--- /dev/null
+++ b/web/html/xui/component/aSidebar.html
@@ -0,0 +1,101 @@
+{{define "component/sidebar/content"}}
+<template>
+    <div class="ant-sidebar">
+        <a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed"
+            @collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md">
+            <a-theme-switch></a-theme-switch>
+            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
+                @click="({key}) => openLink(key)">
+                <a-menu-item v-for="tab in tabs" :key="tab.key">
+                    <a-icon :type="tab.icon"></a-icon>
+                    <span v-text="tab.title"></span>
+                </a-menu-item>
+            </a-menu>
+        </a-layout-sider>
+        <a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible"
+            :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }">
+            <div class="drawer-handle" @click="toggleDrawer" slot="handle">
+                <a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon>
+            </div>
+            <a-theme-switch></a-theme-switch>
+            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
+                @click="({key}) => openLink(key)">
+                <a-menu-item v-for="tab in tabs" :key="tab.key">
+                    <a-icon :type="tab.icon"></a-icon>
+                    <span v-text="tab.title"></span>
+                </a-menu-item>
+            </a-menu>
+        </a-drawer>
+    </div>
+</template>
+{{end}}
+
+{{define "component/aSidebar"}}
+<style>
+    .ant-sidebar>.ant-layout-sider {
+        height: 100%;
+    }
+</style>
+
+<script>
+    const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed"
+
+    Vue.component('a-sidebar', {
+        data() {
+            return {
+                tabs: [
+                    {
+                        key: '/panel/',
+                        icon: 'dashboard',
+                        title: '{{ i18n "menu.dashboard"}}'
+                    },
+                    {
+                        key: '/panel/inbounds',
+                        icon: 'user',
+                        title: '{{ i18n "menu.inbounds"}}'
+                    },
+                    {
+                        key: '/panel/settings',
+                        icon: 'setting',
+                        title: '{{ i18n "menu.settings"}}'
+                    },
+                    {
+                        key: '/panel/xray',
+                        icon: 'tool',
+                        title: '{{ i18n "menu.xray"}}'
+                    },
+                    {
+                        key: '/logout/',
+                        icon: 'logout',
+                        title: '{{ i18n "menu.logout"}}'
+                    },
+                ],
+                activeTab: [
+                    '{{ .request_uri }}'
+                ],
+                visible: false,
+                collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)),
+            }
+        },
+        methods: {
+            openLink(key) {
+                return key.startsWith('http') ? window.open(key) : location.href = key
+            },
+            closeDrawer() {
+                this.visible = false;
+            },
+            toggleDrawer() {
+                this.visible = !this.visible;
+            },
+            collapseHandle(collapsed, type) {
+                if (type === "clickTrigger") {
+                    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
+
+                    this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY));
+                }
+            }
+        },
+        template: `{{template "component/sidebar/content"}}`,
+    });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 758de9e8..6c16bfa7 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -133,7 +133,7 @@
 
 <body>
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-  {{ template "commonSider" . }}
+  <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
       <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
@@ -568,7 +568,7 @@
                     :data-source="getInboundClients(record)"
                     :pagination=pagination(getInboundClients(record))
                     :style="isMobile ? 'margin: -10px 2px -11px;' : 'margin: -10px 22px -11px;'">
-                    {{template "client_table"}}
+                    {{template "component/aClientTable"}}
                   </a-table>
                 </template>
               </a-table>
@@ -584,6 +584,7 @@
 <script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
+{{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
 {{template "component/aCustomStatistic" .}}
 {{template "component/aPersianDatepicker" .}}
@@ -678,7 +679,6 @@
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
-            siderDrawer,
             themeSwitcher,
             persianDatepicker,
             spinning: false,
@@ -709,7 +709,7 @@
             showAlert: false,
             ipLimitEnable: false,
             pageSize: 50,
-            isMobile: window.innerWidth <= 768,
+            isMobile: DeviceUtils.isMobile(),
         },
         methods: {
             loading(spinning = true) {
@@ -1473,7 +1473,7 @@
                 return false
             },
             onResize() {
-                this.isMobile = window.innerWidth <= 768;
+              this.isMobile = DeviceUtils.isMobile();
             }
         },
         watch: {
@@ -1524,12 +1524,12 @@
     });
 </script>
 
-{{template "inboundModal"}}
-{{template "promptModal"}}
-{{template "qrcodeModal"}}
-{{template "textModal"}}
-{{template "inboundInfoModal"}}
-{{template "clientsModal"}}
-{{template "clientsBulkModal"}}
+{{template "modals/inboundModal"}}
+{{template "modals/promptModal"}}
+{{template "modals/qrcodeModal"}}
+{{template "modals/textModal"}}
+{{template "modals/inboundInfoModal"}}
+{{template "modals/clientsModal"}}
+{{template "modals/clientsBulkModal"}}
 </body>
 </html>
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 92b25d5c..20b44bd8 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -22,6 +22,11 @@
   .ant-backup-list-item {
     gap: 10px;
   }
+  .ant-xray-version-list-item {
+    --padding: 12px;
+    padding: var(--padding) !important;
+    gap: var(--padding);
+  }
   .dark .ant-backup-list-item svg,
   .dark .ant-badge-status-text,
   .dark .ant-card-extra {
@@ -74,7 +79,7 @@
 
 <body>
   <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    {{ template "commonSider" . }}
+    <a-sidebar></a-sidebar>
     <a-layout id="content-layout">
       <a-layout-content>
         <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
@@ -417,9 +422,10 @@
     </a-modal>
   </a-layout>
 {{template "js" .}}
+{{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
 {{template "component/aCustomStatistic" .}}
-{{template "textModal"}}
+{{template "modals/textModal"}}
 <script>
     const State = {
       Running: "running",
@@ -591,7 +597,6 @@
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
-            siderDrawer,
             themeSwitcher,
             status: new Status(),
             versionModal,
@@ -601,7 +606,7 @@
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
             showIp: false,
-            isMobile: window.innerWidth <= 768
+            isMobile: DeviceUtils.isMobile()
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/modals/client_bulk_modal.html
index 82e68c74..88e8e645 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/modals/client_bulk_modal.html
@@ -1,4 +1,4 @@
-{{define "clientsBulkModal"}}
+{{define "modals/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"
     :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
diff --git a/web/html/xui/client_modal.html b/web/html/xui/modals/client_modal.html
index aa62e02a..b6d2a554 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/modals/client_modal.html
@@ -1,4 +1,4 @@
-{{define "clientsModal"}}
+{{define "modals/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="themeSwitcher.currentTheme"
diff --git a/web/html/xui/dns_modal.html b/web/html/xui/modals/dns_modal.html
index f61cd8b2..a1ebaa9f 100644
--- a/web/html/xui/dns_modal.html
+++ b/web/html/xui/modals/dns_modal.html
@@ -1,4 +1,4 @@
-{{define "dnsModal"}}
+{{define "modals/dnsModal"}}
 <a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok" :closable="true"
   :mask-closable="false" :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}'
   :class="themeSwitcher.currentTheme">
diff --git a/web/html/xui/fakedns_modal.html b/web/html/xui/modals/fakedns_modal.html
index 1b4dbe77..8e554ac0 100644
--- a/web/html/xui/fakedns_modal.html
+++ b/web/html/xui/modals/fakedns_modal.html
@@ -1,4 +1,4 @@
-{{define "fakednsModal"}}
+{{define "modals/fakednsModal"}}
 <a-modal id="fakedns-modal" v-model="fakednsModal.visible" :title="fakednsModal.title" @ok="fakednsModal.ok"
          :closable="true" :mask-closable="false"
          :ok-text="fakednsModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/modals/inbound_info_modal.html
index 5ac5e9ab..50a52190 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/modals/inbound_info_modal.html
@@ -1,4 +1,4 @@
-{{define "inboundInfoModal"}}
+{{define "modals/inboundInfoModal"}}
 <a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' :closable="true" :mask-closable="true" :footer="null" width="600px" :class="themeSwitcher.currentTheme">
   <a-row>
     <a-col :xs="24" :md="12">
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/modals/inbound_modal.html
index 4de3518c..99d182b9 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/modals/inbound_modal.html
@@ -1,4 +1,4 @@
-{{define "inboundModal"}}
+{{define "modals/inboundModal"}}
 <a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title"
         :dialog-style="{ top: '20px' }" @ok="inModal.ok"
         :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
diff --git a/web/html/xui/modals/prompt_modal.html b/web/html/xui/modals/prompt_modal.html
new file mode 100644
index 00000000..5073650f
--- /dev/null
+++ b/web/html/xui/modals/prompt_modal.html
@@ -0,0 +1,71 @@
+{{define "modals/promptModal"}}
+<a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
+         :closable="true" @ok="promptModal.ok" :mask-closable="false"
+         :confirm-loading="promptModal.confirmLoading"
+         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
+    <a-input id="prompt-modal-input" :type="promptModal.type"
+             v-model="promptModal.value"
+             :autosize="{minRows: 10, maxRows: 20}"
+             @keydown.enter.native="promptModal.keyEnter"
+             @keydown.ctrl.83="promptModal.ctrlS"></a-input>
+</a-modal>
+
+<script>
+
+    const promptModal = {
+        title: '',
+        type: '',
+        value: '',
+        okText: '{{ i18n "sure"}}',
+        visible: false,
+        confirmLoading: false,
+        keyEnter(e) {
+            if (this.type !== 'textarea') {
+                e.preventDefault();
+                this.ok();
+            }
+        },
+        ctrlS(e) {
+            if (this.type === 'textarea') {
+                e.preventDefault();
+                promptModal.confirm(promptModal.value);
+            }
+        },
+        ok() {
+            promptModal.confirm(promptModal.value);
+        },
+        confirm() {},
+        open({
+            title = '',
+            type = 'text',
+            value = '',
+            okText = '{{ i18n "sure"}}',
+            confirm = () => {},
+        }) {
+            this.title = title;
+            this.type = type;
+            this.value = value;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.visible = true;
+            promptModalApp.$nextTick(() => {
+                document.querySelector('#prompt-modal-input').focus();
+            });
+        },
+        close() {
+            this.visible = false;
+        },
+        loading(loading=true) {
+            this.confirmLoading = loading;
+        },
+    };
+
+    const promptModalApp = new Vue({
+        el: '#prompt-modal',
+        data: {
+            promptModal: promptModal,
+        },
+    });
+
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/modals/qrcode_modal.html b/web/html/xui/modals/qrcode_modal.html
new file mode 100644
index 00000000..7046ca9b
--- /dev/null
+++ b/web/html/xui/modals/qrcode_modal.html
@@ -0,0 +1,161 @@
+{{define "modals/qrcodeModal"}}
+<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
+    :dialog-style="DeviceUtils.isMobile() ? { top: '18px' } : {}"
+    :closable="true"
+    :class="themeSwitcher.currentTheme"
+    :footer="null" width="fit-content">
+  <tr-qr-modal class="qr-modal">
+    <template v-if="app.subSettings.enable && qrModal.subId">
+      <tr-qr-box class="qr-box">
+        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
+        <tr-qr-bg class="qr-bg-sub">
+          <tr-qr-bg-inner class="qr-bg-sub-inner">
+            <canvas @click="copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
+          </tr-qr-bg-inner>
+        </tr-qr-bg>
+      </tr-qr-box>
+      <tr-qr-box class="qr-box">
+        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
+        <tr-qr-bg class="qr-bg-sub">
+          <tr-qr-bg-inner class="qr-bg-sub-inner">
+            <canvas @click="copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
+          </tr-qr-bg-inner>
+        </tr-qr-bg>
+      </tr-qr-box>
+    </template>
+    <template v-for="(row, index) in qrModal.qrcodes">
+      <tr-qr-box class="qr-box">
+        <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
+        <tr-qr-bg class="qr-bg">
+          <canvas @click="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
+        </tr-qr-bg>
+      </tr-qr-box>
+    </template>
+  </tr-qr-modal>
+</a-modal>
+
+<script>
+  const qrModal = {
+    title: '',
+    dbInbound: new DBInbound(),
+    client: null,
+    qrcodes: [],
+    visible: false,
+    subId: '',
+    show: function(title = '', dbInbound, client) {
+      this.title = title;
+      this.dbInbound = dbInbound;
+      this.inbound = dbInbound.toInbound();
+      this.client = client;
+      this.subId = '';
+      this.qrcodes = [];
+      if (this.inbound.protocol == Protocols.WIREGUARD) {
+        this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l, index) => {
+          this.qrcodes.push({
+            remark: "Peer " + (index + 1),
+            link: l
+          });
+        });
+      } else {
+        this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
+          this.qrcodes.push({
+            remark: l.remark,
+            link: l.link
+          });
+        });
+      }
+      this.visible = true;
+    },
+    close: function() {
+      this.visible = false;
+    },
+  };
+  const qrModalApp = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#qrcode-modal',
+    data: {
+      qrModal: qrModal,
+    },
+    methods: {
+      copy(content) {
+        ClipboardManager
+          .copyText(content)
+          .then(() => {
+            app.$message.success('{{ i18n "copied" }}')
+          })
+      },
+      setQrCode(elementId, content) {
+        new QRious({
+          element: document.querySelector('#' + elementId),
+          size: 400,
+          value: content,
+          background: 'white',
+          backgroundAlpha: 0,
+          foreground: 'black',
+          padding: 2,
+          level: 'L'
+        });
+      },
+      genSubLink(subID) {
+        return app.subSettings.subURI + subID;
+      },
+      genSubJsonLink(subID) {
+        return app.subSettings.subJsonURI + subID;
+      },
+      revertOverflow() {
+        const elements = document.querySelectorAll(".qr-tag");
+        elements.forEach((element) => {
+          element.classList.remove("tr-marquee");
+          element.children[0].style.animation = '';
+          while (element.children.length > 1) {
+            element.removeChild(element.lastChild);
+          }
+        });
+      }
+    },
+    updated() {
+      if (this.qrModal.visible) {
+        fixOverflow();
+      } else {
+        this.revertOverflow();
+      }
+      if (qrModal.client && qrModal.client.subId) {
+        qrModal.subId = qrModal.client.subId;
+        this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
+        this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
+      }
+      qrModal.qrcodes.forEach((element, index) => {
+        this.setQrCode("qrCode-" + index, element.link);
+      });
+    }
+  });
+
+  function fixOverflow() {
+    const elements = document.querySelectorAll(".qr-tag");
+    elements.forEach((element) => {
+      function isElementOverflowing(element) {
+        const overflowX = element.offsetWidth < element.scrollWidth,
+          overflowY = element.offsetHeight < element.scrollHeight;
+        return overflowX || overflowY;
+      }
+
+      function wrapContentsInMarquee(element) {
+        element.classList.add("tr-marquee");
+        element.children[0].style.animation = `move-ltr ${
+            (element.children[0].clientWidth / element.clientWidth) * 5
+          }s ease-in-out infinite`;
+        const marqueeText = element.children[0];
+        if (element.children.length < 2) {
+          for (let i = 0; i < 1; i++) {
+            const marqueeText = element.children[0].cloneNode(true);
+            element.children[0].after(marqueeText);
+          }
+        }
+      }
+      if (isElementOverflowing(element)) {
+        wrapContentsInMarquee(element);
+      }
+    });
+  }
+</script>
+{{end}}
diff --git a/web/html/xui/modals/text_modal.html b/web/html/xui/modals/text_modal.html
new file mode 100644
index 00000000..77cb719e
--- /dev/null
+++ b/web/html/xui/modals/text_modal.html
@@ -0,0 +1,52 @@
+{{define "modals/textModal"}}
+<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
+         :closable="true"
+         :class="themeSwitcher.currentTheme">
+    <template slot="footer">
+        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
+            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
+            :download="txtModal.fileName">[[ txtModal.fileName ]]
+        </a-button>
+        <a-button type="primary" @click="txtModal.copy(txtModal.content)">{{ i18n "copy" }}</a-button>
+    </template>
+    <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
+        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
+</a-modal>
+
+<script>
+
+    const txtModal = {
+        title: '',
+        content: '',
+        fileName: '',
+        qrcode: null,
+        visible: false,
+        show: function (title = '', content = '', fileName = '') {
+            this.title = title;
+            this.content = content;
+            this.fileName = fileName;
+            this.visible = true;
+        },
+        copy: function (content = '') {
+            ClipboardManager
+                .copyText(content)
+                .then(() => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.close();
+                })
+        },
+        close: function () {
+            this.visible = false;
+        },
+    };
+
+    const textModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#text-modal',
+        data: {
+            txtModal: txtModal,
+        },
+    });
+
+</script>
+{{end}}
diff --git a/web/html/xui/warp_modal.html b/web/html/xui/modals/warp_modal.html
index 20ce8139..7fb55847 100644
--- a/web/html/xui/warp_modal.html
+++ b/web/            
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living