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