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

implement nat & ddns page (#5)

Browse Source
This commit is contained in:
UUBulb
2024-11-19 14:55:21 +08:00
committed by GitHub
parent fc923f3ab1
commit 37a121559f
12 changed files with 974 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/nat.tsx Normal file
View File

@@ -0,0 +1,165 @@
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 { ModelNAT } from "@/types"
import { useState } from "react"
import { KeyedMutator } from "swr"
import { IconButton } from "@/components/xui/icon-button"
import { createNAT, updateNAT } from "@/api/nat"
interface NATCardProps {
data?: ModelNAT;
mutate: KeyedMutator<ModelNAT[]>;
}
const natFormSchema = z.object({
name: z.string().min(1),
server_id: z.coerce.number().int(),
host: z.string(),
domain: z.string(),
});
export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
const form = useForm<z.infer<typeof natFormSchema>>({
resolver: zodResolver(natFormSchema),
defaultValues: data ? data : {
name: "",
server_id: 0,
host: "",
domain: "",
},
resetOptions: {
keepDefaultValues: false,
}
})
const [open, setOpen] = useState(false);
const onSubmit = async (values: z.infer<typeof natFormSchema>) => {
data?.id ? await updateNAT(data.id, values) : await createNAT(values);
setOpen(false);
await mutate();
form.reset();
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
{data
?
<IconButton variant="outline" icon="edit" />
:
<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 NAT Profile</DialogTitle>
<DialogDescription />
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
placeholder="My NAT Profile"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="server_id"
render={({ field }) => (
<FormItem>
<FormLabel>Server ID</FormLabel>
<FormControl>
<Input
type="number"
placeholder="1"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="host"
render={({ field }) => (
<FormItem>
<FormLabel>Local Service</FormLabel>
<FormControl>
<Input
placeholder="192.168.1.1:80 (with port)"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="domain"
render={({ field }) => (
<FormItem>
<FormLabel>Bind hostname</FormLabel>
<FormControl>
<Input
placeholder="router.app.yourdomain.com"
{...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>
)
}