mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-12 07:29:51 +00:00
feat(ui): different provider range of accesses in AccessForm
This commit is contained in:
parent
1468e74a6c
commit
4ab6b72e6f
@ -50,8 +50,8 @@ type applicantOptions struct {
|
|||||||
DnsPropagationTimeout int32
|
DnsPropagationTimeout int32
|
||||||
DnsTTL int32
|
DnsTTL int32
|
||||||
DisableFollowCNAME bool
|
DisableFollowCNAME bool
|
||||||
ReplacedARIAcctId string
|
ReplacedARIAcct string
|
||||||
ReplacedARICertId string
|
ReplacedARICert string
|
||||||
}
|
}
|
||||||
|
|
||||||
func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
|
func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
|
||||||
@ -124,8 +124,8 @@ func NewWithApplyNode(node *domain.WorkflowNode) (Applicant, error) {
|
|||||||
lastCertX509, _ := certcrypto.ParsePEMCertificate([]byte(lastCertificate.Certificate))
|
lastCertX509, _ := certcrypto.ParsePEMCertificate([]byte(lastCertificate.Certificate))
|
||||||
if lastCertX509 != nil {
|
if lastCertX509 != nil {
|
||||||
replacedARICertId, _ := certificate.MakeARICertID(lastCertX509)
|
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,
|
Domains: options.Domains,
|
||||||
Bundle: true,
|
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)
|
certResource, err := client.Certificate.Obtain(certRequest)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
@ -14,13 +14,14 @@ export type AccessEditModalProps = {
|
|||||||
data?: AccessFormProps["initialValues"];
|
data?: AccessFormProps["initialValues"];
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
open?: boolean;
|
open?: boolean;
|
||||||
preset: AccessFormProps["preset"];
|
range?: AccessFormProps["range"];
|
||||||
|
scene: AccessFormProps["scene"];
|
||||||
trigger?: React.ReactNode;
|
trigger?: React.ReactNode;
|
||||||
onOpenChange?: (open: boolean) => void;
|
onOpenChange?: (open: boolean) => void;
|
||||||
afterSubmit?: (record: AccessModel) => 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 { t } = useTranslation();
|
||||||
|
|
||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
@ -50,13 +51,13 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
|
|||||||
try {
|
try {
|
||||||
let values: AccessModel = formRef.current!.getFieldsValue();
|
let values: AccessModel = formRef.current!.getFieldsValue();
|
||||||
|
|
||||||
if (preset === "add") {
|
if (scene === "add") {
|
||||||
if (data?.id) {
|
if (data?.id) {
|
||||||
throw "Invalid props: `data`";
|
throw "Invalid props: `data`";
|
||||||
}
|
}
|
||||||
|
|
||||||
values = await createAccess(values);
|
values = await createAccess(values);
|
||||||
} else if (preset === "edit") {
|
} else if (scene === "edit") {
|
||||||
if (!data?.id) {
|
if (!data?.id) {
|
||||||
throw "Invalid props: `data`";
|
throw "Invalid props: `data`";
|
||||||
}
|
}
|
||||||
@ -96,15 +97,15 @@ const AccessEditModal = ({ data, loading, trigger, preset, afterSubmit, ...props
|
|||||||
confirmLoading={formPending}
|
confirmLoading={formPending}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
loading={loading}
|
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}
|
open={open}
|
||||||
title={t(`access.action.${preset}`)}
|
title={t(`access.action.${scene}`)}
|
||||||
width={480}
|
width={480}
|
||||||
onOk={handleOkClick}
|
onOk={handleOkClick}
|
||||||
onCancel={handleCancelClick}
|
onCancel={handleCancelClick}
|
||||||
>
|
>
|
||||||
<div className="pb-2 pt-4">
|
<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>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
|
@ -6,7 +6,7 @@ import { z } from "zod";
|
|||||||
|
|
||||||
import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
|
import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
|
||||||
import { type AccessModel } from "@/domain/access";
|
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 { useAntdForm, useAntdFormName } from "@/hooks";
|
||||||
|
|
||||||
import AccessForm1PanelConfig from "./AccessForm1PanelConfig";
|
import AccessForm1PanelConfig from "./AccessForm1PanelConfig";
|
||||||
@ -55,14 +55,16 @@ import AccessFormWestcnConfig from "./AccessFormWestcnConfig";
|
|||||||
import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
|
import AccessFormZeroSSLConfig from "./AccessFormZeroSSLConfig";
|
||||||
|
|
||||||
type AccessFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
|
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 = {
|
export type AccessFormProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
style?: React.CSSProperties;
|
style?: React.CSSProperties;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
initialValues?: AccessFormFieldValues;
|
initialValues?: AccessFormFieldValues;
|
||||||
preset: AccessFormPresets;
|
range?: AccessFormRanges;
|
||||||
|
scene: AccessFormScenes;
|
||||||
onValuesChange?: (values: AccessFormFieldValues) => void;
|
onValuesChange?: (values: AccessFormFieldValues) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -72,7 +74,7 @@ export type AccessFormInstance = {
|
|||||||
validateFields: FormInstance<AccessFormFieldValues>["validateFields"];
|
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 { t } = useTranslation();
|
||||||
|
|
||||||
const formSchema = z.object({
|
const formSchema = z.object({
|
||||||
@ -81,7 +83,14 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
|
|||||||
.min(1, t("access.form.name.placeholder"))
|
.min(1, t("access.form.name.placeholder"))
|
||||||
.max(64, t("common.errmsg.string_max", { max: 64 }))
|
.max(64, t("common.errmsg.string_max", { max: 64 }))
|
||||||
.trim(),
|
.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(),
|
config: z.any(),
|
||||||
});
|
});
|
||||||
const formRule = createSchemaFieldRule(formSchema);
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
@ -89,6 +98,35 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
|
|||||||
initialValues: initialValues,
|
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 fieldProvider = Form.useWatch("provider", formInst);
|
||||||
|
|
||||||
const [nestedFormInst] = Form.useForm();
|
const [nestedFormInst] = Form.useForm();
|
||||||
@ -238,13 +276,24 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
|
|||||||
<Input placeholder={t("access.form.name.placeholder")} />
|
<Input placeholder={t("access.form.name.placeholder")} />
|
||||||
</Form.Item>
|
</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.Item>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
|
@ -352,7 +352,8 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
preset="add"
|
range="both-dns-hosting"
|
||||||
|
scene="add"
|
||||||
trigger={
|
trigger={
|
||||||
<Button size="small" type="link">
|
<Button size="small" type="link">
|
||||||
{t("workflow_node.apply.form.provider_access.button")}
|
{t("workflow_node.apply.form.provider_access.button")}
|
||||||
@ -424,7 +425,9 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
preset="add"
|
data={{ provider: applyCAProvidersMap.get(fieldCAProvider!)?.provider }}
|
||||||
|
range="ca-only"
|
||||||
|
scene="add"
|
||||||
trigger={
|
trigger={
|
||||||
<Button size="small" type="link">
|
<Button size="small" type="link">
|
||||||
{t("workflow_node.apply.form.ca_provider_access.button")}
|
{t("workflow_node.apply.form.ca_provider_access.button")}
|
||||||
|
@ -399,7 +399,8 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
|
|||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
|
data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
|
||||||
preset="add"
|
range="both-dns-hosting"
|
||||||
|
scene="add"
|
||||||
trigger={
|
trigger={
|
||||||
<Button size="small" type="link">
|
<Button size="small" type="link">
|
||||||
{t("workflow_node.deploy.form.provider_access.button")}
|
{t("workflow_node.deploy.form.provider_access.button")}
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
"access.props.provider": "Provider",
|
"access.props.provider": "Provider",
|
||||||
"access.props.provider.usage.dns": "DNS provider",
|
"access.props.provider.usage.dns": "DNS provider",
|
||||||
"access.props.provider.usage.hosting": "Hosting 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.provider.usage.notification": "Notification channel",
|
||||||
"access.props.ca": "Certificate authority",
|
"access.props.ca": "Certificate authority",
|
||||||
"access.props.channel": "Notification channel",
|
"access.props.channel": "Notification channel",
|
||||||
@ -27,6 +27,10 @@
|
|||||||
"access.form.provider.label": "Provider",
|
"access.form.provider.label": "Provider",
|
||||||
"access.form.provider.placeholder": "Please select a 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.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.label": "1Panel URL",
|
||||||
"access.form.1panel_api_url.placeholder": "Please enter 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>",
|
"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>",
|
||||||
|
@ -27,6 +27,10 @@
|
|||||||
"access.form.provider.label": "提供商",
|
"access.form.provider.label": "提供商",
|
||||||
"access.form.provider.placeholder": "请选择提供商",
|
"access.form.provider.placeholder": "请选择提供商",
|
||||||
"access.form.provider.tooltip": "提供商分为两种类型:<br>【DNS 提供商】你的 DNS 托管方,通常等同于域名注册商,用于在申请证书时管理您的域名解析记录。<br>【主机提供商】你的服务器或云服务的托管方,用于部署签发的证书。<br><br>该字段保存后不可修改。",
|
"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.label": "1Panel URL",
|
||||||
"access.form.1panel_api_url.placeholder": "请输入 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>",
|
"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>",
|
||||||
|
@ -85,7 +85,7 @@ const AccessList = () => {
|
|||||||
<Space.Compact>
|
<Space.Compact>
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
data={record}
|
data={record}
|
||||||
preset="edit"
|
scene="edit"
|
||||||
trigger={
|
trigger={
|
||||||
<Tooltip title={t("access.action.edit")}>
|
<Tooltip title={t("access.action.edit")}>
|
||||||
<Button color="primary" icon={<EditOutlinedIcon />} variant="text" />
|
<Button color="primary" icon={<EditOutlinedIcon />} variant="text" />
|
||||||
@ -95,7 +95,7 @@ const AccessList = () => {
|
|||||||
|
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
data={{ ...record, id: undefined, name: `${record.name}-copy` }}
|
data={{ ...record, id: undefined, name: `${record.name}-copy` }}
|
||||||
preset="add"
|
scene="add"
|
||||||
trigger={
|
trigger={
|
||||||
<Tooltip title={t("access.action.duplicate")}>
|
<Tooltip title={t("access.action.duplicate")}>
|
||||||
<Button color="primary" icon={<SnippetsOutlinedIcon />} variant="text" />
|
<Button color="primary" icon={<SnippetsOutlinedIcon />} variant="text" />
|
||||||
@ -203,7 +203,7 @@ const AccessList = () => {
|
|||||||
extra={[
|
extra={[
|
||||||
<AccessEditModal
|
<AccessEditModal
|
||||||
key="create"
|
key="create"
|
||||||
preset="add"
|
scene="add"
|
||||||
trigger={
|
trigger={
|
||||||
<Button type="primary" icon={<PlusOutlinedIcon />}>
|
<Button type="primary" icon={<PlusOutlinedIcon />}>
|
||||||
{t("access.action.add")}
|
{t("access.action.add")}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user