make all frontend functions works (#466)

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",

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>

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>

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 };

easytier-web/frontend-lib/src/modules/api.ts

@@ -0,0 +1,178 @@
+import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export interface ValidateConfigResponse {
+    toml_config: string;
+}
+
+// 定义接口返回的数据结构
+export interface LoginResponse {
+    success: boolean;
+    message: string;
+}
+
+export interface RegisterResponse {
+    success: boolean;
+    message: string;
+}
+
+// 定义请求体数据结构
+export interface Credential {
+    username: string;
+    password: string;
+}
+
+export interface RegisterData {
+    credentials: Credential;
+    captcha: string;
+}
+
+export interface Summary {
+    device_count: number;
+}
+
+export class ApiClient {
+    private client: AxiosInstance;
+    private authFailedCb: Function | undefined;
+
+    constructor(baseUrl: string, authFailedCb: Function | undefined = undefined) {
+        this.client = axios.create({
+            baseURL: baseUrl + '/api/v1',
+            withCredentials: true, // 如果需要支持跨域携带cookie
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        this.authFailedCb = authFailedCb;
+
+        // 添加请求拦截器
+        this.client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+            return config;
+        }, (error: any) => {
+            return Promise.reject(error);
+        });
+
+        // 添加响应拦截器
+        this.client.interceptors.response.use((response: AxiosResponse) => {
+            console.debug('Axios Response:', response);
+            return response.data; // 假设服务器返回的数据都在data属性中
+        }, (error: any) => {
+            if (error.response) {
+                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);
+            } else {
+                // 发生了一些问题导致请求未发出
+                console.error('Error:', error.message);
+            }
+            return Promise.reject(error);
+        });
+    }
+
+    // 注册
+    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 {
+            const response = await this.client.post<any>('/auth/login', data);
+            console.log("login response:", response);
+            return { success: true, message: 'Login success', };
+        } catch (error) {
+            if (error instanceof AxiosError) {
+                if (error.response?.status === 401) {
+                    return { success: false, message: 'Invalid username or password', };
+                } else {
+                    return { success: false, message: 'Unknown error, status code: ' + error.response?.status, };
+                }
+            }
+            return { success: false, message: 'Unknown error, error: ' + error, };
+        }
+    }
+
+    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() {
+        const response = await this.client.get('/sessions');
+        return response;
+    }
+
+    public async list_machines(): Promise<Array<any>> {
+        const response = await this.client.get<any, Record<string, Array<any>>>('/machines');
+        return response.machines;
+    }
+
+    public async get_network_info(machine_id: string, inst_id: string): Promise<any> {
+        const response = await this.client.get<any, Record<string, any>>('/machines/' + machine_id + '/networks/info/' + inst_id);
+        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,
+        });
+        return response;
+    }
+
+    public async run_network(machine_id: string, config: any): Promise<undefined> {
+        await this.client.post<string>(`/machines/${machine_id}/networks`, {
+            config: config,
+        });
+    }
+
+    public async delete_network(machine_id: string, inst_id: string): Promise<undefined> {
+        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';
+    }
+}
+
+export default ApiClient;

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);
+    }
+}

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
 }