import { Input } from "@/components/ui/input"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import z from "zod"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { useConfig } from "@/providers/config"; import { useEffect, useState } from "react"; import { Domain, targetTypeKeys, targetTypeMap } from "@/domain/domain"; import { save, get } from "@/repository/domains"; import { ClientResponseError } from "pocketbase"; import { PbErrorData } from "@/domain/base"; import { useToast } from "@/components/ui/use-toast"; import { Toaster } from "@/components/ui/toaster"; import { useLocation, useNavigate } from "react-router-dom"; import { Plus } from "lucide-react"; import { AccessEdit } from "@/components/certimate/AccessEdit"; import { accessTypeMap } from "@/domain/access"; const Edit = () => { const { config: { accesses }, } = useConfig(); const [domain, setDomain] = useState(); const location = useLocation(); useEffect(() => { // Parsing query parameters const queryParams = new URLSearchParams(location.search); const id = queryParams.get("id"); if (id) { const fetchData = async () => { const data = await get(id); setDomain(data); }; fetchData(); } }, [location.search]); const formSchema = z.object({ id: z.string().optional(), domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, { message: "请输入正确的域名", }), access: z.string().regex(/^[a-zA-Z0-9]+$/, { message: "请选择DNS服务商授权配置", }), targetAccess: z.string().regex(/^[a-zA-Z0-9]+$/, { message: "请选择部署服务商配置", }), targetType: z.string().regex(/^[a-zA-Z0-9-]+$/, { message: "请选择部署服务类型", }), }); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { id: "", domain: "", access: "", targetAccess: "", targetType: "", }, }); useEffect(() => { if (domain) { form.reset({ id: domain.id, domain: domain.domain, access: domain.access, targetAccess: domain.targetAccess, targetType: domain.targetType, }); } }, [domain, form]); const [targetType, setTargetType] = useState(domain ? domain.targetType : ""); const targetAccesses = accesses.filter((item) => { if (targetType == "") { return true; } const types = form.getValues().targetType.split("-"); return item.configType === types[0]; }); const { toast } = useToast(); const navigate = useNavigate(); const onSubmit = async (data: z.infer) => { const req: Domain = { id: data.id as string, crontab: "0 0 * * *", domain: data.domain, access: data.access, targetAccess: data.targetAccess, targetType: data.targetType, }; try { await save(req); let description = "域名编辑成功"; if (req.id == "") { description = "域名添加成功"; } toast({ title: "成功", description, }); navigate("/"); } catch (e) { const err = e as ClientResponseError; Object.entries(err.response.data as PbErrorData).forEach( ([key, value]) => { form.setError(key as keyof z.infer, { type: "manual", message: value.message, }); } ); return; } }; return ( <>
{domain?.id ? "编辑" : "新增"}域名
( 域名 )} /> (
DNS 服务商授权配置
新增
} op="add" /> )} /> ( 部署服务类型 )} /> (
部署服务商授权配置
新增
} op="add" /> )} />
); }; export default Edit;