fix validation & implement profile page (#5)

* fix validation

* implement profile page

* catch error

src/api/user.ts

@@ -1,12 +1,12 @@
-import { ModelProfile, ModelUserForm } from "@/types"
+import { ModelProfile, ModelUserForm, ModelProfileForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 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> => {
+export const login = async (username: string, password: string): Promise<void> => {
-    return fetcher<any>(FetcherMethod.POST, '/api/v1/login', { username, password });
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/login', { username, password });
 }
 
 export const createUser = async (data: ModelUserForm): Promise<number> => {
@@ -16,3 +16,7 @@ export const createUser = async (data: ModelUserForm): Promise<number> => {
 export const deleteUser = async (id: number[]): Promise<void> => {
     return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/user', id);
 }
+
+export const updateProfile = async (data: ModelProfileForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/profile', data);
+}

src/components/alert-rule.tsx

@@ -75,12 +75,8 @@ const alertRuleFormSchema = z.object({
         message: 'Invalid JSON string',
     }),
     rules: z.array(ruleSchema),
-    fail_trigger_tasks: z.array(z.string()).transform((v => {
+    fail_trigger_tasks: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
+    recover_trigger_tasks: z.array(z.number()),
-    })),
-    recover_trigger_tasks: z.array(z.string()).transform((v => {
-        return v.filter(Boolean).map(Number);
-    })),
     notification_group_id: z.coerce.number().int(),
     trigger_mode: z.coerce.number().int().min(0),
     enable: asOptionalField(z.boolean()),
@@ -225,7 +221,7 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                     {...field}
                                                     value={conv.arrToStr(field.value ?? [])}
                                                     onChange={e => {
-                                                        const arr = conv.strToArr(e.target.value);
+                                                        const arr = conv.strToArr(e.target.value).map(Number);
                                                         field.onChange(arr);
                                                     }}
                                                 />
@@ -246,7 +242,7 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                     {...field}
                                                     value={conv.arrToStr(field.value ?? [])}
                                                     onChange={e => {
-                                                        const arr = conv.strToArr(e.target.value);
+                                                        const arr = conv.strToArr(e.target.value).map(Number);
                                                         field.onChange(arr);
                                                     }}
                                                 />

src/components/cron.tsx

@@ -52,9 +52,7 @@ const cronFormSchema = z.object({
     name: z.string().min(1),
     scheduler: z.string(),
     command: asOptionalField(z.string()),
-    servers: z.array(z.string()).transform((v => {
+    servers: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
-    })),
     cover: z.coerce.number().int(),
     push_successful: asOptionalField(z.boolean()),
     notification_group_id: z.coerce.number().int(),
@@ -217,7 +215,10 @@ export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <MultiSelect
                                                     options={serverList}
-                                                    onValueChange={field.onChange}
+                                                    onValueChange={e => {
+                                                        const arr = e.map(Number);
+                                                        field.onChange(arr);
+                                                    }}
                                                     defaultValue={field.value?.map(String)}
                                                 />
                                             </FormControl>

src/components/header.tsx

@@ -11,7 +11,7 @@ import { useMainStore } from "@/hooks/useMainStore";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { NzNavigationMenuLink } from "./xui/navigation-menu";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "./ui/dropdown-menu";
-import { LogOut, Settings } from "lucide-react";
+import { LogOut, Settings, User2 } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { Link, useLocation } from "react-router-dom";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
@@ -117,11 +117,18 @@ export default function Header() {
                                         <DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
                                         <DropdownMenuSeparator />
                                         <DropdownMenuGroup>
+                                            <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
+                                                <Link to="/dashboard/profile" className="flex items-center gap-2 w-full">
+                                                    <User2 />
+                                                    Profile
+                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                </Link>
+                                            </DropdownMenuItem>
                                             <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
                                                 <Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
                                                     <Settings />
                                                     Settings
-                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                    <DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
                                                 </Link>
                                             </DropdownMenuItem>
                                         </DropdownMenuGroup>
@@ -191,11 +198,18 @@ export default function Header() {
                                         <DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
                                         <DropdownMenuSeparator />
                                         <DropdownMenuGroup>
+                                            <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
+                                                <Link to="/dashboard/profile" className="flex items-center gap-2 w-full">
+                                                    <User2 />
+                                                    Profile
+                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                </Link>
+                                            </DropdownMenuItem>
                                             <DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
                                                 <Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
                                                     <Settings />
                                                     Settings
-                                                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                                                    <DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
                                                 </Link>
                                             </DropdownMenuItem>
                                         </DropdownMenuGroup>

src/components/notification-group.tsx

@@ -37,9 +37,7 @@ interface NotificationGroupCardProps {
 
 const notificationGroupFormSchema = z.object({
     name: z.string().min(1),
-    notifications: z.array(z.string()).transform((v => {
+    notifications: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
-    })),
 });
 
 export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ data, mutate }) => {
@@ -115,7 +113,10 @@ export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ da
                                             <FormLabel>Notifiers</FormLabel>
                                             <MultiSelect
                                                 options={notifierList}
-                                                onValueChange={field.onChange}
+                                                onValueChange={e => {
+                                                    const arr = e.map(Number);
+                                                    field.onChange(arr);
+                                                }}
                                                 defaultValue={field.value?.map(String)}
                                             />
                                             <FormMessage />

src/components/profile.tsx

@@ -0,0 +1,127 @@
+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 { getProfile, updateProfile } from "@/api/user"
+import { useState } from "react"
+import { useMainStore } from "@/hooks/useMainStore"
+import { toast } from "sonner"
+
+const profileFormSchema = z.object({
+    original_password: z.string().min(5).max(72),
+    new_password: z.string().min(8).max(72),
+});
+
+export const ProfileCard = ({ className }: { className: string }) => {
+    const form = useForm<z.infer<typeof profileFormSchema>>({
+        resolver: zodResolver(profileFormSchema),
+        defaultValues: {
+            original_password: '',
+            new_password: '',
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const { setProfile } = useMainStore();
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof profileFormSchema>) => {
+        try {
+            await updateProfile(values);
+        } catch (e) {
+            toast("Update failed", {
+                description: `${e}`,
+            })
+            return;
+        }
+        const profile = await getProfile();
+        setProfile(profile);
+        setOpen(false);
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline" className={className}>
+                    Update Password
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>Update Server</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="original_password"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Original Password</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="new_password"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>New 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/components/server-group.tsx

@@ -37,9 +37,7 @@ interface ServerGroupCardProps {
 
 const serverGroupFormSchema = z.object({
     name: z.string().min(1),
-    servers: z.array(z.string()).transform((v => {
+    servers: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
-    })),
 });
 
 export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }) => {
@@ -116,7 +114,10 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
                                             <FormControl>
                                                 <MultiSelect
                                                     options={serverList}
-                                                    onValueChange={field.onChange}
+                                                    onValueChange={e => {
+                                                        const arr = e.map(Number);
+                                                        field.onChange(arr);
+                                                    }}
                                                     defaultValue={field.value?.map(String)}
                                                 />
                                             </FormControl>

src/components/server.tsx

@@ -45,9 +45,7 @@ const serverFormSchema = z.object({
     display_index: z.number().int(),
     hide_for_guest: asOptionalField(z.boolean()),
     enable_ddns: asOptionalField(z.boolean()),
-    ddns_profiles: z.array(z.string()).transform((v => {
+    ddns_profiles: asOptionalField(z.array(z.number())),
-        return v.filter(Boolean).map(Number);
-    })),
 });
 
 export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
@@ -77,7 +75,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                 <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
                     <div className="items-center mx-1">
                         <DialogHeader>
-                            <DialogTitle>New Service</DialogTitle>
+                            <DialogTitle>Update Server</DialogTitle>
                             <DialogDescription />
                         </DialogHeader>
                         <Form {...form}>
@@ -125,9 +123,10 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                 <Input
                                                     placeholder="1,2,3"
                                                     {...field}
-                                                    value={conv.arrToStr(field.value ?? [])}
+                                                    value={conv.arrToStr(field.value || [])}
                                                     onChange={e => {
-                                                        const arr = conv.strToArr(e.target.value);
+                                                        console.log(field.value)
+                                                        const arr = conv.strToArr(e.target.value).map(Number);
                                                         field.onChange(arr);
                                                     }}
                                                 />

src/components/service.tsx

@@ -54,21 +54,17 @@ const serviceFormSchema = z.object({
     duration: z.coerce.number().int().min(30),
     enable_show_in_service: asOptionalField(z.boolean()),
     enable_trigger_task: asOptionalField(z.boolean()),
-    fail_trigger_tasks: z.array(z.string()).transform((v => {
+    fail_trigger_tasks: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
-    })),
     latency_notify: asOptionalField(z.boolean()),
     max_latency: z.coerce.number().int().min(0),
     min_latency: z.coerce.number().int().min(0),
     name: z.string().min(1),
     notification_group_id: z.coerce.number().int(),
     notify: asOptionalField(z.boolean()),
-    recover_trigger_tasks: z.array(z.string()).transform((v => {
+    recover_trigger_tasks: z.array(z.number()),
-        return v.filter(Boolean).map(Number);
-    })),
     skip_servers: z.record(z.boolean()),
     skip_servers_raw: z.array(z.string()),
-    target: z.string().url(),
+    target: z.string(),
     type: z.coerce.number().int().min(0),
 });
 
@@ -385,7 +381,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
                                                     {...field}
                                                     value={conv.arrToStr(field.value ?? [])}
                                                     onChange={e => {
-                                                        const arr = conv.strToArr(e.target.value);
+                                                        const arr = conv.strToArr(e.target.value).map(Number);
                                                         field.onChange(arr);
                                                     }}
                                                 />
@@ -406,7 +402,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
                                                     {...field}
                                                     value={conv.arrToStr(field.value ?? [])}
                                                     onChange={e => {
-                                                        const arr = conv.strToArr(e.target.value);
+                                                        const arr = conv.strToArr(e.target.value).map(Number);
                                                         field.onChange(arr);
                                                     }}
                                                 />

src/lib/utils.ts

@@ -34,7 +34,7 @@ export const conv = {
     return arr.join(',');
   },
   strToArr: (str: string) => {
-    return str.split(',');
+    return str.split(',').filter(Boolean) || [];
   },
   recordToArr: <T>(rec: Record<string, T>) => {
     const arr: T[] = [];

src/main.tsx

@@ -27,6 +27,7 @@ import AlertRulePage from './routes/alert-rule';
 import SettingsPage from './routes/settings';
 import UserPage from './routes/user';
 import WAFPage from './routes/waf';
+import ProfilePage from './routes/profile';
 
 const router = createBrowserRouter([
     {
@@ -90,6 +91,10 @@ const router = createBrowserRouter([
                 path: "/dashboard/terminal/:id",
                 element: <TerminalPage />,
             },
+            {
+                path: "/dashboard/profile",
+                element: <ServerProvider withServer withServerGroup><ProfilePage /></ServerProvider>,
+            },
             {
                 path: "/dashboard/settings",
                 element: <SettingsPage />,

src/routes/profile.tsx

@@ -0,0 +1,65 @@
+import { useMainStore } from "@/hooks/useMainStore"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { Server, Boxes } from "lucide-react";
+import { useServer } from "@/hooks/useServer";
+import { ProfileCard } from "@/components/profile";
+
+export default function ProfilePage() {
+    const { profile } = useMainStore();
+    const { servers, serverGroups } = useServer();
+    const isDesktop = useMediaQuery("(min-width: 890px)")
+
+    return (
+        profile && (
+            <div className={`flex p-8 gap-4 ${isDesktop ? 'ml-6' : 'flex-col'}`}>
+                <div className={`flex ${isDesktop ? 'flex-col mr-6' : 'gap-4 w-full items-center'}`}>
+                    <Avatar className={`${isDesktop ? 'h-[300px] w-[300px]' : 'h-[150px] w-[150px]'} border-foreground border-[1px]`}>
+                        <AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
+                        <AvatarFallback>{profile.username}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                        <p className="justify-center text-3xl font-semibold">{profile.username}</p>
+                        <p className="text-gray-400">IP: {profile.login_ip || 'Unknown'}</p>
+                    </div>
+                    {isDesktop &&
+                        <ProfileCard className="flex mt-4 justify-center items-center max-w-[300px] rounded-lg" />
+                    }
+                </div>
+                {!isDesktop &&
+                    <ProfileCard className="flex justify-center items-center max-w-full rounded-lg" />
+                }
+                <div className="w-full">
+                    <div className="flex flex-col gap-4">
+                        <Card className="w-full">
+                            <CardHeader>
+                                <CardTitle className="flex gap-2 text-xl items-center">
+                                    <Server /> Servers
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="text-lg font-semibold">
+                                {servers?.length || 0}
+                            </CardContent>
+                        </Card>
+                        <Card className="w-full">
+                            <CardHeader>
+                                <CardTitle className="flex gap-2 text-xl items-center">
+                                    <Boxes /> Server Groups
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="text-lg font-semibold">
+                                {serverGroups?.length || 0}
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+            </div>
+        )
+    );
+}

src/types/api.ts

@@ -423,6 +423,11 @@ export interface ModelProfile {
   username: string;
 }
 
+export interface ModelProfileForm {
+  new_password: string;
+  original_password: string;
+}
+
 export interface ModelRule {
   /** 覆盖范围 RuleCoverAll/IgnoreAll */
   cover: number;
@@ -482,7 +487,7 @@ export interface ModelServer {
 
 export interface ModelServerForm {
   /** DDNS配置 */
-  ddns_profiles: number[];
+  ddns_profiles?: number[];
   /**
    * 展示排序，越大越靠前
    * @default 0
@@ -607,6 +612,7 @@ export interface ModelSettingForm {
 }
 
 export interface ModelStreamServer {
+  country_code: string;
   /** 展示排序，越大越靠前 */
   display_index: number;
   host: ModelHost;