mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-29 16:15:04 +00:00
feat: update connector page
This commit is contained in:
Maël Gangloff
@@ -1,8 +1,124 @@
|
||||
import {FormInstance} from "antd";
|
||||
import React from "react";
|
||||
import {Connector} from "../../utils/api/connectors";
|
||||
import {Button, Form, FormInstance, Input, Select, Space, Typography} from "antd";
|
||||
import React, {useState} from "react";
|
||||
import {Connector, ConnectorProvider} from "../../utils/api/connectors";
|
||||
import {t} from "ttag";
|
||||
import {BankOutlined} from "@ant-design/icons";
|
||||
import {regionNames} from "../../i18n";
|
||||
|
||||
const formItemLayoutWithOutLabel = {
|
||||
wrapperCol: {
|
||||
xs: {span: 24, offset: 0},
|
||||
sm: {span: 20, offset: 4},
|
||||
},
|
||||
};
|
||||
|
||||
export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
|
||||
return <>
|
||||
</>
|
||||
const [provider, setProvider] = useState<string>()
|
||||
|
||||
const ovhFields = {
|
||||
appKey: t`Application key`,
|
||||
appSecret: t`Application secret`,
|
||||
consumerKey: t`Consumer key`
|
||||
}
|
||||
|
||||
const ovhEndpointList = [
|
||||
{
|
||||
label: t`European Region`,
|
||||
value: 'ovh-eu'
|
||||
}
|
||||
]
|
||||
|
||||
const ovhSubsidiaryList = [{value: 'EU', label: t`Europa`}, ...[
|
||||
'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
|
||||
].map(c => ({value: c, label: regionNames.of(c) ?? c}))]
|
||||
|
||||
const ovhPricingMode = [
|
||||
{value: 'create-default', label: t`The domain is free and at the standard price`},
|
||||
{
|
||||
value: 'create-premium',
|
||||
label: t`The domain is free but is a premium. Its price varies from one domain to another`
|
||||
}
|
||||
]
|
||||
|
||||
return <Form
|
||||
{...formItemLayoutWithOutLabel}
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}
|
||||
onFinish={onCreate}
|
||||
>
|
||||
<Form.Item
|
||||
label={t`Provider`}
|
||||
name="provider"
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Select
|
||||
placeholder={t`Please select a Provider`}
|
||||
suffixIcon={<BankOutlined/>}
|
||||
options={Object.keys(ConnectorProvider).map((c) => ({
|
||||
value: ConnectorProvider[c as keyof typeof ConnectorProvider],
|
||||
label: (
|
||||
<>
|
||||
<BankOutlined/>{" "} {c}
|
||||
</>
|
||||
),
|
||||
}))}
|
||||
value={provider}
|
||||
onChange={setProvider}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{
|
||||
provider === ConnectorProvider.OVH && <>
|
||||
<Typography.Link target='_blank'
|
||||
href="https://api.ovh.com/createToken/index.cgi?GET=/*&PUT=/*&POST=/*&DELETE=/*">
|
||||
Retrieve a token set from the OVH API
|
||||
</Typography.Link>
|
||||
{
|
||||
Object.keys(ovhFields).map(fieldName => <Form.Item
|
||||
label={ovhFields[fieldName as keyof typeof ovhFields]}
|
||||
name={['authData', fieldName]}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>)
|
||||
}
|
||||
<Form.Item
|
||||
label={t`OVH Endpoint`}
|
||||
name={['authData', 'apiEndpoint']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Select options={ovhEndpointList} optionFilterProp="label"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`OVH subsidiary`}
|
||||
name={['authData', 'ovhSubsidiary']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Select options={ovhSubsidiaryList} optionFilterProp="label"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t`OVH pricing mode`}
|
||||
name={['authData', 'pricingMode']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Select options={ovhPricingMode} optionFilterProp="label"/>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
<Form.Item style={{marginTop: 10}}>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
{t`Create`}
|
||||
</Button>
|
||||
<Button type="default" htmlType="reset">
|
||||
{t`Reset`}
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
import {Button, Form, FormInstance, Input, Select, Space} from "antd";
|
||||
import {t} from "ttag";
|
||||
import {MinusCircleOutlined, PlusOutlined, ThunderboltFilled} from "@ant-design/icons";
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import {EventAction} from "../../utils/api";
|
||||
import {Connector} from "../../utils/api/connectors";
|
||||
|
||||
|
||||
const formItemLayout = {
|
||||
@@ -23,8 +24,9 @@ const formItemLayoutWithOutLabel = {
|
||||
},
|
||||
};
|
||||
|
||||
export function WatchlistForm({form, onCreateWatchlist}: {
|
||||
export function WatchlistForm({form, connectors, onCreateWatchlist}: {
|
||||
form: FormInstance,
|
||||
connectors: (Connector & { id: string })[]
|
||||
onCreateWatchlist: (values: { domains: string[], triggers: { event: string, action: string }[] }) => void
|
||||
}) {
|
||||
|
||||
@@ -67,12 +69,17 @@ export function WatchlistForm({form, onCreateWatchlist}: {
|
||||
}
|
||||
]
|
||||
|
||||
const trigerActionItems = [
|
||||
const triggerActionItems = [
|
||||
{
|
||||
label: t`Send me an email`,
|
||||
value: 'email'
|
||||
},
|
||||
{
|
||||
label: t`Buy the domain if available`,
|
||||
value: 'buy'
|
||||
}
|
||||
]
|
||||
const [actionsSelect, setActionsSelect] = useState<{ [key: number]: string }>({})
|
||||
|
||||
return <Form
|
||||
{...formItemLayoutWithOutLabel}
|
||||
@@ -159,7 +166,6 @@ export function WatchlistForm({form, onCreateWatchlist}: {
|
||||
required={true}
|
||||
key={field.key}
|
||||
>
|
||||
|
||||
<Space wrap>
|
||||
<Form.Item {...field}
|
||||
validateTrigger={['onChange', 'onBlur']}
|
||||
@@ -178,13 +184,31 @@ export function WatchlistForm({form, onCreateWatchlist}: {
|
||||
message: t`Required`
|
||||
}]}
|
||||
noStyle name={[field.name, 'action']}>
|
||||
<Select style={{minWidth: 300}} options={trigerActionItems} showSearch
|
||||
<Select style={{minWidth: 300}} options={triggerActionItems} showSearch
|
||||
placeholder={t`Then do that`}
|
||||
optionFilterProp="label"/>
|
||||
optionFilterProp="label" value={actionsSelect[field.key]}
|
||||
onChange={(e) => setActionsSelect({...actionsSelect, [field.key]: e})}/>
|
||||
</Form.Item>
|
||||
{actionsSelect[field.key] === 'buy' && <Form.Item {...field}
|
||||
validateTrigger={['onChange', 'onBlur']}
|
||||
rules={[{
|
||||
required: true,
|
||||
message: t`Required`
|
||||
}]}
|
||||
noStyle
|
||||
name={[field.name, 'connector']}>
|
||||
<Select style={{minWidth: 500}} showSearch
|
||||
placeholder={t`Connector`}
|
||||
optionFilterProp="label"
|
||||
options={connectors.map(c => ({
|
||||
label: `${c.provider} (${c.id})`,
|
||||
value: c.id
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
}
|
||||
</Space>
|
||||
|
||||
|
||||
{fields.length > 1 ? (
|
||||
<MinusCircleOutlined
|
||||
className="dynamic-delete-button"
|
||||
|
||||
@@ -17,7 +17,7 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
|
||||
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
|
||||
okText={t`Yes`}
|
||||
cancelText={t`No`}
|
||||
><DeleteFilled/> </Popconfirm>}>
|
||||
><DeleteFilled/></Popconfirm>}>
|
||||
<Typography.Paragraph>
|
||||
{t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
|
||||
</Typography.Paragraph>
|
||||
|
||||
Reference in New Issue
Block a user