[warp] enhanced + delete option

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

web/html/xui/warp_modal.html

@@ -24,19 +24,22 @@
                 <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-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="margin-top: 5px; margin-bottom: 10px;" :loading="warpModal.confirmLoading" type="primary">{{ i18n "info" }}</a-button>
+        <a-button icon="sync" @click="getConfig" style="margin-top: 5px; margin-bottom: 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">
@@ -51,39 +54,39 @@
                     <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>[[ sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
-                </tr>
-                <tr class="client-table-odd-row">
-                    <td>Quota</td>
-                    <td>[[ sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
-                </tr>
-                <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
-                    <td>Usage</td>
-                    <td>[[ sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
-                </tr>
-            </template>
+                <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>[[ sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
+                    </tr>
+                    <tr class="client-table-odd-row">
+                        <td>Quota</td>
+                        <td>[[ sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
+                    </tr>
+                    <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
+                        <td>Usage</td>
+                        <td>[[ 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="line-height: 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="line-height: 31px;">{{ i18n "disabled" }}</a-tag>
-                        <a-button @click="addOutbound" :loading="warpModal.confirmLoading" type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-                    </template>
+                <template v-if="warpOutboundIndex>=0">
+                    <a-tag color="green" style="line-height: 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="line-height: 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>
@@ -101,21 +104,20 @@
             this.visible = true;
             this.warpConfig = null;
             this.getData();
-
         },
         close() {
             this.visible = false;
             this.loading(false);
         },
-        loading(loading=true) {
+        loading(loading = true) {
             this.confirmLoading = loading;
         },
-        async getData(){
+        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;
+                this.warpData = msg.obj.length > 0 ? JSON.parse(msg.obj) : null;
             }
         },
     };
@@ -131,14 +133,15 @@
             collectConfig() {
                 config = warpModal.warpConfig.config;
                 peer = config.peers[0];
-                if(config){
+                if (config) {
                     warpModal.warpOutbound = Outbound.fromJson({
                         tag: 'warp',
                         protocol: Protocols.Wireguard,
                         settings: {
                             mtu: 1420,
                             secretKey: warpModal.warpData.private_key,
-                            address: Object.values(config.interface.addresses),
+                            address: this.getAddresses(config.interface.addresses),
+                            reserved: this.getResolved(config.client_id),
                             domainStrategy: 'ForceIP',
                             peers: [{
                                 publicKey: peer.public_key,
@@ -149,10 +152,32 @@
                     });
                 }
             },
-            async register(){
+            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);
                 keys = Wireguard.generateKeypair();
-                const msg = await HttpUtil.post('/panel/xray/warp/reg',keys);
+                const msg = await HttpUtil.post('/panel/xray/warp/reg', keys);
                 if (msg.success) {
                     resp = JSON.parse(msg.obj);
                     warpModal.warpData = resp.data;
@@ -161,9 +186,9 @@
                 }
                 warpModal.loading(false);
             },
-            async updateLicense(l){
+            async updateLicense(l) {
                 warpModal.loading(true);
-                const msg = await HttpUtil.post('/panel/xray/warp/license',{license: l});
+                const msg = await HttpUtil.post('/panel/xray/warp/license', { license: l });
                 if (msg.success) {
                     warpModal.warpData = JSON.parse(msg.obj);
                     warpModal.warpConfig = null;
@@ -171,7 +196,7 @@
                 }
                 warpModal.loading(false);
             },
-            async getConfig(){
+            async getConfig() {
                 warpModal.loading(true);
                 const msg = await HttpUtil.post('/panel/xray/warp/config');
                 warpModal.loading(false);
@@ -180,20 +205,37 @@
                     this.collectConfig();
                 }
             },
-            addOutbound(){
+            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(){
+            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() {
+                get: function () {
                     return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag == 'warp') : -1;
                 }
             }
@@ -201,4 +243,4 @@
     });
 
 </script>
-{{end}}
+{{end}}