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, Trash2, Edit as EditIcon } from "lucide-react"; import { AccessEdit } from "@/components/certimate/AccessEdit"; import { accessTypeMap } from "@/domain/access"; import EmailsEdit from "@/components/certimate/EmailsEdit"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import { EmailsSetting } from "@/domain/settings"; import { useTranslation } from "react-i18next"; import StringList from "@/components/certimate/StringList"; import { Input } from "@/components/ui/input"; const Edit = () => { const { config: { accesses, emails, accessGroups }, } = useConfig(); const [domain, setDomain] = useState(); const location = useLocation(); const { t } = useTranslation(); const [tab, setTab] = useState<"apply" | "deploy">("apply"); const [targetType, setTargetType] = useState(domain ? domain.targetType : ""); 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); setTargetType(data.targetType); }; fetchData(); } }, [location.search]); const formSchema = z.object({ id: z.string().optional(), domain: z.string().min(1, { message: "domain.not.empty.verify.message", }), email: z.string().email("email.valid.message").optional(), access: z.string().regex(/^[a-zA-Z0-9]+$/, { message: "domain.management.edit.dns.access.not.empty.message", }), nameservers: z.string().optional(), timeout: z.number().optional(), }); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { id: "", domain: "", email: "", access: "", nameservers: "", timeout: 60, }, }); useEffect(() => { if (domain) { form.reset({ id: domain.id, domain: domain.domain, email: domain.applyConfig?.email, access: domain.applyConfig?.access, nameservers: domain.applyConfig?.nameservers, timeout: domain.applyConfig?.timeout, }); } }, [domain, form]); const targetAccesses = accesses.filter((item) => { if (item.usage == "apply") { return false; } if (targetType == "") { return true; } const types = targetType.split("-"); return item.configType === types[0]; }); const { toast } = useToast(); const navigate = useNavigate(); const onSubmit = async (data: z.infer) => { console.log(data); const req: Domain = { id: data.id as string, crontab: "0 0 * * *", domain: data.domain, email: data.email, access: data.access, applyConfig: { email: data.email ?? "", access: data.access, nameservers: data.nameservers, timeout: data.timeout, }, }; try { await save(req); let description = t("domain.management.edit.succeed.tips"); if (req.id == "") { description = t("domain.management.add.succeed.tips"); } toast({ title: t("succeed"), description, }); if (!domain?.id) setTab("deploy"); } 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 ? t("domain.edit") : t("domain.add")}
{ setTab("apply"); }} > {t("apply.setting")}
{ if (!domain?.id) { toast({ title: t("domain.management.edit.deploy.error"), description: t("domain.management.edit.deploy.error"), variant: "destructive", }); return; } setTab("deploy"); }} > {t("deploy.setting")}
{/* 域名 */} ( <> { form.setValue("domain", domain); }} /> )} /> {/* 邮箱 */} (
{t("email") + t("domain.management.edit.email.description")}
{t("add")}
} /> )} /> {/* 授权 */} (
{t("domain.management.edit.dns.access.label")}
{t("add")}
} op="add" /> )} /> {/* 超时时间 */} ( {t("timeout")} { form.setValue( "timeout", parseInt(e.target.value) ); }} /> )} /> {/* nameservers */} ( { form.setValue("nameservers", val); }} valueType="dns" > )} />
ALIYUN-CDN
); }; export default Edit;