Buriburizaemon/admin-frontend-domain
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/admin-frontend-domain.git synced 2026-02-04 04:30:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix validation & implement profile page (#5)

Browse Source 
* fix validation

* implement profile page

* catch error
This commit is contained in:
UUBulb
2024-11-26 21:20:56 +08:00
committed by GitHub
parent b0476bc3a3
commit 7325939198
13 changed files with 258 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/user.ts
View File

@@ -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> => {
return fetcher<any>(FetcherMethod.POST, '/api/v1/login', { username, password });
export const login = async (username: string, password: string): Promise<void> => {
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);
}

12
src/components/alert-rule.tsx
View File

@@ -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 => {
return v.filter(Boolean).map(Number);
})),
recover_trigger_tasks: z.array(z.string()).transform((v => {
return v.filter(Boolean).map(Number);
})),
fail_trigger_tasks: z.array(z.number()),
recover_trigger_tasks: z.array(z.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);
}}
/>

9
src/components/cron.tsx
View File

@@ -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 => {
return v.filter(Boolean).map(Number);
})),
servers: z.array(z.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>

20
src/components/header.tsx
View File

@@ -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>

9
src/components/notification-group.tsx
View File

@@ -37,9 +37,7 @@ interface NotificationGroupCardProps {
const notificationGroupFormSchema = z.object({
name: z.string().min(1),
notifications: z.array(z.string()).transform((v => {
return v.filter(Boolean).map(Number);
})),
notifications: z.array(z.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 />

127
src/components/profile.tsx Normal file
View File

@@ -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>
)
}

9
src/components/server-group.tsx
View File

@@ -37,9 +37,7 @@ interface ServerGroupCardProps {
const serverGroupFormSchema = z.object({
name: z.string().min(1),
servers: z.array(z.string()).transform((v => {
return v.filter(Boolean).map(Number);
})),
servers: z.array(z.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>

11
src/components/server.tsx
View File

@@ -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 => {
return v.filter(Boolean).map(Number);
})),
ddns_profiles: asOptionalField(z.array(z.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);
}}
/>

14
src/components/service.tsx
View File

@@ -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 => {
return v.filter(Boolean).map(Number);
})),
fail_trigger_tasks: z.array(z.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 => {
return v.filter(Boolean).map(Number);
})),
recover_trigger_tasks: z.array(z.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);
}}
/>

2
src/lib/utils.ts
View File

@@ -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[] = [];

5
src/main.tsx
View File

@@ -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 />,

65
src/routes/profile.tsx Normal file
View File

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

8
src/types/api.ts
View File

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