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>
|
||||
</>
|
||||
|
||||
101
assets/utils/providers/forms/AutoDnsConnectorForm.tsx
Normal file
101
assets/utils/providers/forms/AutoDnsConnectorForm.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
55
assets/utils/providers/forms/GandiConnectorForm.tsx
Normal file
55
assets/utils/providers/forms/GandiConnectorForm.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
51
assets/utils/providers/forms/NamecheapConnectorForm.tsx
Normal file
51
assets/utils/providers/forms/NamecheapConnectorForm.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
51
assets/utils/providers/forms/NamecomConnectorForm.tsx
Normal file
51
assets/utils/providers/forms/NamecomConnectorForm.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
121
assets/utils/providers/forms/OvhCloudConnectorForm.tsx
Normal file
121
assets/utils/providers/forms/OvhCloudConnectorForm.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
57
assets/utils/providers/forms/index.tsx
Normal file
57
assets/utils/providers/forms/index.tsx
Normal 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>
|
||||
</>
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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`
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user