feat: manage ca authorizations

ui/src/components/access/AccessForm.tsx

@@ -31,6 +31,7 @@ import AccessFormEdgioConfig from "./AccessFormEdgioConfig";
 import AccessFormGcoreConfig from "./AccessFormGcoreConfig";
 import AccessFormGnameConfig from "./AccessFormGnameConfig";
 import AccessFormGoDaddyConfig from "./AccessFormGoDaddyConfig";
+import AccessFormGoogleTrustServicesConfig from "./AccessFormGoogleTrustServicesConfig";
 import AccessFormHuaweiCloudConfig from "./AccessFormHuaweiCloudConfig";
 import AccessFormJDCloudConfig from "./AccessFormJDCloudConfig";
 import AccessFormKubernetesConfig from "./AccessFormKubernetesConfig";
@@ -52,6 +53,7 @@ import AccessFormVercelConfig from "./AccessFormVercelConfig";
 import AccessFormVolcEngineConfig from "./AccessFormVolcEngineConfig";
 import AccessFormWebhookConfig from "./AccessFormWebhookConfig";
 import AccessFormWestcnConfig from "./AccessFormWestcnConfig";
+import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
 
 type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
 type AccessFormPresets = "add" | "edit";
@@ -147,6 +149,8 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
         return <AccessFormGnameConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.GODADDY:
         return <AccessFormGoDaddyConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.GOOGLETRUSTSERVICES:
+        return <AccessFormGoogleTrustServicesConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.EDGIO:
         return <AccessFormEdgioConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.HUAWEICLOUD:
@@ -191,6 +195,8 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
         return <AccessFormWebhookConfig {...nestedFormProps} />;
       case ACCESS_PROVIDERS.WESTCN:
         return <AccessFormWestcnConfig {...nestedFormProps} />;
+      case ACCESS_PROVIDERS.ZEROSSL:
+        return <AccessFormZeroSSLConfig {...nestedFormProps} />;
     }
   }, [disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
 

ui/src/components/access/AccessFormGoogleTrustServicesConfig.tsx

@@ -0,0 +1,82 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { type AccessConfigForGoogleTrustServices } from "@/domain/access";
+
+type AccessFormGoogleTrustServicesConfigFieldValues = Nullish<AccessConfigForGoogleTrustServices>;
+
+export type AccessFormGoogleTrustServicesConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: AccessFormGoogleTrustServicesConfigFieldValues;
+  onValuesChange?: (values: AccessFormGoogleTrustServicesConfigFieldValues) => void;
+};
+
+const initFormModel = (): AccessFormGoogleTrustServicesConfigFieldValues => {
+  return {
+    eabKid: "",
+    eabHmacKey: "",
+  };
+};
+
+const AccessFormGoogleTrustServicesConfig = ({
+  form: formInst,
+  formName,
+  disabled,
+  initialValues,
+  onValuesChange,
+}: AccessFormGoogleTrustServicesConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    eabKid: z
+      .string()
+      .min(1, t("access.form.googletrustservices_eab_kid.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .trim(),
+    eabHmacKey: z
+      .string()
+      .min(1, t("access.form.googletrustservices_eab_hmac_key.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .trim(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      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>
+  );
+};
+
+export default AccessFormGoogleTrustServicesConfig;

ui/src/components/access/AccessFormZeroSSLConfig.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from "react-i18next";
+import { Form, type FormInstance, Input } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { type AccessConfigForZeroSSL } from "@/domain/access";
+
+type AccessFormZeroSSLConfigFieldValues = Nullish<AccessConfigForZeroSSL>;
+
+export type AccessFormZeroSSLConfigProps = {
+  form: FormInstance;
+  formName: string;
+  disabled?: boolean;
+  initialValues?: AccessFormZeroSSLConfigFieldValues;
+  onValuesChange?: (values: AccessFormZeroSSLConfigFieldValues) => void;
+};
+
+const initFormModel = (): AccessFormZeroSSLConfigFieldValues => {
+  return {
+    eabKid: "",
+    eabHmacKey: "",
+  };
+};
+
+const AccessFormZeroSSLConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormZeroSSLConfigProps) => {
+  const { t } = useTranslation();
+
+  const formSchema = z.object({
+    eabKid: z
+      .string()
+      .min(1, t("access.form.zerossl_eab_kid.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .trim(),
+    eabHmacKey: z
+      .string()
+      .min(1, t("access.form.zerossl_eab_hmac_key.placeholder"))
+      .max(256, t("common.errmsg.string_max", { max: 256 }))
+      .trim(),
+  });
+  const formRule = createSchemaFieldRule(formSchema);
+
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onValuesChange?.(values);
+  };
+
+  return (
+    <Form
+      form={formInst}
+      disabled={disabled}
+      initialValues={initialValues ?? initFormModel()}
+      layout="vertical"
+      name={formName}
+      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>
+  );
+};
+
+export default AccessFormZeroSSLConfig;

ui/src/components/provider/AccessProviderSelect.tsx

@@ -9,9 +9,10 @@ export type AccessProviderSelectProps = Omit<
   "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
 > & {
   filter?: (record: AccessProvider) => boolean;
+  showOptionTags?: boolean;
 };
 
-const AccessProviderSelect = ({ filter, ...props }: AccessProviderSelectProps) => {
+const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProviderSelectProps = { showOptionTags: true }) => {
   const { t } = useTranslation();
 
   const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: AccessProvider }>>([]);
@@ -38,18 +39,14 @@ const AccessProviderSelect = ({ filter, ...props }: AccessProviderSelectProps) =
             {t(provider?.name ?? "")}
           </Typography.Text>
         </Space>
-        <div>
-          {provider?.usages?.includes(ACCESS_USAGES.APPLY) && (
-            <>
-              <Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
-            </>
-          )}
-          {provider?.usages?.includes(ACCESS_USAGES.DEPLOY) && (
-            <>
-              <Tag color="blue">{t("access.props.provider.usage.host")}</Tag>
-            </>
-          )}
-        </div>
+        {!showOptionTags && (
+          <div>
+            {provider?.usages?.includes(ACCESS_USAGES.DNS) && <Tag color="peru">{t("access.props.provider.usage.dns")}</Tag>}
+            {provider?.usages?.includes(ACCESS_USAGES.HOSTING) && <Tag color="royalblue">{t("access.props.provider.usage.hosting")}</Tag>}
+            {/* {provider?.usages?.includes(ACCESS_USAGES.CA) && <Tag color="crimson">{t("access.props.provider.usage.ca")}</Tag>} */}
+            {/* {provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION) && <Tag color="mediumaquamarine">{t("access.props.provider.usage.notification")}</Tag>} */}
+          </div>
+        )}
       </div>
     );
   };