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

1 files changed, 246 insertions, 0 deletions

diff --git a/web/html/modals/warp_modal.html b/web/html/modals/warp_modal.html
new file mode 100644
index 00000000..14426472
--- /dev/null
+++ b/web/html/modals/warp_modal.html
@@ -0,0 +1,246 @@
+{{define "modals/warpModal"}}
+<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP"
+         :confirm-loading="warpModal.confirmLoading" :closable="true" :mask-closable="true"
+         :footer="null" :class="themeSwitcher.currentTheme">
+    <template v-if="ObjectUtil.isEmpty(warpModal.warpData)">
+        <a-button icon="api" @click="register" :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.create" }}</a-button>
+    </template>
+    <template v-else>
+        <table :style="{ margin: '5px 0', width: '100%' }">
+            <tr class="client-table-odd-row">
+                <td>Access Token</td>
+                <td>[[ warpModal.warpData.access_token ]]</td>
+            </tr>
+            <tr>
+                <td>Device ID</td>
+                <td>[[ warpModal.warpData.device_id ]]</td>
+            </tr>
+            <tr class="client-table-odd-row">
+                <td>License Key</td>
+                <td>[[ warpModal.warpData.license_key ]]</td>
+            </tr>
+            <tr>
+                <td>Private Key</td>
+                <td>[[ warpModal.warpData.private_key ]]</td>
+            </tr>
+        </table>
+        <a-button @click="delConfig" :loading="warpModal.confirmLoading" type="danger">{{ i18n "delete" }}</a-button>
+        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
+        <a-collapse :style="{ margin: '10px 0' }">
+            <a-collapse-panel header='WARP/WARP+ License Key'>
+                <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+                    <a-form-item label="Key">
+                        <a-input v-model="warpPlus"></a-input>
+                        <a-button @click="updateLicense(warpPlus)" :disabled="warpPlus.length<26"
+                            :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.update" }}</a-button>
+                    </a-form-item>
+                </a-form>
+            </a-collapse-panel>
+        </a-collapse>
+        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.accountInfo" }}</a-divider>
+        <a-button icon="sync" @click="getConfig" :style="{ marginTop: '5px', marginBottom: '10px' }"
+            :loading="warpModal.confirmLoading" type="primary">{{ i18n "info" }}</a-button>
+        <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)">
+            <table :style="{ width: '100%' }">
+                <tr class="client-table-odd-row">
+                    <td>Device Name</td>
+                    <td>[[ warpModal.warpConfig.name ]]</td>
+                </tr>
+                <tr>
+                    <td>Device Model</td>
+                    <td>[[ warpModal.warpConfig.model ]]</td>
+                </tr>
+                <tr class="client-table-odd-row">
+                    <td>Device Enabled</td>
+                    <td>[[ warpModal.warpConfig.enabled ]]</td>
+                </tr>
+                <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
+                    <tr>
+                        <td>Account Type</td>
+                        <td>[[ warpModal.warpConfig.account.account_type ]]</td>
+                    </tr>
+                    <tr class="client-table-odd-row">
+                        <td>Role</td>
+                        <td>[[ warpModal.warpConfig.account.role ]]</td>
+                    </tr>
+                    <tr>
+                        <td>WARP+ Data</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
+                    </tr>
+                    <tr class="client-table-odd-row">
+                        <td>Quota</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
+                    </tr>
+                    <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
+                        <td>Usage</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
+                    </tr>
+                </template>
+            </table>
+            <a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
+            <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+                <template v-if="warpOutboundIndex>=0">
+                    <a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
+                    <a-button @click="resetOutbound" :loading="warpModal.confirmLoading" type="danger">{{ i18n "reset" }}</a-button>
+                </template>
+                <template v-else>
+                    <a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
+                    <a-button @click="addOutbound" :loading="warpModal.confirmLoading" type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
+                </template>
+                </a-form-item>
+            </a-form>
+        </template>
+    </template>
+</a-modal>
+<script>
+
+    const warpModal = {
+        visible: false,
+        confirmLoading: false,
+        warpData: null,
+        warpConfig: null,
+        warpOutbound: null,
+        show() {
+            this.visible = true;
+            this.warpConfig = null;
+            this.getData();
+        },
+        close() {
+            this.visible = false;
+            this.loading(false);
+        },
+        loading(loading = true) {
+            this.confirmLoading = loading;
+        },
+        async getData() {
+            this.loading(true);
+            const msg = await HttpUtil.post('/panel/xray/warp/data');
+            this.loading(false);
+            if (msg.success) {
+                this.warpData = msg.obj.length > 0 ? JSON.parse(msg.obj) : null;
+            }
+        },
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#warp-modal',
+        data: {
+            warpModal: warpModal,
+            warpPlus: '',
+        },
+        methods: {
+            collectConfig() {
+                config = warpModal.warpConfig.config;
+                peer = config.peers[0];
+                if (config) {
+                    warpModal.warpOutbound = Outbound.fromJson({
+                        tag: 'warp',
+                        protocol: Protocols.Wireguard,
+                        settings: {
+                            mtu: 1420,
+                            secretKey: warpModal.warpData.private_key,
+                            address: this.getAddresses(config.interface.addresses),
+                            reserved: this.getResolved(config.client_id),
+                            domainStrategy: 'ForceIP',
+                            peers: [{
+                                publicKey: peer.public_key,
+                                endpoint: peer.endpoint.host,
+                            }],
+                            noKernelTun: false,
+                        }
+                    });
+                }
+            },
+            getAddresses(addrs) {
+                let addresses = [];
+                if (addrs.v4) addresses.push(addrs.v4 + "/32");
+                if (addrs.v6) addresses.push(addrs.v6 + "/128");
+                return addresses;
+            },
+            getResolved(client_id) {
+                let reserved = [];
+                let decoded = atob(client_id);
+                let hexString = '';
+                for (let i = 0; i < decoded.length; i++) {
+                    let hex = decoded.charCodeAt(i).toString(16);
+                    hexString += (hex.length === 1 ? '0' : '') + hex;
+                }
+
+                for (let i = 0; i < hexString.length; i += 2) {
+                    let hexByte = hexString.slice(i, i + 2);
+                    let decValue = parseInt(hexByte, 16);
+                    reserved.push(decValue);
+                }
+                return reserved;
+            },
+            async register() {
+                warpModal.loading(true);
+                const keys = Wireguard.generateKeypair();
+                const msg = await HttpUtil.post('/panel/xray/warp/reg', keys);
+                if (msg.success) {
+                    const resp = JSON.parse(msg.obj);
+                    warpModal.warpData = resp.data;
+                    warpModal.warpConfig = resp.config;
+                    this.collectConfig();
+                }
+                warpModal.loading(false);
+            },
+            async updateLicense(l) {
+                warpModal.loading(true);
+                const msg = await HttpUtil.post('/panel/xray/warp/license', { license: l });
+                if (msg.success) {
+                    warpModal.warpData = JSON.parse(msg.obj);
+                    warpModal.warpConfig = null;
+                    this.warpPlus = '';
+                }
+                warpModal.loading(false);
+            },
+            async getConfig() {
+                warpModal.loading(true);
+                const msg = await HttpUtil.post('/panel/xray/warp/config');
+                warpModal.loading(false);
+                if (msg.success) {
+                    warpModal.warpConfig = JSON.parse(msg.obj);
+                    this.collectConfig();
+                }
+            },
+            async delConfig() {
+                warpModal.loading(true);
+                const msg = await HttpUtil.post('/panel/xray/warp/del');
+                warpModal.loading(false);
+                if (msg.success) {
+                    warpModal.warpData = null;
+                    warpModal.warpConfig = null;
+                    this.delOutbound();
+                }
+            },
+            addOutbound() {
+                app.templateSettings.outbounds.push(warpModal.warpOutbound.toJson());
+                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
+                warpModal.close();
+            },
+            resetOutbound() {
+                app.templateSettings.outbounds[this.warpOutboundIndex] = warpModal.warpOutbound.toJson();
+                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
+                warpModal.close();
+            },
+            delOutbound() {
+                if (this.warpOutboundIndex != -1) {
+                    app.templateSettings.outbounds.splice(this.warpOutboundIndex, 1);
+                    app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
+                }
+                warpModal.close();
+            }
+        },
+        computed: {
+            warpOutboundIndex: {
+                get: function () {
+                    return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag == 'warp') : -1;
+                }
+            }
+        }
+    });
+
+</script>
+{{end}}
\ No newline at end of file