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`)
                             }
                         }
                     }