make all frontend functions works (#466)

2024-11-16 11:42:27 +08:00 · 2024-11-10 11:06:58 +08:00 · 2024-11-10 11:06:58 +08:00 · 88e6de9d7e
commit 88e6de9d7e
parent e948dbfcc1
36 changed files with 1039 additions and 483 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -2006,6 +2006,7 @@ dependencies = [
 "sea-orm",
 "sea-orm-migration",
 "serde",
+ "serde_json",
 "sqlx",
 "thiserror",
 "tokio",
--- a/easytier-web/Cargo.toml
+++ b/easytier-web/Cargo.toml
@ -43,6 +43,7 @@ clap = { version = "4.4.8", features = [
    "wrap_help",
 ] }
 serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
 uuid = { version = "1.5.0", features = [
    "v4",
    "fast-rng",
--- a/easytier-web/frontend-lib/package.json
+++ b/easytier-web/frontend-lib/package.json
@ -21,6 +21,7 @@
    "@primevue/themes": "^4.2.1",
    "@vueuse/core": "^11.1.0",
    "aura": "link:@primevue\\themes\\aura",
+    "axios": "^1.7.7",
    "ip-num": "1.5.1",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.1",
--- a/easytier-web/frontend-lib/src/components/HumanEvent.vue
+++ b/easytier-web/frontend-lib/src/components/HumanEvent.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { EventType } from '../types/network'
+import { computed } from 'vue';
+import { Fieldset } from 'primevue';
+
+const props = defineProps<{
+  event: {
+    [key: string]: any
+  }
+}>()
+const { t } = useI18n()
+
+const eventKey = computed(() => {
+  const key = Object.keys(props.event)[0]
+  return Object.keys(EventType).includes(key) ? key : 'Unknown'
+})
+
+const eventValue = computed(() => {
+  const value = props.event[eventKey.value]
+  return typeof value === 'object' ? value : value
+})
+</script>
+
+<template>
+  <Fieldset :legend="t(`event.${eventKey}`)">
+    <template v-if="eventKey !== 'Unknown'">
+      <div v-if="event.DhcpIpv4Changed">
+        {{ `${eventValue[0]} -> ${eventValue[1]}` }}
+      </div>
+      <pre v-else>{{ eventValue }}</pre>
+    </template>
+    <pre v-else>{{ eventValue }}</pre>
+  </Fieldset>
+</template>
--- a/easytier-web/frontend-lib/src/components/Status.vue
+++ b/easytier-web/frontend-lib/src/components/Status.vue
@ -181,7 +181,7 @@ const myNodeInfoChips = computed(() => {
  const listeners = my_node_info.listeners
  for (const [idx, listener] of listeners?.entries()) {
    chips.push({
-      label: `Listener ${idx}: ${listener}`,
+      label: `Listener ${idx}: ${listener.url}`,
      icon: '',
    } as Chip)
  }
@ -295,7 +295,7 @@ function showEventLogs() {
  if (!detail)
    return

-  dialogContent.value = detail.events
+  dialogContent.value = detail.events.map((event: string) => JSON.parse(event))
  dialogHeader.value = 'event_log'
  dialogVisible.value = true
 }
@ -309,10 +309,11 @@ function showEventLogs() {
      </ScrollPanel>
      <Timeline v-else :value="dialogContent">
        <template #opposite="slotProps">
-          <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item[0])) }}</small>
+          <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item.time))
+            }}</small>
        </template>
        <template #content="slotProps">
-          <HumanEvent :event="slotProps.item[1]" />
+          <HumanEvent :event="slotProps.item.event" />
        </template>
      </Timeline>
    </Dialog>
--- a/easytier-web/frontend-lib/src/easytier-frontend-lib.ts
+++ b/easytier-web/frontend-lib/src/easytier-frontend-lib.ts
@ -7,6 +7,10 @@ import PrimeVue from 'primevue/config'

 import I18nUtils from './modules/i18n'
 import * as NetworkTypes from './types/network'
+import HumanEvent from './components/HumanEvent.vue';
+import Tooltip from 'primevue/tooltip';
+import * as Api from './modules/api';
+import * as Utils from './modules/utils';

 export default {
    install: (app: App) => {
@ -27,7 +31,9 @@ export default {

        app.component('Config', Config);
        app.component('Status', Status);
+        app.component('HumanEvent', HumanEvent);
+        app.directive('tooltip', Tooltip);
    }
 };

-export { Config, Status, I18nUtils, NetworkTypes };
+export { Config, Status, I18nUtils, NetworkTypes, Api, Utils };
--- a/easytier-web/frontend-lib/src/modules/api.ts
+++ b/easytier-web/frontend-lib/src/modules/api.ts
@ -11,8 +11,8 @@ export interface LoginResponse {
 }

 export interface RegisterResponse {
+    success: boolean;
    message: string;
-    user: any; // 同上
 }

 // 定义请求体数据结构
@ -22,21 +22,27 @@ export interface Credential {
 }

 export interface RegisterData {
-    credential: Credential;
+    credentials: Credential;
    captcha: string;
 }

-class ApiClient {
-    private client: AxiosInstance;
+export interface Summary {
+    device_count: number;
+}

-    constructor(baseUrl: string) {
+export class ApiClient {
+    private client: AxiosInstance;
+    private authFailedCb: Function | undefined;
+
+    constructor(baseUrl: string, authFailedCb: Function | undefined = undefined) {
        this.client = axios.create({
-            baseURL: baseUrl,
+            baseURL: baseUrl + '/api/v1',
            withCredentials: true, // 如果需要支持跨域携带cookie
            headers: {
                'Content-Type': 'application/json',
            },
        });
+        this.authFailedCb = authFailedCb;

        // 添加请求拦截器
        this.client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
@ -47,12 +53,18 @@ class ApiClient {

        // 添加响应拦截器
        this.client.interceptors.response.use((response: AxiosResponse) => {
-            console.log('Axios Response:', response);
+            console.debug('Axios Response:', response);
            return response.data; // 假设服务器返回的数据都在data属性中
        }, (error: any) => {
            if (error.response) {
-                // 请求已发出，但是服务器响应的状态码不在2xx范围
-                console.error('Response Error:', error.response.data);
+                let response: AxiosResponse = error.response;
+                if (response.status == 401 && this.authFailedCb) {
+                    console.error('Unauthorized:', response.data);
+                    this.authFailedCb();
+                } else {
+                    // 请求已发出，但是服务器响应的状态码不在2xx范围
+                    console.error('Response Error:', error.response.data);
+                }
            } else if (error.request) {
                // 请求已发出，但是没有收到响应
                console.error('Request Error:', error.request);
@ -64,6 +76,20 @@ class ApiClient {
        });
    }

+    // 注册
+    public async register(data: RegisterData): Promise<RegisterResponse> {
+        try {
+            const response = await this.client.post<RegisterResponse>('/auth/register', data);
+            console.log("register response:", response);
+            return { success: true, message: 'Register success', };
+        } catch (error) {
+            if (error instanceof AxiosError) {
+                return { success: false, message: 'Failed to register, error: ' + JSON.stringify(error.response?.data), };
+            }
+            return { success: false, message: 'Unknown error, error: ' + error, };
+        }
+    }
+
    // 登录
    public async login(data: Credential): Promise<LoginResponse> {
        try {
@ -82,10 +108,24 @@ class ApiClient {
        }
    }

-    // 注册
-    public async register(data: RegisterData): Promise<RegisterResponse> {
-        const response = await this.client.post<RegisterResponse>('/auth/register', data);
-        return response.data;
+    public async logout() {
+        await this.client.get('/auth/logout');
+        if (this.authFailedCb) {
+            this.authFailedCb();
+        }
+    }
+
+    public async change_password(new_password: string) {
+        await this.client.put('/auth/password', { new_password: new_password });
+    }
+
+    public async check_login_status() {
+        try {
+            await this.client.get('/auth/check_login_status');
+            return true;
+        } catch (error) {
+            return false;
+        }
    }

    public async list_session() {
@ -103,6 +143,11 @@ class ApiClient {
        return response.info.map;
    }

+    public async get_network_config(machine_id: string, inst_id: string): Promise<any> {
+        const response = await this.client.get<any, Record<string, any>>('/machines/' + machine_id + '/networks/config/' + inst_id);
+        return response;
+    }
+
    public async validate_config(machine_id: string, config: any): Promise<ValidateConfigResponse> {
        const response = await this.client.post<any, ValidateConfigResponse>(`/machines/${machine_id}/validate-config`, {
            config: config,
@ -110,7 +155,7 @@ class ApiClient {
        return response;
    }

-    public async run_network(machine_id: string, config: string): Promise<undefined> {
+    public async run_network(machine_id: string, config: any): Promise<undefined> {
        await this.client.post<string>(`/machines/${machine_id}/networks`, {
            config: config,
        });
@ -120,8 +165,13 @@ class ApiClient {
        await this.client.delete<string>(`/machines/${machine_id}/networks/${inst_id}`);
    }

+    public async get_summary(): Promise<Summary> {
+        const response = await this.client.get<any, Summary>('/summary');
+        return response;
+    }
+
    public captcha_url() {
-        return this.client.defaults.baseURL + 'auth/captcha';
+        return this.client.defaults.baseURL + '/auth/captcha';
    }
 }

--- a/easytier-web/frontend-lib/src/modules/utils.ts
+++ b/easytier-web/frontend-lib/src/modules/utils.ts
@ -13,3 +13,89 @@ export function num2ipv6(ip: Ipv6Addr) {
        + BigInt(ip.part4),
    )
 }
+
+function toHexString(uint64: bigint, padding = 9): string {
+    let hexString = uint64.toString(16);
+    while (hexString.length < padding) {
+        hexString = '0' + hexString;
+    }
+    return hexString;
+}
+
+function uint32ToUuid(part1: number, part2: number, part3: number, part4: number): string {
+    // 将两个 uint64 转换为 16 进制字符串
+    const part1Hex = toHexString(BigInt(part1), 8);
+    const part2Hex = toHexString(BigInt(part2), 8);
+    const part3Hex = toHexString(BigInt(part3), 8);
+    const part4Hex = toHexString(BigInt(part4), 8);
+
+    // 构造 UUID 格式字符串
+    const uuid = `${part1Hex.substring(0, 8)}-${part2Hex.substring(0, 4)}-${part2Hex.substring(4, 8)}-${part3Hex.substring(0, 4)}-${part3Hex.substring(4, 8)}${part4Hex.substring(0, 12)}`;
+
+    return uuid;
+}
+
+export interface UUID {
+    part1: number;
+    part2: number;
+    part3: number;
+    part4: number;
+}
+
+export function UuidToStr(uuid: UUID): string {
+    return uint32ToUuid(uuid.part1, uuid.part2, uuid.part3, uuid.part4);
+}
+
+export interface DeviceInfo {
+    hostname: string;
+    public_ip: string;
+    running_network_count: number;
+    report_time: string;
+    easytier_version: string;
+    running_network_instances?: Array<string>;
+    machine_id: string;
+}
+
+export function buildDeviceInfo(device: any): DeviceInfo {
+    let dev_info: DeviceInfo = {
+        hostname: device.info?.hostname,
+        public_ip: device.client_url,
+        running_network_instances: device.info?.running_network_instances.map((instance: any) => UuidToStr(instance)),
+        running_network_count: device.info?.running_network_instances.length,
+        report_time: device.info?.report_time,
+        easytier_version: device.info?.easytier_version,
+        machine_id: UuidToStr(device.info?.machine_id),
+    };
+
+    return dev_info;
+}
+
+// write a class to run a function periodically and can be stopped by calling stop(), use setTimeout to trigger the function
+export class PeriodicTask {
+    private interval: number;
+    private task: (() => Promise<void>) | undefined;
+    private timer: any;
+
+    constructor(task: () => Promise<void>, interval: number) {
+        this.interval = interval;
+        this.task = task;
+    }
+
+    _runTaskHelper(nextInterval: number) {
+        this.timer = setTimeout(async () => {
+            if (this.task) {
+                await this.task();
+                this._runTaskHelper(this.interval);
+            }
+        }, nextInterval);
+    }
+
+    start() {
+        this._runTaskHelper(0);
+    }
+
+    stop() {
+        this.task = undefined;
+        clearTimeout(this.timer);
+    }
+}
--- a/easytier-web/frontend-lib/src/types/network.ts
+++ b/easytier-web/frontend-lib/src/types/network.ts
@ -84,7 +84,7 @@ export interface NetworkInstance {
 export interface NetworkInstanceRunningInfo {
  dev_name: string
  my_node_info: NodeInfo
-  events: Record<string, any>
+  events: Array<string>,
  node_info: NodeInfo
  routes: Route[]
  peers: PeerInfo[]
@ -104,6 +104,10 @@ export interface Ipv6Addr {
  part4: number
 }

+export interface Url {
+  url: string
+}
+
 export interface NodeInfo {
  virtual_ipv4: string
  hostname: string
@ -127,7 +131,7 @@ export interface NodeInfo {
    }[]
  }
  stun_info: StunInfo
-  listeners: string[]
+  listeners: Url[]
  vpn_portal_cfg?: string
 }

--- a/easytier-web/frontend/index.html
+++ b/easytier-web/frontend/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/easytier.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>EasyTier Dashboard</title>
  </head>
  <body>
    <div id="app"></div>
--- a/easytier-web/frontend/package.json
+++ b/easytier-web/frontend/package.json
@ -15,7 +15,8 @@
    "easytier-frontend-lib": "workspace:*",
    "primevue": "^4.2.1",
    "tailwindcss-primeui": "^0.3.4",
-    "vue": "^3.5.12"
+    "vue": "^3.5.12",
+    "vue-router": "4"
  },
  "devDependencies": {
    "@types/node": "^22.8.6",
--- a/easytier-web/frontend/public/easytier.png
+++ b/easytier-web/frontend/public/easytier.png
--- a/easytier-web/frontend/public/vite.svg
+++ b/easytier-web/frontend/public/vite.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/easytier-web/frontend/src/App.vue
+++ b/easytier-web/frontend/src/App.vue
@ -2,12 +2,7 @@

 import { I18nUtils } from 'easytier-frontend-lib'
 import { onMounted } from 'vue';
-import Login from './components/Login.vue'
-import { Button } from 'primevue';
-import ApiClient from './modules/api';
-import DeviceList from './components/DeviceList.vue';
-
-const api = new ApiClient('http://10.147.223.128:11211/api/v1/'); // Replace with actual API URL
+import { Toast, DynamicDialog } from 'primevue';

 onMounted(async () => {
  await I18nUtils.loadLanguageAsync('cn')
@ -18,109 +13,10 @@ onMounted(async () => {
 <!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->

 <template>
-  <div id="root" class="">
-    <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-      <div class="px-3 py-3 lg:px-5 lg:pl-3">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center justify-start rtl:justify-end">
-            <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar"
-              type="button"
-              class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
-              <span class="sr-only">Open sidebar</span>
-              <i class="pi pi-list" style="font-size: 1.3rem"></i>
-            </button>
-            <a href="https://flowbite.com" class="flex ms-2 md:me-24">
-              <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-              <span
-                class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">EasyTier</span>
-            </a>
-          </div>
-          <div class="flex items-center">
-            <div class="flex items-center ms-3">
-              <div>
-                <button type="button"
-                  class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
-                  aria-expanded="false" data-dropdown-toggle="dropdown-user">
-                  <span class="sr-only">Open user menu</span>
-                  <img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-                    alt="user photo">
-                </button>
-              </div>
-              <div
-                class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
-                id="dropdown-user">
-                <div class="px-4 py-3" role="none">
-                  <p class="text-sm text-gray-900 dark:text-white" role="none">
-                    Neil Sims
-                  </p>
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
-                    neil.sims@flowbite.com
-                  </p>
-                </div>
-                <ul class="py-1" role="none">
-                  <li>
-                    <a href="#"
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                      role="menuitem">Dashboard</a>
-                  </li>
-                  <li>
-                    <a href="#"
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                      role="menuitem">Settings</a>
-                  </li>
-                  <li>
-                    <a href="#"
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                      role="menuitem">Earnings</a>
-                  </li>
-                  <li>
-                    <a href="#"
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                      role="menuitem">Sign out</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
+  <Toast />
+  <DynamicDialog />

-    <aside id="logo-sidebar"
-      class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
-      aria-label="Sidebar">
-      <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
-        <ul class="space-y-2 font-medium">
-          <li>
-            <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5" severity="contrast">
-              <i class="pi pi-chart-pie" style="font-size: 1.2rem"></i>
-              <span class="mb-0.5">DashBoard</span>
-            </Button>
-          </li>
-          <li>
-            <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5" severity="contrast">
-              <i class="pi pi-server" style="font-size: 1.2rem"></i>
-              <span class="mb-0.5">Devices</span>
-            </Button>
-          </li>
-        </ul>
-      </div>
-    </aside>
-
-    <div class="p-4 sm:ml-64">
-      <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
-        <div class="grid grid-cols-1 gap-4 mb-4">
-          <DeviceList :api="api"></DeviceList>
-        </div>
-        <div class="grid grid-cols-1 gap-4 mb-4">
-          <Login :api="api"></Login>
-        </div>
-      </div>
-    </div>
-
-
-
-  </div>
+  <RouterView />
 </template>

 <style scoped>
--- a/easytier-web/frontend/src/assets/easytier.png
+++ b/easytier-web/frontend/src/assets/easytier.png
--- a/easytier-web/frontend/src/assets/vue.svg
+++ b/easytier-web/frontend/src/assets/vue.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/easytier-web/frontend/src/components/ChangePassword.vue
+++ b/easytier-web/frontend/src/components/ChangePassword.vue
@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Card, Password, Button } from 'primevue';
+import { Api } from 'easytier-frontend-lib';
+
+const dialogRef = inject<any>('dialogRef');
+
+const api = computed<Api.ApiClient>(() => dialogRef.value.data.api);
+
+const password = ref('');
+
+const changePassword = async () => {
+    await api.value.change_password(password.value);
+    dialogRef.value.close();
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-center">
+        <Card class="w-full max-w-md p-6">
+            <template #header>
+                <h2 class="text-2xl font-semibold text-center">Change Password
+                </h2>
+            </template>
+            <template #content>
+                <div class="flex flex-col space-y-4">
+                    <Password v-model="password" placeholder="New Password" :feedback="false" toggleMask />
+                    <Button @click="changePassword" label="Ok" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
--- a/easytier-web/frontend/src/components/Dashboard.vue
+++ b/easytier-web/frontend/src/components/Dashboard.vue
@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Card, useToast } from 'primevue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { Api, Utils } from 'easytier-frontend-lib';
+
+const props = defineProps({
+    api: Api.ApiClient,
+});
+
+const toast = useToast();
+
+const summary = ref<Api.Summary | undefined>(undefined);
+
+const loadSummary = async () => {
+    const resp = await props.api?.get_summary();
+    summary.value = resp;
+};
+
+const periodFunc = new Utils.PeriodicTask(async () => {
+    try {
+        await loadSummary();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Load Summary Failed', detail: e, life: 2000 });
+        console.error(e);
+    }
+}, 1000);
+
+onMounted(async () => {
+    periodFunc.start();
+});
+
+onUnmounted(() => {
+    periodFunc.stop();
+});
+
+const deviceCount = computed<number | undefined>(
+    () => {
+        return summary.value?.device_count;
+    },
+);
+
+</script>
+
+<template>
+    <div class="grid grid-cols-3 gap-4">
+        <Card class="h-full">
+            <template #title>Device Count</template>
+            <template #content>
+                <div class="w-full flex justify-center text-7xl font-bold text-green-800 mt-4">
+                    {{ deviceCount }}
+                </div>
+            </template>
+        </Card>
+        <div class="flex items-center justify-center rounded bg-gray-50 dark:bg-gray-800">
+            <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <!-- <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                    viewBox="0 0 18 18">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M9 1v16M1 9h16" />
+                </svg> -->
+            </p>
+        </div>
+    </div>
+
+</template>
--- a/easytier-web/frontend/src/components/DeviceList.vue
+++ b/easytier-web/frontend/src/components/DeviceList.vue
@ -1,204 +1,86 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import ApiClient, { ValidateConfigResponse } from '../modules/api';
-import { Config, Status, NetworkTypes } from 'easytier-frontend-lib'
-import { Button, Column, DataTable, Drawer, Toolbar, IftaLabel, Select, Dialog, ConfirmPopup, useConfirm } from 'primevue';
-
-function toHexString(uint64: bigint, padding = 9): string {
-    let hexString = uint64.toString(16);
-    while (hexString.length < padding) {
-        hexString = '0' + hexString;
-    }
-    return hexString;
-}
-
-function uint32ToUuid(part1: number, part2: number, part3: number, part4: number): string {
-    // 将两个 uint64 转换为 16 进制字符串
-    const part1Hex = toHexString(BigInt(part1), 8);
-    const part2Hex = toHexString(BigInt(part2), 8);
-    const part3Hex = toHexString(BigInt(part3), 8);
-    const part4Hex = toHexString(BigInt(part4), 8);
-
-    // 构造 UUID 格式字符串
-    const uuid = `${part1Hex.substring(0, 8)}-${part2Hex.substring(0, 4)}-${part2Hex.substring(4, 8)}-${part3Hex.substring(0, 4)}-${part3Hex.substring(4, 8)}${part4Hex.substring(0, 12)}`;
-
-    return uuid;
-}
-
-interface UUID {
-    part1: number;
-    part2: number;
-    part3: number;
-    part4: number;
-}
-
-function UuidToStr(uuid: UUID): string {
-    return uint32ToUuid(uuid.part1, uuid.part2, uuid.part3, uuid.part4);
-}
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { Button, Column, DataTable, Drawer, ProgressSpinner, useToast } from 'primevue';
+import { useRoute, useRouter } from 'vue-router';
+import { Api, Utils } from 'easytier-frontend-lib';

 const props = defineProps({
-    api: ApiClient,
+    api: Api.ApiClient,
 });

 const api = props.api;

-interface DeviceList {
-    hostname: string;
-    public_ip: string;
-    running_network_count: number;
-    report_time: string;
-    easytier_version: string;
-    running_network_instances?: Array<string>;
-    machine_id: string;
-}
+const deviceList = ref<Array<Utils.DeviceInfo> | undefined>(undefined);

-const selectedDevice = ref<DeviceList | null>(null);
-const deviceList = ref<Array<DeviceList>>([]);
-const instanceIdList = computed(() => {
-    let insts = selectedDevice.value?.running_network_instances || [];
-    let options = insts.map((instance: string) => {
-        return { uuid: instance };
-    });
-    console.log("options", options);
-    return options;
-});
-const selectedInstanceId = ref<any | null>(null);
-const curNetworkInfo = ref<NetworkTypes.NetworkInstance | null>(null);
+const selectedDeviceId = computed<string | undefined>(() => route.params.deviceId as string);
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();

 const loadDevices = async () => {
    const resp = await api?.list_machines();
-    console.log(resp);
-    let devices: Array<DeviceList> = [];
+    let devices: Array<Utils.DeviceInfo> = [];
    for (const device of (resp || [])) {
        devices.push({
            hostname: device.info?.hostname,
            public_ip: device.client_url,
-            running_network_instances: device.info?.running_network_instances.map((instance: any) => UuidToStr(instance)),
+            running_network_instances: device.info?.running_network_instances.map((instance: any) => Utils.UuidToStr(instance)),
            running_network_count: device.info?.running_network_instances.length,
            report_time: device.info?.report_time,
            easytier_version: device.info?.easytier_version,
-            machine_id: UuidToStr(device.info?.machine_id),
+            machine_id: Utils.UuidToStr(device.info?.machine_id),
        });
    }
+    console.debug("device list", deviceList.value);
    deviceList.value = devices;
-    console.log(deviceList.value);
 };

-interface SelectedDevice {
-    machine_id: string;
-    instance_id: string;
-}
-
-const checkDeviceSelected = (): SelectedDevice => {
-    let machine_id = selectedDevice.value?.machine_id;
-    let inst_id = selectedInstanceId.value?.uuid;
-    if (machine_id && inst_id) {
-        return { machine_id, instance_id: inst_id };
-    } else {
-        throw new Error("No device selected");
+const periodFunc = new Utils.PeriodicTask(async () => {
+    try {
+        await loadDevices();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Load Device List Failed', detail: e, life: 2000 });
+        console.error(e);
    }
-}
-
-const loadDeviceInfo = async () => {
-    let selectedDevice = checkDeviceSelected();
-    if (!selectedDevice) {
-        return;
-    }
-
-    let ret = await api?.get_network_info(selectedDevice.machine_id, selectedDevice.instance_id);
-    let device_info = ret[selectedDevice.instance_id]
-
-    curNetworkInfo.value = {
-        instance_id: selectedDevice.instance_id,
-        running: device_info.running,
-        error_msg: device_info.error_msg,
-        detail: device_info,
-    } as NetworkTypes.NetworkInstance;
-}
+}, 1000);

 onMounted(async () => {
-    setInterval(loadDevices, 1000);
-    setInterval(loadDeviceInfo, 1000);
+    periodFunc.start();
 });

-const visibleRight = ref(false);
+onUnmounted(() => {
+    periodFunc.stop();
+});

-const showCreateNetworkDialog = ref(false);
-const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
-
-const verifyNetworkConfig = async (): Promise<ValidateConfigResponse | undefined> => {
-    let machine_id = selectedDevice.value?.machine_id;
-    if (!machine_id) {
-        throw new Error("No machine selected");
-    }
-
-    if (!newNetworkConfig.value) {
-        throw new Error("No network config");
-    }
-
-    let ret = await api?.validate_config(machine_id, newNetworkConfig.value);
-    console.log("verifyNetworkConfig", ret);
-    return ret;
-}
-
-const createNewNetwork = async () => {
-    let config = await verifyNetworkConfig();
-    if (!config) {
-        return;
-    }
-
-    let machine_id = selectedDevice.value?.machine_id;
-    if (!machine_id) {
-        throw new Error("No machine selected");
-    }
-
-    let ret = await api?.run_network(machine_id, config?.toml_config);
-    console.log("createNewNetwork", ret);
-    showCreateNetworkDialog.value = false;
-    await loadDevices();
-}
-
-const confirm = useConfirm();
-const confirmDeleteNetwork = (event: any) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Do you want to delete this network?',
-        icon: 'pi pi-info-circle',
-        rejectProps: {
-            label: 'Cancel',
-            severity: 'secondary',
-            outlined: true
-        },
-        acceptProps: {
-            label: 'Delete',
-            severity: 'danger'
-        },
-        accept: async () => {
-            const ret = checkDeviceSelected();
-            await api?.delete_network(ret?.machine_id, ret?.instance_id);
-            await loadDevices();
-        },
-        reject: () => {
-            return;
+const deviceManageVisible = computed<boolean>({
+    get: () => !!selectedDeviceId.value,
+    set: (value) => {
+        if (!value) {
+            router.push({ name: 'deviceList', params: { deviceId: undefined } });
        }
-    });
-};
+    }
+});
+
+const selectedDeviceHostname = computed<string | undefined>(() => {
+    return deviceList.value?.find((device) => device.machine_id === selectedDeviceId.value)?.hostname;
+});

 </script>

 <style scoped></style>

 <template>
-    <ConfirmPopup></ConfirmPopup>
-    <Dialog v-model:visible="showCreateNetworkDialog" modal header="Create New Network" :style="{ width: '55rem' }">
-        <Config :cur-network="newNetworkConfig" @run-network="createNewNetwork"></Config>
-    </Dialog>
+    <div v-if="deviceList === undefined" class="w-full flex justify-center">
+        <ProgressSpinner />
+    </div>

    <DataTable :value="deviceList" tableStyle="min-width: 50rem" :metaKeySelection="true" sortField="hostname"
-        :sortOrder="-1">
+        :sortOrder="-1" v-if="deviceList !== undefined">
        <template #header>
            <div class="text-xl font-bold">Device List</div>
        </template>
+
        <Column field="hostname" header="Hostname" sortable style="width: 180px"></Column>
        <Column field="public_ip" header="Public IP" style="width: 150px"></Column>
        <Column field="running_network_count" header="Running Network Count" sortable style="width: 150px"></Column>
@ -206,38 +88,23 @@ const confirmDeleteNetwork = (event: any) => {
        <Column field="easytier_version" header="EasyTier Version" sortable style="width: 150px"></Column>
        <Column class="w-24 !text-end">
            <template #body="{ data }">
-                <Button icon="pi pi-search" @click="selectedDevice = data; visibleRight = true" severity="secondary"
-                    rounded></Button>
+                <Button icon="pi pi-cog"
+                    @click="router.push({ name: 'deviceManagement', params: { deviceId: data.machine_id, instanceId: data.running_network_instances[0] } })"
+                    severity="secondary" rounded></Button>
            </template>
        </Column>
+
        <template #footer>
-            <div class="flex justify-start">
+            <div class="flex justify-end">
                <Button icon="pi pi-refresh" label="Reload" severity="info" @click="loadDevices" />
            </div>
        </template>
    </DataTable>

-    <Drawer v-model:visible="visibleRight" header="Device Management" position="right" class="w-1/2 min-w-96">
-        <Toolbar>
-            <template #start>
-                <IftaLabel>
-                    <Select v-model="selectedInstanceId" :options="instanceIdList" optionLabel="uuid"
-                        inputId="dd-inst-id" placeholder="Select Instance" />
-                    <label class="mr-3" for="dd-inst-id">Network</label>
-                </IftaLabel>
-            </template>
-
-            <template #end>
-                <div class="gap-x-3 flex">
-                    <Button @click="confirmDeleteNetwork($event)" icon="pi pi-minus" severity="danger" label="Delete"
-                        iconPos="right" />
-                    <Button @click="showCreateNetworkDialog = true" icon="pi pi-plus" label="Create" iconPos="right" />
-                </div>
-            </template>
-        </Toolbar>
-
-        <Status v-bind:cur-network-inst="curNetworkInfo">
-
-        </Status>
+    <Drawer v-model:visible="deviceManageVisible" :header="`Manage ${selectedDeviceHostname}`" position="right"
+        class="w-1/2 min-w-96">
+        <RouterView v-slot="{ Component }">
+            <component :is="Component" :api="api" :deviceList="deviceList" @update="loadDevices" />
+        </RouterView>
    </Drawer>
 </template>
--- a/easytier-web/frontend/src/components/DeviceManagement.vue
+++ b/easytier-web/frontend/src/components/DeviceManagement.vue
@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { Toolbar, IftaLabel, Select, Button, ConfirmPopup, Dialog, useConfirm, useToast } from 'primevue';
+import { NetworkTypes, Status, Utils, Api, } from 'easytier-frontend-lib';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const props = defineProps<{
+    api: Api.ApiClient;
+    deviceList: Array<Utils.DeviceInfo> | undefined;
+}>();
+
+const emits = defineEmits(['update']);
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();
+
+const deviceId = computed<string>(() => {
+    return route.params.deviceId as string;
+});
+
+const instanceId = computed<string>(() => {
+    return route.params.instanceId as string;
+});
+
+const deviceInfo = computed<Utils.DeviceInfo | undefined | null>(() => {
+    return deviceId.value ? props.deviceList?.find((device) => device.machine_id === deviceId.value) : null;
+});
+
+const curNetworkInfo = ref<NetworkTypes.NetworkInstance | null>(null);
+
+const isEditing = ref(false);
+const showCreateNetworkDialog = ref(false);
+const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
+
+const instanceIdList = computed(() => {
+    let insts = deviceInfo.value?.running_network_instances || [];
+    let options = insts.map((instance: string) => {
+        return { uuid: instance };
+    });
+    return options;
+});
+
+const selectedInstanceId = computed({
+    get() {
+        return instanceIdList.value.find((instance) => instance.uuid === instanceId.value);
+    },
+    set(value: any) {
+        console.log("set instanceId", value);
+        router.push({ name: 'deviceManagement', params: { deviceId: deviceId.value, instanceId: value.uuid } });
+    }
+});
+
+const confirm = useConfirm();
+const confirmDeleteNetwork = (event: any) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this network?',
+        icon: 'pi pi-info-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Delete',
+            severity: 'danger'
+        },
+        accept: async () => {
+            try {
+                await props.api?.delete_network(deviceId.value, instanceId.value);
+            } catch (e) {
+                console.error(e);
+            }
+            emits('update');
+        },
+        reject: () => {
+            return;
+        }
+    });
+};
+
+// const verifyNetworkConfig = async (): Promise<ValidateConfigResponse | undefined> => {
+//     let ret = await props.api?.validate_config(deviceId.value, newNetworkConfig.value);
+//     console.log("verifyNetworkConfig", ret);
+//     return ret;
+// }
+
+const createNewNetwork = async () => {
+    try {
+        if (isEditing.value) {
+            await props.api?.delete_network(deviceId.value, instanceId.value);
+        }
+        let ret = await props.api?.run_network(deviceId.value, newNetworkConfig.value);
+        console.debug("createNewNetwork", ret);
+    } catch (e: any) {
+        console.error(e);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create network, error: ' + JSON.stringify(e.response.data), life: 2000 });
+        return;
+    }
+    emits('update');
+    showCreateNetworkDialog.value = false;
+}
+
+const newNetwork = () => {
+    newNetworkConfig.value = NetworkTypes.DEFAULT_NETWORK_CONFIG();
+    isEditing.value = false;
+    showCreateNetworkDialog.value = true;
+}
+
+const editNetwork = async () => {
+    if (!deviceId.value || !instanceId.value) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'No network instance selected', life: 2000 });
+        return;
+    }
+
+    isEditing.value = true;
+
+    try {
+        let ret = await props.api?.get_network_config(deviceId.value, instanceId.value);
+        console.debug("editNetwork", ret);
+        newNetworkConfig.value = ret;
+        showCreateNetworkDialog.value = true;
+    } catch (e: any) {
+        console.error(e);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to edit network, error: ' + JSON.stringify(e.response.data), life: 2000 });
+        return;
+    }
+}
+
+const loadDeviceInfo = async () => {
+    if (!deviceId.value || !instanceId.value) {
+        return;
+    }
+
+    let ret = await props.api?.get_network_info(deviceId.value, instanceId.value);
+    let device_info = ret[instanceId.value];
+
+    curNetworkInfo.value = {
+        instance_id: instanceId.value,
+        running: device_info.running,
+        error_msg: device_info.error_msg,
+        detail: device_info,
+    } as NetworkTypes.NetworkInstance;
+}
+
+let periodFunc = new Utils.PeriodicTask(async () => {
+    try {
+        await loadDeviceInfo();
+    } catch (e) {
+        console.debug(e);
+    }
+}, 1000);
+
+onMounted(async () => {
+    periodFunc.start();
+});
+
+onUnmounted(() => {
+    periodFunc.stop();
+});
+
+</script>
+
+<template>
+    <ConfirmPopup></ConfirmPopup>
+    <Dialog v-model:visible="showCreateNetworkDialog" modal :header="!isEditing ? 'Create New Network' : 'Edit Network'"
+        :style="{ width: '55rem' }">
+        <Config :cur-network="newNetworkConfig" @run-network="createNewNetwork"></Config>
+    </Dialog>
+
+    <Toolbar>
+        <template #start>
+            <IftaLabel>
+                <Select v-model="selectedInstanceId" :options="instanceIdList" optionLabel="uuid" inputId="dd-inst-id"
+                    placeholder="Select Instance" />
+                <label class="mr-3" for="dd-inst-id">Network</label>
+            </IftaLabel>
+        </template>
+
+        <template #end>
+            <div class="gap-x-3 flex">
+                <Button @click="confirmDeleteNetwork($event)" icon="pi pi-minus" severity="danger" label="Delete"
+                    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>
+        </template>
+    </Toolbar>
+
+    <Status v-bind:cur-network-inst="curNetworkInfo" v-if="!!selectedInstanceId">
+    </Status>
+
+    <div class="grid grid-cols-1 gap-4 place-content-center h-full" v-if="!selectedInstanceId">
+        <div class="text-center text-xl"> Select or create a network instance to manage </div>
+    </div>
+</template>
--- a/easytier-web/frontend/src/components/Login.vue
+++ b/easytier-web/frontend/src/components/Login.vue
@ -1,3 +1,65 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Card, InputText, Password, Button, AutoComplete } from 'primevue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { Api } from 'easytier-frontend-lib';
+
+defineProps<{
+    isRegistering: boolean;
+}>();
+
+const api = computed<Api.ApiClient>(() => new Api.ApiClient(apiHost.value));
+const router = useRouter();
+const toast = useToast();
+
+const username = ref('');
+const password = ref('');
+const registerUsername = ref('');
+const registerPassword = ref('');
+const captcha = ref('');
+const captchaSrc = computed(() => api.value.captcha_url());
+
+const onSubmit = async () => {
+    // Add your login logic here
+    const credential: Api.Credential = { username: username.value, password: password.value, };
+    let ret = await api.value?.login(credential);
+    if (ret.success) {
+        localStorage.setItem('apiHost', btoa(apiHost.value));
+        router.push({
+            name: 'dashboard',
+            params: { apiHost: btoa(apiHost.value) },
+        });
+    } else {
+        toast.add({ severity: 'error', summary: 'Login Failed', detail: ret.message, life: 2000 });
+    }
+};
+
+const onRegister = async () => {
+    const credential: Api.Credential = { username: registerUsername.value, password: registerPassword.value };
+    const registerReq: Api.RegisterData = { credentials: credential, captcha: captcha.value };
+    let ret = await api.value?.register(registerReq);
+    if (ret.success) {
+        toast.add({ severity: 'success', summary: 'Register Success', detail: ret.message, life: 2000 });
+        router.push({ name: 'login' });
+    } else {
+        toast.add({ severity: 'error', summary: 'Register Failed', detail: ret.message, life: 2000 });
+    }
+};
+
+const defaultApiHost = 'http://10.147.223.128:11211'
+const apiHost = ref<string>(defaultApiHost)
+const apiHostSuggestions = ref<Array<string>>([])
+const apiHostSearch = async (event: { query: string }) => {
+    apiHostSuggestions.value = [];
+    if (event.query) {
+        apiHostSuggestions.value.push(event.query);
+    }
+    apiHostSuggestions.value.push(defaultApiHost);
+}
+
+</script>
+
 <template>
    <div class="flex items-center justify-center min-h-screen">
        <Card class="w-full max-w-md p-6">
@ -6,6 +68,11 @@
                </h2>
            </template>
            <template #content>
+                <div class="p-field mb-4">
+                    <label for="api-host" class="block text-sm font-medium">Api Host</label>
+                    <AutoComplete id="api-host" v-model="apiHost" dropdown :suggestions="apiHostSuggestions"
+                        @complete="apiHostSearch" class="w-full" />
+                </div>
                <form v-if="!isRegistering" @submit.prevent="onSubmit" class="space-y-4">
                    <div class="p-field">
                        <label for="username" class="block text-sm font-medium">Username</label>
@ -13,14 +80,14 @@
                    </div>
                    <div class="p-field">
                        <label for="password" class="block text-sm font-medium">Password</label>
-                        <Password id="password" v-model="password" required toggleMask />
+                        <Password id="password" v-model="password" required toggleMask :feedback="false" />
                    </div>
                    <div class="flex items-center justify-between">
                        <Button label="Login" type="submit" class="w-full" />
                    </div>
                    <div class="flex items-center justify-between">
-                        <Button label="Register" type="button" class="w-full" @click="isRegistering = true"
-                            severity="secondary" />
+                        <Button label="Register" type="button" class="w-full"
+                            @click="$router.replace({ name: 'register' })" severity="secondary" />
                    </div>
                </form>

@ -32,7 +99,7 @@
                    <div class="p-field">
                        <label for="register-password" class="block text-sm font-medium">Password</label>
                        <Password id="register-password" v-model="registerPassword" required toggleMask
-                            class="w-full" />
+                            :feedback="false" class="w-full" />
                    </div>
                    <div class="p-field">
                        <label for="captcha" class="block text-sm font-medium">Captcha</label>
@ -43,8 +110,8 @@
                        <Button label="Register" type="submit" class="w-full" />
                    </div>
                    <div class="flex items-center justify-between">
-                        <Button label="Back to Login" type="button" class="w-full" @click="isRegistering = false"
-                            severity="secondary" />
+                        <Button label="Back to Login" type="button" class="w-full"
+                            @click="$router.replace({ name: 'login' })" severity="secondary" />
                    </div>
                </form>
            </template>
@ -52,42 +119,4 @@
    </div>
 </template>

-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Card, InputText, Password, Button } from 'primevue';
-import ApiClient from '../modules/api';
-import { Credential } from '../modules/api';
-
-const props = defineProps({
-    api: ApiClient,
-});
-
-const api = props.api;
-
-const username = ref('');
-const password = ref('');
-const registerUsername = ref('');
-const registerPassword = ref('');
-const captcha = ref('');
-const captchaSrc = computed(() => api?.captcha_url());
-const isRegistering = ref(false);
-
-
-const onSubmit = async () => {
-    console.log('Username:', username.value);
-    console.log('Password:', password.value);
-    // Add your login logic here
-    const credential: Credential = { username: username.value, password: password.value, };
-    const ret = await api?.login(credential);
-    alert(ret?.message);
-};
-
-const onRegister = () => {
-    console.log('Register Username:', registerUsername.value);
-    console.log('Register Password:', registerPassword.value);
-    console.log('Captcha:', captcha.value);
-    // Add your register logic here
-};
-</script>
-
-<style scoped></style>
+<style scoped></style>
--- a/easytier-web/frontend/src/components/MainPage.vue
+++ b/easytier-web/frontend/src/components/MainPage.vue
@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { Api, I18nUtils } from 'easytier-frontend-lib'
+import { computed, onMounted, ref } from 'vue';
+import { Button, TieredMenu } from 'primevue';
+import { useRoute, useRouter } from 'vue-router';
+import { useDialog } from 'primevue/usedialog';
+import ChangePassword from './ChangePassword.vue';
+import Icon from '../assets/easytier.png'
+
+const route = useRoute();
+const router = useRouter();
+const api = computed<Api.ApiClient | undefined>(() => {
+    try {
+        return new Api.ApiClient(atob(route.params.apiHost as string), () => {
+            router.push({ name: 'login' });
+        })
+    } catch (e) {
+        router.push({ name: 'login' });
+    }
+});
+
+const dialog = useDialog();
+
+onMounted(async () => {
+    await I18nUtils.loadLanguageAsync('cn')
+});
+
+const userMenu = ref();
+const userMenuItems = ref([
+    {
+        label: 'Change Password',
+        icon: 'pi pi-key',
+        command: () => {
+            console.log('File');
+            let ret = dialog.open(ChangePassword, {
+                props: {
+                    modal: true,
+                },
+                data: {
+                    api: api.value,
+                }
+            });
+
+            console.log("return", ret)
+        },
+    },
+    {
+        label: 'Logout',
+        icon: 'pi pi-sign-out',
+        command: async () => {
+            try {
+                await api.value?.logout();
+            } catch (e) {
+                console.error("logout failed", e);
+            }
+            router.push({ name: 'login' });
+        },
+    },
+])
+
+const forceShowSideBar = ref(false)
+
+</script>
+
+<!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->
+<template>
+    <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+        <div class="px-3 py-3 lg:px-5 lg:pl-3">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center justify-start rtl:justify-end">
+                    <div class="sm:hidden">
+                        <Button type="button" aria-haspopup="true" icon="pi pi-list" variant="text" size="large"
+                            severity="contrast" @click="forceShowSideBar = !forceShowSideBar" />
+                    </div>
+                    <a href="https://easytier.top" class="flex ms-2 md:me-24">
+                        <img :src="Icon" class="h-9 me-3" alt="FlowBite Logo" />
+                        <span
+                            class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">EasyTier</span>
+                    </a>
+                </div>
+                <div class="flex items-center">
+                    <div class="flex items-center ms-3">
+                        <div>
+                            <Button type="button" @click="userMenu.toggle($event)" aria-haspopup="true"
+                                aria-controls="user-menu" icon="pi pi-user" raised rounded />
+                            <TieredMenu ref="userMenu" id="user-menu" :model="userMenuItems" popup />
+                        </div>
+                        <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
+                            id="dropdown-user">
+                            <div class="px-4 py-3" role="none">
+                                <p class="text-sm text-gray-900 dark:text-white" role="none">
+                                    Neil Sims
+                                </p>
+                                <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
+                                    neil.sims@flowbite.com
+                                </p>
+                            </div>
+                            <ul class="py-1" role="none">
+                                <li>
+                                    <a href="#"
+                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                                        role="menuitem">Dashboard</a>
+                                </li>
+                                <li>
+                                    <a href="#"
+                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                                        role="menuitem">Settings</a>
+                                </li>
+                                <li>
+                                    <a href="#"
+                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                                        role="menuitem">Earnings</a>
+                                </li>
+                                <li>
+                                    <a href="#"
+                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+                                        role="menuitem">Sign out</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <aside id="logo-sidebar"
+        class="fixed top-1 left-0 z-40 w-64 h-screen pt-20 transition-transform bg-white border-r border-gray-201 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+        :class="{ '-translate-x-full': !forceShowSideBar }" aria-label="Sidebar">
+        <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+            <ul class="space-y-2 font-medium">
+                <li>
+                    <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5 sidebar-button"
+                        severity="contrast" @click="router.push({ name: 'dashboard' })">
+                        <i class="pi pi-chart-pie text-xl"></i>
+                        <span class="mb-0.5">DashBoard</span>
+                    </Button>
+                </li>
+                <li>
+                    <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5 sidebar-button"
+                        severity="contrast" @click="router.push({ name: 'deviceList' })">
+                        <i class="pi pi-server text-xl"></i>
+                        <span class="mb-0.5">Devices</span>
+                    </Button>
+                </li>
+                <li>
+                    <Button variant="text" class="w-full justify-start gap-x-3 pl-1.5 sidebar-button"
+                        severity="contrast" @click="router.push({ name: 'login' })">
+                        <i class="pi pi-sign-in text-xl"></i>
+                        <span class="mb-0.5">Login Page</span>
+                    </Button>
+                </li>
+            </ul>
+        </div>
+    </aside>
+
+    <div class="p-4 sm:ml-64">
+        <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
+            <div class="grid grid-cols-1 gap-4">
+                <RouterView v-slot="{ Component }">
+                    <component :is="Component" :api="api" />
+                </RouterView>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.sidebar-button {
+    text-align: left;
+    justify-content: left;
+}
+</style>
--- a/easytier-web/frontend/src/main.ts
+++ b/easytier-web/frontend/src/main.ts
@ -7,6 +7,72 @@ import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
 import ConfirmationService from 'primevue/confirmationservice';

+import { createRouter, createWebHashHistory } from 'vue-router'
+import MainPage from './components/MainPage.vue'
+import Login from './components/Login.vue'
+import DeviceList from './components/DeviceList.vue'
+import DeviceManagement from './components/DeviceManagement.vue'
+import Dashboard from './components/Dashboard.vue'
+import DialogService from 'primevue/dialogservice';
+import ToastService from 'primevue/toastservice';
+
+const routes = [
+    {
+        path: '/auth', children: [
+            {
+                name: 'login',
+                path: '',
+                component: Login,
+                alias: 'login',
+                props: { isRegistering: false }
+            },
+            {
+                name: 'register',
+                path: 'register',
+                component: Login,
+                props: { isRegistering: true }
+            }
+        ]
+    },
+    {
+        path: '/h/:apiHost', component: MainPage, children: [
+            {
+                path: '',
+                alias: 'dashboard',
+                name: 'dashboard',
+                component: Dashboard,
+            },
+            {
+                path: 'deviceList',
+                name: 'deviceList',
+                component: DeviceList,
+                children: [
+                    {
+                        path: 'device/:deviceId/:instanceId?',
+                        name: 'deviceManagement',
+                        component: DeviceManagement,
+                    }
+                ]
+            },
+        ]
+    },
+    {
+        path: '/:pathMatch(.*)*', name: 'notFound', redirect: () => {
+            let apiHost = localStorage.getItem('apiHost');
+            if (apiHost) {
+                return { name: 'dashboard', params: { apiHost: apiHost } }
+            } else {
+                return { name: 'login' }
+            }
+        }
+    },
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+})
+
 createApp(App).use(PrimeVue,
    {
        theme: {
@ -21,4 +87,4 @@ createApp(App).use(PrimeVue,
            }
        }
    }
-).use(ConfirmationService as any).use(EasytierFrontendLib).mount('#app')
+).use(ToastService as any).use(DialogService as any).use(router).use(ConfirmationService as any).use(EasytierFrontendLib).mount('#app')
--- a/easytier-web/frontend/tsconfig.app.json
+++ b/easytier-web/frontend/tsconfig.app.json
@ -22,5 +22,5 @@
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../frontend-lib/src/modules/api.ts"]
 }
--- a/easytier-web/src/client_manager/session.rs
+++ b/easytier-web/src/client_manager/session.rs
@ -6,8 +6,9 @@ use easytier::{
        rpc_impl::bidirect::BidirectRpcManager,
        rpc_types::{self, controller::BaseController},
        web::{
-            HeartbeatRequest, HeartbeatResponse, RunNetworkInstanceRequest, WebClientService,
-            WebClientServiceClientFactory, WebServerService, WebServerServiceServer,
+            HeartbeatRequest, HeartbeatResponse, NetworkConfig, RunNetworkInstanceRequest,
+            WebClientService, WebClientServiceClientFactory, WebServerService,
+            WebServerServiceServer,
        },
    },
    tunnel::Tunnel,
@ -160,7 +161,13 @@ impl Session {
                );
                return;
            }
+
            let req = req.unwrap();
+            if req.machine_id.is_none() {
+                tracing::warn!(?req, "Machine id is not set, ignore");
+                continue;
+            }
+
            let running_inst_ids = req
                .running_network_instances
                .iter()
@ -187,7 +194,11 @@ impl Session {
                }
            };

-            let local_configs = match storage.db.list_network_configs(user_id, true).await {
+            let local_configs = match storage
+                .db
+                .list_network_configs(user_id, Some(req.machine_id.unwrap().into()), true)
+                .await
+            {
                Ok(configs) => configs,
                Err(e) => {
                    tracing::error!("Failed to list network configs, error: {:?}", e);
@ -206,7 +217,9 @@ impl Session {
                        BaseController::default(),
                        RunNetworkInstanceRequest {
                            inst_id: Some(c.network_instance_id.clone().into()),
-                            config: c.network_config,
+                            config: Some(
+                                serde_json::from_str::<NetworkConfig>(&c.network_config).unwrap(),
+                            ),
                        },
                    )
                    .await;
--- a/easytier-web/src/client_manager/storage.rs
+++ b/easytier-web/src/client_manager/storage.rs
@ -16,7 +16,7 @@ pub struct StorageToken {
 pub struct StorageInner {
    // some map for indexing
    pub token_clients_map: DashMap<String, DashSet<url::Url>>,
-    pub machine_client_url_map: DashMap<uuid::Uuid, url::Url>,
+    pub machine_client_url_map: DashMap<uuid::Uuid, DashSet<url::Url>>,
    pub db: Db,
 }

@ -51,7 +51,9 @@ impl Storage {

        self.0
            .machine_client_url_map
-            .insert(stoken.machine_id, stoken.client_url.clone());
+            .entry(stoken.machine_id)
+            .or_insert_with(DashSet::new)
+            .insert(stoken.client_url.clone());
    }

    pub fn remove_client(&self, stoken: &StorageToken) {
@ -60,7 +62,12 @@ impl Storage {
            set.is_empty()
        });

-        self.0.machine_client_url_map.remove(&stoken.machine_id);
+        self.0
+            .machine_client_url_map
+            .remove_if(&stoken.machine_id, |_, set| {
+                set.remove(&stoken.client_url);
+                set.is_empty()
+            });
    }

    pub fn weak_ref(&self) -> WeakRefStorage {
@ -71,7 +78,8 @@ impl Storage {
        self.0
            .machine_client_url_map
            .get(&machine_id)
-            .map(|url| url.clone())
+            .map(|url| url.iter().next().map(|url| url.clone()))
+            .flatten()
    }

    pub fn list_token_clients(&self, token: &str) -> Vec<url::Url> {
--- a/easytier-web/src/db/entity/user_running_network_configs.rs
+++ b/easytier-web/src/db/entity/user_running_network_configs.rs
@ -9,6 +9,8 @@ pub struct Model {
    #[sea_orm(primary_key)]
    pub id: i32,
    pub user_id: i32,
+    #[sea_orm(column_type = "Text")]
+    pub device_id: String,
    #[sea_orm(column_type = "Text", unique)]
    pub network_instance_id: String,
    #[sea_orm(column_type = "Text")]
--- a/easytier-web/src/db/mod.rs
+++ b/easytier-web/src/db/mod.rs
@ -65,6 +65,7 @@ impl Db {
    pub async fn insert_or_update_user_network_config<T: ToString>(
        &self,
        user_id: UserIdInDb,
+        device_id: uuid::Uuid,
        network_inst_id: uuid::Uuid,
        network_config: T,
    ) -> Result<(), DbErr> {
@ -81,6 +82,7 @@ impl Db {
            .to_owned();
        let insert_m = urnc::ActiveModel {
            user_id: sea_orm::Set(user_id),
+            device_id: sea_orm::Set(device_id.to_string()),
            network_instance_id: sea_orm::Set(network_inst_id.to_string()),
            network_config: sea_orm::Set(network_config.to_string()),
            disabled: sea_orm::Set(false),
@ -116,6 +118,7 @@ impl Db {
    pub async fn list_network_configs(
        &self,
        user_id: UserIdInDb,
+        device_id: Option<uuid::Uuid>,
        only_enabled: bool,
    ) -> Result<Vec<user_running_network_configs::Model>, DbErr> {
        use entity::user_running_network_configs as urnc;
@ -126,6 +129,11 @@ impl Db {
        } else {
            configs
        };
+        let configs = if let Some(device_id) = device_id {
+            configs.filter(urnc::Column::DeviceId.eq(device_id.to_string()))
+        } else {
+            configs
+        };

        let configs = configs.all(self.orm_db()).await?;

@ -167,8 +175,9 @@ mod tests {
        let user_id = 1;
        let network_config = "test_config";
        let inst_id = uuid::Uuid::new_v4();
+        let device_id = uuid::Uuid::new_v4();

-        db.insert_or_update_user_network_config(user_id, inst_id, network_config)
+        db.insert_or_update_user_network_config(user_id, device_id, inst_id, network_config)
            .await
            .unwrap();

@ -183,7 +192,7 @@ mod tests {

        // overwrite the config
        let network_config = "test_config2";
-        db.insert_or_update_user_network_config(user_id, inst_id, network_config)
+        db.insert_or_update_user_network_config(user_id, device_id, inst_id, network_config)
            .await
            .unwrap();

@ -193,14 +202,17 @@ mod tests {
            .await
            .unwrap()
            .unwrap();
-        println!("{:?}", result2);
+        println!("device: {}, {:?}", device_id, result2);
        assert_eq!(result2.network_config, network_config);

        assert_eq!(result.create_time, result2.create_time);
        assert_ne!(result.update_time, result2.update_time);

        assert_eq!(
-            db.list_network_configs(user_id, true).await.unwrap().len(),
+            db.list_network_configs(user_id, Some(device_id), true)
+                .await
+                .unwrap()
+                .len(),
            1
        );

--- a/easytier-web/src/migrator/m20241029_000001_init.rs
+++ b/easytier-web/src/migrator/m20241029_000001_init.rs
@ -4,94 +4,6 @@ use sea_orm_migration::{prelude::*, schema::*};

 pub struct Migration;

-/*
-- # Entity schema.
-
-- Create `users` table.
-create table if not exists users (
-    id integer primary key autoincrement,
-    username text not null unique,
-    password text not null
-);
-
-- Create `groups` table.
-create table if not exists groups (
-    id integer primary key autoincrement,
-    name text not null unique
-);
-
-- Create `permissions` table.
-create table if not exists permissions (
-    id integer primary key autoincrement,
-    name text not null unique
-);
-
-
-- # Join tables.
-
-- Create `users_groups` table for many-to-many relationships between users and groups.
-create table if not exists users_groups (
-    user_id integer references users(id),
-    group_id integer references groups(id),
-    primary key (user_id, group_id)
-);
-
-- Create `groups_permissions` table for many-to-many relationships between groups and permissions.
-create table if not exists groups_permissions (
-    group_id integer references groups(id),
-    permission_id integer references permissions(id),
-    primary key (group_id, permission_id)
-);
-
-
-- # Fixture hydration.
-
-- Insert "user" user. password: "user"
-insert into users (username, password)
-values (
-    'user',
-    '$argon2i$v=19$m=16,t=2,p=1$dHJ5dXZkYmZkYXM$UkrNqWz0BbSVBq4ykLSuJw'
-);
-
-- Insert "admin" user. password: "admin"
-insert into users (username, password)
-values (
-    'admin',
-    '$argon2i$v=19$m=16,t=2,p=1$Ymd1Y2FlcnQ$x0q4oZinW9S1ZB9BcaHEpQ'
-);
-
-- Insert "users" and "superusers" groups.
-insert into groups (name) values ('users');
-insert into groups (name) values ('superusers');
-
-- Insert individual permissions.
-insert into permissions (name) values ('sessions');
-insert into permissions (name) values ('devices');
-
-- Insert group permissions.
-insert into groups_permissions (group_id, permission_id)
-values (
-    (select id from groups where name = 'users'),
-    (select id from permissions where name = 'devices')
-), (
-    (select id from groups where name = 'superusers'),
-    (select id from permissions where name = 'sessions')
-);
-
-- Insert users into groups.
-insert into users_groups (user_id, group_id)
-values (
-    (select id from users where username = 'user'),
-    (select id from groups where name = 'users')
-), (
-    (select id from users where username = 'admin'),
-    (select id from groups where name = 'users')
-), (
-    (select id from users where username = 'admin'),
-    (select id from groups where name = 'superusers')
-);
- */
-
 impl MigrationName for Migration {
    fn name(&self) -> &str {
        "m20241029_000001_init"
@ -141,6 +53,7 @@ enum UserRunningNetworkConfigs {
    Table,
    Id,
    UserId,
+    DeviceId,
    NetworkInstanceId,
    NetworkConfig,
    Disabled,
@ -273,6 +186,7 @@ impl MigrationTrait for Migration {
                    .table(UserRunningNetworkConfigs::Table)
                    .col(pk_auto(UserRunningNetworkConfigs::Id).not_null())
                    .col(integer(UserRunningNetworkConfigs::UserId).not_null())
+                    .col(text(UserRunningNetworkConfigs::DeviceId).not_null())
                    .col(
                        text(UserRunningNetworkConfigs::NetworkInstanceId)
                            .unique_key()
--- a/easytier-web/src/restful/auth.rs
+++ b/easytier-web/src/restful/auth.rs
@ -22,6 +22,10 @@ pub struct LoginResult {
 pub fn router() -> Router<AppStateInner> {
    let r = Router::new()
        .route("/api/v1/auth/password", put(self::put::change_password))
+        .route(
+            "/api/v1/auth/check_login_status",
+            get(self::get::check_login_status),
+        )
        .route_layer(login_required!(Backend));
    Router::new()
        .merge(r)
@ -168,4 +172,17 @@ mod get {
            )),
        }
    }
+
+    pub async fn check_login_status(
+        auth_session: AuthSession,
+    ) -> Result<Json<Void>, HttpHandleError> {
+        if auth_session.user.is_some() {
+            Ok(Json(Void::default()))
+        } else {
+            Err((
+                StatusCode::UNAUTHORIZED,
+                Json::from(other_error("Not logged in")),
+            ))
+        }
+    }
 }
--- a/easytier-web/src/restful/mod.rs
+++ b/easytier-web/src/restful/mod.rs
@ -11,7 +11,7 @@ use axum_login::tower_sessions::{ExpiredDeletion, SessionManagerLayer};
 use axum_login::{login_required, AuthManagerLayerBuilder, AuthzBackend};
 use axum_messages::MessagesManagerLayer;
 use easytier::common::scoped_task::ScopedTask;
-use easytier::proto::{rpc_types};
+use easytier::proto::rpc_types;
 use network::NetworkApi;
 use sea_orm::DbErr;
 use tokio::net::TcpListener;
@ -43,6 +43,11 @@ type AppState = State<AppStateInner>;
 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 struct ListSessionJsonResp(Vec<StorageToken>);

+#[derive(Debug, serde::Deserialize, serde::Serialize)]
+struct GetSummaryJsonResp {
+    device_count: u32,
+}
+
 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 pub struct Error {
    message: String,
@ -98,16 +103,32 @@ impl RestfulServer {
        auth_session: AuthSession,
        State(client_mgr): AppState,
    ) -> Result<Json<ListSessionJsonResp>, HttpHandleError> {
-        let pers = auth_session
+        let perms = auth_session
            .backend
            .get_group_permissions(auth_session.user.as_ref().unwrap())
            .await
            .unwrap();
-        println!("{:?}", pers);
+        println!("{:?}", perms);
        let ret = client_mgr.list_sessions().await;
        Ok(ListSessionJsonResp(ret).into())
    }

+    async fn handle_get_summary(
+        auth_session: AuthSession,
+        State(client_mgr): AppState,
+    ) -> Result<Json<GetSummaryJsonResp>, HttpHandleError> {
+        let Some(user) = auth_session.user else {
+            return Err((StatusCode::UNAUTHORIZED, other_error("No such user").into()));
+        };
+
+        let machines = client_mgr.list_machine_by_token(user.tokens[0].clone());
+
+        Ok(GetSummaryJsonResp {
+            device_count: machines.len() as u32,
+        }
+        .into())
+    }
+
    pub async fn start(&mut self) -> Result<(), anyhow::Error> {
        let listener = TcpListener::bind(self.bind_addr).await?;

@ -143,6 +164,7 @@ impl RestfulServer {
        let auth_layer = AuthManagerLayerBuilder::new(backend, session_layer).build();

        let app = Router::new()
+            .route("/api/v1/summary", get(Self::handle_get_summary))
            .route("/api/v1/sessions", get(Self::handle_list_all_sessions))
            .merge(self.network_api.build_route())
            .route_layer(login_required!(Backend))
--- a/easytier-web/src/restful/network.rs
+++ b/easytier-web/src/restful/network.rs
@ -9,7 +9,7 @@ use dashmap::DashSet;
 use easytier::launcher::NetworkConfig;
 use easytier::proto::common::Void;
 use easytier::proto::rpc_types::controller::BaseController;
-use easytier::proto::{web::*};
+use easytier::proto::web::*;

 use crate::client_manager::session::Session;
 use crate::client_manager::ClientManager;
@ -38,7 +38,7 @@ struct ValidateConfigJsonReq {

 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 struct RunNetworkJsonReq {
-    config: String,
+    config: NetworkConfig,
 }

 #[derive(Debug, serde::Deserialize, serde::Serialize)]
@ -145,7 +145,7 @@ impl NetworkApi {
                BaseController::default(),
                RunNetworkInstanceRequest {
                    inst_id: None,
-                    config: config.clone(),
+                    config: Some(config.clone()),
                },
            )
            .await
@ -155,8 +155,9 @@ impl NetworkApi {
            .db()
            .insert_or_update_user_network_config(
                auth_session.user.as_ref().unwrap().id(),
+                machine_id,
                resp.inst_id.clone().unwrap_or_default().into(),
-                config,
+                serde_json::to_string(&config).unwrap(),
            )
            .await
            .map_err(convert_db_error)?;
@ -288,6 +289,36 @@ impl NetworkApi {
        Ok(Json(ListMachineJsonResp { machines }))
    }

+    async fn handle_get_network_config(
+        auth_session: AuthSession,
+        State(client_mgr): AppState,
+        Path((machine_id, inst_id)): Path<(uuid::Uuid, uuid::Uuid)>,
+    ) -> Result<Json<NetworkConfig>, HttpHandleError> {
+        let inst_id = inst_id.to_string();
+
+        let db_row = client_mgr
+            .db()
+            .list_network_configs(auth_session.user.unwrap().id(), Some(machine_id), false)
+            .await
+            .map_err(convert_db_error)?
+            .iter()
+            .find(|x| x.network_instance_id == inst_id)
+            .map(|x| x.network_config.clone())
+            .ok_or((
+                StatusCode::NOT_FOUND,
+                other_error(format!("No such network instance: {}", inst_id)).into(),
+            ))?;
+
+        Ok(serde_json::from_str::<NetworkConfig>(&db_row)
+            .map_err(|e| {
+                (
+                    StatusCode::INTERNAL_SERVER_ERROR,
+                    other_error(format!("Failed to parse network config: {:?}", e)).into(),
+                )
+            })?
+            .into())
+    }
+
    pub fn build_route(&mut self) -> Router<AppStateInner> {
        Router::new()
            .route("/api/v1/machines", get(Self::handle_list_machines))
@ -311,5 +342,9 @@ impl NetworkApi {
                "/api/v1/machines/:machine-id/networks/info/:inst-id",
                get(Self::handle_collect_one_network_info),
            )
+            .route(
+                "/api/v1/machines/:machine-id/networks/config/:inst-id",
+                get(Self::handle_get_network_config),
+            )
    }
 }
--- a/easytier/src/launcher.rs
+++ b/easytier/src/launcher.rs
@ -23,8 +23,14 @@ use tokio::{sync::broadcast, task::JoinSet};

 pub type MyNodeInfo = crate::proto::web::MyNodeInfo;

+#[derive(serde::Serialize, Clone)]
+pub struct Event {
+    time: DateTime<Local>,
+    event: GlobalCtxEvent,
+}
+
 struct EasyTierData {
-    events: RwLock<VecDeque<(DateTime<Local>, GlobalCtxEvent)>>,
+    events: RwLock<VecDeque<Event>>,
    node_info: RwLock<MyNodeInfo>,
    routes: RwLock<Vec<Route>>,
    peers: RwLock<Vec<PeerInfo>>,
@ -79,9 +85,12 @@ impl EasyTierLauncher {
    async fn handle_easytier_event(event: GlobalCtxEvent, data: &EasyTierData) {
        let mut events = data.events.write().unwrap();
        let _ = data.event_subscriber.read().unwrap().send(event.clone());
-        events.push_back((chrono::Local::now(), event));
-        if events.len() > 100 {
-            events.pop_front();
+        events.push_front(Event {
+            time: chrono::Local::now(),
+            event: event,
+        });
+        if events.len() > 20 {
+            events.pop_back();
        }
    }

@ -267,7 +276,7 @@ impl EasyTierLauncher {
        self.data.tun_dev_name.read().unwrap().clone()
    }

-    pub fn get_events(&self) -> Vec<(DateTime<Local>, GlobalCtxEvent)> {
+    pub fn get_events(&self) -> Vec<Event> {
        let events = self.data.events.read().unwrap();
        events.iter().cloned().collect()
    }
@ -341,7 +350,7 @@ impl NetworkInstance {
            events: launcher
                .get_events()
                .iter()
-                .map(|(t, e)| (t.to_string(), format!("{:?}", e)))
+                .map(|e| serde_json::to_string(e).unwrap())
                .collect(),
            node_info: Some(launcher.get_node_info()),
            routes,
--- a/easytier/src/proto/web.proto
+++ b/easytier/src/proto/web.proto
@ -55,7 +55,7 @@ message MyNodeInfo {
 message NetworkInstanceRunningInfo {
  string dev_name = 1;
  MyNodeInfo my_node_info = 2;
-  map<string, string> events = 3;
+  repeated string events = 3;
  MyNodeInfo node_info = 4;
  repeated cli.Route routes = 5;
  repeated cli.PeerInfo peers = 6;
@ -97,7 +97,7 @@ message ValidateConfigResponse {

 message RunNetworkInstanceRequest {
  common.UUID inst_id = 1;
-  string config = 2;
+  NetworkConfig config = 2;
 }

 message RunNetworkInstanceResponse {
--- a/easytier/src/web_client/controller.rs
+++ b/easytier/src/web_client/controller.rs
@ -100,7 +100,10 @@ impl WebClientService for Controller {
        _: BaseController,
        req: RunNetworkInstanceRequest,
    ) -> Result<RunNetworkInstanceResponse, rpc_types::error::Error> {
-        let cfg = TomlConfigLoader::new_from_str(&req.config)?;
+        if req.config.is_none() {
+            return Err(anyhow::anyhow!("config is required").into());
+        }
+        let cfg = req.config.unwrap().gen_config()?;
        let id = cfg.get_id();
        if let Some(inst_id) = req.inst_id {
            cfg.set_id(inst_id.into());
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -162,6 +162,9 @@ importers:
      vue:
        specifier: ^3.5.12
        version: 3.5.12(typescript@5.6.3)
+      vue-router:
+        specifier: '4'
+        version: 4.4.5(vue@3.5.12(typescript@5.6.3))
    devDependencies:
      '@types/node':
        specifier: ^22.8.6
@ -202,6 +205,9 @@ importers:
      aura:
        specifier: link:@primevue\themes\aura
        version: link:@primevue/themes/aura
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
      ip-num:
        specifier: 1.5.1
        version: 1.5.1
@ -8091,6 +8097,11 @@ snapshots:
      '@vue/devtools-api': 6.6.4
      vue: 3.4.38(typescript@5.6.3)

+  vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.6.3)
+
  vue-tsc@2.1.10(typescript@5.6.3):
    dependencies:
      '@volar/typescript': 2.4.8
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`