console/web/src/pages/System/Email/Components/CredentialForm.jsx

147 lines
5.3 KiB
JavaScript

import React, { useEffect, useMemo, useState } from "react";
import { Button, Divider, Form, Input, Select } from "antd";
import { formatMessage } from "umi/locale";
import useFetch from "@/lib/hooks/use_fetch";
import { formatESSearchResult } from "@/lib/elasticsearch/util";
import { hasAuthority } from "@/utils/authority";
const MANUAL_VALUE = 'manual'
export default (props) => {
const { form: { getFieldDecorator }, initialValue = {}, isEdit } = props;
const [isManual, setIsManual] = useState()
const { loading, error, value, run } = useFetch(
"/credential/_search",
{
queryParams: {
from: 0,
size: 1000,
},
},
[],
false
);
const onCredentialChange = (value) => {
if (value === MANUAL_VALUE) {
setIsManual(true)
} else {
setIsManual(false)
}
}
const {data, total} = useMemo(() => {
return formatESSearchResult(value);
}, [value])
useEffect(() => {
setIsManual(initialValue.credential_id === MANUAL_VALUE)
}, [initialValue.credential_id])
useEffect(() => {
if (hasAuthority('system.credential:all') || hasAuthority('system.credential:read')) {
run()
}
}, [])
return (
<>
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.credential",
})}
>
{getFieldDecorator("credential_id", {
initialValue: initialValue?.credential_id ? initialValue?.credential_id : ( initialValue?.username ? MANUAL_VALUE : undefined ),
rules: [
{
required: true,
message: formatMessage({
id: "cluster.regist.form.verify.required.credential",
}),
},
],
})(
<Select
loading={loading}
onChange={onCredentialChange}
>
{
data.map((item) => <Select.Option value={item.id}>{item.name}</Select.Option>)
}
<Select.Option value={MANUAL_VALUE}>
{
formatMessage({
id: "cluster.regist.step.connect.credential.manual",
})
}
</Select.Option>
</Select>
)}
</Form.Item>
{
isManual && (
<>
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.username",
})}
>
{getFieldDecorator("auth.username", {
initialValue: initialValue?.auth?.username || "",
rules: [
{
required: true,
message: formatMessage({
id: "cluster.regist.form.verify.required.auth_username",
}),
},
],
})(<Input autoComplete="off" placeholder="Auth user name" />)}
</Form.Item>
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.password",
})}
hasFeedback
>
{getFieldDecorator("auth.password", {
initialValue: initialValue?.auth?.password || "",
rules: [
{
required: true,
message: formatMessage({
id: "cluster.regist.form.verify.required.auth_password",
}),
},
],
})(
<Input.Password
autoComplete="off"
placeholder="Auth user password"
/>
)}
</Form.Item>
{
isEdit && (
<>
<Form.Item label={" "} colon={false}>
<div>
{formatMessage({
id: "cluster.regist.form.credential.manual.desc",
})}
</div>
</Form.Item>
</>
)
}
</>
)
}
</>
)
}