fetch network settings

web/api/network.ts

@@ -0,0 +1,55 @@
+import { get_api_server } from "./env";
+
+export interface WebHook {
+	enabled: boolean;
+	url: string;
+	request_body: string;
+}
+
+export interface NetworkSettings {
+	ip_mode: string;
+	ip_urls: string[];
+	ipv6_urls: string[];
+	use_proxy: boolean;
+	skip_ssl_verify: boolean;
+	socks5_proxy: string;
+	webhook: WebHook;
+	resolver: string;
+	ip_interface: string;
+}
+
+export async function get_network_settings(credentials: string): Promise<NetworkSettings> {
+	if (credentials) {
+		const resp = await fetch(get_api_server() + '/api/v1/network', {
+			method: 'GET',
+			headers: {
+				'Authorization': `Basic ${credentials}`
+			}
+		})
+
+		if (resp.status === 200) {
+			return resp.json();
+		}
+	}
+
+	return {} as NetworkSettings;
+}
+
+export async function update_network_settings(credentials: string, settings: NetworkSettings): Promise<boolean> {
+	if (credentials) {
+		const resp = await fetch(get_api_server() + '/api/v1/network', {
+			method: 'PUT',
+			headers: {
+				'Authorization': `Basic ${credentials}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(settings)
+		})
+
+		if (resp.status === 200) {
+			return true;
+		}
+	}
+
+	return false;
+}

web/app/domains/page.tsx

@@ -30,9 +30,6 @@ export default function Domains() {
 		<main className="flex min-h-screen flex-col items-center justify-start pt-10 max-w-screen-xl">
 			<ToastContainer />
 			<div className="flex flex-col items-center w-full bg-base-100 p-10">
-				{/* <div className="flex flex-row items-start w-full"> */}
-				{/* <span className="text-2xl font-semibold text-neutral-500 ml-1 mb-1">Provider</span> */}
-				{/* </div> */}
 				<ProviderControl />
 				<div className="divider"></div>
 				<DomainControl />

web/app/network/page.tsx

@@ -1,15 +1,44 @@
+'use client';
+
 import { IpMode } from "@/components/ip-mode";
 import { Proxy } from "@/components/proxy";
 import { WebHook } from "@/components/webhook";
 import { Resolver } from "@/components/resolver";
 import { IPInterface } from "@/components/ip-interface";
+import { useRouter } from "next/navigation";
+import { CommonContext } from "@/components/user";
+import { useEffect, useState, useContext } from "react";
+import { get_network_settings, NetworkSettings, WebHook as WebHookSetting, update_network_settings } from "@/api/network";
+import { get_info } from "@/api/info";
 
 export default function Network() {
+	const router = useRouter();
+	const userStore = useContext(CommonContext);
+	const { credentials, setCurrentPage, saveVersion } = userStore;
+	const [settings, setSettings] = useState<NetworkSettings>({} as NetworkSettings);
+
+	useEffect(() => {
+		if (!credentials) {
+			router.push('/login');
+			return;
+		}
+		setCurrentPage('Network');
+		get_info(credentials).then((info) => {
+			saveVersion(info.version);
+		});
+
+		get_network_settings(credentials).then((settings) => {
+			console.log('settings', settings);
+			setSettings(settings);
+		});
+	}, [credentials, router, setCurrentPage, saveVersion]);
+
+
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-between pt-10 max-w-screen-xl">
 			<div className="p-5">
 				<div className="flex flex-col max-w-screen-lg gap-5">
-					<IpMode />
+					<IpMode IPMode={settings.ip_mode} IPUrls={settings.ip_urls} IPV6Urls={settings.ipv6_urls} />
 					<Proxy />
 					<WebHook />
 					<Resolver />

web/components/ip-mode.tsx

@@ -1,25 +1,38 @@
 import { SettingsIcon } from "@/components/icons";
+import { useState } from "react";
+
+interface IpModeProps {
+	IPMode: string;
+	IPUrls?: string[];
+	IPV6Urls?: string[];
+}
+
+export const IpMode = (props: IpModeProps) => {
+	const [isIPV6, setIsIPV6] = useState(props.IPMode === 'IPV6' ? true : false);
 
-export const IpMode = () => {
 	return (
 		<div className="stats shadow bg-primary-content stats-vertical lg:stats-horizontal">
 			<div className="stat">
 				<div className="stat-figure text-secondary">
 					<SettingsIcon />
 				</div>
 				<div className="stat-title">IP Mode</div>
-				<div className="stat-value text-primary">IPV4</div>
+				<div className="stat-value text-primary">{props.IPMode}</div>
 				<div className="stat-desc">The current IP mode</div>
 				<div className="flex flex-row items-center gap-2 stat-actions">
 					<span className="label-text text-slate-500 ">Enable IPv6</span>
-					<input type="checkbox" className="toggle toggle-primary" checked={false} />
+					<input type="checkbox" className="toggle toggle-primary" checked={isIPV6} />
 				</div>
 			</div>
 
 			<div className="stat gap-2">
 				<div className="stat-title">URLs</div>
 				<div className="flex flex-col gap-2">
-					<textarea className="textarea textarea-primary w-96 h-28 " placeholder="Input urls for fetching the online IP"></textarea>
+					<textarea
+						className="textarea textarea-primary w-96 h-28 "
+						placeholder="Input urls for fetching the online IP"
+						value={isIPV6 ? props.IPV6Urls?.join('\n') : props.IPUrls?.join('\n')}
+					/>
 				</div>
 			</div>
 		</div>