feat(ui): different provider range of accesses in AccessForm

internal/applicant/applicant.go

@@ -50,8 +50,8 @@ type applicantOptions struct {
 	DnsPropagationTimeout    int32
 	DnsTTL                   int32
 	DisableFollowCNAME       bool
-	ReplacedARIAcctId        string
+	ReplacedARIAcct          string
-	ReplacedARICertId        string
+	ReplacedARICert          string
 }
 
 func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
@@ -124,8 +124,8 @@ func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
 			lastCertX509, _ := certcrypto.ParsePEMCertificate([]byte(lastCertificate.Certificate))
 			if lastCertX509 != nil {
 				replacedARICertId, _ := certificate.MakeARICertID(lastCertX509)
-				options.ReplacedARIAcctId = lastCertificate.ACMEAccountUrl
+				options.ReplacedARIAcct = lastCertificate.ACMEAccountUrl
-				options.ReplacedARICertId = replacedARICertId
+				options.ReplacedARICert = replacedARICertId
 			}
 		}
 	}
@@ -184,8 +184,8 @@ func apply(challengeProvider challenge.Provider, options *applicantOptions) (*Ap
 		Domains: options.Domains,
 		Bundle:  true,
 	}
-	if options.ReplacedARICertId != "" && options.ReplacedARIAcctId == user.Registration.URI {
+	if options.ReplacedARIAcct == user.Registration.URI {
-		certRequest.ReplacesCertID = options.ReplacedARICertId
+		certRequest.ReplacesCertID = options.ReplacedARICert
 	}
 	certResource, err := client.Certificate.Obtain(certRequest)
 	if err != nil {

ui/src/components/access/AccessEditModal.tsx

@@ -14,13 +14,14 @@ export type AccessEditModalProps = {
   data?: AccessFormProps["initialValues"];
   loading?: boolean;
   open?: boolean;
-  preset: AccessFormProps["preset"];
+  range?: AccessFormProps["range"];
+  scene: AccessFormProps["scene"];
   trigger?: React.ReactNode;
   onOpenChange?: (open: boolean) => void;
   afterSubmit?: (record: AccessModel) => void;
 };
 
-const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props }: AccessEditModalProps) => {
+const AccessEditModal = ({ data, loading, trigger, scene, range, afterSubmit, ...props }: AccessEditModalProps) => {
   const { t } = useTranslation();
 
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -50,13 +51,13 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
     try {
       let values: AccessModel = formRef.current!.getFieldsValue();
 
-      if (preset === "add") {
+      if (scene === "add") {
         if (data?.id) {
           throw "Invalid props: `data`";
         }
 
         values = await createAccess(values);
-      } else if (preset === "edit") {
+      } else if (scene === "edit") {
         if (!data?.id) {
           throw "Invalid props: `data`";
         }
@@ -96,15 +97,15 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
         confirmLoading={formPending}
         destroyOnClose
         loading={loading}
-        okText={preset === "edit" ? t("common.button.save") : t("common.button.submit")}
+        okText={scene === "edit" ? t("common.button.save") : t("common.button.submit")}
         open={open}
-        title={t(`access.action.${preset}`)}
+        title={t(`access.action.${scene}`)}
         width={480}
         onOk={handleOkClick}
         onCancel={handleCancelClick}
       >
         <div className="pb-2 pt-4">
-          <AccessForm ref={formRef} initialValues={data} preset={preset === "add" ? "add" : "edit"} />
+          <AccessForm ref={formRef} initialValues={data} range={range} scene={scene === "add" ? "add" : "edit"} />
         </div>
       </Modal>
     </>

ui/src/components/access/AccessForm.tsx

@@ -6,7 +6,7 @@ import { z } from "zod";
 
 import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
 import { type AccessModel } from "@/domain/access";
-import { ACCESS_PROVIDERS } from "@/domain/provider";
+import { ACCESS_PROVIDERS, ACCESS_USAGES } from "@/domain/provider";
 import { useAntdForm, useAntdFormName } from "@/hooks";
 
 import AccessForm1PanelConfig from "./AccessForm1PanelConfig";
@@ -55,14 +55,16 @@ import AccessFormWestcnConfig from "./AccessFormWestcnConfig";
 import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
 
 type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
-type AccessFormPresets = "add" | "edit";
+type AccessFormRanges = "both-dns-hosting" | "ca-only" | "notify-only";
+type AccessFormScenes = "add" | "edit";
 
 export type AccessFormProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
   initialValues?: AccessFormFieldValues;
-  preset: AccessFormPresets;
+  range?: AccessFormRanges;
+  scene: AccessFormScenes;
   onValuesChange?: (values: AccessFormFieldValues) => void;
 };
 
@@ -72,7 +74,7 @@ export type AccessFormInstance = {
   validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
 };
 
-const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, disabled, initialValues, preset, onValuesChange }, ref) => {
+const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className, style, disabled, initialValues, range, scene, onValuesChange }, ref) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -81,7 +83,14 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
       .min(1, t("access.form.name.placeholder"))
       .max(64, t("common.errmsg.string_max", { max: 64 }))
       .trim(),
-    provider: z.nativeEnum(ACCESS_PROVIDERS, { message: t("access.form.provider.placeholder") }),
+    provider: z.nativeEnum(ACCESS_PROVIDERS, {
+      message:
+        range === "ca-only"
+          ? t("access.form.certificate_authority.placeholder")
+          : range === "notify-only"
+            ? t("access.form.notification_channel.placeholder")
+            : t("access.form.provider.placeholder"),
+    }),
     config: z.any(),
   });
   const formRule = createSchemaFieldRule(formSchema);
@@ -89,6 +98,35 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
     initialValues: initialValues,
   });
 
+  const providerLabel = useMemo(() => {
+    switch (range) {
+      case "ca-only":
+        return t("access.form.certificate_authority.label");
+      case "notify-only":
+        return t("access.form.notification_channel.label");
+    }
+
+    return t("access.form.provider.label");
+  }, [range]);
+  const providerPlaceholder = useMemo(() => {
+    switch (range) {
+      case "ca-only":
+        return t("access.form.certificate_authority.placeholder");
+      case "notify-only":
+        return t("access.form.notification_channel.placeholder");
+    }
+
+    return t("access.form.provider.placeholder");
+  }, [range]);
+  const providerTooltip = useMemo(() => {
+    switch (range) {
+      case "both-dns-hosting":
+        return <span dangerouslySetInnerHTML={{ __html: t("access.form.provider.tooltip") }}></span>;
+    }
+
+    return undefined;
+  }, [range]);
+
   const fieldProvider = Form.useWatch("provider", formInst);
 
   const [nestedFormInst] = Form.useForm();
@@ -238,13 +276,24 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
             <Input placeholder={t("access.form.name.placeholder")} />
           </Form.Item>
 
-          <Form.Item
+          <Form.Item name="provider" label={providerLabel} rules={[formRule]} tooltip={providerTooltip}>
-            name="provider"
+            <AccessProviderSelect
-            label={t("access.form.provider.label")}
+              filter={(record) => {
-            rules={[formRule]}
+                if (range == null) return true;
-            tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.provider.tooltip") }}></span>}
+
-          >
+                switch (range) {
-            <AccessProviderSelect disabled={preset !== "add"} placeholder={t("access.form.provider.placeholder")} showSearch={!disabled} />
+                  case "both-dns-hosting":
+                    return record.usages.includes(ACCESS_USAGES.DNS) || record.usages.includes(ACCESS_USAGES.HOSTING);
+                  case "ca-only":
+                    return record.usages.includes(ACCESS_USAGES.CA);
+                  case "notify-only":
+                    return record.usages.includes(ACCESS_USAGES.NOTIFICATION);
+                }
+              }}
+              disabled={scene !== "add"}
+              placeholder={providerPlaceholder}
+              showSearch={!disabled}
+            />
           </Form.Item>
         </Form>
 

ui/src/components/workflow/node/ApplyNodeConfigForm.tsx

@@ -352,7 +352,8 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                 </div>
                 <div className="text-right">
                   <AccessEditModal
-                    preset="add"
+                    range="both-dns-hosting"
+                    scene="add"
                     trigger={
                       <Button size="small" type="link">
                         {t("workflow_node.apply.form.provider_access.button")}
@@ -424,7 +425,9 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                 </div>
                 <div className="text-right">
                   <AccessEditModal
-                    preset="add"
+                    data={{ provider: applyCAProvidersMap.get(fieldCAProvider!)?.provider }}
+                    range="ca-only"
+                    scene="add"
                     trigger={
                       <Button size="small" type="link">
                         {t("workflow_node.apply.form.ca_provider_access.button")}

ui/src/components/workflow/node/DeployNodeConfigForm.tsx

@@ -399,7 +399,8 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
                   <div className="text-right">
                     <AccessEditModal
                       data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
-                      preset="add"
+                      range="both-dns-hosting"
+                      scene="add"
                       trigger={
                         <Button size="small" type="link">
                           {t("workflow_node.deploy.form.provider_access.button")}

ui/src/i18n/locales/en/nls.access.json

@@ -15,7 +15,7 @@
   "access.props.provider": "Provider",
   "access.props.provider.usage.dns": "DNS provider",
   "access.props.provider.usage.hosting": "Hosting provider",
-  "access.props.provider.usage.ca": "CA",
+  "access.props.provider.usage.ca": "Certificate authority",
   "access.props.provider.usage.notification": "Notification channel",
   "access.props.ca": "Certificate authority",
   "access.props.channel": "Notification channel",
@@ -27,6 +27,10 @@
   "access.form.provider.label": "Provider",
   "access.form.provider.placeholder": "Please select a provider",
   "access.form.provider.tooltip": "DNS provider: The provider that hosts your domain names and manages your DNS records.<br>Host provider: The provider that hosts your servers or cloud services for deploying certificates.<br><br><i>Cannot be edited after saving.</i>",
+  "access.form.certificate_authority.label": "Certificate authority",
+  "access.form.certificate_authority.placeholder": "Please select a certificate authority",
+  "access.form.notification_channel.label": "Notification channel",
+  "access.form.notification_channel.placeholder": "Please select a notification channel",
   "access.form.1panel_api_url.label": "1Panel URL",
   "access.form.1panel_api_url.placeholder": "Please enter 1Panel URL",
   "access.form.1panel_api_url.tooltip": "For more information, see <a href=\"https://docs.1panel.pro/dev_manual/api_manual/\" target=\"_blank\">https://docs.1panel.pro/dev_manual/api_manual/</a>",

ui/src/i18n/locales/zh/nls.access.json

@@ -27,6 +27,10 @@
   "access.form.provider.label": "提供商",
   "access.form.provider.placeholder": "请选择提供商",
   "access.form.provider.tooltip": "提供商分为两种类型：<br>【DNS 提供商】你的 DNS 托管方，通常等同于域名注册商，用于在申请证书时管理您的域名解析记录。<br>【主机提供商】你的服务器或云服务的托管方，用于部署签发的证书。<br><br>该字段保存后不可修改。",
+  "access.form.certificate_authority.label": "证书颁发机构",
+  "access.form.certificate_authority.placeholder": "请选择证书颁发机构",
+  "access.form.notification_channel.label": "通知渠道",
+  "access.form.notification_channel.placeholder": "请选择通知渠道",
   "access.form.1panel_api_url.label": "1Panel URL",
   "access.form.1panel_api_url.placeholder": "请输入 1Panel URL",
   "access.form.1panel_api_url.tooltip": "这是什么？请参阅 <a href=\"https://1panel.cn/docs/dev_manual/api_manual/\" target=\"_blank\">https://1panel.cn/docs/dev_manual/api_manual/</a>",

ui/src/pages/accesses/AccessList.tsx

@@ -85,7 +85,7 @@ const AccessList = () => {
         <Space.Compact>
           <AccessEditModal
             data={record}
-            preset="edit"
+            scene="edit"
             trigger={
               <Tooltip title={t("access.action.edit")}>
                 <Button color="primary" icon={<EditOutlinedIcon />} variant="text" />
@@ -95,7 +95,7 @@ const AccessList = () => {
 
           <AccessEditModal
             data={{ ...record, id: undefined, name: `${record.name}-copy` }}
-            preset="add"
+            scene="add"
             trigger={
               <Tooltip title={t("access.action.duplicate")}>
                 <Button color="primary" icon={<SnippetsOutlinedIcon />} variant="text" />
@@ -203,7 +203,7 @@ const AccessList = () => {
         extra={[
           <AccessEditModal
             key="create"
-            preset="add"
+            scene="add"
             trigger={
               <Button type="primary" icon={<PlusOutlinedIcon />}>
                 {t("access.action.add")}