mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-29 16:15:04 +00:00
refactor: split connector forms
This commit is contained in:
Maël Gangloff
@@ -1,302 +1,8 @@
|
||||
import type {FormInstance} from 'antd'
|
||||
import {Alert, Button, Checkbox, Form, Input, Popconfirm, Select, Space, Typography} from 'antd'
|
||||
import React, {useState} from 'react'
|
||||
import type {Connector} from '../../../utils/api/connectors'
|
||||
import {ConnectorProvider} from '../../../utils/api/connectors'
|
||||
import {t} from 'ttag'
|
||||
import {BankOutlined} from '@ant-design/icons'
|
||||
import {
|
||||
ovhEndpointList as ovhEndpointListFunction,
|
||||
ovhFields as ovhFieldsFunction,
|
||||
ovhPricingMode as ovhPricingModeFunction,
|
||||
ovhSubsidiaryList as ovhSubsidiaryListFunction
|
||||
} from '../../../utils/providers/ovh'
|
||||
import {helpGetTokenLink, tosHyperlink} from '../../../utils/providers'
|
||||
|
||||
const formItemLayoutWithOutLabel = {
|
||||
wrapperCol: {
|
||||
xs: {span: 24, offset: 0},
|
||||
sm: {span: 20, offset: 4}
|
||||
}
|
||||
}
|
||||
import {providersConfig} from "../../../utils/providers"
|
||||
|
||||
export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
|
||||
const [provider, setProvider] = useState<ConnectorProvider>()
|
||||
const ovhFields = ovhFieldsFunction()
|
||||
const ovhEndpointList = ovhEndpointListFunction()
|
||||
const ovhSubsidiaryList = ovhSubsidiaryListFunction()
|
||||
const ovhPricingMode = ovhPricingModeFunction()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
|
||||
|
||||
return (
|
||||
<Form
|
||||
{...formItemLayoutWithOutLabel}
|
||||
form={form}
|
||||
layout='horizontal'
|
||||
labelCol={{span: 6}}
|
||||
wrapperCol={{span: 14}}
|
||||
onFinish={onCreate}
|
||||
>
|
||||
<Form.Item
|
||||
label={t`Provider`}
|
||||
name='provider'
|
||||
help={helpGetTokenLink(provider)}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
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}
|
||||
autoFocus
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{
|
||||
provider !== undefined && <>
|
||||
{
|
||||
[ConnectorProvider.AutoDNS, ConnectorProvider['Name.com']].includes(provider) && <Alert
|
||||
message={t`This provider does not provide a list of supported TLD. Please double check if the domain you want to register is supported.`}
|
||||
type='warning'
|
||||
style={{marginBottom: '2em'}}
|
||||
/>
|
||||
}
|
||||
{
|
||||
provider === ConnectorProvider.OVHcloud && <>
|
||||
{
|
||||
Object.keys(ovhFields).map(fieldName => <Form.Item
|
||||
key={ovhFields[fieldName as keyof typeof ovhFields]}
|
||||
label={ovhFields[fieldName as keyof typeof ovhFields]}
|
||||
name={['authData', fieldName]}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</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`}]}
|
||||
>
|
||||
<Popconfirm
|
||||
title={t`Confirm pricing mode`}
|
||||
description={t`Are you sure about this setting? This may result in additional charges from the API Provider`}
|
||||
onCancel={() => {
|
||||
form.resetFields(['authData'])
|
||||
setOvhPricingModeValue(undefined)
|
||||
setOpen(false)
|
||||
}}
|
||||
onConfirm={() => setOpen(false)}
|
||||
open={open}
|
||||
>
|
||||
<Select
|
||||
options={ovhPricingMode} optionFilterProp='label' value={ovhPricingModeValue}
|
||||
onChange={(value: string) => {
|
||||
setOvhPricingModeValue(value)
|
||||
form.setFieldValue(['authData', 'pricingMode'], value)
|
||||
if (value !== 'create-default') {
|
||||
setOpen(true)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
{
|
||||
provider === ConnectorProvider.Gandi && <>
|
||||
<Form.Item
|
||||
label={t`Personal Access Token (PAT)`}
|
||||
name={['authData', 'token']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`Organization sharing ID`}
|
||||
name={['authData', 'sharingId']}
|
||||
help={<Typography.Text
|
||||
type='secondary'
|
||||
>{t`It indicates the organization that will pay for the ordered product`}
|
||||
</Typography.Text>}
|
||||
required={false}
|
||||
>
|
||||
<Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
{
|
||||
provider === ConnectorProvider.AutoDNS && <>
|
||||
<br/>
|
||||
<Form.Item
|
||||
label={t`AutoDNS Username`}
|
||||
name={['authData', 'username']}
|
||||
help={<Typography.Text
|
||||
type='secondary'
|
||||
>{t`Attention: AutoDNS do not support 2-Factor Authentication on API Users for automated systems`}
|
||||
</Typography.Text>}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Input autoComplete='off' required/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`AutoDNS Password`}
|
||||
name={['authData', 'password']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
required
|
||||
>
|
||||
<Input.Password autoComplete='off' required placeholder=''/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`Owner nic-handle`}
|
||||
name={['authData', 'contactid']}
|
||||
help={<Typography.Text
|
||||
type='secondary'
|
||||
>{t`The nic-handle of the domain name owner`}<a
|
||||
href='https://cloud.autodns.com/contacts/domain'
|
||||
>{t`You can get it from this page`}
|
||||
</a>
|
||||
</Typography.Text>}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
required
|
||||
>
|
||||
<Input autoComplete='off' required placeholder=''/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t`Context Value`}
|
||||
name={['authData', 'context']}
|
||||
help={<Typography.Text
|
||||
type='secondary'
|
||||
>{t`If you not sure, use the default value 4`}
|
||||
</Typography.Text>}
|
||||
|
||||
required={false}
|
||||
>
|
||||
<Input autoComplete='off' required={false} placeholder='4'/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName='checked'
|
||||
label={t`Owner confirmation`}
|
||||
name={['authData', 'ownerConfirm']}
|
||||
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Checkbox
|
||||
required
|
||||
>{t`Owner confirms his consent of domain order jobs`}
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
</>
|
||||
|
||||
}
|
||||
{
|
||||
provider === ConnectorProvider.Namecheap && <>
|
||||
<Form.Item
|
||||
label={t`Username`}
|
||||
name={['authData', 'ApiUser']}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`API key`}
|
||||
name={['authData', 'ApiKey']}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
{
|
||||
provider === ConnectorProvider['Name.com'] && <>
|
||||
<Form.Item
|
||||
label={t`Username`}
|
||||
name={['authData', 'username']}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t`API key`}
|
||||
name={['authData', 'token']}
|
||||
>
|
||||
<Input autoComplete='off'/>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
<Form.Item
|
||||
valuePropName='checked'
|
||||
label={t`API Terms of Service`}
|
||||
name={['authData', 'acceptConditions']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
style={{marginTop: '3em'}}
|
||||
>
|
||||
<Checkbox
|
||||
required
|
||||
>
|
||||
<Typography.Link target='_blank' href={tosHyperlink(provider)}>
|
||||
{t`I have read and accepted the conditions of use of the Provider API, accessible from this hyperlink`}
|
||||
</Typography.Link>
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName='checked'
|
||||
label={t`Legal age`}
|
||||
name={['authData', 'ownerLegalAge']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Checkbox
|
||||
required
|
||||
>{t`I am of the minimum age required to consent to these conditions`}
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName='checked'
|
||||
label={t`Withdrawal period`}
|
||||
name={['authData', 'waiveRetractationPeriod']}
|
||||
rules={[{required: true, message: t`Required`}]}
|
||||
>
|
||||
<Checkbox
|
||||
required
|
||||
>{t`I waive my right of withdrawal regarding the purchase of domain names via the Provider's API`}
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
|
||||
<Form.Item style={{marginTop: '5vh'}}>
|
||||
<Space>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
{t`Create`}
|
||||
</Button>
|
||||
<Button type='default' htmlType='reset'>
|
||||
{t`Reset`}
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)
|
||||
return providersConfig()[ConnectorProvider.OVHcloud].form({form, onCreate})
|
||||
}
|
||||
|
||||
@@ -4,8 +4,7 @@ import {DeleteFilled} from '@ant-design/icons'
|
||||
import React from 'react'
|
||||
import type {Connector} from '../../../utils/api/connectors'
|
||||
import { ConnectorProvider, deleteConnector} from '../../../utils/api/connectors'
|
||||
import {tosHyperlink} from "../../../utils/providers"
|
||||
|
||||
import {providersConfig} from "../../../utils/providers"
|
||||
const {useToken} = theme
|
||||
|
||||
export type ConnectorElement = Connector & { id: string, createdAt: string, watchlistCount: number }
|
||||
@@ -51,7 +50,7 @@ export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorEl
|
||||
{t`You can stop using a connector at any time. To delete a connector, you must remove it from each linked Watchlist.
|
||||
The creation date corresponds to the date on which you consented to the creation of the connector and on which you declared in particular that you fulfilled the conditions of use of the supplier's API, waived the right of withdrawal and were of the minimum age to consent to these conditions.`}
|
||||
|
||||
<Typography.Link href={tosHyperlink(connector.provider)}>
|
||||
<Typography.Link href={providersConfig()[connector.provider].tosLink}>
|
||||
{t`The Provider’s conditions are accessible by following this hyperlink.`}
|
||||
</Typography.Link>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user