implement setting page (#12)

src/api/settings.ts

@@ -0,0 +1,10 @@
+import { ModelSettingForm, ModelConfig } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const updateSettings = async (data: ModelSettingForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/setting`, data);
+}
+
+export const getSettings = async (): Promise<ModelConfig> => {
+    return fetcher<ModelConfig>(FetcherMethod.GET, '/api/v1/setting', null);
+}

src/api/user.ts

@@ -1,10 +1,18 @@
-import { ModelUser } from "@/types"
+import { ModelProfile, ModelUserForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
-export const getProfile = async (): Promise<ModelUser> => {
-    return fetcher<ModelUser>(FetcherMethod.GET, '/api/v1/profile', null);
+export const getProfile = async (): Promise<ModelProfile> => {
+    return fetcher<ModelProfile>(FetcherMethod.GET, '/api/v1/profile', null);
 }
 
 export const login = async (username: string, password: string): Promise<any> => {
     return fetcher<any>(FetcherMethod.POST, '/api/v1/login', { username, password });
 }
+
+export const createUser = async (data: ModelUserForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/user', data);
+}
+
+export const deleteUser = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/user', id);
+}

src/api/waf.ts

@@ -0,0 +1,10 @@
+import { ModelWAF } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const deleteWAF = async (ip: string[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/waf', ip);
+}
+
+export const getWAFList = async (): Promise<ModelWAF[]> => {
+    return fetcher<ModelWAF[]>(FetcherMethod.GET, '/api/v1/waf', null);
+}

src/components/action-button-group.tsx

@@ -13,13 +13,13 @@ import {
 import { KeyedMutator } from "swr";
 import { buttonVariants } from "@/components/ui/button"
 
-interface ButtonGroupProps<T> {
+interface ButtonGroupProps<E, U> {
     className?: string;
     children: React.ReactNode;
-    delete: { fn: (id: number[]) => Promise<void>, id: number, mutate: KeyedMutator<T> };
+    delete: { fn: (id: E[]) => Promise<void>, id: E, mutate: KeyedMutator<U> };
 }
 
-export function ActionButtonGroup<T>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<T>) {
+export function ActionButtonGroup<E, U>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<E, U>) {
     const handleDelete = async () => {
         await fn([id]);
         await mutate();

src/components/header-button-group.tsx

@@ -14,13 +14,13 @@ import {
 import { KeyedMutator } from "swr";
 import { toast } from "sonner"
 
-interface ButtonGroupProps<T> {
+interface ButtonGroupProps<E, U> {
     className?: string;
     children?: React.ReactNode;
-    delete: { fn: (id: number[]) => Promise<void>, id: number[], mutate: KeyedMutator<T> };
+    delete: { fn: (id: E[]) => Promise<void>, id: E[], mutate: KeyedMutator<U> };
 }
 
-export function HeaderButtonGroup<T>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<T>) {
+export function HeaderButtonGroup<E, U>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<E, U>) {
     const handleDelete = async () => {
         await fn(id);
         await mutate();

src/components/header.tsx

@@ -10,8 +10,8 @@ import { Card } from "./ui/card";
 import { useMainStore } from "@/hooks/useMainStore";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { NzNavigationMenuLink } from "./xui/navigation-menu";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./ui/dropdown-menu";
-import { User, LogOut } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import { LogOut, Settings } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { Link, useLocation } from "react-router-dom";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
@@ -47,6 +47,7 @@ export default function Header() {
     const isDesktop = useMediaQuery("(min-width: 890px)")
 
     const [open, setOpen] = useState(false)
+    const [dropdownOpen, setDropdownOpen] = useState(false);
 
     return (
         isDesktop ? (
@@ -105,7 +106,7 @@ export default function Header() {
                         <ModeToggle />
                         {
                             profile && <>
-                                <DropdownMenu>
+                                <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                                     <DropdownMenuTrigger asChild>
                                         <Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
                                             <AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
@@ -116,14 +117,16 @@ export default function Header() {
                                         <DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
                                         <DropdownMenuSeparator />
                                         <DropdownMenuGroup>
-                                            <DropdownMenuItem>
-                                                <User />
-                                                <span>Profile</span>
-                                                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                            <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
+                                                <Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
+                                                    <Settings />
+                                                    Settings
+                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                </Link>
                                             </DropdownMenuItem>
                                         </DropdownMenuGroup>
                                         <DropdownMenuSeparator />
-                                        <DropdownMenuItem onClick={logout}>
+                                        <DropdownMenuItem onClick={logout} className="cursor-pointer">
                                             <LogOut />
                                             <span>Log out</span>
                                             <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
@@ -171,13 +174,13 @@ export default function Header() {
                         }
                     </div>
                     <Card className="mx-2 my-2 flex justify-center items-center hover:bg-accent transition duration-200">
-                        <Link className="inline-flex w-full items-center px-4 py-2" to="/dashboard"><img className="h-7 mr-1" src='/dashboard/logo.svg' /> NEZHA</Link>
+                        <Link className="inline-flex w-full items-center px-4 py-2" to={profile ? "/dashboard" : '#'}><img className="h-7 mr-1" src='/dashboard/logo.svg' /> NEZHA</Link>
                     </Card>
                     <div className="ml-auto flex items-center gap-1">
                         <ModeToggle />
                         {
                             profile && <>
-                                <DropdownMenu>
+                                <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                                     <DropdownMenuTrigger asChild>
                                         <Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
                                             <AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
@@ -188,14 +191,16 @@ export default function Header() {
                                         <DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
                                         <DropdownMenuSeparator />
                                         <DropdownMenuGroup>
-                                            <DropdownMenuItem>
-                                                <User />
-                                                <span>Profile</span>
-                                                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                            <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
+                                                <Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
+                                                    <Settings />
+                                                    Settings
+                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                </Link>
                                             </DropdownMenuItem>
                                         </DropdownMenuGroup>
                                         <DropdownMenuSeparator />
-                                        <DropdownMenuItem onClick={logout}>
+                                        <DropdownMenuItem onClick={logout} className="cursor-pointer">
                                             <LogOut />
                                             <span>Log out</span>
                                             <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>

src/components/service.tsx

@@ -77,7 +77,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
         resolver: zodResolver(serviceFormSchema),
         defaultValues: data ? {
             ...data,
-            skip_servers_raw: conv.recordToStrArr(data.skip_servers),
+            skip_servers_raw: conv.recordToStrArr(data.skip_servers ? data.skip_servers : {}),
         } : {
             type: 1,
             cover: 0,

src/components/settings-tab.tsx

@@ -0,0 +1,26 @@
+import {
+    Tabs,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { Link, useLocation } from "react-router-dom"
+
+export const SettingsTab = ({ className }: { className?: string }) => {
+    const location = useLocation();
+
+    return (
+        <Tabs defaultValue={location.pathname} className={className}>
+            <TabsList className="grid w-full grid-cols-3">
+                <TabsTrigger value="/dashboard/settings" asChild>
+                    <Link to="/dashboard/settings">Config</Link>
+                </TabsTrigger>
+                <TabsTrigger value="/dashboard/settings/user" asChild>
+                    <Link to="/dashboard/settings/user">User</Link>
+                </TabsTrigger>
+                <TabsTrigger value="/dashboard/settings/waf" asChild>
+                    <Link to="/dashboard/settings/waf">WAF</Link>
+                </TabsTrigger>
+            </TabsList>
+        </Tabs>
+    )
+}

src/components/user.tsx

@@ -0,0 +1,120 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelUser } from "@/types"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { IconButton } from "@/components/xui/icon-button"
+import { createUser } from "@/api/user"
+
+interface UserCardProps {
+    mutate: KeyedMutator<ModelUser[]>;
+}
+
+const userFormSchema = z.object({
+    username: z.string().min(1),
+    password: z.string().min(8).max(72),
+});
+
+export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
+    const form = useForm<z.infer<typeof userFormSchema>>({
+        resolver: zodResolver(userFormSchema),
+        defaultValues: {
+            username: "",
+            password: "",
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof userFormSchema>) => {
+        await createUser(values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <IconButton icon="plus" />
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>New User</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="username"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Username</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="password"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Password</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <DialogFooter className="justify-end">
+                                    <DialogClose asChild>
+                                        <Button type="button" className="my-2" variant="secondary">
+                                            Close
+                                        </Button>
+                                    </DialogClose>
+                                    <Button type="submit" className="my-2">Submit</Button>
+                                </DialogFooter>
+                            </form>
+                        </Form>
+                    </div>
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}

src/hooks/useNotfication.tsx

@@ -3,6 +3,7 @@ import { useNotificationStore } from "./useNotificationStore"
 import { getNotificationGroups } from "@/api/notification-group"
 import { getNotification } from "@/api/notification"
 import { NotificationContextProps } from "@/types"
+import { useLocation } from "react-router-dom"
 
 const NotificationContext = createContext<NotificationContextProps>({});
 
@@ -19,6 +20,8 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     const notifiers = useNotificationStore(store => store.notifiers);
     const setNotifier = useNotificationStore(store => store.setNotifier);
 
+    const location = useLocation();
+
     useEffect(() => {
         if (withNotifierGroup)
             (async () => {
@@ -39,7 +42,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
                     setNotifier(undefined);
                 }
             })();
-    }, [])
+    }, [location.pathname])
 
     const value: NotificationContextProps = useMemo(() => ({
         notifiers: notifiers,

src/hooks/useServer.tsx

@@ -3,6 +3,7 @@ import { useServerStore } from "./useServerStore"
 import { getServerGroups } from "@/api/server-group"
 import { getServers } from "@/api/server"
 import { ServerContextProps } from "@/types"
+import { useLocation } from "react-router-dom"
 
 const ServerContext = createContext<ServerContextProps>({});
 
@@ -19,6 +20,8 @@ export const ServerProvider: React.FC<ServerProviderProps> = ({ children, withSe
     const server = useServerStore(store => store.server);
     const setServer = useServerStore(store => store.setServer);
 
+    const location = useLocation();
+
     useEffect(() => {
         if (withServerGroup)
             (async () => {
@@ -39,7 +42,7 @@ export const ServerProvider: React.FC<ServerProviderProps> = ({ children, withSe
                     setServer(undefined);
                 }
             })();
-    }, [])
+    }, [location.pathname])
 
     const value: ServerContextProps = useMemo(() => ({
         servers: server,

src/lib/utils.ts

@@ -139,3 +139,29 @@ export function joinIP(p?: ModelIP) {
   }
   return '';
 }
+
+export function ip16Str(p: number[]) {
+  const buf = new Uint8Array(p);
+  const ip4 = buf.slice(-6);
+  if (ip4[0] === 255 && ip4[1] === 255) {
+    return ip4.slice(2).join('.');
+  }
+  return ipv6BinaryToString(buf);
+}
+
+function ipv6BinaryToString(binary: Uint8Array) {
+  let parts: string[] = [];
+  for (let i = 0; i < binary.length; i += 2) {
+    let hex = (binary[i] << 8 | binary[i + 1]).toString(16);
+    parts.push(hex);
+  }
+
+  let ipv6 = parts.join(':');
+
+  ipv6 = ipv6.replace(/(:0)+$/, '');
+  if (ipv6.indexOf('::') === -1 && parts.filter(p => p === '0').length > 1) {
+    ipv6 = ipv6.replace(/(:0)+/, '::');
+  }
+
+  return ipv6;
+}

src/main.tsx

@@ -24,6 +24,9 @@ import { NotificationProvider } from './hooks/useNotfication';
 import CronPage from './routes/cron';
 import NotificationPage from './routes/notification';
 import AlertRulePage from './routes/alert-rule';
+import SettingsPage from './routes/settings';
+import UserPage from './routes/user';
+import WAFPage from './routes/waf';
 
 const router = createBrowserRouter([
   {
@@ -87,6 +90,18 @@ const router = createBrowserRouter([
         path: "/dashboard/terminal/:id",
         element: <TerminalPage />,
       },
+      {
+        path: "/dashboard/settings",
+        element: <SettingsPage />,
+      },
+      {
+        path: "/dashboard/settings/user",
+        element: <UserPage />,
+      },
+      {
+        path: "/dashboard/settings/waf",
+        element: <WAFPage />,
+      },
     ]
   },
 ]);

src/routes/settings.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { ModelConfig, settingCoverageTypes, nezhaLang } from "@/types"
+import { SettingsTab } from "@/components/settings-tab"
+import { z } from "zod"
+import { asOptionalField } from "@/lib/utils"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { getSettings, updateSettings } from "@/api/settings"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import {
+    Card,
+    CardContent,
+} from "@/components/ui/card"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+
+const settingFormSchema = z.object({
+    custom_nameservers: asOptionalField(z.string()),
+    ignored_ip_notification: asOptionalField(z.string()),
+    ip_change_notification_group_id: z.coerce.number().int().min(0),
+    cover: z.coerce.number().int().min(1),
+    site_name: z.string().min(1),
+    language: z.string().min(2),
+    install_host: asOptionalField(z.string()),
+    custom_code: asOptionalField(z.string()),
+    custom_code_dashboard: asOptionalField(z.string()),
+    real_ip_header: asOptionalField(z.string()),
+
+    enable_ip_change_notification: asOptionalField(z.boolean()),
+    enable_plain_ip_in_notification: asOptionalField(z.boolean()),
+});
+
+export default function SettingsPage() {
+    const [config, setConfig] = useState<ModelConfig>();
+    const [error, setError] = useState<Error>();
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const c = await getSettings();
+                setConfig(c);
+            } catch (e) {
+                if (e instanceof Error) setError(e);
+            }
+        })()
+    }, [])
+
+    const form = useForm<z.infer<typeof settingFormSchema>>({
+        resolver: zodResolver(settingFormSchema),
+        defaultValues: config ? config : {
+            ip_change_notification_group_id: 0,
+            cover: 1,
+            site_name: "",
+            language: "",
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    useEffect(() => {
+        if (config) {
+            form.reset(config);
+        }
+    }, [config, form]);
+
+    const onSubmit = async (values: z.infer<typeof settingFormSchema>) => {
+        try {
+            await updateSettings(values);
+            const newConfig = await getSettings();
+            setConfig(newConfig);
+            form.reset();
+        } catch (e) {
+            if (e instanceof Error) setError(e);
+            return;
+        } finally {
+            toast("Success", {
+                description: "Config updated successfully.",
+            })
+        }
+    }
+
+    return (
+        <div className="px-8">
+            <SettingsTab className="mt-6 mb-4 w-full" />
+            <div>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                        <FormField
+                            control={form.control}
+                            name="site_name"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Site Name</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="language"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Language</FormLabel>
+                                    <FormControl>
+                                        <Select onValueChange={field.onChange} value={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger>
+                                                    <SelectValue />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                {Object.entries(nezhaLang).map(([k, v]) => (
+                                                    <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="custom_code"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Custom Codes (Style and Script)</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            className="resize-y min-h-48"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="custom_code_dashboard"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Custom Codes for Dashboard</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            className="resize-y min-h-48"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="install_host"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Dashboard Server Domain/IP without CDN</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="custom_nameservers"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Custom Public DNS Nameservers for DDNS (separate with comma)</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="real_ip_header"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Real IP Header</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="NZ::Use-Peer-IP"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormItem>
+                            <FormLabel>IP Change Notification</FormLabel>
+                            <Card className="w-full">
+                                <CardContent>
+                                    <div className="flex flex-col space-y-4 mt-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="cover"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Coverage</FormLabel>
+                                                    <Select onValueChange={field.onChange} value={`${field.value}`}>
+                                                        <FormControl>
+                                                            <SelectTrigger>
+                                                                <SelectValue />
+                                                            </SelectTrigger>
+                                                        </FormControl>
+                                                        <SelectContent>
+                                                            {Object.entries(settingCoverageTypes).map(([k, v]) => (
+                                                                <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                            ))}
+                                                        </SelectContent>
+                                                    </Select>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="ignored_ip_notification"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>Specific Servers (separate with comma)</FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            placeholder="1,2,3"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="enable_ip_change_notification"
+                                            render={({ field }) => (
+                                                <FormItem className="flex items-center space-x-2">
+                                                    <FormControl>
+                                                        <div className="flex items-center gap-2">
+                                                            <Checkbox
+                                                                checked={field.value}
+                                                                onCheckedChange={field.onChange}
+                                                            />
+                                                            <Label className="text-sm">Enable</Label>
+                                                        </div>
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </FormItem>
+                        <FormField
+                            control={form.control}
+                            name="enable_plain_ip_in_notification"
+                            render={({ field }) => (
+                                <FormItem className="flex items-center space-x-2">
+                                    <FormControl>
+                                        <div className="flex items-center gap-2">
+                                            <Checkbox
+                                                checked={field.value}
+                                                onCheckedChange={field.onChange}
+                                            />
+                                            <Label className="text-sm">Show Full IP Address in Notification Messages</Label>
+                                        </div>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button type="submit">Save</Button>
+                    </form>
+                </Form>
+            </div>
+        </div>
+    )
+}

src/routes/user.tsx

@@ -0,0 +1,149 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { ModelUser } from "@/types"
+import { deleteUser } from "@/api/user"
+import { SettingsTab } from "@/components/settings-tab"
+import { UserCard } from "@/components/user"
+
+export default function UserPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelUser[]>("/api/v1/user", swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelUser>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "ID",
+            accessorKey: "id",
+            accessorFn: row => row.id,
+        },
+        {
+            header: "Username",
+            accessorKey: "username",
+            accessorFn: row => row.username,
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{
+                        fn: deleteUser,
+                        id: s.id,
+                        mutate: mutate,
+                    }}>
+                        <></>
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <SettingsTab className="mt-6 w-full" />
+            <div className="flex mt-4 mb-4">
+                <HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
+                    fn: deleteUser,
+                    id: selectedRows.map(r => r.original.id),
+                    mutate: mutate,
+                }}>
+                    <UserCard mutate={mutate} />
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div>
+    )
+}

src/routes/waf.tsx

@@ -0,0 +1,167 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { ModelWAF, wafBlockReasons } from "@/types"
+import { deleteWAF } from "@/api/waf"
+import { ip16Str } from "@/lib/utils"
+import { SettingsTab } from "@/components/settings-tab"
+
+export default function WAFPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelWAF[]>("/api/v1/waf", swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelWAF>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "IP",
+            accessorKey: "ip",
+            accessorFn: row => ip16Str(row.ip ?? []),
+        },
+        {
+            header: "Count",
+            accessorKey: "count",
+            accessorFn: row => row.count,
+        },
+        {
+            header: "Last Block Reason",
+            accessorKey: "lastBlockReason",
+            accessorFn: row => row.last_block_reason,
+            cell: ({ row }) => (
+                <span>{wafBlockReasons[row.original.last_block_reason] || ''}</span>
+            )
+        },
+        {
+            header: "Last Block Time",
+            accessorKey: "lastBlockTime",
+            accessorFn: row => row.last_block_timestamp,
+            cell: ({ row }) => {
+                const s = row.original;
+                const date = new Date(s.last_block_timestamp || 0);
+                return <span>{date.toISOString()}</span>
+            }
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{
+                        fn: deleteWAF,
+                        id: ip16Str(s.ip ?? []),
+                        mutate: mutate,
+                    }}>
+                        <></>
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <SettingsTab className="mt-6 w-full" />
+            <div className="flex mt-4 mb-4">
+                <HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
+                    fn: deleteWAF,
+                    id: selectedRows.map(r => ip16Str(r.original.ip ?? [])),
+                    mutate: mutate,
+                }}>
+                    <></>
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div>
+    )
+}

src/types/api.ts

@@ -75,6 +75,12 @@ export interface GithubComNaibaNezhaModelCommonResponseArrayModelUser {
   success: boolean;
 }
 
+export interface GithubComNaibaNezhaModelCommonResponseArrayModelWAF {
+  data: ModelWAF[];
+  error: string;
+  success: boolean;
+}
+
 export interface GithubComNaibaNezhaModelCommonResponseArrayString {
   data: string[];
   error: string;
@@ -105,14 +111,14 @@ export interface GithubComNaibaNezhaModelCommonResponseModelLoginResponse {
   success: boolean;
 }
 
-export interface GithubComNaibaNezhaModelCommonResponseModelServiceResponse {
-  data: ModelServiceResponse;
+export interface GithubComNaibaNezhaModelCommonResponseModelProfile {
+  data: ModelProfile;
   error: string;
   success: boolean;
 }
 
-export interface GithubComNaibaNezhaModelCommonResponseModelUser {
-  data: ModelUser;
+export interface GithubComNaibaNezhaModelCommonResponseModelServiceResponse {
+  data: ModelServiceResponse;
   error: string;
   success: boolean;
 }
@@ -408,6 +414,15 @@ export interface ModelNotificationGroupResponseItem {
   notifications: number[];
 }
 
+export interface ModelProfile {
+  created_at: string;
+  id: number;
+  login_ip: string;
+  password: string;
+  updated_at: string;
+  username: string;
+}
+
 export interface ModelRule {
   /** 覆盖范围 RuleCoverAll/IgnoreAll */
   cover: number;
@@ -583,7 +598,11 @@ export interface ModelSettingForm {
   install_host?: string;
   /** IP变更提醒的通知组 */
   ip_change_notification_group_id: number;
+  /** @minLength 2 */
   language: string;
+  /** 真实IP */
+  real_ip_header?: string;
+  /** @minLength 1 */
   site_name: string;
 }
 
@@ -621,3 +640,10 @@ export interface ModelUserForm {
   password: string;
   username: string;
 }
+
+export interface ModelWAF {
+  count: number;
+  ip: number[];
+  last_block_reason: number;
+  last_block_timestamp: number;
+}

src/types/authContext.ts

@@ -1,7 +1,7 @@
-import { ModelUser } from "@/types";
+import { ModelProfile } from "@/types";
 
 export interface AuthContextProps {
-    profile: ModelUser | undefined;
+    profile: ModelProfile | undefined;
     login: (username: string, password: string) => void;
     logout: () => void;
 }

src/types/index.ts

@@ -11,3 +11,4 @@ export * from './alert-rule';
 export * from './notificationStore';
 export * from './notificationContext';
 export * from './fm';
+export * from './settings';

src/types/mainStore.ts

@@ -1,6 +1,6 @@
-import { ModelUser } from "@/types";
+import { ModelProfile } from "@/types";
 
 export interface MainStore {
-    profile: ModelUser | undefined;
-    setProfile: (profile: ModelUser | undefined) => void;
+    profile: ModelProfile | undefined;
+    setProfile: (profile: ModelProfile | undefined) => void;
 }

src/types/settings.ts

@@ -0,0 +1,16 @@
+export const settingCoverageTypes: Record<number, string> = {
+    1: "All excludes specific servers",
+    2: "Only specific servers",
+}
+
+export const nezhaLang: Record<string, string> = {
+    "zh_CN": "简体中文（中国大陆）",
+    "zh_TW": "正體中文（台灣）",
+    "en_US": "English",
+}
+
+export const wafBlockReasons: Record<number, string> = {
+    1: "Login failed",
+    2: "Brute-force attacking token",
+    3: "Brute-force attacking Agent secret",
+}