feat: update ConnectorForm UI

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>
+        </>
     )
 }