[warp] enhanced + delete option #1055

web/html/xui/warp_modal.html

@@ -24,6 +24,7 @@
                 <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'>
@@ -91,114 +92,153 @@
 </a-modal>
 <script>
 
-    const warpModal = {
-        visible: false,
-        confirmLoading: false,
-        warpData: null,
-        warpConfig: null,
-        warpOutbound: null,
-        show() {
-            this.visible = true;
-            this.warpConfig = null;
-            this.getData();
+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('/xui/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,
+                        }],
+                        kernelMode: false
+                    }
+                });
+            }
         },
-        close() {
-            this.visible = false;
-            this.loading(false);
+        getAddresses(addrs){
+            let addresses = [];
+            if (addrs.v4) addresses.push(addrs.v4 + "/32");
+            if (addrs.v6) addresses.push(addrs.v6 + "/128");
+            return addresses;
         },
-        loading(loading=true) {
-            this.confirmLoading = loading;
+        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 getData(){
-            this.loading(true);
-            const msg = await HttpUtil.post('/xui/xray/warp/data');
-            this.loading(false);
+        async register(){
+            warpModal.loading(true);
+            keys = Wireguard.generateKeypair();
+            const msg = await HttpUtil.post('/xui/xray/warp/reg',keys);
             if (msg.success) {
-                this.warpData = msg.obj.length>0 ? JSON.parse(msg.obj): null;
+                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('/xui/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('/xui/xray/warp/config');
+            warpModal.loading(false);
+            if (msg.success) {
+                warpModal.warpConfig = JSON.parse(msg.obj);
+                this.collectConfig();
             }
         },
-    };
-
-    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: Object.values(config.interface.addresses),
-                            domainStrategy: 'ForceIP',
-                            peers: [{
-                                publicKey: peer.public_key,
-                                endpoint: peer.endpoint.host,
-                            }],
-                            kernelMode: false
-                        }
-                    });
-                }
-            },
-            async register(){
-                warpModal.loading(true);
-                keys = Wireguard.generateKeypair();
-                const msg = await HttpUtil.post('/xui/xray/warp/reg',keys);
-                if (msg.success) {
-                    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('/xui/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('/xui/xray/warp/config');
-                warpModal.loading(false);
-                if (msg.success) {
-                    warpModal.warpConfig = JSON.parse(msg.obj);
-                    this.collectConfig();
-                }
-            },
-            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();
+        async delConfig(){
+            warpModal.loading(true);
+            const msg = await HttpUtil.post('/xui/xray/warp/del');
+            warpModal.loading(false);
+            if (msg.success) {
+                warpModal.warpData = null;
+                warpModal.warpConfig = null;
+                this.delOutbound();
             }
         },
-        computed: {
-            warpOutboundIndex: {
-                get: function() {
-                    return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag == 'warp') : -1;
-                }
+        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}}