Feat/pseudo dhcp (#109)

* ✨ feat: pseudo dhcp

easytier-gui/src/components/Config.vue

@@ -2,7 +2,6 @@
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
 import { getOsHostname } from '~/composables/network'
-import { i18n } from '~/modules/i18n'
 import { NetworkingMethod } from '~/types/network'
 
 const props = defineProps<{
@@ -12,10 +11,12 @@ const props = defineProps<{
 
 defineEmits(['runNetwork'])
 
+const { t } = useI18n()
+
 const networking_methods = ref([
-  { value: NetworkingMethod.PublicServer, label: i18n.global.t('public_server') },
-  { value: NetworkingMethod.Manual, label: i18n.global.t('manual') },
-  { value: NetworkingMethod.Standalone, label: i18n.global.t('standalone') },
+  { value: NetworkingMethod.PublicServer, label: t('public_server') },
+  { value: NetworkingMethod.Manual, label: t('manual') },
+  { value: NetworkingMethod.Standalone, label: t('standalone') },
 ])
 
 const networkStore = useNetworkStore()
@@ -56,14 +57,29 @@ onMounted(async () => {
 <template>
   <div class="flex flex-column h-full">
     <div class="flex flex-column">
+      <div class="w-7/12 self-center ">
+        <Message severity="warn">
+          {{ $t('dhcp_experimental_warning') }}
+        </Message>
+      </div>
       <div class="w-7/12 self-center ">
         <Panel :header="$t('basic_settings')">
           <div class="flex flex-column gap-y-2">
             <div class="flex flex-row gap-x-9 flex-wrap">
               <div class="flex flex-column gap-2 basis-5/12 grow">
-                <label for="virtual_ip">{{ $t('virtual_ipv4') }}</label>
+                <div class="flex align-items-center" for="virtual_ip">
+                  <label class="mr-2"> {{ $t('virtual_ipv4') }} </label>
+                  <Checkbox v-model="curNetwork.dhcp" input-id="virtual_ip_auto" :binary="true" />
+
+                  <label for="virtual_ip_auto" class="ml-2">
+                    {{ t('virtual_ipv4_dhcp') }}
+                  </label>
+                </div>
                 <InputGroup>
-                  <InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" aria-describedby="virtual_ipv4-help" />
+                  <InputText
+                    id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
+                    aria-describedby="virtual_ipv4-help"
+                  />
                   <InputGroupAddon>
                     <span>/24</span>
                   </InputGroupAddon>
@@ -112,7 +128,7 @@ onMounted(async () => {
 
         <Divider />
 
-        <Panel :header="$t('advanced_settings')" toggleable>
+        <Panel :header="$t('advanced_settings')" toggleable collapsed>
           <div class="flex flex-column gap-y-2">
             <div class="flex flex-row gap-x-9 flex-wrap">
               <div class="flex flex-column gap-2 basis-5/12 grow">
@@ -154,7 +170,7 @@ onMounted(async () => {
                     </InputGroup>
                   </div>
                   <InputNumber
-                    v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listne_port"
+                    v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listen_port"
                     :placeholder="$t('vpn_portal_listen_port')" class="" :format="false" :min="0" :max="65535"
                   />
                 </div>

easytier-gui/src/components/Status.vue

@@ -24,7 +24,7 @@ const curNetworkInst = computed(() => {
 
 const peerRouteInfos = computed(() => {
   if (curNetworkInst.value)
-    return curNetworkInst.value.detail.peer_route_pairs
+    return curNetworkInst.value.detail?.peer_route_pairs || []
 
   return []
 })
@@ -116,6 +116,13 @@ const myNodeInfoChips = computed(() => {
   if (!my_node_info)
     return chips
 
+  // virtual ipv4
+
+  chips.push({
+    label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
+    icon: '',
+  } as Chip)
+
   // local ipv4s
   const local_ipv4s = my_node_info.ips?.interface_ipv4s
   for (const [idx, ip] of local_ipv4s?.entries()) {
@@ -290,82 +297,84 @@ function showEventLogs() {
       </template>
     </Card>
 
-    <Card v-if="!curNetworkInst?.error_msg">
-      <template #title>
-        {{ $t('my_node_info') }}
-      </template>
-      <template #content>
-        <div class="flex w-full flex-column gap-y-5">
-          <div class="m-0 flex flex-row justify-center gap-x-5">
-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid green"
-            >
-              <div class="font-bold">
-                {{ $t('peer_count') }}
+    <template v-else>
+      <Card>
+        <template #title>
+          {{ $t('my_node_info') }}
+        </template>
+        <template #content>
+          <div class="flex w-full flex-column gap-y-5">
+            <div class="m-0 flex flex-row justify-center gap-x-5">
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid green"
+              >
+                <div class="font-bold">
+                  {{ $t('peer_count') }}
+                </div>
+                <div class="text-5xl mt-1">
+                  {{ peerCount }}
+                </div>
               </div>
-              <div class="text-5xl mt-1">
-                {{ peerCount }}
+
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid purple"
+              >
+                <div class="font-bold">
+                  {{ $t('upload') }}
+                </div>
+                <div class="text-xl mt-2">
+                  {{ txRate }}/s
+                </div>
+              </div>
+
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid fuchsia"
+              >
+                <div class="font-bold">
+                  {{ $t('download') }}
+                </div>
+                <div class="text-xl mt-2">
+                  {{ rxRate }}/s
+                </div>
               </div>
             </div>
 
-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid purple"
-            >
-              <div class="font-bold">
-                {{ $t('upload') }}
-              </div>
-              <div class="text-xl mt-2">
-                {{ txRate }}/s
-              </div>
+            <div class="flex flex-row align-items-center flex-wrap w-full">
+              <Chip
+                v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
+                class="mr-2 mt-2"
+              />
             </div>
 
-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid fuchsia"
-            >
-              <div class="font-bold">
-                {{ $t('download') }}
-              </div>
-              <div class="text-xl mt-2">
-                {{ rxRate }}/s
-              </div>
+            <div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
+              <Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
+              <Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
             </div>
           </div>
+        </template>
+      </Card>
 
-          <div class="flex flex-row align-items-center flex-wrap w-full">
-            <Chip
-              v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
-              class="mr-2 mt-2"
-            />
-          </div>
+      <Divider />
 
-          <div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
-            <Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
-            <Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
-          </div>
-        </div>
-      </template>
-    </Card>
-
-    <Divider />
-
-    <Card v-if="!curNetworkInst?.error_msg">
-      <template #title>
-        {{ $t('peer_info') }}
-      </template>
-      <template #content>
-        <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
-          <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
-          <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
-          <Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
-          <Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
-          <Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
-          <Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
-          <Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
-        </DataTable>
-      </template>
-    </Card>
+      <Card>
+        <template #title>
+          {{ $t('peer_info') }}
+        </template>
+        <template #content>
+          <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
+            <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
+            <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
+            <Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
+            <Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
+            <Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
+            <Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
+            <Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
+          </DataTable>
+        </template>
+      </Card>
+    </template>
   </div>
 </template>