refactor: split connector forms

This commit is contained in:
Maël Gangloff
2025-02-18 15:41:59 +01:00
parent d9b5fe31b0
commit a5efa73b21
10 changed files with 480 additions and 383 deletions

View File

@@ -0,0 +1,101 @@
import type {FormInstance} from 'antd'
import {Alert, Checkbox, Form, Input, Typography} from 'antd'
import React from 'react'
import type {Connector} from '../../../utils/api/connectors'
import {ConnectorProvider} from '../../../utils/api/connectors'
import {t} from 'ttag'
import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
import {providersConfig} from "../index"
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}
}
}
export function AutoDnsConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
return (
<Form
{...formItemLayoutWithOutLabel}
form={form}
layout='horizontal'
labelCol={{span: 6}}
wrapperCol={{span: 14}}
onFinish={onCreate}
>
<Form.Item name='provider' hidden>
<Input value={ConnectorProvider.AutoDNS}/>
</Form.Item>
<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'}}
/>
<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>
<DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.AutoDNS].tosLink}/>
</Form>
)
}

View File

@@ -0,0 +1,55 @@
import type {FormInstance} from 'antd'
import {Form, Input, Typography} from 'antd'
import React from 'react'
import type {Connector} from '../../api/connectors'
import {ConnectorProvider} from '../../api/connectors'
import {t} from 'ttag'
import {DefaultConnectorFormItems} from "./index"
import {providersConfig} from "../index"
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}
}
}
export function GandiConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
return (
<Form
{...formItemLayoutWithOutLabel}
form={form}
layout='horizontal'
labelCol={{span: 6}}
wrapperCol={{span: 14}}
onFinish={onCreate}
>
<Form.Item name='provider' hidden>
<Input value={ConnectorProvider.Gandi}/>
</Form.Item>
<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>
<DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Gandi].tosLink}/>
</Form>
)
}

View File

@@ -0,0 +1,51 @@
import type {FormInstance} from 'antd'
import {Form, Input} from 'antd'
import React from 'react'
import type {Connector} from '../../../utils/api/connectors'
import {ConnectorProvider} from '../../../utils/api/connectors'
import {t} from 'ttag'
import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
import {providersConfig} from "../index"
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}
}
}
export function NamecheapConnectorForm({form, onCreate}: {
form: FormInstance,
onCreate: (values: Connector) => void
}) {
return (
<Form
{...formItemLayoutWithOutLabel}
form={form}
layout='horizontal'
labelCol={{span: 6}}
wrapperCol={{span: 14}}
onFinish={onCreate}
>
<Form.Item name='provider' hidden>
<Input value={ConnectorProvider.Namecheap}/>
</Form.Item>
<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>
<DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Namecheap].tosLink}/>
</Form>
)
}

View File

@@ -0,0 +1,51 @@
import type {FormInstance} from 'antd'
import {Alert, Form, Input} from 'antd'
import React from 'react'
import type {Connector} from '../../../utils/api/connectors'
import {ConnectorProvider} from '../../../utils/api/connectors'
import {t} from 'ttag'
import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
import {providersConfig} from "../index"
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}
}
}
export function NamecomConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
return (
<Form
{...formItemLayoutWithOutLabel}
form={form}
layout='horizontal'
labelCol={{span: 6}}
wrapperCol={{span: 14}}
onFinish={onCreate}
>
<Form.Item name='provider' hidden>
<Input value={ConnectorProvider["Name.com"]}/>
</Form.Item>
<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'}}
/>
<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>
<DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider["Name.com"]].tosLink}/>
</Form>
)
}

View File

@@ -0,0 +1,121 @@
import {t} from 'ttag'
import {regionNames} from "../../../i18n"
import React, {useState} from 'react'
import type { FormInstance} from "antd"
import {Form, Input, Popconfirm, Select} from "antd"
import type {Connector} from "../../api/connectors"
import { ConnectorProvider} from "../../api/connectors"
import {DefaultConnectorFormItems} from "./index"
import {providersConfig} from "../index"
const ovhFieldsFunction = () => ({
appKey: t`Application key`,
appSecret: t`Application secret`,
consumerKey: t`Consumer key`
})
const ovhEndpointListFunction = () => [
{
label: t`European Region`,
value: 'ovh-eu'
}
]
const ovhSubsidiaryListFunction = () => [...[
'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
].map(c => ({value: c, label: regionNames.of(c) ?? c})), {value: 'EU', label: t`Europe`}]
const ovhPricingModeFunction = () => [
{value: 'create-default', label: t`The domain is free and at the standard price`},
{
value: 'create-premium',
label: t`The domain is free but can be premium. Its price varies from one domain to another`
}
]
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}
}
}
export function OvhCloudConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
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 name='provider' hidden>
<Input value={ConnectorProvider.OVHcloud}/>
</Form.Item>
{
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>
<DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.OVHcloud].tosLink}/>
</Form>
)
}

View File

@@ -0,0 +1,57 @@
import {Button, Checkbox, Form, Space, Typography} from "antd"
import {t} from "ttag"
import React from "react"
export function DefaultConnectorFormItems({tosLink}: {tosLink: string}) {
return <>
<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={tosLink}>
{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>
</>
}

View File

@@ -1,62 +1,45 @@
import {ConnectorProvider} from '../api/connectors'
import {Typography} from 'antd'
import {t} from 'ttag'
import React from 'react'
import type {Connector} from '../api/connectors'
import { ConnectorProvider} from '../api/connectors'
import {OvhCloudConnectorForm} from "./forms/OvhCloudConnectorForm"
import type {FormInstance} from "antd"
import type React from "react"
import {GandiConnectorForm} from "./forms/GandiConnectorForm"
import {NamecheapConnectorForm} from "./forms/NamecheapConnectorForm"
import {AutoDnsConnectorForm} from "./forms/AutoDnsConnectorForm"
import {NamecomConnectorForm} from "./forms/NamecomConnectorForm"
export const helpGetTokenLink = (provider?: string) => {
switch (provider) {
case ConnectorProvider.OVHcloud:
return (
<Typography.Link
target='_blank'
href='https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions'
>
{t`Retrieve a set of tokens from your customer account on the Provider's website`}
</Typography.Link>
)
case ConnectorProvider.Gandi:
return (
<Typography.Link target='_blank' href='https://admin.gandi.net/organizations/account/pat'>
{t`Retrieve a Personal Access Token from your customer account on the Provider's website`}
</Typography.Link>
)
case ConnectorProvider.Namecheap:
return (
<Typography.Link target='_blank' href='https://ap.www.namecheap.com/settings/tools/apiaccess/'>
{t`Retreive an API key and whitelist this instance's IP address on Namecheap's website`}
</Typography.Link>
)
case ConnectorProvider.AutoDNS:
return (
<Typography.Link target='_blank' href='https://en.autodns.com/domain-robot-api/'>
{t`Because of some limitations in API of AutoDNS, we suggest to create an dedicated user for API with limited rights`}
</Typography.Link>
)
case ConnectorProvider['Name.com']:
return (
<Typography.Link target='_blank' href='https://www.name.com/account/settings/api'>
{t`Retrieve a set of tokens from your customer account on the Provider's website`}
</Typography.Link>
)
default:
return <></>
}
export type ProviderConfig = {
tosLink: string
tokenLink: string
form: ({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) => React.ReactElement
}
export const tosHyperlink = (provider?: string) => {
switch (provider) {
case ConnectorProvider.OVHcloud:
return 'https://www.ovhcloud.com/en/terms-and-conditions/contracts/'
case ConnectorProvider.Gandi:
return 'https://www.gandi.net/en/contracts/terms-of-service'
case ConnectorProvider.Namecheap:
return 'https://www.namecheap.com/legal/universal/universal-tos/'
case ConnectorProvider.AutoDNS:
return 'https://www.internetx.com/agb/'
case ConnectorProvider['Name.com']:
return 'https://www.name.com/policies/'
default:
return ''
export const providersConfig: () => Record<ConnectorProvider, ProviderConfig> = () => {
return {
[ConnectorProvider.OVHcloud]: {
tosLink: 'https://www.ovhcloud.com/en/terms-and-conditions/contracts/',
tokenLink: 'https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions',
form: OvhCloudConnectorForm
},
[ConnectorProvider.Gandi]: {
tosLink: 'https://www.gandi.net/en/contracts/terms-of-service',
tokenLink: 'https://admin.gandi.net/organizations/account/pat',
form: GandiConnectorForm
},
[ConnectorProvider.Namecheap]: {
tosLink: 'https://www.namecheap.com/legal/universal/universal-tos/',
tokenLink: 'https://ap.www.namecheap.com/settings/tools/apiaccess/',
form: NamecheapConnectorForm
},
[ConnectorProvider.AutoDNS]: {
tosLink: 'https://www.internetx.com/agb/',
tokenLink: 'https://en.autodns.com/domain-robot-api/',
form: AutoDnsConnectorForm
},
[ConnectorProvider["Name.com"]]: {
tosLink: 'https://www.name.com/policies/',
tokenLink: 'https://www.name.com/account/settings/api',
form: NamecomConnectorForm
}
}
}

View File

@@ -1,27 +0,0 @@
import {t} from 'ttag'
import {regionNames} from '../../i18n'
export const ovhFields = () => ({
appKey: t`Application key`,
appSecret: t`Application secret`,
consumerKey: t`Consumer key`
})
export const ovhEndpointList = () => [
{
label: t`European Region`,
value: 'ovh-eu'
}
]
export const ovhSubsidiaryList = () => [...[
'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
].map(c => ({value: c, label: regionNames.of(c) ?? c})), {value: 'EU', label: t`Europe`}]
export 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 can be premium. Its price varies from one domain to another`
}
]