From c2f535ead4b9de45eccacd1c8fb77711e07255e5 Mon Sep 17 00:00:00 2001
From: kevin <nanhantianyi@126.com>
Date: Wed, 12 Mar 2025 23:19:56 +0800
Subject: [PATCH] import/export network config for web (#676)

* import/export network config for web
* add socks5 config for web
---
 .../frontend-lib/src/components/Config.vue    | 20 ++++++-
 easytier-web/frontend-lib/src/locales/cn.yaml |  7 +++
 easytier-web/frontend-lib/src/locales/en.yaml |  7 +++
 .../frontend-lib/src/types/network.ts         |  7 +++
 .../src/components/ConfigGenerator.vue        |  6 +-
 .../src/components/DeviceManagement.vue       | 58 +++++++++++++++++++
 easytier/src/launcher.rs                      | 14 +++++
 easytier/src/proto/web.proto                  |  3 +
 8 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/easytier-web/frontend-lib/src/components/Config.vue b/easytier-web/frontend-lib/src/components/Config.vue
index ca42e314..e682268d 100644
--- a/easytier-web/frontend-lib/src/components/Config.vue
+++ b/easytier-web/frontend-lib/src/components/Config.vue
@@ -154,6 +154,7 @@ const bool_flags: BoolFlag[] = [
   { field: 'relay_all_peer_rpc', help: 'relay_all_peer_rpc_help' },
   { field: 'multi_thread', help: 'multi_thread_help' },
   { field: 'proxy_forward_by_system', help: 'proxy_forward_by_system_help' },
+  { field: 'disable_encryption', help: 'disable_encryption_help' },
 ]
 
 </script>
@@ -162,7 +163,7 @@ const bool_flags: BoolFlag[] = [
   <div class="frontend-lib">
     <div class="flex flex-col h-full">
       <div class="flex flex-col">
-        <div class="w-10/12 self-center ">
+        <div class="w-11/12 self-center ">
           <Panel :header="t('basic_settings')">
             <div class="flex flex-col gap-y-2">
               <div class="flex flex-row gap-x-9 flex-wrap">
@@ -345,6 +346,23 @@ const bool_flags: BoolFlag[] = [
                 </div>
               </div>
 
+              <div class="flex flex-row gap-x-9 flex-wrap ">
+                <div class="flex flex-col gap-2 grow">
+                  <div class="flex">
+                    <label for="socks5_port">{{ t('socks5') }}</label>
+                    <span class="pi pi-question-circle ml-2 self-center" v-tooltip="t('socks5_help')"></span>
+                  </div>
+                  <ToggleButton v-model="curNetwork.enable_socks5" on-icon="pi pi-check" off-icon="pi pi-times"
+                                :on-label="t('off_text')" :off-label="t('on_text')" class="w-48" />
+                  <div v-if="curNetwork.enable_socks5" class="items-center flex flex-row gap-x-4">
+                    <div class="min-w-64 w-full">
+                      <InputNumber id="socks5_port" v-model="curNetwork.socks5_port" aria-describedby="rpc_port-help"
+                                   :format="false" :allow-empty="false" :min="0" :max="65535" class="w-full"/>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
               <div class="flex flex-row gap-x-9 flex-wrap w-full">
                 <div class="flex flex-col gap-2 grow p-fluid">
                   <div class="flex">
diff --git a/easytier-web/frontend-lib/src/locales/cn.yaml b/easytier-web/frontend-lib/src/locales/cn.yaml
index cfa293da..a50b4497 100644
--- a/easytier-web/frontend-lib/src/locales/cn.yaml
+++ b/easytier-web/frontend-lib/src/locales/cn.yaml
@@ -106,6 +106,9 @@ multi_thread_help: 使用多线程运行时
 proxy_forward_by_system: 系统转发
 proxy_forward_by_system_help: 通过系统内核转发子网代理数据包，禁用内置NAT
 
+disable_encryption: 禁用加密
+disable_encryption_help: 禁用对等节点通信的加密，默认为false，必须与对等节点相同
+
 relay_network_whitelist: 网络白名单
 relay_network_whitelist_help: |
   仅转发白名单网络的流量，支持通配符字符串。多个网络名称间可以使用英文空格间隔。
@@ -115,6 +118,10 @@ relay_network_whitelist_help: |
 manual_routes: 自定义路由
 manual_routes_help: 手动分配路由CIDR，将禁用子网代理和从对等节点传播的wireguard路由。例如：192.168.0.0/16
 
+socks5: socks5服务器
+socks5_help: |
+  启用 socks5 服务器，允许 socks5 客户端访问虚拟网络. 格式: <端口>，例如：1080
+
 exit_nodes: 出口节点列表
 exit_nodes_help: 转发所有流量的出口节点，虚拟IPv4地址，优先级由列表顺序决定
 
diff --git a/easytier-web/frontend-lib/src/locales/en.yaml b/easytier-web/frontend-lib/src/locales/en.yaml
index 5e0266df..b6f6bf55 100644
--- a/easytier-web/frontend-lib/src/locales/en.yaml
+++ b/easytier-web/frontend-lib/src/locales/en.yaml
@@ -105,6 +105,9 @@ multi_thread_help: Use multi-thread runtime
 proxy_forward_by_system: System Forward
 proxy_forward_by_system_help: Forward packet to proxy networks via system kernel, disable internal nat for network proxy
 
+disable_encryption: Disable Encryption
+disable_encryption_help: Disable encryption for peers communication, default is false, must be same with peers
+
 relay_network_whitelist: Network Whitelist
 relay_network_whitelist_help: |
   Only forward traffic from the whitelist networks, supporting wildcard strings, multiple network names can be separated by spaces.
@@ -115,6 +118,10 @@ manual_routes: Manual Route
 manual_routes_help: |
   Assign routes cidr manually, will disable subnet proxy and wireguard routes propagated from peers. e.g.:192.168.0.0/16
 
+socks5: Socks5 Server
+socks5_help: |
+  Enable socks5 server, allow socks5 client to access virtual network. format: <port>, e.g.: 1080
+
 exit_nodes: Exit Nodes
 exit_nodes_help: Exit nodes to forward all traffic to, a virtual ipv4 address, priority is determined by the order of the list
 
diff --git a/easytier-web/frontend-lib/src/types/network.ts b/easytier-web/frontend-lib/src/types/network.ts
index dd508dee..e7350d8e 100644
--- a/easytier-web/frontend-lib/src/types/network.ts
+++ b/easytier-web/frontend-lib/src/types/network.ts
@@ -46,6 +46,7 @@ export interface NetworkConfig {
   relay_all_peer_rpc?: boolean
   multi_thread?: boolean
   proxy_forward_by_system?: boolean
+  disable_encryption?: boolean
 
   enable_relay_network_whitelist?: boolean
   relay_network_whitelist: string[]
@@ -54,6 +55,9 @@ export interface NetworkConfig {
   routes: string[]
 
   exit_nodes: string[]
+
+  enable_socks5?: boolean
+  socks5_port: number
 }
 
 export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
@@ -99,11 +103,14 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
     relay_all_peer_rpc: false,
     multi_thread: true,
     proxy_forward_by_system: false,
+    disable_encryption: false,
     enable_relay_network_whitelist: false,
     relay_network_whitelist: [],
     enable_manual_routes: false,
     routes: [],
     exit_nodes: [],
+    enable_socks5: false,
+    socks5_port: 1080,
   }
 }
 
diff --git a/easytier-web/frontend/src/components/ConfigGenerator.vue b/easytier-web/frontend/src/components/ConfigGenerator.vue
index 3c870f73..2b79884f 100644
--- a/easytier-web/frontend/src/components/ConfigGenerator.vue
+++ b/easytier-web/frontend/src/components/ConfigGenerator.vue
@@ -27,11 +27,11 @@ const generateConfig = (config: NetworkTypes.NetworkConfig) => {
 
 <template>
     <div class="flex items-center justify-center m-5">
-        <div class="flex w-full">
-            <div class="w-1/2 p-4">
+        <div class="sm:block md:flex w-full">
+            <div class="sm:w-full md:w-1/2 p-4">
                 <Config :cur-network="newNetworkConfig" @run-network="generateConfig" />
             </div>
-            <div class="w-1/2 p-4 bg-gray-100">
+            <div class="sm:w-full md:w-1/2 p-4 bg-gray-100">
                 <pre class="whitespace-pre-wrap">{{ toml_config }}</pre>
             </div>
         </div>
diff --git a/easytier-web/frontend/src/components/DeviceManagement.vue b/easytier-web/frontend/src/components/DeviceManagement.vue
index cf594bc5..2c185c68 100644
--- a/easytier-web/frontend/src/components/DeviceManagement.vue
+++ b/easytier-web/frontend/src/components/DeviceManagement.vue
@@ -27,6 +27,8 @@ const deviceInfo = computed<Utils.DeviceInfo | undefined | null>(() => {
     return deviceId.value ? props.deviceList?.find((device) => device.machine_id === deviceId.value) : null;
 });
 
+const configFile = ref();
+
 const curNetworkInfo = ref<NetworkTypes.NetworkInstance | null>(null);
 
 const isEditing = ref(false);
@@ -207,6 +209,54 @@ const loadDeviceInfo = async () => {
     } as NetworkTypes.NetworkInstance;
 }
 
+const exportConfig = async () => {
+  let ret = await props.api?.get_network_config(deviceId.value, instanceId.value);
+  delete ret.instance_id;
+  exportJsonFile(JSON.stringify(ret, null, 2),instanceId.value +'.json');
+}
+
+const importConfig = () => {
+  configFile.value.click();
+}
+
+const handleFileUpload = (event: Event) => {
+  const files = (event.target as HTMLInputElement).files;
+  const file = files ? files[0] : null;
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        let str = e.target?.result?.toString();
+        if(str){
+          const config = JSON.parse(str);
+          if(config === null || typeof config !== "object"){
+            throw new Error();
+          }
+          Object.assign(newNetworkConfig.value, config);
+          toast.add({ severity: 'success', summary: 'Import Success', detail: "Config file import success", life: 2000 });
+        }
+      } catch (error) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Config file parse error.', life: 2000 });
+      }
+      configFile.value.value = null;
+    }
+    reader.readAsText(file);
+  }
+}
+
+const exportJsonFile = (context: string, name: string) => {
+  let url = window.URL.createObjectURL(new Blob([context], { type: 'application/json' }));
+  let link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = url;
+  link.setAttribute('download', name);
+  document.body.appendChild(link);
+  link.click();
+
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+}
+
 let periodFunc = new Utils.PeriodicTask(async () => {
     try {
         await Promise.all([loadNetworkInstanceIds(), loadDeviceInfo()]);
@@ -226,9 +276,16 @@ onUnmounted(() => {
 </script>
 
 <template>
+    <input type="file" @change="handleFileUpload" class="hidden" accept="application/json" ref="configFile"/>
     <ConfirmPopup></ConfirmPopup>
     <Dialog v-model:visible="showCreateNetworkDialog" modal :header="!isEditing ? 'Create New Network' : 'Edit Network'"
         :style="{ width: '55rem' }">
+        <div class="flex flex-col">
+          <div class="w-11/12 self-center ">
+            <Button @click="importConfig" icon="pi pi-file-import" label="Import" iconPos="right" />
+            <Divider />
+          </div>
+        </div>
         <Config :cur-network="newNetworkConfig" @run-network="createNewNetwork"></Config>
     </Dialog>
 
@@ -245,6 +302,7 @@ onUnmounted(() => {
             <div class="gap-x-3 flex">
                 <Button @click="confirmDeleteNetwork($event)" icon="pi pi-minus" severity="danger" label="Delete"
                     iconPos="right" />
+                <Button @click="exportConfig" icon="pi pi-file-export" severity="help" label="Export" iconPos="right" />
                 <Button @click="editNetwork" icon="pi pi-pen-to-square" label="Edit" iconPos="right" severity="info" />
                 <Button @click="newNetwork" icon="pi pi-plus" label="Create" iconPos="right" />
             </div>
diff --git a/easytier/src/launcher.rs b/easytier/src/launcher.rs
index f5c84e61..9e1d6b59 100644
--- a/easytier/src/launcher.rs
+++ b/easytier/src/launcher.rs
@@ -540,6 +540,16 @@ impl NetworkConfig {
             cfg.set_exit_nodes(exit_nodes);
         }
 
+        if self.enable_socks5.unwrap_or_default() {
+            if let Some(socks5_port) = self.socks5_port {
+                cfg.set_socks5_portal(Some(
+                    format!("socks5://0.0.0.0:{}", socks5_port)
+                        .parse()
+                        .unwrap(),
+                ));
+            }
+        }
+
         let mut flags = gen_default_flags();
         if let Some(latency_first) = self.latency_first {
             flags.latency_first = latency_first;
@@ -589,6 +599,10 @@ impl NetworkConfig {
             flags.proxy_forward_by_system = proxy_forward_by_system;
         }
 
+        if let Some(disable_encryption) = self.disable_encryption {
+            flags.enable_encryption = !disable_encryption;
+        }
+
         if self.enable_relay_network_whitelist.unwrap_or_default() {
             if self.relay_network_whitelist.len() > 0 {
                 flags.relay_network_whitelist = self.relay_network_whitelist.join(" ")
diff --git a/easytier/src/proto/web.proto b/easytier/src/proto/web.proto
index cfd69b13..a857245f 100644
--- a/easytier/src/proto/web.proto
+++ b/easytier/src/proto/web.proto
@@ -57,6 +57,9 @@ message NetworkConfig {
     repeated string routes = 33;
     repeated string exit_nodes = 34;
     optional bool proxy_forward_by_system = 35;
+    optional bool disable_encryption = 36;
+    optional bool enable_socks5 = 37;
+    optional int32 socks5_port = 38;
 }
 
 message MyNodeInfo {