From 7f51a0615a03ba7edbb4bc8bcf438f8ee398fe4e Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Mon, 8 Sep 2025 11:01:31 +0800
Subject: [PATCH] refactor(ui): clean code

---
 .../i18n/locales/en/nls.workflow.nodes.json   |   4 +-
 .../i18n/locales/zh/nls.workflow.nodes.json   |   4 +-
 ui/src/pages/settings/SettingsSSLProvider.tsx | 705 +++++-------------
 3 files changed, 204 insertions(+), 509 deletions(-)

diff --git a/ui/src/i18n/locales/en/nls.workflow.nodes.json b/ui/src/i18n/locales/en/nls.workflow.nodes.json
index 611cb22f..90b602fb 100644
--- a/ui/src/i18n/locales/en/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/en/nls.workflow.nodes.json
@@ -22,7 +22,7 @@
   "workflow_node.apply.default_name": "Application",
   "workflow_node.apply.form_anchor.parameters.tab": "Parameters",
   "workflow_node.apply.form_anchor.challenge.tab": "Challenge",
-  "workflow_node.apply.form_anchor.challenge.title": "Challenge settings",
+  "workflow_node.apply.form_anchor.challenge.title": "Challenge validation",
   "workflow_node.apply.form_anchor.certificate.tab": "Certificate",
   "workflow_node.apply.form_anchor.certificate.title": "Certificate settings",
   "workflow_node.apply.form_anchor.advanced.tab": "Advanced",
@@ -40,7 +40,7 @@
   "workflow_node.apply.form.contact_email.tooltip": "Contact information required for SSL certificate application. Please pay attention to the <a href=\"https://letsencrypt.org/docs/rate-limits/\" target=\"_blank\">rate limits</a>.",
   "workflow_node.apply.form.challenge_type.label": "Challenge type",
   "workflow_node.apply.form.challenge_type.placeholder": "Please select challenge type",
-  "workflow_node.apply.form.challenge_type.tooltip": "For more information, see <a href=\"https://letsencrypt.org/docs/challenge-types/\" target=\"_blank\">https://letsencrypt.org/docs/challenge-types/</a>",
+  "workflow_node.apply.form.challenge_type.tooltip": "It makes the CAs to validate that you control the domain names in the certificate. <a href=\"https://letsencrypt.org/docs/challenge-types/\" target=\"_blank\">Click here to learn more</a>.",
   "workflow_node.apply.form.provider.label": "Provider",
   "workflow_node.apply.form.provider.placeholder": "Please select provider",
   "workflow_node.apply.form.provider_dns01.label": "DNS provider",
diff --git a/ui/src/i18n/locales/zh/nls.workflow.nodes.json b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
index 100a84a2..98bddd2e 100644
--- a/ui/src/i18n/locales/zh/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
@@ -37,10 +37,10 @@
   "workflow_node.apply.form.domains.multiple_input_modal.placeholder": "请输入域名",
   "workflow_node.apply.form.contact_email.label": "联系邮箱",
   "workflow_node.apply.form.contact_email.placeholder": "请输入联系邮箱",
-  "workflow_node.apply.form.contact_email.tooltip": "申请签发 SSL 证书时所需的联系方式。请注意 Let's Encrypt 账户注册的速率限制。<a href=\"https://letsencrypt.org/zh-cn/docs/rate-limits/\" target=\"_blank\">点此了解更多</a>。",
+  "workflow_node.apply.form.contact_email.tooltip": "申请签发 SSL 证书时所需的联系方式。请注意 Let's Encrypt 账户注册的<a href=\"https://letsencrypt.org/zh-cn/docs/rate-limits/\" target=\"_blank\">速率限制</a>。",
   "workflow_node.apply.form.challenge_type.label": "质询方式",
   "workflow_node.apply.form.challenge_type.placeholder": "请选择质询方式",
-  "workflow_node.apply.form.challenge_type.tooltip": "这是什么？请参阅 <a href=\"https://letsencrypt.org/zh-cn/docs/challenge-types/\" target=\"_blank\">https://letsencrypt.org/zh-cn/docs/challenge-types/</a>",
+  "workflow_node.apply.form.challenge_type.tooltip": "申请签发 SSL 证书时用于使证书颁发机构验证你对域名的控制权。<a href=\"https://letsencrypt.org/zh-cn/docs/challenge-types/\" target=\"_blank\">点此了解更多</a>。",
   "workflow_node.apply.form.provider.label": "提供商",
   "workflow_node.apply.form.provider.placeholder": "请选择提供商",
   "workflow_node.apply.form.provider_dns01.label": "DNS 提供商",
diff --git a/ui/src/pages/settings/SettingsSSLProvider.tsx b/ui/src/pages/settings/SettingsSSLProvider.tsx
index 5d97aa49..2367c67b 100644
--- a/ui/src/pages/settings/SettingsSSLProvider.tsx
+++ b/ui/src/pages/settings/SettingsSSLProvider.tsx
@@ -14,501 +14,6 @@ import { get as getSettings, save as saveSettings } from "@/repository/settings"
 import { mergeCls } from "@/utils/css";
 import { getErrMsg } from "@/utils/error";
 
-const SSLProviderContext = createContext(
-  {} as {
-    pending: boolean;
-    settings: SettingsModel<SSLProviderSettingsContent>;
-    updateSettings: (settings: MaybeModelRecordWithId<SettingsModel<SSLProviderSettingsContent>>) => Promise<void>;
-  }
-);
-
-const SSLProviderEditFormLetsEncryptConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const { form: formInst, formProps } = useAntdForm<NonNullable<unknown>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.LETSENCRYPT],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.LETSENCRYPT;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.LETSENCRYPT] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.LETSENCRYPT);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormLetsEncryptStagingConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const { form: formInst, formProps } = useAntdForm<NonNullable<unknown>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.LETSENCRYPTSTAGING],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.LETSENCRYPTSTAGING;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.LETSENCRYPTSTAGING] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.LETSENCRYPTSTAGING);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item>
-        <Tips message={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.letsencryptstaging_alert") }}></span>} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormActalisSSLConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const formSchema = z.object({
-    eabKid: z
-      .string(t("access.form.actalisssl_eab_kid.placeholder"))
-      .min(1, t("access.form.actalisssl_eab_kid.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    eabHmacKey: z
-      .string(t("access.form.actalisssl_eab_hmac_key.placeholder"))
-      .min(1, t("access.form.actalisssl_eab_hmac_key.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.ACTALISSSL],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.ACTALISSSL;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.ACTALISSSL] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.ACTALISSSL);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item
-        name="eabKid"
-        label={t("access.form.actalisssl_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.actalisssl_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.actalisssl_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.actalisssl_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.actalisssl_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.actalisssl_eab_hmac_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormBuypassConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const { form: formInst, formProps } = useAntdForm<NonNullable<unknown>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.BUYPASS],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.BUYPASS;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.BUYPASS] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.LETSENCRYPTSTAGING);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormGoogleTrustServicesConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const formSchema = z.object({
-    eabKid: z
-      .string(t("access.form.googletrustservices_eab_kid.placeholder"))
-      .min(1, t("access.form.googletrustservices_eab_kid.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    eabHmacKey: z
-      .string(t("access.form.googletrustservices_eab_hmac_key.placeholder"))
-      .min(1, t("access.form.googletrustservices_eab_hmac_key.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.GOOGLETRUSTSERVICES],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.GOOGLETRUSTSERVICES;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.GOOGLETRUSTSERVICES] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.GOOGLETRUSTSERVICES);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item
-        name="eabKid"
-        label={t("access.form.googletrustservices_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.googletrustservices_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.googletrustservices_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.googletrustservices_eab_hmac_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormSSLComConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const formSchema = z.object({
-    eabKid: z
-      .string(t("access.form.sslcom_eab_kid.placeholder"))
-      .min(1, t("access.form.sslcom_eab_kid.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    eabHmacKey: z
-      .string(t("access.form.sslcom_eab_hmac_key.placeholder"))
-      .min(1, t("access.form.sslcom_eab_hmac_key.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.SSLCOM],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.SSLCOM;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.SSLCOM] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.SSLCOM);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item
-        name="eabKid"
-        label={t("access.form.sslcom_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.sslcom_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.sslcom_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.sslcom_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.sslcom_eab_hmac_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormZeroSSLConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const formSchema = z.object({
-    eabKid: z
-      .string(t("access.form.zerossl_eab_kid.placeholder"))
-      .min(1, t("access.form.zerossl_eab_kid.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    eabHmacKey: z
-      .string(t("access.form.zerossl_eab_hmac_key.placeholder"))
-      .min(1, t("access.form.zerossl_eab_hmac_key.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.ZEROSSL],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.ZEROSSL;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.ZEROSSL] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.ZEROSSL);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item
-        name="eabKid"
-        label={t("access.form.zerossl_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.zerossl_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.zerossl_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.zerossl_eab_hmac_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-const SSLProviderEditFormACMECAConfig = () => {
-  const { t } = useTranslation();
-
-  const { pending, settings, updateSettings } = useContext(SSLProviderContext);
-
-  const formSchema = z.object({
-    endpoint: z.url(t("common.errmsg.url_invalid")),
-    eabKid: z
-      .string(t("access.form.acmeca_eab_kid.placeholder"))
-      .min(1, t("access.form.acmeca_eab_kid.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-    eabHmacKey: z
-      .string(t("access.form.acmeca_eab_hmac_key.placeholder"))
-      .min(1, t("access.form.acmeca_eab_hmac_key.placeholder"))
-      .max(256, t("common.errmsg.string_max", { max: 256 })),
-  });
-  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
-    initialValues: settings?.content?.config?.[CA_PROVIDERS.ACMECA],
-    onSubmit: async (values) => {
-      const newSettings = produce(settings, (draft) => {
-        draft.content ??= {} as SSLProviderSettingsContent;
-        draft.content.provider = CA_PROVIDERS.ACMECA;
-
-        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
-        draft.content.config[CA_PROVIDERS.ACMECA] = values;
-      });
-      await updateSettings(newSettings);
-
-      setFormChanged(false);
-    },
-  });
-
-  const [formChanged, setFormChanged] = useState(false);
-  useEffect(() => {
-    setFormChanged(settings?.content?.provider !== CA_PROVIDERS.ACMECA);
-  }, [settings?.content?.provider]);
-
-  const handleFormChange = () => {
-    setFormChanged(true);
-  };
-
-  return (
-    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
-      <Form.Item
-        name="endpoint"
-        label={t("access.form.acmeca_endpoint.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_endpoint.tooltip") }}></span>}
-      >
-        <Input placeholder={t("access.form.acmeca_endpoint.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabKid"
-        label={t("access.form.zerossl_eab_kid.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_kid.tooltip") }}></span>}
-      >
-        <Input autoComplete="new-password" placeholder={t("access.form.zerossl_eab_kid.placeholder")} />
-      </Form.Item>
-
-      <Form.Item
-        name="eabHmacKey"
-        label={t("access.form.zerossl_eab_hmac_key.label")}
-        rules={[formRule]}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_hmac_key.tooltip") }}></span>}
-      >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.zerossl_eab_hmac_key.placeholder")} />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
-          {t("common.button.save")}
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
 const SettingsSSLProvider = () => {
   const { t } = useTranslation();
 
@@ -554,21 +59,21 @@ const SettingsSSLProvider = () => {
   const providerFormEl = useMemo(() => {
     switch (providerValue) {
       case CA_PROVIDERS.LETSENCRYPT:
-        return <SSLProviderEditFormLetsEncryptConfig />;
+        return <InternalSettingsFormProviderLetsEncrypt />;
       case CA_PROVIDERS.LETSENCRYPTSTAGING:
-        return <SSLProviderEditFormLetsEncryptStagingConfig />;
+        return <InternalSettingsFormProviderLetsEncryptStaging />;
       case CA_PROVIDERS.ACTALISSSL:
-        return <SSLProviderEditFormActalisSSLConfig />;
+        return <InternalSettingsFormProviderActalisSSL />;
       case CA_PROVIDERS.BUYPASS:
-        return <SSLProviderEditFormBuypassConfig />;
+        return <InternalSettingsFormProviderBuypass />;
       case CA_PROVIDERS.GOOGLETRUSTSERVICES:
-        return <SSLProviderEditFormGoogleTrustServicesConfig />;
+        return <InternalSettingsFormProviderGoogleTrustServices />;
       case CA_PROVIDERS.SSLCOM:
-        return <SSLProviderEditFormSSLComConfig />;
+        return <InternalSettingsFormProviderSSLCom />;
       case CA_PROVIDERS.ZEROSSL:
-        return <SSLProviderEditFormZeroSSLConfig />;
+        return <InternalSettingsFormProviderZeroSSL />;
       case CA_PROVIDERS.ACMECA:
-        return <SSLProviderEditFormACMECAConfig />;
+        return <InternalSettingsFormProviderACMECA />;
     }
   }, [providerValue]);
 
@@ -589,7 +94,7 @@ const SettingsSSLProvider = () => {
   };
 
   return (
-    <SSLProviderContext.Provider
+    <InternalSettingsContext.Provider
       value={{
         pending: formPending,
         settings: settings!,
@@ -638,7 +143,197 @@ const SettingsSSLProvider = () => {
 
         <div className="md:max-w-160">{providerFormEl}</div>
       </Show>
-    </SSLProviderContext.Provider>
+    </InternalSettingsContext.Provider>
+  );
+};
+
+const InternalSettingsContext = createContext(
+  {} as {
+    pending: boolean;
+    settings: SettingsModel<SSLProviderSettingsContent>;
+    updateSettings: (settings: MaybeModelRecordWithId<SettingsModel<SSLProviderSettingsContent>>) => Promise<void>;
+  }
+);
+
+const InternalSharedForm = ({ children, provider }: { children?: React.ReactNode; provider: CAProviderType }) => {
+  const { t } = useTranslation();
+
+  const { pending, settings, updateSettings } = useContext(InternalSettingsContext);
+
+  const { form: formInst, formProps } = useAntdForm<NonNullable<unknown>>({
+    initialValues: settings?.content?.config?.[provider],
+    onSubmit: async (values) => {
+      const newSettings = produce(settings, (draft) => {
+        draft.content ??= {} as SSLProviderSettingsContent;
+        draft.content.provider = provider;
+
+        draft.content.config ??= {} as SSLProviderSettingsContent["config"];
+        draft.content.config[provider] = values;
+      });
+      await updateSettings(newSettings);
+
+      setFormChanged(false);
+    },
+  });
+
+  const [formChanged, setFormChanged] = useState(false);
+  useEffect(() => {
+    setFormChanged(provider !== settings?.content?.provider);
+  }, [provider, settings?.content?.provider]);
+
+  const handleFormChange = () => {
+    setFormChanged(true);
+  };
+
+  return (
+    <Form {...formProps} form={formInst} disabled={pending} layout="vertical" onValuesChange={handleFormChange}>
+      {children}
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" disabled={!formChanged} loading={pending}>
+          {t("common.button.save")}
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+const InternalSharedFormEabFields = ({ i18nKey }: { i18nKey: string }) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    endpoint: z.url(t("common.errmsg.url_invalid")),
+    eabKid: z
+      .string(t(`access.form.${i18nKey}_eab_kid.label`))
+      .min(1, t(`access.form.${i18nKey}_eab_kid.label`))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+    eabHmacKey: z
+      .string(t(`access.form.${i18nKey}_eab_hmac_key.label`))
+      .min(1, t(`access.form.${i18nKey}_eab_hmac_key.label`))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  return (
+    <>
+      <Form.Item
+        name="eabKid"
+        label={t(`access.form.${i18nKey}_eab_kid.label`)}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t(`access.form.${i18nKey}_eab_kid.tooltip`) }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t(`access.form.${i18nKey}_eab_kid.placeholder`)} />
+      </Form.Item>
+
+      <Form.Item
+        name="eabHmacKey"
+        label={t(`access.form.${i18nKey}_eab_hmac_key.label`)}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t(`access.form.${i18nKey}_eab_hmac_key.tooltip`) }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t(`access.form.${i18nKey}_eab_hmac_key.placeholder`)} />
+      </Form.Item>
+    </>
+  );
+};
+
+const InternalSettingsFormProviderLetsEncrypt = () => {
+  return <InternalSharedForm provider={CA_PROVIDERS.LETSENCRYPT} />;
+};
+
+const InternalSettingsFormProviderLetsEncryptStaging = () => {
+  const { t } = useTranslation();
+
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.LETSENCRYPTSTAGING}>
+      <Form.Item>
+        <Tips message={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.letsencryptstaging_alert") }}></span>} />
+      </Form.Item>
+    </InternalSharedForm>
+  );
+};
+
+const InternalSettingsFormProviderActalisSSL = () => {
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.ACTALISSSL}>
+      <InternalSharedFormEabFields i18nKey="actalisssl" />
+    </InternalSharedForm>
+  );
+};
+
+const InternalSettingsFormProviderBuypass = () => {
+  return <InternalSharedForm provider={CA_PROVIDERS.BUYPASS} />;
+};
+
+const InternalSettingsFormProviderGoogleTrustServices = () => {
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.GOOGLETRUSTSERVICES}>
+      <InternalSharedFormEabFields i18nKey="googletrustservices" />
+    </InternalSharedForm>
+  );
+};
+
+const InternalSettingsFormProviderSSLCom = () => {
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.SSLCOM}>
+      <InternalSharedFormEabFields i18nKey="sslcom" />
+    </InternalSharedForm>
+  );
+};
+
+const InternalSettingsFormProviderZeroSSL = () => {
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.ZEROSSL}>
+      <InternalSharedFormEabFields i18nKey="zerossl" />
+    </InternalSharedForm>
+  );
+};
+
+const InternalSettingsFormProviderACMECA = () => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    endpoint: z.url(t("common.errmsg.url_invalid")),
+    eabKid: z
+      .string(t("access.form.acmeca_eab_kid.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .nullish(),
+    eabHmacKey: z
+      .string(t("access.form.acmeca_eab_hmac_key.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .nullish(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  return (
+    <InternalSharedForm provider={CA_PROVIDERS.ACMECA}>
+      <Form.Item
+        name="endpoint"
+        label={t("access.form.acmeca_endpoint.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_endpoint.tooltip") }}></span>}
+      >
+        <Input placeholder={t("access.form.acmeca_endpoint.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name="eabKid"
+        label={t("access.form.zerossl_eab_kid.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_kid.tooltip") }}></span>}
+      >
+        <Input autoComplete="new-password" placeholder={t("access.form.zerossl_eab_kid.placeholder")} />
+      </Form.Item>
+
+      <Form.Item
+        name="eabHmacKey"
+        label={t("access.form.zerossl_eab_hmac_key.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.zerossl_eab_hmac_key.tooltip") }}></span>}
+      >
+        <Input.Password autoComplete="new-password" placeholder={t("access.form.zerossl_eab_hmac_key.placeholder")} />
+      </Form.Item>
+    </InternalSharedForm>
   );
 };