mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-08 05:29:51 +00:00
refactor(ui): useAntdForm
This commit is contained in:
Fu Diwei
parent
c9024c5611
commit
4d0f7c2e02
@ -1,10 +1,11 @@
|
||||
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCreation, useDeepCompareEffect } from "ahooks";
|
||||
import { useCreation } from "ahooks";
|
||||
import { Form, Input } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { ACCESS_PROVIDER_TYPES, type AccessModel } from "@/domain/access";
|
||||
import AccessTypeSelect from "./AccessTypeSelect";
|
||||
import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
|
||||
@ -26,22 +27,22 @@ import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig
|
||||
import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
|
||||
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
|
||||
|
||||
type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
|
||||
type AccessEditFormModelValues = Partial<MaybeModelRecord<AccessModel>>;
|
||||
type AccessEditFormPresets = "add" | "edit";
|
||||
|
||||
export type AccessEditFormProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormModelType;
|
||||
model?: AccessEditFormModelValues;
|
||||
preset: AccessEditFormPresets;
|
||||
onModelChange?: (model: AccessEditFormModelType) => void;
|
||||
onModelChange?: (model: AccessEditFormModelValues) => void;
|
||||
};
|
||||
|
||||
export type AccessEditFormInstance = {
|
||||
getFieldsValue: () => AccessEditFormModelType;
|
||||
getFieldsValue: () => AccessEditFormModelValues;
|
||||
resetFields: () => void;
|
||||
validateFields: () => Promise<AccessEditFormModelType>;
|
||||
validateFields: () => Promise<AccessEditFormModelValues>;
|
||||
};
|
||||
|
||||
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
|
||||
@ -57,12 +58,9 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
|
||||
config: z.any(),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model as Partial<z.infer<typeof formSchema>>);
|
||||
}, [model]);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: model as Partial<z.infer<typeof formSchema>>,
|
||||
});
|
||||
|
||||
const [configType, setConfigType] = useState(model?.configType);
|
||||
useEffect(() => {
|
||||
@ -115,32 +113,32 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
|
||||
case ACCESS_PROVIDER_TYPES.WEBHOOK:
|
||||
return <AccessEditFormWebhookConfig {...configFormProps} />;
|
||||
}
|
||||
}, [model, configType, configFormInst]);
|
||||
}, [disabled, model, configType, configFormInst, configFormName]);
|
||||
|
||||
const handleFormProviderChange = (name: string) => {
|
||||
if (name === configFormName) {
|
||||
form.setFieldValue("config", configFormInst.getFieldsValue());
|
||||
onModelChange?.(form.getFieldsValue(true));
|
||||
formInst.setFieldValue("config", configFormInst.getFieldsValue());
|
||||
onModelChange?.(formInst.getFieldsValue(true));
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormModelType) => {
|
||||
if (fields.configType !== configType) {
|
||||
setConfigType(fields.configType);
|
||||
const handleFormChange = (_: unknown, values: AccessEditFormModelValues) => {
|
||||
if (values.configType !== configType) {
|
||||
setConfigType(values.configType);
|
||||
}
|
||||
|
||||
onModelChange?.(fields);
|
||||
onModelChange?.(values);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getFieldsValue: () => {
|
||||
return form.getFieldsValue(true);
|
||||
return formInst.getFieldsValue(true);
|
||||
},
|
||||
resetFields: () => {
|
||||
return form.resetFields();
|
||||
return formInst.resetFields();
|
||||
},
|
||||
validateFields: () => {
|
||||
const t1 = form.validateFields();
|
||||
const t1 = formInst.validateFields();
|
||||
const t2 = configFormInst.validateFields();
|
||||
return Promise.all([t1, t2]).then(() => t1);
|
||||
},
|
||||
@ -149,7 +147,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
|
||||
return (
|
||||
<Form.Provider onFormChange={handleFormProviderChange}>
|
||||
<div className={className} style={style}>
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
|
||||
<Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
|
||||
<Input placeholder={t("access.form.name.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, Select, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type ACMEHttpReqAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormACMEHttpReqConfigModelType = Partial<ACMEHttpReqAccessConfig>;
|
||||
type AccessEditFormACMEHttpReqConfigModelValues = Partial<ACMEHttpReqAccessConfig>;
|
||||
|
||||
export type AccessEditFormACMEHttpReqConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormACMEHttpReqConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelType) => void;
|
||||
model?: AccessEditFormACMEHttpReqConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormACMEHttpReqConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormACMEHttpReqConfigModelValues => {
|
||||
return {
|
||||
endpoint: "https://example.com/api/",
|
||||
mode: "",
|
||||
} as AccessEditFormACMEHttpReqConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormACMEHttpReqConfigProps) => {
|
||||
@ -44,18 +43,17 @@ const AccessEditFormACMEHttpReqConfig = ({ form, formName, disabled, model, onMo
|
||||
.nullish(),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormACMEHttpReqConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormACMEHttpReqConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="endpoint"
|
||||
label={t("access.form.acmehttpreq_endpoint.label")}
|
||||
|
||||
@ -1,29 +1,28 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type AWSAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormAWSConfigModelType = Partial<AWSAccessConfig>;
|
||||
type AccessEditFormAWSConfigModelValues = Partial<AWSAccessConfig>;
|
||||
|
||||
export type AccessEditFormAWSConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormAWSConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormAWSConfigModelType) => void;
|
||||
model?: AccessEditFormAWSConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormAWSConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormAWSConfigModelValues => {
|
||||
return {
|
||||
accessKeyId: "",
|
||||
secretAccessKey: "",
|
||||
region: "us-east-1",
|
||||
hostedZoneId: "",
|
||||
} as AccessEditFormAWSConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAWSConfigProps) => {
|
||||
@ -56,18 +55,17 @@ const AccessEditFormAWSConfig = ({ form, formName, disabled, model, onModelChang
|
||||
.nullish(),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormAWSConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormAWSConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKeyId"
|
||||
label={t("access.form.aws_access_key_id.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type AliyunAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormAliyunConfigModelType = Partial<AliyunAccessConfig>;
|
||||
type AccessEditFormAliyunConfigModelValues = Partial<AliyunAccessConfig>;
|
||||
|
||||
export type AccessEditFormAliyunConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormAliyunConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormAliyunConfigModelType) => void;
|
||||
model?: AccessEditFormAliyunConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormAliyunConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormAliyunConfigModelValues => {
|
||||
return {
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
} as AccessEditFormAliyunConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormAliyunConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormAliyunConfig = ({ form, formName, disabled, model, onModelCh
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormAliyunConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormAliyunConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKeyId"
|
||||
label={t("access.form.aliyun_access_key_id.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type BaiduCloudAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormBaiduCloudConfigModelType = Partial<BaiduCloudAccessConfig>;
|
||||
type AccessEditFormBaiduCloudConfigModelValues = Partial<BaiduCloudAccessConfig>;
|
||||
|
||||
export type AccessEditFormBaiduCloudConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormBaiduCloudConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormBaiduCloudConfigModelType) => void;
|
||||
model?: AccessEditFormBaiduCloudConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormBaiduCloudConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormBaiduCloudConfigModelValues => {
|
||||
return {
|
||||
accessKeyId: "",
|
||||
secretAccessKey: "",
|
||||
} as AccessEditFormBaiduCloudConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBaiduCloudConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormBaiduCloudConfig = ({ form, formName, disabled, model, onMod
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormBaiduCloudConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormBaiduCloudConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKeyId"
|
||||
label={t("access.form.baiducloud_access_key_id.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type BytePlusAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormBytePlusConfigModelType = Partial<BytePlusAccessConfig>;
|
||||
type AccessEditFormBytePlusConfigModelValues = Partial<BytePlusAccessConfig>;
|
||||
|
||||
export type AccessEditFormBytePlusConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormBytePlusConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormBytePlusConfigModelType) => void;
|
||||
model?: AccessEditFormBytePlusConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormBytePlusConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormBytePlusConfigModelValues => {
|
||||
return {
|
||||
accessKey: "",
|
||||
secretKey: "",
|
||||
} as AccessEditFormBytePlusConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormBytePlusConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormBytePlusConfig = ({ form, formName, disabled, model, onModel
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormBytePlusConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormBytePlusConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKey"
|
||||
label={t("access.form.byteplus_access_key.label")}
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type CloudflareAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormCloudflareConfigModelType = Partial<CloudflareAccessConfig>;
|
||||
type AccessEditFormCloudflareConfigModelValues = Partial<CloudflareAccessConfig>;
|
||||
|
||||
export type AccessEditFormCloudflareConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormCloudflareConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormCloudflareConfigModelType) => void;
|
||||
model?: AccessEditFormCloudflareConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormCloudflareConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormCloudflareConfigModelValues => {
|
||||
return {
|
||||
dnsApiToken: "",
|
||||
} as AccessEditFormCloudflareConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormCloudflareConfigProps) => {
|
||||
@ -34,18 +33,17 @@ const AccessEditFormCloudflareConfig = ({ form, formName, disabled, model, onMod
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormCloudflareConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormCloudflareConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="dnsApiToken"
|
||||
label={t("access.form.cloudflare_dns_api_token.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type DogeCloudAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormDogeCloudConfigModelType = Partial<DogeCloudAccessConfig>;
|
||||
type AccessEditFormDogeCloudConfigModelValues = Partial<DogeCloudAccessConfig>;
|
||||
|
||||
export type AccessEditFormDogeCloudConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormDogeCloudConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormDogeCloudConfigModelType) => void;
|
||||
model?: AccessEditFormDogeCloudConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormDogeCloudConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormDogeCloudConfigModelValues => {
|
||||
return {
|
||||
accessKey: "",
|
||||
secretKey: "",
|
||||
} as AccessEditFormDogeCloudConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormDogeCloudConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormDogeCloudConfig = ({ form, formName, disabled, model, onMode
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormDogeCloudConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormDogeCloudConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKey"
|
||||
label={t("access.form.dogecloud_access_key.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type GoDaddyAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormGoDaddyConfigModelType = Partial<GoDaddyAccessConfig>;
|
||||
type AccessEditFormGoDaddyConfigModelValues = Partial<GoDaddyAccessConfig>;
|
||||
|
||||
export type AccessEditFormGoDaddyConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormGoDaddyConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormGoDaddyConfigModelType) => void;
|
||||
model?: AccessEditFormGoDaddyConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormGoDaddyConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormGoDaddyConfigModelValues => {
|
||||
return {
|
||||
apiKey: "",
|
||||
apiSecret: "",
|
||||
} as AccessEditFormGoDaddyConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormGoDaddyConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormGoDaddyConfig = ({ form, formName, disabled, model, onModelC
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormGoDaddyConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormGoDaddyConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="apiKey"
|
||||
label={t("access.form.godaddy_api_key.label")}
|
||||
|
||||
@ -1,28 +1,27 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type HuaweiCloudAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormHuaweiCloudConfigModelType = Partial<HuaweiCloudAccessConfig>;
|
||||
type AccessEditFormHuaweiCloudConfigModelValues = Partial<HuaweiCloudAccessConfig>;
|
||||
|
||||
export type AccessEditFormHuaweiCloudConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormHuaweiCloudConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelType) => void;
|
||||
model?: AccessEditFormHuaweiCloudConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
|
||||
return {
|
||||
accessKeyId: "",
|
||||
secretAccessKey: "",
|
||||
region: "cn-north-1",
|
||||
} as AccessEditFormHuaweiCloudConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
|
||||
@ -48,18 +47,17 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onMo
|
||||
.nullish(),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormHuaweiCloudConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKeyId"
|
||||
label={t("access.form.huaweicloud_access_key_id.label")}
|
||||
|
||||
@ -7,21 +7,22 @@ import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
import { Upload as UploadIcon } from "lucide-react";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type KubernetesAccessConfig } from "@/domain/access";
|
||||
import { readFileContent } from "@/utils/file";
|
||||
|
||||
type AccessEditFormKubernetesConfigModelType = Partial<KubernetesAccessConfig>;
|
||||
type AccessEditFormKubernetesConfigModelValues = Partial<KubernetesAccessConfig>;
|
||||
|
||||
export type AccessEditFormKubernetesConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormKubernetesConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormKubernetesConfigModelType) => void;
|
||||
model?: AccessEditFormKubernetesConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormKubernetesConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
return {} as AccessEditFormKubernetesConfigModelType;
|
||||
const initFormModel = (): AccessEditFormKubernetesConfigModelValues => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormKubernetesConfigProps) => {
|
||||
@ -36,21 +37,21 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
|
||||
.nullish(),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const formInst = form as FormInstance<z.infer<typeof formSchema>>;
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
setKubeFileList(model?.kubeConfig?.trim() ? [{ uid: "-1", name: "kubeconfig", status: "done" }] : []);
|
||||
}, [model]);
|
||||
|
||||
const [kubeFileList, setKubeFileList] = useState<UploadFile[]>([]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormKubernetesConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormKubernetesConfigModelValues);
|
||||
};
|
||||
|
||||
const handleUploadChange: UploadProps["onChange"] = async ({ file }) => {
|
||||
const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
|
||||
if (file && file.status !== "removed") {
|
||||
formInst.setFieldValue("kubeConfig", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
|
||||
setKubeFileList([file]);
|
||||
@ -63,7 +64,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item name="kubeConfig" noStyle rules={[formRule]}>
|
||||
<Input.TextArea
|
||||
autoComplete="new-password"
|
||||
@ -76,7 +77,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
|
||||
label={t("access.form.k8s_kubeconfig.label")}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
|
||||
>
|
||||
<Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleUploadChange}>
|
||||
<Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleKubeFileChange}>
|
||||
<Button icon={<UploadIcon size={16} />}>{t("access.form.k8s_kubeconfig.upload")}</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
@ -1,30 +1,33 @@
|
||||
import { useState } from "react";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, type FormInstance } from "antd";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type LocalAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormLocalConfigModelType = Partial<LocalAccessConfig>;
|
||||
type AccessEditFormLocalConfigModelValues = Partial<LocalAccessConfig>;
|
||||
|
||||
export type AccessEditFormLocalConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormLocalConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormLocalConfigModelType) => void;
|
||||
model?: AccessEditFormLocalConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormLocalConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
return {} as AccessEditFormLocalConfigModelType;
|
||||
const initFormModel = (): AccessEditFormLocalConfigModelValues => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const AccessEditFormLocalConfig = ({ form, formName, disabled, model }: AccessEditFormLocalConfigProps) => {
|
||||
const [initialValues, setInitialValues] = useState(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
const AccessEditFormLocalConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormLocalConfigProps) => {
|
||||
const { form: formInst, formProps } = useAntdForm({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
return <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName}></Form>;
|
||||
const handleFormChange = (_: unknown, values: unknown) => {
|
||||
onModelChange?.(values as AccessEditFormLocalConfigModelValues);
|
||||
};
|
||||
|
||||
return <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}></Form>;
|
||||
};
|
||||
|
||||
export default AccessEditFormLocalConfig;
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type NameSiloAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormNameSiloConfigModelType = Partial<NameSiloAccessConfig>;
|
||||
type AccessEditFormNameSiloConfigModelValues = Partial<NameSiloAccessConfig>;
|
||||
|
||||
export type AccessEditFormNameSiloConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormNameSiloConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormNameSiloConfigModelType) => void;
|
||||
model?: AccessEditFormNameSiloConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormNameSiloConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormNameSiloConfigModelValues => {
|
||||
return {
|
||||
apiKey: "",
|
||||
} as AccessEditFormNameSiloConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameSiloConfigProps) => {
|
||||
@ -34,18 +33,17 @@ const AccessEditFormNameSiloConfig = ({ form, formName, disabled, model, onModel
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormNameSiloConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormNameSiloConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="apiKey"
|
||||
label={t("access.form.namesilo_api_key.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type PowerDNSAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormPowerDNSConfigModelType = Partial<PowerDNSAccessConfig>;
|
||||
type AccessEditFormPowerDNSConfigModelValues = Partial<PowerDNSAccessConfig>;
|
||||
|
||||
export type AccessEditFormPowerDNSConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormPowerDNSConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormPowerDNSConfigModelType) => void;
|
||||
model?: AccessEditFormPowerDNSConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormPowerDNSConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormPowerDNSConfigModelValues => {
|
||||
return {
|
||||
apiUrl: "",
|
||||
apiKey: "",
|
||||
} as AccessEditFormPowerDNSConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormPowerDNSConfigProps) => {
|
||||
@ -36,18 +35,17 @@ const AccessEditFormPowerDNSConfig = ({ form, formName, disabled, model, onModel
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormPowerDNSConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormPowerDNSConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="apiUrl"
|
||||
label={t("access.form.powerdns_api_url.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type QiniuAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormQiniuConfigModelType = Partial<QiniuAccessConfig>;
|
||||
type AccessEditFormQiniuConfigModelValues = Partial<QiniuAccessConfig>;
|
||||
|
||||
export type AccessEditFormQiniuConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormQiniuConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormQiniuConfigModelType) => void;
|
||||
model?: AccessEditFormQiniuConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormQiniuConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormQiniuConfigModelValues => {
|
||||
return {
|
||||
accessKey: "",
|
||||
secretKey: "",
|
||||
} as AccessEditFormQiniuConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormQiniuConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormQiniuConfig = ({ form, formName, disabled, model, onModelCha
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormQiniuConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormQiniuConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKey"
|
||||
label={t("access.form.qiniu_access_key.label")}
|
||||
|
||||
@ -7,25 +7,26 @@ import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
import { Upload as UploadIcon } from "lucide-react";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type SSHAccessConfig } from "@/domain/access";
|
||||
import { readFileContent } from "@/utils/file";
|
||||
|
||||
type AccessEditFormSSHConfigModelType = Partial<SSHAccessConfig>;
|
||||
type AccessEditFormSSHConfigModelValues = Partial<SSHAccessConfig>;
|
||||
|
||||
export type AccessEditFormSSHConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormSSHConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormSSHConfigModelType) => void;
|
||||
model?: AccessEditFormSSHConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormSSHConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormSSHConfigModelValues => {
|
||||
return {
|
||||
host: "127.0.0.1",
|
||||
port: 22,
|
||||
username: "root",
|
||||
} as AccessEditFormSSHConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormSSHConfigProps) => {
|
||||
@ -71,21 +72,21 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
|
||||
.and(z.string().refine((v) => !v || form.getFieldValue("key"), { message: t("access.form.ssh_key.placeholder") })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const formInst = form as FormInstance<z.infer<typeof formSchema>>;
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
|
||||
}, [model]);
|
||||
|
||||
const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormSSHConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormSSHConfigModelValues);
|
||||
};
|
||||
|
||||
const handleUploadChange: UploadProps["onChange"] = async ({ file }) => {
|
||||
const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
|
||||
if (file && file.status !== "removed") {
|
||||
formInst.setFieldValue("key", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
|
||||
setKeyFileList([file]);
|
||||
@ -98,7 +99,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-2/3">
|
||||
<Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
|
||||
@ -138,7 +139,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
|
||||
<Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.ssh_key.placeholder")} value={formInst.getFieldValue("key")} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("access.form.ssh_key.label")} tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_key.tooltip") }}></span>}>
|
||||
<Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleUploadChange}>
|
||||
<Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}>
|
||||
<Button icon={<UploadIcon size={16} />}>{t("access.form.ssh_key.upload")}</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type TencentCloudAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormTencentCloudConfigModelType = Partial<TencentCloudAccessConfig>;
|
||||
type AccessEditFormTencentCloudConfigModelValues = Partial<TencentCloudAccessConfig>;
|
||||
|
||||
export type AccessEditFormTencentCloudConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormTencentCloudConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormTencentCloudConfigModelType) => void;
|
||||
model?: AccessEditFormTencentCloudConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormTencentCloudConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormTencentCloudConfigModelValues => {
|
||||
return {
|
||||
secretId: "",
|
||||
secretKey: "",
|
||||
} as AccessEditFormTencentCloudConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormTencentCloudConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormTencentCloudConfig = ({ form, formName, disabled, model, onM
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormTencentCloudConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormTencentCloudConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="secretId"
|
||||
label={t("access.form.tencentcloud_secret_id.label")}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type VolcEngineAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormVolcEngineConfigModelType = Partial<VolcEngineAccessConfig>;
|
||||
type AccessEditFormVolcEngineConfigModelValues = Partial<VolcEngineAccessConfig>;
|
||||
|
||||
export type AccessEditFormVolcEngineConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormVolcEngineConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormVolcEngineConfigModelType) => void;
|
||||
model?: AccessEditFormVolcEngineConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormVolcEngineConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormVolcEngineConfigModelValues => {
|
||||
return {
|
||||
accessKeyId: "",
|
||||
secretAccessKey: "",
|
||||
} as AccessEditFormVolcEngineConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormVolcEngineConfigProps) => {
|
||||
@ -40,18 +39,17 @@ const AccessEditFormVolcEngineConfig = ({ form, formName, disabled, model, onMod
|
||||
.max(64, t("common.errmsg.string_max", { max: 64 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormVolcEngineConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormVolcEngineConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="accessKeyId"
|
||||
label={t("access.form.volcengine_access_key_id.label")}
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Form, Input, type FormInstance } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { type WebhookAccessConfig } from "@/domain/access";
|
||||
|
||||
type AccessEditFormWebhookConfigModelType = Partial<WebhookAccessConfig>;
|
||||
type AccessEditFormWebhookConfigModelValues = Partial<WebhookAccessConfig>;
|
||||
|
||||
export type AccessEditFormWebhookConfigProps = {
|
||||
form: FormInstance;
|
||||
formName: string;
|
||||
disabled?: boolean;
|
||||
model?: AccessEditFormWebhookConfigModelType;
|
||||
onModelChange?: (model: AccessEditFormWebhookConfigModelType) => void;
|
||||
model?: AccessEditFormWebhookConfigModelValues;
|
||||
onModelChange?: (model: AccessEditFormWebhookConfigModelValues) => void;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = (): AccessEditFormWebhookConfigModelValues => {
|
||||
return {
|
||||
url: "",
|
||||
} as AccessEditFormWebhookConfigModelType;
|
||||
};
|
||||
};
|
||||
|
||||
const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormWebhookConfigProps) => {
|
||||
@ -32,18 +32,17 @@ const AccessEditFormWebhookConfig = ({ form, formName, disabled, model, onModelC
|
||||
.url({ message: t("common.errmsg.url_invalid") }),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
form: form,
|
||||
initialValues: model ?? initFormModel(),
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
|
||||
useEffect(() => {
|
||||
setInitialValues(model ?? initModel());
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: AccessEditFormWebhookConfigModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
|
||||
onModelChange?.(values as AccessEditFormWebhookConfigModelValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
|
||||
<Form.Item name="url" label={t("access.form.webhook_url.label")} rules={[formRule]}>
|
||||
<Input placeholder={t("access.form.webhook_url.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
@ -53,7 +53,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
|
||||
await formRef.current!.validateFields();
|
||||
} catch (err) {
|
||||
setFormPending(false);
|
||||
return Promise.reject();
|
||||
return Promise.reject(err);
|
||||
}
|
||||
|
||||
try {
|
||||
@ -74,8 +74,6 @@ const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEdi
|
||||
setOpen(false);
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
|
||||
throw err;
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
|
||||
import { useCreation, useDeepCompareEffect } from "ahooks";
|
||||
import { forwardRef, useImperativeHandle, useMemo } from "react";
|
||||
import { useCreation } from "ahooks";
|
||||
import { Form } from "antd";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { NOTIFY_CHANNELS, type NotifyChannelsSettingsContent } from "@/domain/settings";
|
||||
import NotifyChannelEditFormBarkFields from "./NotifyChannelEditFormBarkFields";
|
||||
import NotifyChannelEditFormDingTalkFields from "./NotifyChannelEditFormDingTalkFields";
|
||||
@ -12,26 +13,28 @@ import NotifyChannelEditFormTelegramFields from "./NotifyChannelEditFormTelegram
|
||||
import NotifyChannelEditFormWebhookFields from "./NotifyChannelEditFormWebhookFields";
|
||||
import NotifyChannelEditFormWeComFields from "./NotifyChannelEditFormWeComFields";
|
||||
|
||||
type NotifyChannelEditFormModelType = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
|
||||
type NotifyChannelEditFormModelValues = NotifyChannelsSettingsContent[keyof NotifyChannelsSettingsContent];
|
||||
|
||||
export type NotifyChannelEditFormProps = {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
channel: string;
|
||||
disabled?: boolean;
|
||||
model?: NotifyChannelEditFormModelType;
|
||||
onModelChange?: (model: NotifyChannelEditFormModelType) => void;
|
||||
model?: NotifyChannelEditFormModelValues;
|
||||
onModelChange?: (model: NotifyChannelEditFormModelValues) => void;
|
||||
};
|
||||
|
||||
export type NotifyChannelEditFormInstance = {
|
||||
getFieldsValue: () => NotifyChannelEditFormModelType;
|
||||
getFieldsValue: () => NotifyChannelEditFormModelValues;
|
||||
resetFields: () => void;
|
||||
validateFields: () => Promise<NotifyChannelEditFormModelType>;
|
||||
validateFields: () => Promise<NotifyChannelEditFormModelValues>;
|
||||
};
|
||||
|
||||
const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyChannelEditFormProps>(
|
||||
({ className, style, channel, disabled, model, onModelChange }, ref) => {
|
||||
const [form] = Form.useForm();
|
||||
const { form: formInst, formProps } = useAntdForm({
|
||||
initialValues: model,
|
||||
});
|
||||
const formName = useCreation(() => `notifyChannelEditForm_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
|
||||
const formFieldsComponent = useMemo(() => {
|
||||
/*
|
||||
@ -58,36 +61,31 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
|
||||
}
|
||||
}, [channel]);
|
||||
|
||||
const [initialValues, setInitialValues] = useState(model);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(model);
|
||||
}, [model]);
|
||||
|
||||
const handleFormChange = (_: unknown, fields: NotifyChannelEditFormModelType) => {
|
||||
onModelChange?.(fields);
|
||||
const handleFormChange = (_: unknown, values: NotifyChannelEditFormModelValues) => {
|
||||
onModelChange?.(values);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getFieldsValue: () => {
|
||||
return form.getFieldsValue(true);
|
||||
return formInst.getFieldsValue(true);
|
||||
},
|
||||
resetFields: () => {
|
||||
return form.resetFields();
|
||||
return formInst.resetFields();
|
||||
},
|
||||
validateFields: () => {
|
||||
return form.validateFields();
|
||||
return formInst.validateFields();
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<Form
|
||||
{...formProps}
|
||||
className={className}
|
||||
style={style}
|
||||
form={form}
|
||||
form={formInst}
|
||||
disabled={disabled}
|
||||
initialValues={initialValues}
|
||||
layout="vertical"
|
||||
name={formName}
|
||||
layout="vertical"
|
||||
onValuesChange={handleFormChange}
|
||||
>
|
||||
{formFieldsComponent}
|
||||
|
||||
@ -56,13 +56,13 @@ const NotifyChannelEditFormEmailFields = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-2/5">
|
||||
<Form.Item name="smtpPort" label={t("settings.notification.channel.form.email_smtp_port.label")} rules={[formRule]} initialValue={465}>
|
||||
<Form.Item name="smtpPort" label={t("settings.notification.channel.form.email_smtp_port.label")} rules={[formRule]}>
|
||||
<InputNumber className="w-full" placeholder={t("settings.notification.channel.form.email_smtp_port.placeholder")} min={1} max={65535} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div className="w-1/5">
|
||||
<Form.Item name="smtpTLS" label={t("settings.notification.channel.form.email_smtp_tls.label")} rules={[formRule]} initialValue={true}>
|
||||
<Form.Item name="smtpTLS" label={t("settings.notification.channel.form.email_smtp_tls.label")} rules={[formRule]}>
|
||||
<Switch onChange={handleTLSSwitchChange} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
@ -25,10 +25,10 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
|
||||
const { channels, setChannel } = useNotifyChannelStore();
|
||||
|
||||
const channelConfig = useDeepCompareMemo(() => channels[channel], [channels, channel]);
|
||||
const [channelFormChanged, setChannelFormChanged] = useState(false);
|
||||
const channelFormRef = useRef<NotifyChannelEditFormInstance>(null);
|
||||
const [channelFormChanged, setChannelFormChanged] = useState(false);
|
||||
|
||||
const handleClickSubmit = async () => {
|
||||
const handleSubmit = async () => {
|
||||
await channelFormRef.current!.validateFields();
|
||||
|
||||
try {
|
||||
@ -49,7 +49,7 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
|
||||
<NotifyChannelEditForm ref={channelFormRef} className="mt-2" channel={channel} model={channelConfig} onModelChange={() => setChannelFormChanged(true)} />
|
||||
|
||||
<Space className="mb-2">
|
||||
<Button type="primary" disabled={!channelFormChanged} onClick={handleClickSubmit}>
|
||||
<Button type="primary" disabled={!channelFormChanged} onClick={handleSubmit}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ import { z } from "zod";
|
||||
import { ClientResponseError } from "pocketbase";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { defaultNotifyTemplate, SETTINGS_NAMES, type NotifyTemplatesSettingsContent } from "@/domain/settings";
|
||||
import { get as getSettings, save as saveSettings } from "@/repository/settings";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
@ -35,11 +36,29 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
|
||||
.max(1000, t("common.errmsg.string_max", { max: 1000 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
const {
|
||||
form: formInst,
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: defaultNotifyTemplate,
|
||||
onSubmit: async (values) => {
|
||||
try {
|
||||
const settings = await getSettings<NotifyTemplatesSettingsContent>(SETTINGS_NAMES.NOTIFY_TEMPLATES);
|
||||
await saveSettings<NotifyTemplatesSettingsContent>({
|
||||
...settings,
|
||||
content: {
|
||||
notifyTemplates: [values],
|
||||
},
|
||||
});
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>();
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
}
|
||||
},
|
||||
});
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
|
||||
const { loading } = useRequest(
|
||||
() => {
|
||||
@ -55,33 +74,13 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
|
||||
},
|
||||
onFinally: (_, resp) => {
|
||||
const template = resp?.content?.notifyTemplates?.[0] ?? defaultNotifyTemplate;
|
||||
setInitialValues(template);
|
||||
formInst.setFieldsValue(template);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
const settings = await getSettings<NotifyTemplatesSettingsContent>(SETTINGS_NAMES.NOTIFY_TEMPLATES);
|
||||
await saveSettings<NotifyTemplatesSettingsContent>({
|
||||
...settings,
|
||||
content: {
|
||||
notifyTemplates: [fields],
|
||||
},
|
||||
});
|
||||
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
setFormChanged(true);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -90,11 +89,11 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
|
||||
{NotificationContextHolder}
|
||||
|
||||
<Show when={!loading} fallback={<Skeleton active />}>
|
||||
<Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
|
||||
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
|
||||
<Form.Item
|
||||
name="subject"
|
||||
label={t("settings.notification.template.form.subject.label")}
|
||||
extra={t("settings.notification.template.form.subject.tooltip")}
|
||||
extra={t("settings.notification.template.form.subject.extra")}
|
||||
rules={[formRule]}
|
||||
>
|
||||
<Input placeholder={t("settings.notification.template.form.subject.placeholder")} onChange={handleInputChange} />
|
||||
@ -103,7 +102,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
|
||||
<Form.Item
|
||||
name="message"
|
||||
label={t("settings.notification.template.form.message.label")}
|
||||
extra={t("settings.notification.template.form.message.tooltip")}
|
||||
extra={t("settings.notification.template.form.message.extra")}
|
||||
rules={[formRule]}
|
||||
>
|
||||
<Input.TextArea
|
||||
@ -114,7 +113,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={formPending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { memo, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Collapse, Switch, Tooltip } from "antd";
|
||||
import { Collapse, Divider, Switch, Tooltip, Typography } from "antd";
|
||||
import z from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ChevronsUpDown as ChevronsUpDownIcon, Plus as PlusIcon, CircleHelp as CircleHelpIcon } from "lucide-react";
|
||||
@ -204,146 +204,145 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<hr />
|
||||
<Collapse
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
items={[
|
||||
{
|
||||
key: "advanced",
|
||||
styles: {
|
||||
header: { paddingLeft: 0, paddingRight: 0 },
|
||||
body: { paddingLeft: 0, paddingRight: 0 },
|
||||
},
|
||||
label: <>{t("domain.application.form.advanced_settings.label")}</>,
|
||||
children: (
|
||||
<div className="flex flex-col space-y-8">
|
||||
{/* 证书算法 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keyAlgorithm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("domain.application.form.key_algorithm.label")}</FormLabel>
|
||||
<Select
|
||||
<Divider />
|
||||
|
||||
<Collapse
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
items={[
|
||||
{
|
||||
key: "advanced",
|
||||
styles: {
|
||||
header: { paddingLeft: 0, paddingRight: 0 },
|
||||
body: { paddingLeft: 0, paddingRight: 0 },
|
||||
},
|
||||
label: <Typography.Text type="secondary">{t("domain.application.form.advanced_settings.label")}</Typography.Text>,
|
||||
children: (
|
||||
<div className="flex flex-col space-y-8">
|
||||
{/* 证书算法 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="keyAlgorithm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("domain.application.form.key_algorithm.label")}</FormLabel>
|
||||
<Select
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("keyAlgorithm", value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t("domain.application.form.key_algorithm.placeholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="RSA2048">RSA2048</SelectItem>
|
||||
<SelectItem value="RSA3072">RSA3072</SelectItem>
|
||||
<SelectItem value="RSA4096">RSA4096</SelectItem>
|
||||
<SelectItem value="RSA8192">RSA8192</SelectItem>
|
||||
<SelectItem value="EC256">EC256</SelectItem>
|
||||
<SelectItem value="EC384">EC384</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* DNS */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nameservers"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<StringList
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(val: string) => {
|
||||
form.setValue("nameservers", val);
|
||||
}}
|
||||
valueType="dns"
|
||||
></StringList>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* DNS 超时时间 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="timeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("domain.application.form.timeout.label")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t("domain.application.form.timeout.placeholder")}
|
||||
{...field}
|
||||
value={field.value}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("keyAlgorithm", value);
|
||||
onChange={(e) => {
|
||||
form.setValue("timeout", parseInt(e.target.value));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t("domain.application.form.key_algorithm.placeholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="RSA2048">RSA2048</SelectItem>
|
||||
<SelectItem value="RSA3072">RSA3072</SelectItem>
|
||||
<SelectItem value="RSA4096">RSA4096</SelectItem>
|
||||
<SelectItem value="RSA8192">RSA8192</SelectItem>
|
||||
<SelectItem value="EC256">EC256</SelectItem>
|
||||
<SelectItem value="EC384">EC384</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* DNS */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nameservers"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<StringList
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(val: string) => {
|
||||
form.setValue("nameservers", val);
|
||||
}}
|
||||
valueType="dns"
|
||||
></StringList>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* DNS 超时时间 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="timeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("domain.application.form.timeout.label")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t("domain.application.form.timeout.placeholder")}
|
||||
{...field}
|
||||
value={field.value}
|
||||
onChange={(e) => {
|
||||
form.setValue("timeout", parseInt(e.target.value));
|
||||
{/* 禁用 CNAME 跟随 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="disableFollowCNAME"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
<div className="flex">
|
||||
<span className="mr-1">{t("domain.application.form.disable_follow_cname.label")} </span>
|
||||
<Tooltip
|
||||
title={
|
||||
<p>
|
||||
{t("domain.application.form.disable_follow_cname.tips")}
|
||||
<a
|
||||
className="text-primary"
|
||||
target="_blank"
|
||||
href="https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname"
|
||||
>
|
||||
{t("domain.application.form.disable_follow_cname.tips_link")}
|
||||
</a>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<CircleHelpIcon size={14} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div>
|
||||
<Switch
|
||||
defaultChecked={field.value}
|
||||
onChange={(value) => {
|
||||
form.setValue(field.name, value);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 禁用 CNAME 跟随 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="disableFollowCNAME"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
<div className="flex">
|
||||
<span className="mr-1">{t("domain.application.form.disable_follow_cname.label")} </span>
|
||||
<Tooltip
|
||||
title={
|
||||
<p>
|
||||
{t("domain.application.form.disable_follow_cname.tips")}
|
||||
<a
|
||||
className="text-primary"
|
||||
target="_blank"
|
||||
href="https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname"
|
||||
>
|
||||
{t("domain.application.form.disable_follow_cname.tips_link")}
|
||||
</a>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<CircleHelpIcon size={14} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div>
|
||||
<Switch
|
||||
defaultChecked={field.value}
|
||||
onChange={(value) => {
|
||||
form.setValue(field.name, value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
extra: <ChevronsUpDownIcon size={14} />,
|
||||
forceRender: true,
|
||||
showArrow: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
extra: <ChevronsUpDownIcon size={14} />,
|
||||
forceRender: true,
|
||||
showArrow: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">{t("common.button.save")}</Button>
|
||||
|
||||
@ -13,9 +13,9 @@ const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-[640px] p-0">
|
||||
<SheetTitle className="bg-primary p-4 text-white">{name}</SheetTitle>
|
||||
<SheetTitle className="bg-primary px-6 py-4 text-white">{name}</SheetTitle>
|
||||
|
||||
<ScrollArea className="p-10 flex-col space-y-5 h-[90vh]">{children}</ScrollArea>
|
||||
<ScrollArea className="px-6 py-4 flex-col space-y-5 h-[90vh]">{children}</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
|
||||
@ -16,7 +16,7 @@ export type StartNodeFormProps = {
|
||||
data: WorkflowNode;
|
||||
};
|
||||
|
||||
const initModel = () => {
|
||||
const initFormModel = () => {
|
||||
return {
|
||||
executionMethod: "auto",
|
||||
crontab: "0 0 * * *",
|
||||
@ -51,9 +51,11 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>((data?.config as Partial<z.infer<typeof formSchema>>) ?? initModel());
|
||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
|
||||
(data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel()
|
||||
);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues((data?.config as Partial<z.infer<typeof formSchema>>) ?? initModel());
|
||||
setInitialValues((data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel());
|
||||
}, [data?.config]);
|
||||
|
||||
const [triggerType, setTriggerType] = useState(data?.config?.executionMethod);
|
||||
@ -67,7 +69,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
setTriggerType(value);
|
||||
|
||||
if (value === "auto") {
|
||||
form.setFieldValue("crontab", form.getFieldValue("crontab") || initModel().crontab);
|
||||
form.setFieldValue("crontab", form.getFieldValue("crontab") || initFormModel().crontab);
|
||||
}
|
||||
};
|
||||
|
||||
@ -75,11 +77,11 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
||||
setTriggerCronExecutions(getNextCronExecutions(value, 5));
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
const handleFormFinish = async (values: z.infer<typeof formSchema>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
await updateNode({ ...data, config: { ...fields }, validated: true });
|
||||
await updateNode({ ...data, config: { ...values }, validated: true });
|
||||
|
||||
hidePanel();
|
||||
} finally {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import useBrowserTheme from "./useBrowserTheme";
|
||||
import useAntdForm from "./useAntdForm";
|
||||
import useBrowserTheme from "./useBrowserTheme";
|
||||
import useZustandShallowSelector from "./useZustandShallowSelector";
|
||||
|
||||
export { useBrowserTheme, useZustandShallowSelector };
|
||||
export { useAntdForm, useBrowserTheme, useZustandShallowSelector };
|
||||
|
||||
106
ui/src/hooks/useAntdForm.ts
Normal file
106
ui/src/hooks/useAntdForm.ts
Normal file
@ -0,0 +1,106 @@
|
||||
import { useState } from "react";
|
||||
import { Form, type FormInstance, type FormProps } from "antd";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
|
||||
export interface UseAntdFormOptions<T extends NonNullable<unknown> = any> {
|
||||
form?: FormInstance<T>;
|
||||
initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>);
|
||||
onSubmit?: (values: T) => void | Promise<void>;
|
||||
}
|
||||
|
||||
export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
|
||||
form: FormInstance<T>;
|
||||
formProps: Omit<FormProps<T>, "children">;
|
||||
formPending: boolean;
|
||||
submit: (values?: T) => Promise<any>;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {UseAntdFormOptions} options
|
||||
* @returns {UseAntdFormReturns}
|
||||
*/
|
||||
const useAntdForm = <T extends NonNullable<unknown> = any>({ initialValues, form, onSubmit }: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
|
||||
const formInst = form ?? Form["useForm"]()[0];
|
||||
const [formInitialValues, setFormInitialValues] = useState<Partial<T>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
|
||||
useDeepCompareEffect(() => {
|
||||
let unmounted = false;
|
||||
|
||||
if (!initialValues) {
|
||||
return;
|
||||
}
|
||||
|
||||
let temp: Promise<Partial<T>>;
|
||||
if (typeof initialValues === "function") {
|
||||
temp = Promise.resolve(initialValues());
|
||||
} else {
|
||||
temp = Promise.resolve(initialValues);
|
||||
}
|
||||
|
||||
temp.then((temp) => {
|
||||
if (!unmounted) {
|
||||
type FieldName = Parameters<FormInstance<T>["getFieldValue"]>[0];
|
||||
type FieldsValue = Parameters<FormInstance<T>["setFieldsValue"]>[0];
|
||||
|
||||
const obj = { ...temp };
|
||||
Object.keys(temp).forEach((key) => {
|
||||
obj[key as keyof T] = formInst!.isFieldTouched(key as FieldName) ? formInst!.getFieldValue(key as FieldName) : temp[key as keyof T];
|
||||
});
|
||||
|
||||
setFormInitialValues(temp);
|
||||
formInst!.setFieldsValue(obj as FieldsValue);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unmounted = true;
|
||||
};
|
||||
}, [formInst, initialValues]);
|
||||
|
||||
const onFinish = (values: T) => {
|
||||
if (formPending) return Promise.reject(new Error("Form is pending"));
|
||||
|
||||
setFormPending(true);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
formInst
|
||||
.validateFields()
|
||||
.then(() => {
|
||||
resolve(
|
||||
Promise.resolve(onSubmit?.(values))
|
||||
.then((data) => {
|
||||
setFormPending(false);
|
||||
return data;
|
||||
})
|
||||
.catch((err) => {
|
||||
setFormPending(false);
|
||||
throw err;
|
||||
})
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
setFormPending(false);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const formProps: FormProps = {
|
||||
form: formInst,
|
||||
initialValues: formInitialValues,
|
||||
onFinish,
|
||||
};
|
||||
|
||||
return {
|
||||
form: formInst,
|
||||
formProps: formProps,
|
||||
formPending: formPending,
|
||||
submit: () => {
|
||||
return onFinish(formInst.getFieldsValue(true));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default useAntdForm;
|
||||
@ -1,5 +1,13 @@
|
||||
import { useTheme } from "ahooks";
|
||||
|
||||
export default function () {
|
||||
export type UseBrowserThemeReturns = ReturnType<typeof useTheme>;
|
||||
|
||||
/**
|
||||
* 获取并设置当前浏览器系统主题。
|
||||
* @returns {UseBrowserThemeReturns}
|
||||
*/
|
||||
const useBrowserTheme = (): UseBrowserThemeReturns => {
|
||||
return useTheme({ localStorageKey: "certimate-ui-theme" });
|
||||
}
|
||||
};
|
||||
|
||||
export default useBrowserTheme;
|
||||
|
||||
@ -5,7 +5,28 @@ import { shallow } from "zustand/shallow";
|
||||
|
||||
type MaybeMany<T> = T | readonly T[];
|
||||
|
||||
export default function <T extends object, TKeys extends keyof T>(paths: MaybeMany<TKeys>): (state: T) => Pick<T, TKeys> {
|
||||
export type UseZustandShallowSelectorReturns<T extends object, TKeys extends keyof T> = (state: T) => Pick<T, TKeys>;
|
||||
|
||||
/**
|
||||
* 选择并获取指定的状态。
|
||||
* 基于 `zustand.useShallow` 二次封装，以减少样板代码。
|
||||
* @param {Array} paths 要选择的状态键名。
|
||||
* @returns {UseZustandShallowSelectorReturns}
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // 使用示例：
|
||||
* const { foo, bar, baz } = useStore(useZustandShallowSelector(["foo", "bar", "baz"]));
|
||||
*
|
||||
* // 以上代码等效于：
|
||||
* const { foo, bar, baz } = useStore((state) => ({
|
||||
* foo: state.foo,
|
||||
* bar: state.bar,
|
||||
* baz: state.baz,
|
||||
* }));
|
||||
* ```
|
||||
*/
|
||||
const useZustandShallowSelector = <T extends object, TKeys extends keyof T>(paths: MaybeMany<TKeys>): UseZustandShallowSelectorReturns<T, TKeys> => {
|
||||
const prev = useRef<Pick<T, TKeys>>({} as Pick<T, TKeys>);
|
||||
|
||||
return (state: T) => {
|
||||
@ -15,4 +36,6 @@ export default function <T extends object, TKeys extends keyof T>(paths: MaybeMa
|
||||
}
|
||||
return prev.current;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default useZustandShallowSelector;
|
||||
|
||||
@ -19,10 +19,10 @@
|
||||
"settings.notification.template.card.title": "Template",
|
||||
"settings.notification.template.form.subject.label": "Subject",
|
||||
"settings.notification.template.form.subject.placeholder": "Please enter notification subject",
|
||||
"settings.notification.template.form.subject.tooltip": "Optional variables (${COUNT}: number of expiring soon)",
|
||||
"settings.notification.template.form.subject.extra": "Optional variables (${COUNT}: number of expiring soon)",
|
||||
"settings.notification.template.form.message.label": "Message",
|
||||
"settings.notification.template.form.message.placeholder": "Please enter notification message",
|
||||
"settings.notification.template.form.message.tooltip": "Optional variables (${COUNT}: number of expiring soon. ${DOMAINS}: Domain list)",
|
||||
"settings.notification.template.form.message.extra": "Optional variables (${COUNT}: number of expiring soon. ${DOMAINS}: Domain list)",
|
||||
"settings.notification.channels.card.title": "Channels",
|
||||
"settings.notification.channel.enabled.on": "On",
|
||||
"settings.notification.channel.enabled.off": "Off",
|
||||
|
||||
@ -19,10 +19,10 @@
|
||||
"settings.notification.template.card.title": "通知模板",
|
||||
"settings.notification.template.form.subject.label": "通知主题",
|
||||
"settings.notification.template.form.subject.placeholder": "请输入通知主题",
|
||||
"settings.notification.template.form.subject.tooltip": "可选的变量（${COUNT}: 即将过期张数）",
|
||||
"settings.notification.template.form.subject.extra": "可选的变量（${COUNT}: 即将过期张数）",
|
||||
"settings.notification.template.form.message.label": "通知内容",
|
||||
"settings.notification.template.form.message.placeholder": "请输入通知内容",
|
||||
"settings.notification.template.form.message.tooltip": "可选的变量（${COUNT}: 即将过期张数；${DOMAINS}: 域名列表）",
|
||||
"settings.notification.template.form.message.extra": "可选的变量（${COUNT}: 即将过期张数；${DOMAINS}: 域名列表）",
|
||||
"settings.notification.channels.card.title": "通知渠道",
|
||||
"settings.notification.channel.enabled.on": "启用",
|
||||
"settings.notification.channel.enabled.off": "未启用",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Navigate, Outlet } from "react-router-dom";
|
||||
|
||||
import Version from "@/components/ui/Version";
|
||||
import Version from "@/components/core/Version";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
|
||||
const AuthLayout = () => {
|
||||
|
||||
@ -15,7 +15,7 @@ import {
|
||||
Workflow as WorkflowIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
import Version from "@/components/ui/Version";
|
||||
import Version from "@/components/core/Version";
|
||||
import { useBrowserTheme } from "@/hooks";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Card, Form, Input, notification } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
|
||||
@ -20,21 +20,20 @@ const Login = () => {
|
||||
password: z.string().min(10, t("login.password.errmsg.invalid")),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
await getPocketBase().admins.authWithPassword(fields.username, fields.password);
|
||||
navigage("/");
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
};
|
||||
const {
|
||||
form: formInst,
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
onSubmit: async (values) => {
|
||||
try {
|
||||
await getPocketBase().admins.authWithPassword(values.username, values.password);
|
||||
navigage("/");
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -45,7 +44,7 @@ const Login = () => {
|
||||
<img src="/logo.svg" className="w-16" />
|
||||
</div>
|
||||
|
||||
<Form form={form} disabled={formPending} layout="vertical" onFinish={handleFormFinish}>
|
||||
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
|
||||
<Form.Item name="username" label={t("login.username.label")} rules={[formRule]}>
|
||||
<Input placeholder={t("login.username.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
@ -5,8 +5,9 @@ import { Button, Form, Input, message, notification } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
|
||||
const SettingsAccount = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -20,37 +21,35 @@ const SettingsAccount = () => {
|
||||
username: z.string({ message: "settings.account.form.email.placeholder" }).email({ message: t("common.errmsg.email_invalid") }),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
const {
|
||||
form: formInst,
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: {
|
||||
username: getPocketBase().authStore.model?.email,
|
||||
},
|
||||
onSubmit: async (values) => {
|
||||
try {
|
||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||
email: values.username,
|
||||
});
|
||||
|
||||
const [initialValues] = useState<Partial<z.infer<typeof formSchema>>>({
|
||||
username: getPocketBase().authStore.model?.email,
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
|
||||
setTimeout(() => {
|
||||
getPocketBase().authStore.clear();
|
||||
navigate("/login");
|
||||
}, 500);
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
}
|
||||
},
|
||||
});
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
|
||||
const handleInputChange = () => {
|
||||
setInitialChanged(form.getFieldValue("username") !== initialValues.username);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||
email: fields.username,
|
||||
});
|
||||
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
|
||||
setTimeout(() => {
|
||||
getPocketBase().authStore.clear();
|
||||
navigate("/login");
|
||||
}, 500);
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
setFormChanged(formInst.getFieldValue("username") !== formProps.initialValues?.username);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -59,13 +58,13 @@ const SettingsAccount = () => {
|
||||
{NotificationContextHolder}
|
||||
|
||||
<div className="md:max-w-[40rem]">
|
||||
<Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
|
||||
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
|
||||
<Form.Item name="username" label={t("settings.account.form.email.label")} rules={[formRule]}>
|
||||
<Input placeholder={t("settings.account.form.email.placeholder")} onChange={handleInputChange} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={formPending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@ -5,8 +5,9 @@ import { Button, Form, Input, message, notification } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { getPocketBase } from "@/repository/pocketbase";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
|
||||
const SettingsPassword = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -33,37 +34,36 @@ const SettingsPassword = () => {
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
const {
|
||||
form: formInst,
|
||||
formPending,
|
||||
formProps,
|
||||
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||
onSubmit: async (values) => {
|
||||
try {
|
||||
await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, values.oldPassword);
|
||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||
password: values.newPassword,
|
||||
passwordConfirm: values.confirmPassword,
|
||||
});
|
||||
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
|
||||
setTimeout(() => {
|
||||
getPocketBase().authStore.clear();
|
||||
navigate("/login");
|
||||
}, 500);
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
|
||||
const handleInputChange = () => {
|
||||
const fields = form.getFieldsValue();
|
||||
setInitialChanged(!!fields.oldPassword && !!fields.newPassword && !!fields.confirmPassword);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, fields.oldPassword);
|
||||
await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
|
||||
password: fields.newPassword,
|
||||
passwordConfirm: fields.confirmPassword,
|
||||
});
|
||||
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
|
||||
setTimeout(() => {
|
||||
getPocketBase().authStore.clear();
|
||||
navigate("/login");
|
||||
}, 500);
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
const values = formInst.getFieldsValue();
|
||||
setFormChanged(!!values.oldPassword && !!values.newPassword && !!values.confirmPassword);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -72,7 +72,7 @@ const SettingsPassword = () => {
|
||||
{NotificationContextHolder}
|
||||
|
||||
<div className="md:max-w-[40rem]">
|
||||
<Form form={form} disabled={formPending} layout="vertical" onFinish={handleFormFinish}>
|
||||
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
|
||||
<Form.Item name="oldPassword" label={t("settings.password.form.old_password.label")} rules={[formRule]}>
|
||||
<Input.Password placeholder={t("settings.password.form.old_password.placeholder")} onChange={handleInputChange} />
|
||||
</Form.Item>
|
||||
@ -86,7 +86,7 @@ const SettingsPassword = () => {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={formPending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={formPending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import { createContext, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
import { Button, Form, Input, message, notification, Skeleton } from "antd";
|
||||
import { CheckCard } from "@ant-design/pro-components";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { useAntdForm } from "@/hooks";
|
||||
import { SETTINGS_NAMES, SSLPROVIDERS, type SettingsModel, type SSLProviderSettingsContent, type SSLProviders } from "@/domain/settings";
|
||||
import { get as getSettings, save as saveSettings } from "@/repository/settings";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
|
||||
const SSLProviderContext = createContext(
|
||||
{} as {
|
||||
@ -24,36 +26,35 @@ const SSLProviderEditFormLetsEncryptConfig = () => {
|
||||
|
||||
const { pending, settings, updateSettings } = useContext(SSLProviderContext);
|
||||
|
||||
const [form] = Form.useForm<NonNullable<unknown>>();
|
||||
const { form: formInst, formProps } = useAntdForm<NonNullable<unknown>>({
|
||||
initialValues: settings?.content?.config?.[SSLPROVIDERS.LETS_ENCRYPT],
|
||||
onSubmit: async (values) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.LETS_ENCRYPT;
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.LETS_ENCRYPT]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.LETS_ENCRYPT] = values;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setFormChanged(false);
|
||||
},
|
||||
});
|
||||
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.LETS_ENCRYPT]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.LETS_ENCRYPT);
|
||||
setFormChanged(settings?.content?.provider !== SSLPROVIDERS.LETS_ENCRYPT);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: NonNullable<unknown>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.LETS_ENCRYPT;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.LETS_ENCRYPT] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
setFormChanged(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@ -77,34 +78,33 @@ const SSLProviderEditFormZeroSSLConfig = () => {
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: settings?.content?.config?.[SSLPROVIDERS.ZERO_SSL],
|
||||
onSubmit: async (values) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.ZERO_SSL;
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.ZERO_SSL]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.ZERO_SSL] = values;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setFormChanged(false);
|
||||
},
|
||||
});
|
||||
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.ZERO_SSL]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.ZERO_SSL);
|
||||
setFormChanged(settings?.content?.provider !== SSLPROVIDERS.ZERO_SSL);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.ZERO_SSL;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.ZERO_SSL] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
setFormChanged(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="eabKid"
|
||||
label={t("settings.sslprovider.form.zerossl_eab_kid.label")}
|
||||
@ -124,7 +124,7 @@ const SSLProviderEditFormZeroSSLConfig = () => {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@ -148,34 +148,33 @@ const SSLProviderEditFormGoogleTrustServicesConfig = () => {
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
|
||||
initialValues: settings?.content?.config?.[SSLPROVIDERS.GOOGLE_TRUST_SERVICES],
|
||||
onSubmit: async (values) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.GOOGLE_TRUST_SERVICES;
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.GOOGLE_TRUST_SERVICES]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.GOOGLE_TRUST_SERVICES] = values;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setFormChanged(false);
|
||||
},
|
||||
});
|
||||
|
||||
const [formChanged, setFormChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.GOOGLE_TRUST_SERVICES]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.GOOGLE_TRUST_SERVICES);
|
||||
setFormChanged(settings?.content?.provider !== SSLPROVIDERS.GOOGLE_TRUST_SERVICES);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.GOOGLE_TRUST_SERVICES;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.GOOGLE_TRUST_SERVICES] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
setFormChanged(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="eabKid"
|
||||
label={t("settings.sslprovider.form.gts_eab_kid.label")}
|
||||
@ -195,7 +194,7 @@ const SSLProviderEditFormGoogleTrustServicesConfig = () => {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
<Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@ -228,7 +227,7 @@ const SettingsSSLProvider = () => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const [providerType, setFormProviderType] = useState<SSLProviders>();
|
||||
const [providerType, setFormProviderType] = useState<SSLProviders>(SSLPROVIDERS.LETS_ENCRYPT);
|
||||
const providerFormComponent = useMemo(() => {
|
||||
switch (providerType) {
|
||||
case SSLPROVIDERS.LETS_ENCRYPT:
|
||||
@ -267,33 +266,29 @@ const SettingsSSLProvider = () => {
|
||||
{MessageContextHolder}
|
||||
{NotificationContextHolder}
|
||||
|
||||
{loading ? (
|
||||
<Skeleton active />
|
||||
) : (
|
||||
<>
|
||||
<Form form={form} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
|
||||
<Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")} initialValue={SSLPROVIDERS.LETS_ENCRYPT}>
|
||||
<CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/letsencrypt.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Let's Encrypt"
|
||||
value={SSLPROVIDERS.LETS_ENCRYPT}
|
||||
/>
|
||||
<CheckCard avatar={<img src={"/imgs/acme/zerossl.svg"} className="size-8" />} size="small" title="ZeroSSL" value={SSLPROVIDERS.ZERO_SSL} />
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/google.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Google Trust Services"
|
||||
value={SSLPROVIDERS.GOOGLE_TRUST_SERVICES}
|
||||
/>
|
||||
</CheckCard.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Show when={!loading} fallback={<Skeleton active />}>
|
||||
<Form form={form} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
|
||||
<Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")}>
|
||||
<CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/letsencrypt.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Let's Encrypt"
|
||||
value={SSLPROVIDERS.LETS_ENCRYPT}
|
||||
/>
|
||||
<CheckCard avatar={<img src={"/imgs/acme/zerossl.svg"} className="size-8" />} size="small" title="ZeroSSL" value={SSLPROVIDERS.ZERO_SSL} />
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/google.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Google Trust Services"
|
||||
value={SSLPROVIDERS.GOOGLE_TRUST_SERVICES}
|
||||
/>
|
||||
</CheckCard.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="md:max-w-[40rem]">{providerFormComponent}</div>
|
||||
</>
|
||||
)}
|
||||
<div className="md:max-w-[40rem]">{providerFormComponent}</div>
|
||||
</Show>
|
||||
</SSLProviderContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -57,9 +57,9 @@ const WorkflowDetail = () => {
|
||||
return elements;
|
||||
}, [workflow]);
|
||||
|
||||
const handleBaseInfoFormFinish = async (fields: Pick<WorkflowModel, "name" | "description">) => {
|
||||
const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
|
||||
try {
|
||||
await setBaseInfo(fields.name!, fields.description!);
|
||||
await setBaseInfo(values.name!, values.description!);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
@ -93,6 +93,7 @@ const WorkflowDetail = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// TODO: 发布更改 撤销更改 立即执行
|
||||
// const handleWorkflowSaveClick = () => {
|
||||
// if (!allNodesValidated(workflow.draft as WorkflowNode)) {
|
||||
// messageApi.warning(t("workflow.detail.action.save.failed.uncompleted"));
|
||||
@ -192,7 +193,7 @@ const WorkflowBaseInfoModalForm = memo(
|
||||
}: {
|
||||
model: Pick<WorkflowModel, "name" | "description">;
|
||||
trigger?: React.ReactElement;
|
||||
onFinish?: (fields: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
|
||||
onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
|
||||
@ -34,14 +34,14 @@ export type WorkflowState = {
|
||||
export const useWorkflowStore = create<WorkflowState>((set, get) => ({
|
||||
workflow: {
|
||||
id: "",
|
||||
name: "placeholder",
|
||||
name: "",
|
||||
type: WorkflowNodeType.Start,
|
||||
} as WorkflowModel,
|
||||
initialized: false,
|
||||
init: async (id?: string) => {
|
||||
let data = {
|
||||
id: "",
|
||||
name: "placeholder",
|
||||
name: "",
|
||||
type: "auto",
|
||||
} as WorkflowModel;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user