Buriburizaemon/admin-frontend-domain
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/admin-frontend-domain.git synced 2026-02-04 20:50:07 +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

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