allow open rpc port in gui normal mode (#1795)

* allow open rpc port for gui normal mode
* downgrade dev tool console

easytier-gui/src/components/ModeSwitcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, watch, onMounted, ref } from 'vue';
-import type { Mode, ServiceMode, RemoteMode } from '~/composables/mode';
+import type { Mode, ServiceMode, RemoteMode, NormalMode } from '~/composables/mode';
 import { appConfigDir, appLogDir } from '@tauri-apps/api/path';
 import { join } from '@tauri-apps/api/path';
 import { getServiceStatus, type ServiceStatus } from '~/composables/backend';
@@ -15,6 +15,14 @@ const defaultLogDir = ref('')
 const serviceStatus = ref<ServiceStatus>('NotInstalled')
 const isServiceStatusLoaded = ref(false)
 
+function normalizeRpcListenPort(port: unknown): number {
+  const defaultPort = 15999
+  const numericPort = typeof port === 'number' ? port : Number.parseInt(String(port ?? ''), 10)
+  if (Number.isNaN(numericPort))
+    return defaultPort
+  return Math.min(65535, Math.max(1, Math.floor(numericPort)))
+}
+
 onMounted(async () => {
   defaultConfigDir.value = await join(await appConfigDir(), 'config.d')
   defaultLogDir.value = await appLogDir()
@@ -26,6 +34,43 @@ const modeOptions = computed(() => [
   { label: t('mode.remote'), value: 'remote' },
 ]);
 
+const normalMode = computed({
+  get: () => model.value.mode === 'normal' ? model.value as NormalMode : undefined,
+  set: (value) => {
+    if (value) {
+      model.value = value
+    }
+  }
+})
+
+const rpcListenOptions = computed(() => [
+  { label: t('web.common.disable'), value: false },
+  { label: t('web.common.enable'), value: true },
+])
+
+const rpcListenEnabled = computed<boolean>({
+  get: () => !!normalMode.value?.enable_rpc_port_listen,
+  set: (value) => {
+    if (!normalMode.value)
+      return
+    normalMode.value.enable_rpc_port_listen = value
+  },
+})
+
+const rpcListenPort = computed<string>({
+  get: () => String(normalMode.value?.rpc_listen_port ?? 15999),
+  set: (value) => {
+    if (!normalMode.value)
+      return
+    const trimmed = value.trim()
+    if (trimmed === '')
+      return
+    if (!/^\d+$/.test(trimmed))
+      return
+    normalMode.value.rpc_listen_port = Number.parseInt(trimmed, 10)
+  },
+})
+
 const serviceMode = computed({
   get: () => model.value.mode === 'service' ? model.value as ServiceMode : undefined,
   set: (value) => {
@@ -57,6 +102,24 @@ const statusColorClass = computed(() => {
   }
 })
 
+watch(() => [normalMode.value?.enable_rpc_port_listen, normalMode.value?.rpc_listen_port], ([enabled, port]) => {
+  if (!normalMode.value)
+    return
+
+  if (!enabled) {
+    normalMode.value.rpc_portal = undefined
+    return
+  }
+
+  const normalizedPort = normalizeRpcListenPort(port)
+  if (normalMode.value.rpc_listen_port !== normalizedPort)
+    normalMode.value.rpc_listen_port = normalizedPort
+
+  const desiredPortal = `tcp://0.0.0.0:${normalizedPort}`
+  if (normalMode.value.rpc_portal !== desiredPortal)
+    normalMode.value.rpc_portal = desiredPortal
+}, { immediate: true })
+
 watch(() => model.value.mode, async (newMode, oldMode) => {
   if (newMode === oldMode)
     return
@@ -69,8 +132,12 @@ watch(() => model.value.mode, async (newMode, oldMode) => {
   const oldModelValue = { ...model.value }
 
   if (newMode === 'normal') {
+    const portal = normalMode.value?.rpc_portal?.trim()
     model.value = {
       ...oldModelValue,
+      rpc_portal: portal || undefined,
+      enable_rpc_port_listen: normalMode.value?.enable_rpc_port_listen,
+      rpc_listen_port: normalMode.value?.rpc_listen_port,
       mode: 'normal',
     }
   }
@@ -113,6 +180,20 @@ watch(() => model.value.mode, async (newMode, oldMode) => {
       {{ t('mode.remote_description') }}
     </div>
 
+    <div v-if="normalMode" class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label for="rpc-listen-toggle">{{ t('mode.enable_rpc_tcp_listen') }}</label>
+        <SelectButton id="rpc-listen-toggle" v-model="rpcListenEnabled" :options="rpcListenOptions" option-label="label"
+          option-value="value" />
+      </div>
+      <div v-if="rpcListenEnabled" class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <label for="rpc-listen-port">{{ t('mode.rpc_listen_port') }}</label>
+          <InputText id="rpc-listen-port" v-model="rpcListenPort" class="flex-1" inputmode="numeric" />
+        </div>
+      </div>
+    </div>
+
     <div v-if="serviceMode" class="flex flex-col gap-2">
       <div class="flex items-center gap-2">
         <label for="config-dir">{{ t('mode.config_dir') }}</label>

easytier-gui/src/composables/backend.ts

@@ -89,8 +89,8 @@ export async function getServiceStatus() {
   return await invoke<ServiceStatus>('get_service_status')
 }
 
-export async function initRpcConnection(url?: string) {
-  return await invoke('init_rpc_connection', { url })
+export async function initRpcConnection(isNormalMode: boolean, url?: string) {
+  return await invoke('init_rpc_connection', { isNormalMode, url })
 }
 
 export async function isClientRunning() {

easytier-gui/src/composables/mode.ts

@@ -4,8 +4,12 @@ export interface WebClientConfig {
     config_server_url?: string
 }
 
-interface NormalMode extends WebClientConfig {
+export interface NormalMode extends WebClientConfig {
     mode: 'normal'
+    // if not provided will use ring tunnel rpc server
+    rpc_portal?: string
+    enable_rpc_port_listen?: boolean
+    rpc_listen_port?: number
 }
 
 export interface ServiceMode extends WebClientConfig {

easytier-gui/src/pages/index.vue

@@ -156,13 +156,23 @@ async function initWithMode(mode: Mode) {
       url = "tcp://" + mode.rpc_portal.replace("0.0.0.0", "127.0.0.1")
       retrys = 5
       break;
+    case 'normal':
+      url = mode.rpc_portal;
+      break;
   }
   for (let i = 0; i < retrys; i++) {
     try {
-      await connectRpcClient(url)
+      await connectRpcClient(mode.mode === 'normal', url)
       break;
     } catch (e) {
       if (i === retrys - 1) {
+        const errMsg = e instanceof Error ? e.message : String(e)
+        toast.add({
+          severity: 'error',
+          summary: t('error'),
+          detail: t('mode.rpc_connection_failed', { error: errMsg }),
+          life: 1000,
+        })
         throw e;
       }
       console.error("Error connecting rpc client, retrying...", e)
@@ -332,9 +342,9 @@ const setting_menu_items: Ref<MenuItem[]> = ref([
   },
 ])
 
-async function connectRpcClient(url?: string) {
-  await initRpcConnection(url)
-  console.log("easytier rpc connection established")
+async function connectRpcClient(isNormalMode: boolean, url?: string) {
+  await initRpcConnection(isNormalMode, url)
+  console.log("easytier rpc connection established, isNormalMode: ", isNormalMode)
 }
 
 onMounted(async () => {