feat: update ConnectorForm UI

assets/components/tracking/connector/ConnectorForm.tsx

@@ -1,37 +1,50 @@
-import type { FormInstance, StepProps} from 'antd'
-import {Card, Col, Row, Steps, Typography} from 'antd'
+import type { FormInstance} from 'antd'
+import {Button, Card, Col, Form, Input, Row, Steps, Typography} from 'antd'
 import type {Connector} from '../../../utils/api/connectors'
 import {ConnectorProvider} from '../../../utils/api/connectors'
 import React, {useState} from 'react'
 import {t} from "ttag"
-import {BankOutlined, UserOutlined} from "@ant-design/icons"
-import {providersConfig} from "../../../utils/providers"
-
+import {BankOutlined, LockOutlined, SignatureOutlined} from "@ant-design/icons"
+import {formItemLayoutWithOutLabel, providersConfig} from "../../../utils/providers"
+import DefaultConnectorFormItems from "../../../utils/providers/forms/DefaultConnectorFormItems"
 
 export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
     const [provider, setProvider] = useState<ConnectorProvider>()
     const [current, setCurrent] = useState(0)
-
     const ProviderForm = provider !== undefined ? providersConfig[provider].form : undefined
-
-    const steps: StepProps[] = [
-        {
-            title: t`Registrar`,
-            icon: <BankOutlined/>,
-        },
-        {
-            title: t`Authentication`,
-            icon: <UserOutlined/>,
-        }
-    ]
-
-    const next = () => {
-        setCurrent(current + 1)
-    }
+    const next = () => setCurrent(current + 1)
+    const prev = () => setCurrent(current - 1)
 
     return (
-        <>
-            <Steps current={current} items={steps} onChange={(c: number) => setCurrent(c)}/>
+        <Form
+            {...formItemLayoutWithOutLabel}
+            form={form}
+            layout='horizontal'
+            labelCol={{span: 6}}
+            wrapperCol={{span: 14}}
+            onFinish={onCreate}
+        >
+
+            <Form.Item name="provider" noStyle>
+                <Input type="hidden"/>
+            </Form.Item>
+
+            <Steps current={current} items={[
+                {
+                    title: t`Registrar`,
+                    icon: <BankOutlined/>,
+                },
+                {
+                    title: t`Authentication`,
+                    icon: <LockOutlined/>,
+                    disabled: current < 2
+                },
+                {
+                    title: t`Consent`,
+                    icon: <SignatureOutlined/>,
+                    disabled: current < 1
+                }
+            ]} onChange={(c: number) => setCurrent(c)}/>
             <div style={{padding: 20}}>
                 {current === 0 && (
                     <>
@@ -57,13 +70,37 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
                     </>
                 )}
 
-                {current === 1 && ProviderForm && <ProviderForm form={form} onCreate={onCreate}/>}
+                <div hidden={current !== 1}>
+                    {ProviderForm && <ProviderForm form={form} onCreate={onCreate}/>}
+                </div>
+                <div hidden={current !== 2}>
+                    {provider && <DefaultConnectorFormItems tosLink={providersConfig[provider].tosLink}/>}
+                </div>
+
+                <div style={{marginTop: 24}}>
+                    {current > 0 &&
+                        <Button style={{margin: '0 8px'}} onClick={() => prev()}>
+                            {t`Previous`}
+                        </Button>
+                    }
+                    {current === 1 &&
+                        <Button type="primary" onClick={() => next()}>
+                            {t`Next`}
+                        </Button>
+                    }
+                    {current === 2 &&
+                        <Button type='primary' htmlType='submit'>
+                            {t`Create`}
+                        </Button>
+                    }
+                </div>
+
             </div>
             <Typography.Text type='secondary'>
                 {t`This website is neither affiliated with nor sponsored by the registrars mentioned.
                 The names and logos of these companies are used for informational purposes only and remain registered trademarks of their respective owners.
                 The use of their services via this website is subject to the terms and conditions set by each registrar and is the sole responsibility of the user.`}
             </Typography.Text>
-        </>
+        </Form>
     )
 }

assets/components/tracking/connector/ConnectorsList.tsx

@@ -3,8 +3,9 @@ import {jt, t} from 'ttag'
 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 {ConnectorProvider, deleteConnector} from '../../../utils/api/connectors'
 import {providersConfig} from "../../../utils/providers"
+
 const {useToken} = theme
 
 export type ConnectorElement = Connector & { id: string, createdAt: string, watchlistCount: number }
@@ -19,6 +20,7 @@ export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorEl
 
     return (
         <>
+            <Divider/>
             {connectors.map(connector => {
                     const createdAt = <Typography.Text strong>
                         {new Date(connector.createdAt).toLocaleString()}
@@ -56,7 +58,6 @@ The creation date corresponds to the date on which you consented to the creation
                                 </>
                             }/>
                         </Card>
-                        <Divider/>
                     </>
                 }
             )}

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -96,7 +96,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                     {
                         validator: async (_, domains) => {
                             if (!domains || domains.length < 1) {
-                                return await Promise.reject(new Error(t`At least one domain name`))
+                                throw new Error(t`At least one domain name`)
                             }
                         }
                     }

assets/pages/tracking/ConnectorPage.tsx

@@ -38,7 +38,7 @@ export default function ConnectorPage() {
 
     return (
         <Flex gap='middle' align='center' justify='center' vertical>
-            <Card title={t`Create a Connector`} style={{width: '100%'}}>
+            <Card title={t`Create a Connector`} style={{width: '100%'}} size='small'>
                 {contextHolder}
                 <ConnectorForm form={form} onCreate={onCreateConnector}/>
             </Card>

assets/utils/providers/forms/AutoDnsConnectorForm.tsx

@@ -1,28 +1,17 @@
 import type {FormInstance} from 'antd'
 import {Alert, Checkbox, 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 "./DefaultConnectorFormItems"
-import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
-export default function AutoDnsConnectorForm({form, onCreate}: {
-    form: FormInstance,
-    onCreate: (values: Connector) => void
+export default function AutoDnsConnectorForm({form}: {
+    form: FormInstance
 }) {
 
     form.setFieldValue('provider', ConnectorProvider.AutoDNS)
 
     return (
-        <Form
-            {...formItemLayoutWithOutLabel}
-            form={form}
-            layout='horizontal'
-            labelCol={{span: 6}}
-            wrapperCol={{span: 14}}
-            onFinish={onCreate}
-        >
+        <>
             <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'
@@ -91,8 +80,6 @@ export default function AutoDnsConnectorForm({form, onCreate}: {
                 >{t`Owner confirms his consent of domain order jobs`}
                 </Checkbox>
             </Form.Item>
-
-            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.AutoDNS].tosLink}/>
-        </Form>
+        </>
     )
 }

assets/utils/providers/forms/DefaultConnectorFormItems.tsx

@@ -1,13 +1,9 @@
-import {Button, Checkbox, Form, Input, Typography} from "antd"
+import {Checkbox, Form, Typography} from "antd"
 import {t} from "ttag"
 import React from "react"
 
 export default function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
     return <>
-        <Form.Item name="provider" noStyle>
-            <Input type="hidden" />
-        </Form.Item>
-
         <Form.Item
             valuePropName='checked'
             label={t`API Terms of Service`}
@@ -45,12 +41,5 @@ export default function DefaultConnectorFormItems({tosLink}: { tosLink: string }
             >{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: '2em', textAlign: 'center'}}>
-            <Button type='primary' htmlType='submit'>
-                {t`Create`}
-            </Button>
-        </Form.Item>
     </>
 }

assets/utils/providers/forms/GandiConnectorForm.tsx

@@ -1,28 +1,17 @@
 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 "./DefaultConnectorFormItems"
-import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
-export default function GandiConnectorForm({form, onCreate}: {
-    form: FormInstance,
-    onCreate: (values: Connector) => void
+export default function GandiConnectorForm({form}: {
+    form: FormInstance
 }) {
 
     form.setFieldValue('provider', ConnectorProvider.Gandi)
 
     return (
-        <Form
-            {...formItemLayoutWithOutLabel}
-            form={form}
-            layout='horizontal'
-            labelCol={{span: 6}}
-            wrapperCol={{span: 14}}
-            onFinish={onCreate}
-        >
+        <>
             <Form.Item
                 label={t`Personal Access Token (PAT)`}
                 name={['authData', 'token']}
@@ -44,8 +33,6 @@ export default function GandiConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.Gandi].tosLink}/>
-
-        </Form>
+        </>
     )
 }

assets/utils/providers/forms/NamecheapConnectorForm.tsx

@@ -1,29 +1,18 @@
 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 "./DefaultConnectorFormItems"
-import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
-export default function NamecheapConnectorForm({form, onCreate}: {
-    form: FormInstance,
-    onCreate: (values: Connector) => void
+export default function NamecheapConnectorForm({form}: {
+    form: FormInstance
 }) {
 
 
     form.setFieldValue('provider', ConnectorProvider.Namecheap)
 
     return (
-        <Form
-            {...formItemLayoutWithOutLabel}
-            form={form}
-            layout='horizontal'
-            labelCol={{span: 6}}
-            wrapperCol={{span: 14}}
-            onFinish={onCreate}
-        >
+        <>
             <Form.Item
                 label={t`Username`}
                 name={['authData', 'ApiUser']}
@@ -39,7 +28,6 @@ export default function NamecheapConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.Namecheap].tosLink}/>
-        </Form>
+        </>
     )
 }

assets/utils/providers/forms/NamecomConnectorForm.tsx

@@ -1,28 +1,17 @@
 import type {FormInstance} from 'antd'
 import {Alert, 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 "./DefaultConnectorFormItems"
-import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
-export default function NamecomConnectorForm({form, onCreate}: {
-    form: FormInstance,
-    onCreate: (values: Connector) => void
+export default function NamecomConnectorForm({form}: {
+    form: FormInstance
 }) {
 
     form.setFieldValue('provider', ConnectorProvider["Name.com"])
 
     return (
-        <Form
-            {...formItemLayoutWithOutLabel}
-            form={form}
-            layout='horizontal'
-            labelCol={{span: 6}}
-            wrapperCol={{span: 14}}
-            onFinish={onCreate}
-        >
+        <>
             <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'
@@ -43,7 +32,6 @@ export default function NamecomConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider["Name.com"]].tosLink}/>
-        </Form>
+        </>
     )
 }

assets/utils/providers/forms/OvhCloudConnectorForm.tsx

@@ -3,14 +3,10 @@ import {regionNames} from "../../../i18n"
 import React, {useState} from 'react'
 import type {FormInstance} from "antd"
 import {Form, Input, Popconfirm, Select, Typography} from "antd"
-import type {Connector} from "../../api/connectors"
 import {ConnectorProvider} from "../../api/connectors"
-import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
-import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
-export default function OvhCloudConnectorForm({form, onCreate}: {
-    form: FormInstance,
-    onCreate: (values: Connector) => void
+export default function OvhCloudConnectorForm({form}: {
+    form: FormInstance
 }) {
     const [open, setOpen] = useState(false)
     const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
@@ -36,14 +32,7 @@ export default function OvhCloudConnectorForm({form, onCreate}: {
     ]
 
     return (
-        <Form
-            {...formItemLayoutWithOutLabel}
-            form={form}
-            layout='horizontal'
-            labelCol={{span: 6}}
-            wrapperCol={{span: 14}}
-            onFinish={onCreate}
-        >
+        <>
             <Form.Item
                 label={t`Application key`}
                 name={['authData', 'appKey']}
@@ -125,7 +114,6 @@ export default function OvhCloudConnectorForm({form, onCreate}: {
                     />
                 </Popconfirm>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.OVHcloud].tosLink}/>
-        </Form>
+        </>
     )
 }

translations/translations.pot

@@ -46,21 +46,21 @@ msgstr ""
 #: assets/components/search/DomainSearchBar.tsx:28
 #: assets/components/tracking/watchlist/WatchlistForm.tsx:119
 #: assets/components/tracking/watchlist/WatchlistForm.tsx:222
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:27
 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:38
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:49
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:64
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:87
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:15
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:30
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:41
-#: assets/utils/providers/forms/GandiConnectorForm.tsx:32
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:50
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:64
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:72
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:80
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:88
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:95
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:103
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:53
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:76
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:11
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:26
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:37
+#: assets/utils/providers/forms/GandiConnectorForm.tsx:21
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:39
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:53
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:61
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:69
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:77
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:84
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:92
 msgid "Required"
 msgstr ""
 
@@ -221,20 +221,37 @@ msgstr ""
 msgid "Log in"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorForm.tsx:19
+#: assets/components/tracking/connector/ConnectorForm.tsx:34
 #: assets/utils/functions/rdapTranslation.ts:12
 msgid "Registrar"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorForm.tsx:23
+#: assets/components/tracking/connector/ConnectorForm.tsx:38
 msgid "Authentication"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorForm.tsx:38
+#: assets/components/tracking/connector/ConnectorForm.tsx:43
+msgid "Consent"
+msgstr ""
+
+#: assets/components/tracking/connector/ConnectorForm.tsx:51
 msgid "Choose a registrar"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorForm.tsx:63
+#: assets/components/tracking/connector/ConnectorForm.tsx:83
+msgid "Previous"
+msgstr ""
+
+#: assets/components/tracking/connector/ConnectorForm.tsx:88
+msgid "Next"
+msgstr ""
+
+#: assets/components/tracking/connector/ConnectorForm.tsx:93
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:269
+msgid "Create"
+msgstr ""
+
+#: assets/components/tracking/connector/ConnectorForm.tsx:100
 msgid ""
 "This website is neither affiliated with nor sponsored by the registrars "
 "mentioned.\n"
@@ -244,46 +261,46 @@ msgid ""
 "conditions set by each registrar and is the sole responsibility of the user."
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:18
+#: assets/components/tracking/connector/ConnectorsList.tsx:19
 msgid ""
 "An error occurred while deleting the Connector. Make sure it is not used in "
 "any Watchlist"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:33
+#: assets/components/tracking/connector/ConnectorsList.tsx:35
 #, javascript-format
 msgid "Connector ${ connectorName }"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:38
+#: assets/components/tracking/connector/ConnectorsList.tsx:40
 msgid "Delete the Connector"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:39
+#: assets/components/tracking/connector/ConnectorsList.tsx:41
 msgid "Are you sure to delete this Connector?"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:41
+#: assets/components/tracking/connector/ConnectorsList.tsx:43
 #: assets/components/tracking/watchlist/DeleteWatchlistButton.tsx:16
 msgid "Yes"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:42
+#: assets/components/tracking/connector/ConnectorsList.tsx:44
 #: assets/components/tracking/watchlist/DeleteWatchlistButton.tsx:17
 msgid "No"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:46
+#: assets/components/tracking/connector/ConnectorsList.tsx:48
 #, javascript-format
 msgid "Creation date: ${ createdAt }"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:47
+#: assets/components/tracking/connector/ConnectorsList.tsx:49
 #, javascript-format
 msgid "Used in: ${ watchlistCount } Watchlist"
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:50
+#: assets/components/tracking/connector/ConnectorsList.tsx:52
 msgid ""
 "You can stop using a connector at any time. To delete a connector, you must "
 "remove it from each linked Watchlist.\n"
@@ -293,7 +310,7 @@ msgid ""
 "withdrawal and were of the minimum age to consent to these conditions."
 msgstr ""
 
-#: assets/components/tracking/connector/ConnectorsList.tsx:54
+#: assets/components/tracking/connector/ConnectorsList.tsx:56
 msgid "The Provider’s conditions are accessible by following this hyperlink."
 msgstr ""
 
@@ -473,11 +490,6 @@ msgstr ""
 msgid "Add a Webhook"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:269
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:52
-msgid "Create"
-msgstr ""
-
 #: assets/components/tracking/watchlist/WatchlistForm.tsx:269
 msgid "Update"
 msgstr ""
@@ -629,8 +641,8 @@ msgid "Create a Watchlist"
 msgstr ""
 
 #: assets/pages/UserPage.tsx:19
-#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:28
-#: assets/utils/providers/forms/NamecomConnectorForm.tsx:32
+#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:17
+#: assets/utils/providers/forms/NamecomConnectorForm.tsx:21
 msgid "Username"
 msgstr ""
 
@@ -1088,181 +1100,181 @@ msgstr ""
 msgid "An error occurred"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:27
-#: assets/utils/providers/forms/NamecomConnectorForm.tsx:27
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:16
+#: assets/utils/providers/forms/NamecomConnectorForm.tsx:16
 msgid ""
 "This provider does not provide a list of supported TLD. Please double check "
 "if the domain you want to register is supported."
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:33
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:22
 msgid "AutoDNS Username"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:36
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:25
 msgid ""
 "Because of some limitations in API of AutoDNS, we suggest to create an "
 "dedicated user for API with limited rights"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:43
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:32
 msgid "AutoDNS Password"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:47
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:36
 msgid ""
 "Attention: AutoDNS do not support 2-Factor Authentication on API Users for "
 "automated systems"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:55
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:44
 msgid "Owner nic-handle"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:59
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:48
 msgid "The nic-handle of the domain name owner"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:61
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:50
 msgid "You can get it from this page"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:71
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:60
 msgid "Context Value"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:75
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:64
 msgid "If you not sure, use the default value 4"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:84
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:73
 msgid "Owner confirmation"
 msgstr ""
 
-#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:91
+#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:80
 msgid "Owner confirms his consent of domain order jobs"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:13
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:9
 msgid "API Terms of Service"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:22
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:18
 msgid ""
 "I have read and accepted the conditions of use of the Provider API, "
 "accessible from this hyperlink"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:28
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:24
 msgid "Legal age"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:34
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:30
 msgid "I am of the minimum age required to consent to these conditions"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:39
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:35
 msgid "Withdrawal period"
 msgstr ""
 
-#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:45
+#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:41
 msgid ""
 "I waive my right of withdrawal regarding the purchase of domain names via "
 "the Provider's API"
 msgstr ""
 
-#: assets/utils/providers/forms/GandiConnectorForm.tsx:27
+#: assets/utils/providers/forms/GandiConnectorForm.tsx:16
 msgid "Personal Access Token (PAT)"
 msgstr ""
 
-#: assets/utils/providers/forms/GandiConnectorForm.tsx:30
+#: assets/utils/providers/forms/GandiConnectorForm.tsx:19
 msgid ""
 "Retrieve a Personal Access Token from your customer account on the "
 "Provider's website"
 msgstr ""
 
-#: assets/utils/providers/forms/GandiConnectorForm.tsx:37
+#: assets/utils/providers/forms/GandiConnectorForm.tsx:26
 msgid "Organization sharing ID"
 msgstr ""
 
-#: assets/utils/providers/forms/GandiConnectorForm.tsx:41
+#: assets/utils/providers/forms/GandiConnectorForm.tsx:30
 msgid "It indicates the organization that will pay for the ordered product"
 msgstr ""
 
-#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:31
+#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:20
 msgid ""
 "Retreive an API key and whitelist this instance's IP address on Namecheap's "
 "website"
 msgstr ""
 
-#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:37
-#: assets/utils/providers/forms/NamecomConnectorForm.tsx:41
+#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:26
+#: assets/utils/providers/forms/NamecomConnectorForm.tsx:30
 msgid "API key"
 msgstr ""
 
-#: assets/utils/providers/forms/NamecomConnectorForm.tsx:35
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:55
+#: assets/utils/providers/forms/NamecomConnectorForm.tsx:24
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:44
 msgid ""
 "Retrieve a set of tokens from your customer account on the Provider's "
 "website"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:21
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:17
 msgid "European Region"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:22
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:18
 msgid "United States Region"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:23
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:19
 msgid "Canada Region"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:28
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:24
 msgid "Europe"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:31
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:27
 msgid "The domain is free and at the standard price"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:34
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:30
 msgid ""
 "The domain is free but can be premium. Its price varies from one domain to "
 "another"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:48
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:78
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:37
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:67
 msgid "Application key"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:62
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:51
 msgid "Application secret"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:70
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:59
 msgid "Consumer key"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:86
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:75
 msgid "OVH Endpoint"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:93
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:82
 msgid "OVH subsidiary"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:101
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:90
 msgid "OVH pricing mode"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:106
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:95
 msgid "Confirm pricing mode"
 msgstr ""
 
-#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:107
+#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:96
 msgid ""
 "Are you sure about this setting? This may result in additional charges from "
 "the API Provider"