wood/certimate
1
0
Fork 0
mirror of https://github.com/woodchen-ink/certimate.git synced 2025-07-19 01:41:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): declare deploy config params

Browse Source
This commit is contained in:
Fu Diwei 2024-10-31 14:27:11 +08:00
parent f71a519674
commit 260cfb96ec
19 changed files with 598 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/components/certimate/DeployEdit.tsx
View File

@ -1,16 +1,17 @@
import { createContext, useContext } from "react"; import { createContext, useContext, type Context as ReactContext } from "react";
import { DeployConfig } from "@/domain/domain"; import { type DeployConfig } from "@/domain/domain";
type DeployEditContext = { export type DeployEditContext<T extends DeployConfig["config"] = DeployConfig["config"]> = {
deploy: DeployConfig; config: Omit<DeployConfig, "config"> & { config: T };
error: Record<string, string | undefined>; setConfig: (config: Omit<DeployConfig, "config"> & { config: T }) => void;
setDeploy: (deploy: DeployConfig) => void;
setError: (error: Record<string, string | undefined>) => void; errors: { [K in keyof T]?: string };
setErrors: (error: { [K in keyof T]?: string }) => void;
}; };
export const Context = createContext<DeployEditContext>({} as DeployEditContext); export const Context = createContext<DeployEditContext>({} as DeployEditContext);
export const useDeployEditContext = () => { export function useDeployEditContext<T extends DeployConfig["config"] = DeployConfig["config"]>() {
return useContext(Context); return useContext<DeployEditContext<T>>(Context as unknown as ReactContext<DeployEditContext<T>>);
}; }

30
ui/src/components/certimate/DeployEditDialog.tsx
View File

@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import AccessEditDialog from "./AccessEditDialog"; import AccessEditDialog from "./AccessEditDialog";
import { Context as DeployEditContext } from "./DeployEdit"; import { Context as DeployEditContext, type DeployEditContext as DeployEditContextType } from "./DeployEdit";
import DeployToAliyunOSS from "./DeployToAliyunOSS"; import DeployToAliyunOSS from "./DeployToAliyunOSS";
import DeployToAliyunCDN from "./DeployToAliyunCDN"; import DeployToAliyunCDN from "./DeployToAliyunCDN";
import DeployToAliyunCLB from "./DeployToAliyunCLB"; import DeployToAliyunCLB from "./DeployToAliyunCLB";
@ -49,7 +49,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
type: "", type: "",
}); });
const [error, setError] = useState<Record<string, string | undefined>>({}); const [errors, setErrors] = useState<Record<string, string | undefined>>({});
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -66,10 +66,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
useEffect(() => { useEffect(() => {
setDeployType(locDeployConfig.type); setDeployType(locDeployConfig.type);
setError({}); setErrors({});
}, [locDeployConfig.type]); }, [locDeployConfig.type]);
const setDeploy = useCallback( const setConfig = useCallback(
(deploy: DeployConfig) => { (deploy: DeployConfig) => {
if (deploy.type !== locDeployConfig.type) { if (deploy.type !== locDeployConfig.type) {
setLocDeployConfig({ ...deploy, access: "", config: {} }); setLocDeployConfig({ ...deploy, access: "", config: {} });
@ -94,10 +94,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
const handleSaveClick = () => { const handleSaveClick = () => {
// 验证数据 // 验证数据
const newError = { ...error }; const newError = { ...errors };
newError.type = locDeployConfig.type === "" ? t("domain.deployment.form.access.placeholder") : ""; newError.type = locDeployConfig.type === "" ? t("domain.deployment.form.access.placeholder") : "";
newError.access = locDeployConfig.access === "" ? t("domain.deployment.form.access.placeholder") : ""; newError.access = locDeployConfig.access === "" ? t("domain.deployment.form.access.placeholder") : "";
setError(newError); setErrors(newError);
if (Object.values(newError).some((e) => !!e)) return; if (Object.values(newError).some((e) => !!e)) return;
// 保存数据 // 保存数据
@ -108,7 +108,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
access: "", access: "",
type: "", type: "",
}); });
setError({}); setErrors({});
// 关闭弹框 // 关闭弹框
setOpen(false); setOpen(false);
@ -171,10 +171,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
return ( return (
<DeployEditContext.Provider <DeployEditContext.Provider
value={{ value={{
deploy: locDeployConfig, config: locDeployConfig as DeployEditContextType["config"],
error: error, setConfig: setConfig as DeployEditContextType["setConfig"],
setDeploy: setDeploy, errors: errors as DeployEditContextType["errors"],
setError: setError, setErrors: setErrors as DeployEditContextType["setErrors"],
}} }}
> >
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
@ -199,7 +199,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
<Select <Select
value={locDeployConfig.type} value={locDeployConfig.type}
onValueChange={(val: string) => { onValueChange={(val: string) => {
setDeploy({ ...locDeployConfig, type: val }); setConfig({ ...locDeployConfig, type: val });
}} }}
> >
<SelectTrigger className="mt-2"> <SelectTrigger className="mt-2">
@ -220,7 +220,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-500 text-sm mt-1">{error.type}</div> <div className="text-red-500 text-sm mt-1">{errors.type}</div>
</div> </div>
{/* 授权配置 */} {/* 授权配置 */}
@ -241,7 +241,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
<Select <Select
value={locDeployConfig.access} value={locDeployConfig.access}
onValueChange={(val: string) => { onValueChange={(val: string) => {
setDeploy({ ...locDeployConfig, access: val }); setConfig({ ...locDeployConfig, access: val });
}} }}
> >
<SelectTrigger className="mt-2"> <SelectTrigger className="mt-2">
@ -262,7 +262,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-500 text-sm mt-1">{error.access}</div> <div className="text-red-500 text-sm mt-1">{errors.access}</div>
</div> </div>
{/* 其他参数 */} {/* 其他参数 */}

64
ui/src/components/certimate/DeployToAliyunALB.tsx
View File

@ -8,27 +8,31 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToAliyunALBConfigParams = {
region?: string;
resourceType?: string;
loadbalancerId?: string;
listenerId?: string;
};
const DeployToAliyunALB = () => { const DeployToAliyunALB = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToAliyunALBConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "cn-hangzhou", region: "cn-hangzhou",
resourceType: "",
loadbalancerId: "",
listenerId: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -50,15 +54,15 @@ const DeployToAliyunALB = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message,
loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message,
listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -67,28 +71,28 @@ const DeployToAliyunALB = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_alb_region.placeholder")} placeholder={t("domain.deployment.form.aliyun_alb_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.aliyun_alb_resource_type.label")}</Label> <Label>{t("domain.deployment.form.aliyun_alb_resource_type.label")}</Label>
<Select <Select
value={data?.config?.resourceType} value={config?.config?.resourceType}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.resourceType = value?.trim(); draft.config.resourceType = value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -101,46 +105,46 @@ const DeployToAliyunALB = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div> <div className="text-red-600 text-sm mt-1">{errors?.resourceType}</div>
</div> </div>
{data?.config?.resourceType === "loadbalancer" ? ( {config?.config?.resourceType === "loadbalancer" ? (
<div> <div>
<Label>{t("domain.deployment.form.aliyun_alb_loadbalancer_id.label")}</Label> <Label>{t("domain.deployment.form.aliyun_alb_loadbalancer_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.aliyun_alb_loadbalancer_id.placeholder")} placeholder={t("domain.deployment.form.aliyun_alb_loadbalancer_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.loadbalancerId} value={config?.config?.loadbalancerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.loadbalancerId = e.target.value?.trim(); draft.config.loadbalancerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.loadbalancerId}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "listener" ? ( {config?.config?.resourceType === "listener" ? (
<div> <div>
<Label>{t("domain.deployment.form.aliyun_alb_listener_id.label")}</Label> <Label>{t("domain.deployment.form.aliyun_alb_listener_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.aliyun_alb_listener_id.placeholder")} placeholder={t("domain.deployment.form.aliyun_alb_listener_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.listenerId} value={config?.config?.listenerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.listenerId = e.target.value?.trim(); draft.config.listenerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.listenerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.listenerId}</div>
</div> </div>
) : ( ) : (
<></> <></>

34
ui/src/components/certimate/DeployToAliyunCDN.tsx
View File

@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToAliyunCDNConfigParams = {
domain?: string;
};
const DeployToAliyunCDN = () => { const DeployToAliyunCDN = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToAliyunCDNConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {},
domain: "",
},
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -34,12 +36,12 @@ const DeployToAliyunCDN = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -48,16 +50,16 @@ const DeployToAliyunCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.placeholder")} placeholder={t("domain.deployment.form.domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

63
ui/src/components/certimate/DeployToAliyunCLB.tsx
View File

@ -8,19 +8,24 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToAliyunCLBConfigParams = {
region?: string;
resourceType?: string;
loadbalancerId?: string;
listenerPort?: string;
};
const DeployToAliyunCLB = () => { const DeployToAliyunCLB = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToAliyunCLBConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "cn-hangzhou", region: "cn-hangzhou",
resourceType: "",
loadbalancerId: "",
listenerPort: "443", listenerPort: "443",
}, },
}); });
@ -28,7 +33,7 @@ const DeployToAliyunCLB = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -50,15 +55,15 @@ const DeployToAliyunCLB = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message,
loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message,
listenerPort: res.error?.errors?.find((e) => e.path[0] === "listenerPort")?.message, listenerPort: res.error?.errors?.find((e) => e.path[0] === "listenerPort")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -67,28 +72,28 @@ const DeployToAliyunCLB = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_clb_region.placeholder")} placeholder={t("domain.deployment.form.aliyun_clb_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.aliyun_clb_resource_type.label")}</Label> <Label>{t("domain.deployment.form.aliyun_clb_resource_type.label")}</Label>
<Select <Select
value={data?.config?.resourceType} value={config?.config?.resourceType}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.resourceType = value?.trim(); draft.config.resourceType = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -101,7 +106,7 @@ const DeployToAliyunCLB = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div> <div className="text-red-600 text-sm mt-1">{errors?.resourceType}</div>
</div> </div>
<div> <div>
@ -109,34 +114,34 @@ const DeployToAliyunCLB = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_clb_loadbalancer_id.placeholder")} placeholder={t("domain.deployment.form.aliyun_clb_loadbalancer_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.loadbalancerId} value={config?.config?.loadbalancerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.loadbalancerId = e.target.value?.trim(); draft.config.loadbalancerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.loadbalancerId}</div>
</div> </div>
{data?.config?.resourceType === "listener" ? ( {config?.config?.resourceType === "listener" ? (
<div> <div>
<Label>{t("domain.deployment.form.aliyun_clb_listener_port.label")}</Label> <Label>{t("domain.deployment.form.aliyun_clb_listener_port.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.aliyun_clb_listener_port.placeholder")} placeholder={t("domain.deployment.form.aliyun_clb_listener_port.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.listenerPort} value={config?.config?.listenerPort}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.listenerPort = e.target.value?.trim(); draft.config.listenerPort = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.listenerPort}</div> <div className="text-red-600 text-sm mt-1">{errors?.listenerPort}</div>
</div> </div>
) : ( ) : (
<></> <></>

66
ui/src/components/certimate/DeployToAliyunNLB.tsx
View File

@ -8,27 +8,31 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToAliyunNLBConfigParams = {
region?: string;
resourceType?: string;
loadbalancerId?: string;
listenerId?: string;
};
const DeployToAliyunNLB = () => { const DeployToAliyunNLB = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToAliyunNLBConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "cn-hangzhou", region: "cn-hangzhou",
resourceType: "",
loadbalancerId: "",
listenerId: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -50,15 +54,15 @@ const DeployToAliyunNLB = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message,
loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message,
listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -67,28 +71,28 @@ const DeployToAliyunNLB = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_nlb_region.placeholder")} placeholder={t("domain.deployment.form.aliyun_nlb_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.aliyun_nlb_resource_type.label")}</Label> <Label>{t("domain.deployment.form.aliyun_nlb_resource_type.label")}</Label>
<Select <Select
value={data?.config?.resourceType} value={config?.config?.resourceType}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.resourceType = value?.trim(); draft.config.resourceType = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -101,46 +105,46 @@ const DeployToAliyunNLB = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div> <div className="text-red-600 text-sm mt-1">{errors?.resourceType}</div>
</div> </div>
{data?.config?.resourceType === "loadbalancer" ? ( {config?.config?.resourceType === "loadbalancer" ? (
<div> <div>
<Label>{t("domain.deployment.form.aliyun_nlb_loadbalancer_id.label")}</Label> <Label>{t("domain.deployment.form.aliyun_nlb_loadbalancer_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.aliyun_nlb_loadbalancer_id.placeholder")} placeholder={t("domain.deployment.form.aliyun_nlb_loadbalancer_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.loadbalancerId} value={config?.config?.loadbalancerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.loadbalancerId = e.target.value?.trim(); draft.config.loadbalancerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.loadbalancerId}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "listener" ? ( {config?.config?.resourceType === "listener" ? (
<div> <div>
<Label>{t("domain.deployment.form.aliyun_nlb_listener_id.label")}</Label> <Label>{t("domain.deployment.form.aliyun_nlb_listener_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.aliyun_nlb_listener_id.placeholder")} placeholder={t("domain.deployment.form.aliyun_nlb_listener_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.listenerId} value={config?.config?.listenerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.listenerId = e.target.value?.trim(); draft.config.listenerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.listenerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.listenerId}</div>
</div> </div>
) : ( ) : (
<></> <></>

50
ui/src/components/certimate/DeployToAliyunOSS.tsx
View File

@ -7,26 +7,30 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToAliyunOSSConfigParams = {
endpoint?: string;
bucket?: string;
domain?: string;
};
const DeployToAliyunOSS = () => { const DeployToAliyunOSS = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToAliyunOSSConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
endpoint: "oss.aliyuncs.com", endpoint: "oss.aliyuncs.com",
bucket: "",
domain: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -42,14 +46,14 @@ const DeployToAliyunOSS = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
endpoint: res.error?.errors?.find((e) => e.path[0] === "endpoint")?.message, endpoint: res.error?.errors?.find((e) => e.path[0] === "endpoint")?.message,
bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message, bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -58,16 +62,16 @@ const DeployToAliyunOSS = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_oss_endpoint.placeholder")} placeholder={t("domain.deployment.form.aliyun_oss_endpoint.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.endpoint} value={config?.config?.endpoint}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.endpoint = e.target.value?.trim(); draft.config.endpoint = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.endpoint}</div> <div className="text-red-600 text-sm mt-1">{errors?.endpoint}</div>
</div> </div>
<div> <div>
@ -75,16 +79,16 @@ const DeployToAliyunOSS = () => {
<Input <Input
placeholder={t("domain.deployment.form.aliyun_oss_bucket.placeholder")} placeholder={t("domain.deployment.form.aliyun_oss_bucket.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.bucket} value={config?.config?.bucket}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.bucket = e.target.value?.trim(); draft.config.bucket = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.bucket}</div> <div className="text-red-600 text-sm mt-1">{errors?.bucket}</div>
</div> </div>
<div> <div>
@ -92,16 +96,16 @@ const DeployToAliyunOSS = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.label")} placeholder={t("domain.deployment.form.domain.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

40
ui/src/components/certimate/DeployToHuaweiCloudCDN.tsx
View File

@ -7,25 +7,29 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToHuaweiCloudCDNConfigParams = {
region?: string;
domain?: string;
};
const DeployToHuaweiCloudCDN = () => { const DeployToHuaweiCloudCDN = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToHuaweiCloudCDNConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "cn-north-1", region: "cn-north-1",
domain: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -38,13 +42,13 @@ const DeployToHuaweiCloudCDN = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -53,16 +57,16 @@ const DeployToHuaweiCloudCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.huaweicloud_cdn_region.placeholder")} placeholder={t("domain.deployment.form.huaweicloud_cdn_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
@ -70,16 +74,16 @@ const DeployToHuaweiCloudCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.placeholder")} placeholder={t("domain.deployment.form.domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

80
ui/src/components/certimate/DeployToHuaweiCloudELB.tsx
View File

@ -8,28 +8,32 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
const DeployToHuaweiCloudCDN = () => { type DeployToHuaweiCloudELBConfigParams = {
region?: string;
resourceType?: string;
certificateId?: string;
loadbalancerId?: string;
listenerId?: string;
};
const DeployToHuaweiCloudELB = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToHuaweiCloudELBConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "cn-north-1", region: "cn-north-1",
resourceType: "",
certificateId: "",
loadbalancerId: "",
listenerId: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -56,16 +60,16 @@ const DeployToHuaweiCloudCDN = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message,
certificateId: res.error?.errors?.find((e) => e.path[0] === "certificateId")?.message, certificateId: res.error?.errors?.find((e) => e.path[0] === "certificateId")?.message,
loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message,
listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -74,28 +78,28 @@ const DeployToHuaweiCloudCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.huaweicloud_elb_region.placeholder")} placeholder={t("domain.deployment.form.huaweicloud_elb_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.huaweicloud_elb_resource_type.label")}</Label> <Label>{t("domain.deployment.form.huaweicloud_elb_resource_type.label")}</Label>
<Select <Select
value={data?.config?.resourceType} value={config?.config?.resourceType}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.resourceType = value; draft.config.resourceType = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -109,67 +113,67 @@ const DeployToHuaweiCloudCDN = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div> <div className="text-red-600 text-sm mt-1">{errors?.resourceType}</div>
</div> </div>
{data?.config?.resourceType === "certificate" ? ( {config?.config?.resourceType === "certificate" ? (
<div> <div>
<Label>{t("domain.deployment.form.huaweicloud_elb_certificate_id.label")}</Label> <Label>{t("domain.deployment.form.huaweicloud_elb_certificate_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.huaweicloud_elb_certificate_id.placeholder")} placeholder={t("domain.deployment.form.huaweicloud_elb_certificate_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.certificateId} value={config?.config?.certificateId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.certificateId = e.target.value?.trim(); draft.config.certificateId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.certificateId}</div> <div className="text-red-600 text-sm mt-1">{errors?.certificateId}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "loadbalancer" ? ( {config?.config?.resourceType === "loadbalancer" ? (
<div> <div>
<Label>{t("domain.deployment.form.huaweicloud_elb_loadbalancer_id.label")}</Label> <Label>{t("domain.deployment.form.huaweicloud_elb_loadbalancer_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.huaweicloud_elb_loadbalancer_id.placeholder")} placeholder={t("domain.deployment.form.huaweicloud_elb_loadbalancer_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.loadbalancerId} value={config?.config?.loadbalancerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.loadbalancerId = e.target.value?.trim(); draft.config.loadbalancerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.loadbalancerId}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "listener" ? ( {config?.config?.resourceType === "listener" ? (
<div> <div>
<Label>{t("domain.deployment.form.huaweicloud_elb_listener_id.label")}</Label> <Label>{t("domain.deployment.form.huaweicloud_elb_listener_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.huaweicloud_elb_listener_id.placeholder")} placeholder={t("domain.deployment.form.huaweicloud_elb_listener_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.listenerId} value={config?.config?.listenerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.listenerId = e.target.value?.trim(); draft.config.listenerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.listenerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.listenerId}</div>
</div> </div>
) : ( ) : (
<></> <></>
@ -178,4 +182,4 @@ const DeployToHuaweiCloudCDN = () => {
); );
}; };
export default DeployToHuaweiCloudCDN; export default DeployToHuaweiCloudELB;

50
ui/src/components/certimate/DeployToKubernetesSecret.tsx
View File

@ -7,18 +7,24 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToKubernetesSecretConfigParams = {
namespace?: string;
secretName?: string;
secretDataKeyForCrt?: string;
secretDataKeyForKey?: string;
};
const DeployToKubernetesSecret = () => { const DeployToKubernetesSecret = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToKubernetesSecretConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
namespace: "default", namespace: "default",
secretName: "",
secretDataKeyForCrt: "tls.crt", secretDataKeyForCrt: "tls.crt",
secretDataKeyForKey: "tls.key", secretDataKeyForKey: "tls.key",
}, },
@ -27,7 +33,7 @@ const DeployToKubernetesSecret = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -46,15 +52,15 @@ const DeployToKubernetesSecret = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
namespace: res.error?.errors?.find((e) => e.path[0] === "namespace")?.message, namespace: res.error?.errors?.find((e) => e.path[0] === "namespace")?.message,
secretName: res.error?.errors?.find((e) => e.path[0] === "secretName")?.message, secretName: res.error?.errors?.find((e) => e.path[0] === "secretName")?.message,
secretDataKeyForCrt: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForCrt")?.message, secretDataKeyForCrt: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForCrt")?.message,
secretDataKeyForKey: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForKey")?.message, secretDataKeyForKey: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForKey")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<> <>
@ -64,13 +70,13 @@ const DeployToKubernetesSecret = () => {
<Input <Input
placeholder={t("domain.deployment.form.k8s_namespace.label")} placeholder={t("domain.deployment.form.k8s_namespace.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.namespace} value={config?.config?.namespace}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.namespace = e.target.value?.trim(); draft.config.namespace = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
</div> </div>
@ -80,13 +86,13 @@ const DeployToKubernetesSecret = () => {
<Input <Input
placeholder={t("domain.deployment.form.k8s_secret_name.label")} placeholder={t("domain.deployment.form.k8s_secret_name.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.secretName} value={config?.config?.secretName}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.secretName = e.target.value?.trim(); draft.config.secretName = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
</div> </div>
@ -96,13 +102,13 @@ const DeployToKubernetesSecret = () => {
<Input <Input
placeholder={t("domain.deployment.form.k8s_secret_data_key_for_crt.label")} placeholder={t("domain.deployment.form.k8s_secret_data_key_for_crt.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.secretDataKeyForCrt} value={config?.config?.secretDataKeyForCrt}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.secretDataKeyForCrt = e.target.value?.trim(); draft.config.secretDataKeyForCrt = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
</div> </div>
@ -112,13 +118,13 @@ const DeployToKubernetesSecret = () => {
<Input <Input
placeholder={t("domain.deployment.form.k8s_secret_data_key_for_key.label")} placeholder={t("domain.deployment.form.k8s_secret_data_key_for_key.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.secretDataKeyForKey} value={config?.config?.secretDataKeyForKey}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.secretDataKeyForKey = e.target.value?.trim(); draft.config.secretDataKeyForKey = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
</div> </div>

211
ui/src/components/certimate/DeployToLocal.tsx
View File

@ -12,33 +12,40 @@ import { Textarea } from "@/components/ui/textarea";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
type DeployToLocalConfigParams = {
format?: string;
certPath?: string;
keyPath?: string;
pfxPassword?: string;
jksAlias?: string;
jksKeypass?: string;
jksStorepass?: string;
shell?: string;
preCommand?: string;
command?: string;
};
const DeployToLocal = () => { const DeployToLocal = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToLocalConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
format: "pem", format: "pem",
certPath: "/etc/nginx/ssl/nginx.crt", certPath: "/etc/nginx/ssl/nginx.crt",
keyPath: "/etc/nginx/ssl/nginx.key", keyPath: "/etc/nginx/ssl/nginx.key",
pfxPassword: "",
jksAlias: "",
jksKeypass: "",
jksStorepass: "",
shell: "sh", shell: "sh",
preCommand: "",
command: "sudo service nginx reload",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -86,9 +93,9 @@ const DeployToLocal = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
format: res.error?.errors?.find((e) => e.path[0] === "format")?.message, format: res.error?.errors?.find((e) => e.path[0] === "format")?.message,
certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message, certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message,
keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message, keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message,
@ -100,38 +107,41 @@ const DeployToLocal = () => {
preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message, preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message,
command: res.error?.errors?.find((e) => e.path[0] === "command")?.message, command: res.error?.errors?.find((e) => e.path[0] === "command")?.message,
}); });
}, [data]); }, [config]);
useEffect(() => { useEffect(() => {
if (data.config?.format === "pem") { if (config.config?.format === "pem") {
if (/(.pfx|.jks)$/.test(data.config.certPath)) { if (/(.pfx|.jks)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.pfx|.jks)$/, ".crt"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.pfx|.jks)$/, ".crt");
setDeploy(newData); })
);
} }
} else if (data.config?.format === "pfx") { } else if (config.config?.format === "pfx") {
if (/(.crt|.jks)$/.test(data.config.certPath)) { if (/(.crt|.jks)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.crt|.jks)$/, ".pfx"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.crt|.jks)$/, ".pfx");
setDeploy(newData); })
);
} }
} else if (data.config?.format === "jks") { } else if (config.config?.format === "jks") {
if (/(.crt|.pfx)$/.test(data.config.certPath)) { if (/(.crt|.pfx)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.crt|.pfx)$/, ".jks"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.crt|.pfx)$/, ".jks");
setDeploy(newData); })
);
} }
} }
}, [data.config?.format]); }, [config.config?.format]);
const getOptionCls = (val: string) => { const getOptionCls = (val: string) => {
if (data.config?.shell === val) { if (config.config?.shell === val) {
return "border-primary dark:border-primary"; return "border-primary dark:border-primary";
} }
@ -142,21 +152,23 @@ const DeployToLocal = () => {
switch (key) { switch (key) {
case "reload_nginx": case "reload_nginx":
{ {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.shell = "sh"; draft.config ??= {};
draft.config.command = "sudo service nginx reload"; draft.config.shell = "sh";
}); draft.config.command = "sudo service nginx reload";
setDeploy(newData); })
);
} }
break; break;
case "binding_iis": case "binding_iis":
{ {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.shell = "powershell"; draft.config ??= {};
draft.config.command = ` draft.config.shell = "powershell";
draft.config.command = `
# 请将以下变量替换为实际值 # 请将以下变量替换为实际值
$pfxPath = "<your-pfx-path>" # PFX 文件路径 $pfxPath = "<your-pfx-path>" # PFX 文件路径
$pfxPassword = "<your-pfx-password>" # PFX 密码 $pfxPassword = "<your-pfx-password>" # PFX 密码
@ -185,17 +197,18 @@ $binding.AddSslCertificate($thumbprint, "My")
# 删除目录下的证书文件 # 删除目录下的证书文件
Remove-Item -Path "$pfxPath" -Force Remove-Item -Path "$pfxPath" -Force
`.trim(); `.trim();
}); })
setDeploy(newData); );
} }
break; break;
case "binding_netsh": case "binding_netsh":
{ {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.shell = "powershell"; draft.config ??= {};
draft.config.command = ` draft.config.shell = "powershell";
draft.config.command = `
# 请将以下变量替换为实际值 # 请将以下变量替换为实际值
$pfxPath = "<your-pfx-path>" # PFX 文件路径 $pfxPath = "<your-pfx-path>" # PFX 文件路径
$pfxPassword = "<your-pfx-password>" # PFX 密码 $pfxPassword = "<your-pfx-password>" # PFX 密码
@ -216,8 +229,8 @@ netsh http add sslcert ipport=$addr certhash=$thumbprint
# 删除目录下的证书文件 # 删除目录下的证书文件
Remove-Item -Path "$pfxPath" -Force Remove-Item -Path "$pfxPath" -Force
`.trim(); `.trim();
}); })
setDeploy(newData); );
} }
break; break;
} }
@ -229,13 +242,13 @@ Remove-Item -Path "$pfxPath" -Force
<div> <div>
<Label>{t("domain.deployment.form.file_format.label")}</Label> <Label>{t("domain.deployment.form.file_format.label")}</Label>
<Select <Select
value={data?.config?.format} value={config?.config?.format}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.format = value; draft.config.format = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -249,7 +262,7 @@ Remove-Item -Path "$pfxPath" -Force
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.format}</div> <div className="text-red-600 text-sm mt-1">{errors?.format}</div>
</div> </div>
<div> <div>
@ -257,77 +270,77 @@ Remove-Item -Path "$pfxPath" -Force
<Input <Input
placeholder={t("domain.deployment.form.file_cert_path.label")} placeholder={t("domain.deployment.form.file_cert_path.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.certPath} value={config?.config?.certPath}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.certPath = e.target.value?.trim(); draft.config.certPath = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.certPath}</div> <div className="text-red-600 text-sm mt-1">{errors?.certPath}</div>
</div> </div>
{data.config?.format === "pem" ? ( {config.config?.format === "pem" ? (
<div> <div>
<Label>{t("domain.deployment.form.file_key_path.label")}</Label> <Label>{t("domain.deployment.form.file_key_path.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_key_path.placeholder")} placeholder={t("domain.deployment.form.file_key_path.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.keyPath} value={config?.config?.keyPath}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.keyPath = e.target.value?.trim(); draft.config.keyPath = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.keyPath}</div> <div className="text-red-600 text-sm mt-1">{errors?.keyPath}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data.config?.format === "pfx" ? ( {config.config?.format === "pfx" ? (
<div> <div>
<Label>{t("domain.deployment.form.file_pfx_password.label")}</Label> <Label>{t("domain.deployment.form.file_pfx_password.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_pfx_password.placeholder")} placeholder={t("domain.deployment.form.file_pfx_password.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.pfxPassword} value={config?.config?.pfxPassword}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.pfxPassword = e.target.value?.trim(); draft.config.pfxPassword = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.pfxPassword}</div> <div className="text-red-600 text-sm mt-1">{errors?.pfxPassword}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data.config?.format === "jks" ? ( {config.config?.format === "jks" ? (
<> <>
<div> <div>
<Label>{t("domain.deployment.form.file_jks_alias.label")}</Label> <Label>{t("domain.deployment.form.file_jks_alias.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_jks_alias.placeholder")} placeholder={t("domain.deployment.form.file_jks_alias.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksAlias} value={config?.config?.jksAlias}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksAlias = e.target.value?.trim(); draft.config.jksAlias = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksAlias}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksAlias}</div>
</div> </div>
<div> <div>
@ -335,16 +348,16 @@ Remove-Item -Path "$pfxPath" -Force
<Input <Input
placeholder={t("domain.deployment.form.file_jks_keypass.placeholder")} placeholder={t("domain.deployment.form.file_jks_keypass.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksKeypass} value={config?.config?.jksKeypass}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksKeypass = e.target.value?.trim(); draft.config.jksKeypass = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksKeypass}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksKeypass}</div>
</div> </div>
<div> <div>
@ -352,16 +365,16 @@ Remove-Item -Path "$pfxPath" -Force
<Input <Input
placeholder={t("domain.deployment.form.file_jks_storepass.placeholder")} placeholder={t("domain.deployment.form.file_jks_storepass.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksStorepass} value={config?.config?.jksStorepass}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksStorepass = e.target.value?.trim(); draft.config.jksStorepass = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksStorepass}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksStorepass}</div>
</div> </div>
</> </>
) : ( ) : (
@ -372,13 +385,13 @@ Remove-Item -Path "$pfxPath" -Force
<Label>{t("domain.deployment.form.shell.label")}</Label> <Label>{t("domain.deployment.form.shell.label")}</Label>
<RadioGroup <RadioGroup
className="flex mt-1" className="flex mt-1"
value={data?.config?.shell} value={config?.config?.shell}
onValueChange={(val) => { onValueChange={(val) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.shell = val; draft.config.shell = val;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -406,24 +419,24 @@ Remove-Item -Path "$pfxPath" -Force
</Label> </Label>
</div> </div>
</RadioGroup> </RadioGroup>
<div className="text-red-600 text-sm mt-1">{error?.shell}</div> <div className="text-red-600 text-sm mt-1">{errors?.shell}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.shell_pre_command.label")}</Label> <Label>{t("domain.deployment.form.shell_pre_command.label")}</Label>
<Textarea <Textarea
className="mt-1" className="mt-1"
value={data?.config?.preCommand} value={config?.config?.preCommand}
placeholder={t("domain.deployment.form.shell_pre_command.placeholder")} placeholder={t("domain.deployment.form.shell_pre_command.placeholder")}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.preCommand = e.target.value; draft.config.preCommand = e.target.value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
></Textarea> ></Textarea>
<div className="text-red-600 text-sm mt-1">{error?.preCommand}</div> <div className="text-red-600 text-sm mt-1">{errors?.preCommand}</div>
</div> </div>
<div> <div>
@ -448,17 +461,17 @@ Remove-Item -Path "$pfxPath" -Force
</div> </div>
<Textarea <Textarea
className="mt-1" className="mt-1"
value={data?.config?.command} value={config?.config?.command}
placeholder={t("domain.deployment.form.shell_command.placeholder")} placeholder={t("domain.deployment.form.shell_command.placeholder")}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.command = e.target.value; draft.config.command = e.target.value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
></Textarea> ></Textarea>
<div className="text-red-600 text-sm mt-1">{error?.command}</div> <div className="text-red-600 text-sm mt-1">{errors?.command}</div>
</div> </div>
</div> </div>
</> </>

34
ui/src/components/certimate/DeployToQiniuCDN.tsx
View File

@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToQiniuCDNConfigParams = {
domain?: string;
};
const DeployToQiniuCDN = () => { const DeployToQiniuCDN = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToQiniuCDNConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {},
domain: "",
},
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -34,12 +36,12 @@ const DeployToQiniuCDN = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -48,16 +50,16 @@ const DeployToQiniuCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.placeholder")} placeholder={t("domain.deployment.form.domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

161
ui/src/components/certimate/DeployToSSH.tsx
View File

@ -9,24 +9,32 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToSSHConfigParams = {
format?: string;
certPath?: string;
keyPath?: string;
pfxPassword?: string;
jksAlias?: string;
jksKeypass?: string;
jksStorepass?: string;
shell?: string;
preCommand?: string;
command?: string;
};
const DeployToSSH = () => { const DeployToSSH = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToSSHConfigParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
format: "pem", format: "pem",
certPath: "/etc/nginx/ssl/nginx.crt", certPath: "/etc/nginx/ssl/nginx.crt",
keyPath: "/etc/nginx/ssl/nginx.key", keyPath: "/etc/nginx/ssl/nginx.key",
pfxPassword: "",
jksAlias: "",
jksKeypass: "",
jksStorepass: "",
preCommand: "",
command: "sudo service nginx reload", command: "sudo service nginx reload",
}, },
}); });
@ -34,7 +42,7 @@ const DeployToSSH = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -79,9 +87,9 @@ const DeployToSSH = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
format: res.error?.errors?.find((e) => e.path[0] === "format")?.message, format: res.error?.errors?.find((e) => e.path[0] === "format")?.message,
certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message, certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message,
keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message, keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message,
@ -92,35 +100,38 @@ const DeployToSSH = () => {
preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message, preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message,
command: res.error?.errors?.find((e) => e.path[0] === "command")?.message, command: res.error?.errors?.find((e) => e.path[0] === "command")?.message,
}); });
}, [data]); }, [config]);
useEffect(() => { useEffect(() => {
if (data.config?.format === "pem") { if (config.config?.format === "pem") {
if (/(.pfx|.jks)$/.test(data.config.certPath)) { if (/(.pfx|.jks)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.pfx|.jks)$/, ".crt"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.pfx|.jks)$/, ".crt");
setDeploy(newData); })
);
} }
} else if (data.config?.format === "pfx") { } else if (config.config?.format === "pfx") {
if (/(.crt|.jks)$/.test(data.config.certPath)) { if (/(.crt|.jks)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.crt|.jks)$/, ".pfx"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.crt|.jks)$/, ".pfx");
setDeploy(newData); })
);
} }
} else if (data.config?.format === "jks") { } else if (config.config?.format === "jks") {
if (/(.crt|.pfx)$/.test(data.config.certPath)) { if (/(.crt|.pfx)$/.test(config.config.certPath!)) {
const newData = produce(data, (draft) => { setConfig(
draft.config ??= {}; produce(config, (draft) => {
draft.config.certPath = data.config!.certPath.replace(/(.crt|.pfx)$/, ".jks"); draft.config ??= {};
}); draft.config.certPath = config.config!.certPath!.replace(/(.crt|.pfx)$/, ".jks");
setDeploy(newData); })
);
} }
} }
}, [data.config?.format]); }, [config.config?.format]);
return ( return (
<> <>
@ -128,13 +139,13 @@ const DeployToSSH = () => {
<div> <div>
<Label>{t("domain.deployment.form.file_format.label")}</Label> <Label>{t("domain.deployment.form.file_format.label")}</Label>
<Select <Select
value={data?.config?.format} value={config?.config?.format}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.format = value; draft.config.format = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -148,7 +159,7 @@ const DeployToSSH = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.format}</div> <div className="text-red-600 text-sm mt-1">{errors?.format}</div>
</div> </div>
<div> <div>
@ -156,77 +167,77 @@ const DeployToSSH = () => {
<Input <Input
placeholder={t("domain.deployment.form.file_cert_path.label")} placeholder={t("domain.deployment.form.file_cert_path.label")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.certPath} value={config?.config?.certPath}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.certPath = e.target.value?.trim(); draft.config.certPath = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.certPath}</div> <div className="text-red-600 text-sm mt-1">{errors?.certPath}</div>
</div> </div>
{data.config?.format === "pem" ? ( {config.config?.format === "pem" ? (
<div> <div>
<Label>{t("domain.deployment.form.file_key_path.label")}</Label> <Label>{t("domain.deployment.form.file_key_path.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_key_path.placeholder")} placeholder={t("domain.deployment.form.file_key_path.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.keyPath} value={config?.config?.keyPath}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.keyPath = e.target.value?.trim(); draft.config.keyPath = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.keyPath}</div> <div className="text-red-600 text-sm mt-1">{errors?.keyPath}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data.config?.format === "pfx" ? ( {config.config?.format === "pfx" ? (
<div> <div>
<Label>{t("domain.deployment.form.file_pfx_password.label")}</Label> <Label>{t("domain.deployment.form.file_pfx_password.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_pfx_password.placeholder")} placeholder={t("domain.deployment.form.file_pfx_password.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.pfxPassword} value={config?.config?.pfxPassword}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.pfxPassword = e.target.value?.trim(); draft.config.pfxPassword = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.pfxPassword}</div> <div className="text-red-600 text-sm mt-1">{errors?.pfxPassword}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data.config?.format === "jks" ? ( {config.config?.format === "jks" ? (
<> <>
<div> <div>
<Label>{t("domain.deployment.form.file_jks_alias.label")}</Label> <Label>{t("domain.deployment.form.file_jks_alias.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.file_jks_alias.placeholder")} placeholder={t("domain.deployment.form.file_jks_alias.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksAlias} value={config?.config?.jksAlias}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksAlias = e.target.value?.trim(); draft.config.jksAlias = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksAlias}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksAlias}</div>
</div> </div>
<div> <div>
@ -234,16 +245,16 @@ const DeployToSSH = () => {
<Input <Input
placeholder={t("domain.deployment.form.file_jks_keypass.placeholder")} placeholder={t("domain.deployment.form.file_jks_keypass.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksKeypass} value={config?.config?.jksKeypass}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksKeypass = e.target.value?.trim(); draft.config.jksKeypass = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksKeypass}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksKeypass}</div>
</div> </div>
<div> <div>
@ -251,16 +262,16 @@ const DeployToSSH = () => {
<Input <Input
placeholder={t("domain.deployment.form.file_jks_storepass.placeholder")} placeholder={t("domain.deployment.form.file_jks_storepass.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.jksStorepass} value={config?.config?.jksStorepass}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.jksStorepass = e.target.value?.trim(); draft.config.jksStorepass = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.jksStorepass}</div> <div className="text-red-600 text-sm mt-1">{errors?.jksStorepass}</div>
</div> </div>
</> </>
) : ( ) : (
@ -271,34 +282,34 @@ const DeployToSSH = () => {
<Label>{t("domain.deployment.form.shell_pre_command.label")}</Label> <Label>{t("domain.deployment.form.shell_pre_command.label")}</Label>
<Textarea <Textarea
className="mt-1" className="mt-1"
value={data?.config?.preCommand} value={config?.config?.preCommand}
placeholder={t("domain.deployment.form.shell_pre_command.placeholder")} placeholder={t("domain.deployment.form.shell_pre_command.placeholder")}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.preCommand = e.target.value; draft.config.preCommand = e.target.value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
></Textarea> ></Textarea>
<div className="text-red-600 text-sm mt-1">{error?.preCommand}</div> <div className="text-red-600 text-sm mt-1">{errors?.preCommand}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.shell_command.label")}</Label> <Label>{t("domain.deployment.form.shell_command.label")}</Label>
<Textarea <Textarea
className="mt-1" className="mt-1"
value={data?.config?.command} value={config?.config?.command}
placeholder={t("domain.deployment.form.shell_command.placeholder")} placeholder={t("domain.deployment.form.shell_command.placeholder")}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.command = e.target.value; draft.config.command = e.target.value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
></Textarea> ></Textarea>
<div className="text-red-600 text-sm mt-1">{error?.command}</div> <div className="text-red-600 text-sm mt-1">{errors?.command}</div>
</div> </div>
</div> </div>
</> </>

34
ui/src/components/certimate/DeployToTencentCDN.tsx
View File

@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToTencentCDNParams = {
domain?: string;
};
const DeployToTencentCDN = () => { const DeployToTencentCDN = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToTencentCDNParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {},
domain: "",
},
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -34,12 +36,12 @@ const DeployToTencentCDN = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -48,16 +50,16 @@ const DeployToTencentCDN = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.placeholder")} placeholder={t("domain.deployment.form.domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

84
ui/src/components/certimate/DeployToTencentCLB.tsx
View File

@ -8,28 +8,32 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToTencentCLBParams = {
region?: string;
resourceType?: string;
loadbalancerId?: string;
listenerId?: string;
domain?: string;
};
const DeployToTencentCLB = () => { const DeployToTencentCLB = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToTencentCLBParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "ap-guangzhou", region: "ap-guangzhou",
resourceType: "",
loadbalancerId: "",
listenerId: "",
domain: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z const formSchema = z
@ -65,16 +69,16 @@ const DeployToTencentCLB = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message,
loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message,
listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -83,28 +87,28 @@ const DeployToTencentCLB = () => {
<Input <Input
placeholder={t("domain.deployment.form.tencent_clb_region.placeholder")} placeholder={t("domain.deployment.form.tencent_clb_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
<Label>{t("domain.deployment.form.tencent_clb_resource_type.label")}</Label> <Label>{t("domain.deployment.form.tencent_clb_resource_type.label")}</Label>
<Select <Select
value={data?.config?.resourceType} value={config?.config?.resourceType}
onValueChange={(value) => { onValueChange={(value) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.resourceType = value; draft.config.resourceType = value;
}); });
setDeploy(newData); setConfig(nv);
}} }}
> >
<SelectTrigger> <SelectTrigger>
@ -119,7 +123,7 @@ const DeployToTencentCLB = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-red-600 text-sm mt-1">{error?.resourceType}</div> <div className="text-red-600 text-sm mt-1">{errors?.resourceType}</div>
</div> </div>
<div> <div>
@ -127,76 +131,76 @@ const DeployToTencentCLB = () => {
<Input <Input
placeholder={t("domain.deployment.form.tencent_clb_loadbalancer_id.placeholder")} placeholder={t("domain.deployment.form.tencent_clb_loadbalancer_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.loadbalancerId} value={config?.config?.loadbalancerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.loadbalancerId = e.target.value?.trim(); draft.config.loadbalancerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.loadbalancerId}</div>
</div> </div>
{data?.config?.resourceType === "ssl-deploy" || data?.config?.resourceType === "listener" || data?.config?.resourceType === "ruledomain" ? ( {config?.config?.resourceType === "ssl-deploy" || config?.config?.resourceType === "listener" || config?.config?.resourceType === "ruledomain" ? (
<div> <div>
<Label>{t("domain.deployment.form.tencent_clb_listener_id.label")}</Label> <Label>{t("domain.deployment.form.tencent_clb_listener_id.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.tencent_clb_listener_id.placeholder")} placeholder={t("domain.deployment.form.tencent_clb_listener_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.listenerId} value={config?.config?.listenerId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.listenerId = e.target.value?.trim(); draft.config.listenerId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.listenerId}</div> <div className="text-red-600 text-sm mt-1">{errors?.listenerId}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "ssl-deploy" ? ( {config?.config?.resourceType === "ssl-deploy" ? (
<div> <div>
<Label>{t("domain.deployment.form.tencent_clb_domain.label")}</Label> <Label>{t("domain.deployment.form.tencent_clb_domain.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.tencent_clb_domain.placeholder")} placeholder={t("domain.deployment.form.tencent_clb_domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{data?.config?.resourceType === "ruledomain" ? ( {config?.config?.resourceType === "ruledomain" ? (
<div> <div>
<Label>{t("domain.deployment.form.tencent_clb_ruledomain.label")}</Label> <Label>{t("domain.deployment.form.tencent_clb_ruledomain.label")}</Label>
<Input <Input
placeholder={t("domain.deployment.form.tencent_clb_ruledomain.placeholder")} placeholder={t("domain.deployment.form.tencent_clb_ruledomain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
) : ( ) : (
<></> <></>

50
ui/src/components/certimate/DeployToTencentCOS.tsx
View File

@ -7,26 +7,30 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToTencentCOSParams = {
region?: string;
bucket?: string;
domain?: string;
};
const DeployToTencentCOS = () => { const DeployToTencentCOS = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToTencentCOSParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {
region: "ap-guangzhou", region: "ap-guangzhou",
bucket: "",
domain: "",
}, },
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -38,14 +42,14 @@ const DeployToTencentCOS = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message,
bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message, bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -54,16 +58,16 @@ const DeployToTencentCOS = () => {
<Input <Input
placeholder={t("domain.deployment.form.tencent_cos_region.placeholder")} placeholder={t("domain.deployment.form.tencent_cos_region.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.region} value={config?.config?.region}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.region = e.target.value?.trim(); draft.config.region = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.region}</div> <div className="text-red-600 text-sm mt-1">{errors?.region}</div>
</div> </div>
<div> <div>
@ -71,16 +75,16 @@ const DeployToTencentCOS = () => {
<Input <Input
placeholder={t("domain.deployment.form.tencent_cos_bucket.placeholder")} placeholder={t("domain.deployment.form.tencent_cos_bucket.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.bucket} value={config?.config?.bucket}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.bucket = e.target.value?.trim(); draft.config.bucket = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.bucket}</div> <div className="text-red-600 text-sm mt-1">{errors?.bucket}</div>
</div> </div>
<div> <div>
@ -88,16 +92,16 @@ const DeployToTencentCOS = () => {
<Input <Input
placeholder={t("domain.deployment.form.domain.placeholder")} placeholder={t("domain.deployment.form.domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

43
ui/src/components/certimate/DeployToTencentTEO.tsx
View File

@ -8,24 +8,27 @@ import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { useDeployEditContext } from "./DeployEdit"; import { useDeployEditContext } from "./DeployEdit";
type DeployToTencentTEOParams = {
zoneId?: string;
domain?: string;
};
const DeployToTencentTEO = () => { const DeployToTencentTEO = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); const { config, setConfig, errors, setErrors } = useDeployEditContext<DeployToTencentTEOParams>();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!config.id) {
setDeploy({ setConfig({
...data, ...config,
config: { config: {},
zoneId: "",
},
}); });
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
setError({}); setErrors({});
}, []); }, []);
const formSchema = z.object({ const formSchema = z.object({
@ -36,13 +39,13 @@ const DeployToTencentTEO = () => {
}); });
useEffect(() => { useEffect(() => {
const res = formSchema.safeParse(data.config); const res = formSchema.safeParse(config.config);
setError({ setErrors({
...error, ...errors,
zoneId: res.error?.errors?.find((e) => e.path[0] === "zoneId")?.message, zoneId: res.error?.errors?.find((e) => e.path[0] === "zoneId")?.message,
domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message,
}); });
}, [data]); }, [config]);
return ( return (
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
@ -51,16 +54,16 @@ const DeployToTencentTEO = () => {
<Input <Input
placeholder={t("domain.deployment.form.tencent_teo_zone_id.placeholder")} placeholder={t("domain.deployment.form.tencent_teo_zone_id.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.zoneId} value={config?.config?.zoneId}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.zoneId = e.target.value?.trim(); draft.config.zoneId = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.zoneId}</div> <div className="text-red-600 text-sm mt-1">{errors?.zoneId}</div>
</div> </div>
<div> <div>
@ -68,16 +71,16 @@ const DeployToTencentTEO = () => {
<Textarea <Textarea
placeholder={t("domain.deployment.form.tencent_teo_domain.placeholder")} placeholder={t("domain.deployment.form.tencent_teo_domain.placeholder")}
className="w-full mt-1" className="w-full mt-1"
value={data?.config?.domain} value={config?.config?.domain}
onChange={(e) => { onChange={(e) => {
const newData = produce(data, (draft) => { const nv = produce(config, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.domain = e.target.value?.trim(); draft.config.domain = e.target.value?.trim();
}); });
setDeploy(newData); setConfig(nv);
}} }}
/> />
<div className="text-red-600 text-sm mt-1">{error?.domain}</div> <div className="text-red-600 text-sm mt-1">{errors?.domain}</div>
</div> </div>
</div> </div>
); );

6
ui/src/components/certimate/DeployToWebhook.tsx
View File

@ -6,7 +6,7 @@ import KVList from "./KVList";
import { type KVType } from "@/domain/domain"; import { type KVType } from "@/domain/domain";
const DeployToWebhook = () => { const DeployToWebhook = () => {
const { deploy: data, setDeploy, setError } = useDeployEditContext(); const { config: data, setConfig: setDeploy, setErrors: setError } = useDeployEditContext();
useEffect(() => { useEffect(() => {
if (!data.id) { if (!data.id) {
@ -26,11 +26,11 @@ const DeployToWebhook = () => {
<KVList <KVList
variables={data?.config?.variables} variables={data?.config?.variables}
onValueChange={(variables: KVType[]) => { onValueChange={(variables: KVType[]) => {
const newData = produce(data, (draft) => { const nv = produce(data, (draft) => {
draft.config ??= {}; draft.config ??= {};
draft.config.variables = variables; draft.config.variables = variables;
}); });
setDeploy(newData); setDeploy(nv);
}} }}
/> />
</> </>

2
ui/src/i18n/locales/zh/nls.domain.json
View File

@ -153,7 +153,7 @@
"domain.deployment.form.shell_preset_scripts.trigger": "使用预设脚本", "domain.deployment.form.shell_preset_scripts.trigger": "使用预设脚本",
"domain.deployment.form.shell_preset_scripts.option.reload_nginx.label": "Bash - 重启 nginx", "domain.deployment.form.shell_preset_scripts.option.reload_nginx.label": "Bash - 重启 nginx",
"domain.deployment.form.shell_preset_scripts.option.binding_iis.label": "PowerShell - 导入并绑定到 IIS（需管理员权限）", "domain.deployment.form.shell_preset_scripts.option.binding_iis.label": "PowerShell - 导入并绑定到 IIS（需管理员权限）",
"domain.deployment.form.shell_preset_scripts.option.binding_netsh.label": "PowerShell - 导入并绑定到netsh（需管理员权限）", "domain.deployment.form.shell_preset_scripts.option.binding_netsh.label": "PowerShell - 导入并绑定到 netsh（需管理员权限）",
"domain.deployment.form.k8s_namespace.label": "命名空间", "domain.deployment.form.k8s_namespace.label": "命名空间",
"domain.deployment.form.k8s_namespace.placeholder": "请输入 K8S 命名空间", "domain.deployment.form.k8s_namespace.placeholder": "请输入 K8S 命名空间",
"domain.deployment.form.k8s_secret_name.label": "Secret 名称", "domain.deployment.form.k8s_secret_name.label": "Secret 名称",