feat: refactor connector form

assets/components/tracking/connector/ConnectorForm.tsx

@@ -1,8 +1,64 @@
-import type {FormInstance} from 'antd'
+import type {FormInstance, StepProps} from 'antd'
+import {Card, Col, Row, Steps} 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"
 
+
 export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
-    return providersConfig()[ConnectorProvider.OVHcloud].form({form, onCreate})
+    const [provider, setProvider] = useState<ConnectorProvider>()
+    const providersConfigList = providersConfig()
+    const [current, setCurrent] = useState(0)
+
+    const ProviderForm = provider !== undefined ? providersConfigList[provider].form : undefined
+
+    const steps: StepProps[] = [
+        {
+            title: t`Registrar`,
+            icon: <BankOutlined/>,
+        },
+        {
+            title: t`Authentication`,
+            icon: <UserOutlined/>,
+        }
+    ]
+
+    const next = () => {
+        setCurrent(current + 1)
+    }
+
+    return (
+        <>
+            <Steps current={current} items={steps} onChange={(c: number) => setCurrent(c)}/>
+            <div style={{padding: 20}}>
+                {current === 0 && (
+                    <>
+                        <h2>{t`Choose a registrar`}</h2>
+                        <Row gutter={[16, 16]}>
+                            {Object.keys(providersConfigList).map((provider: string) => (
+                                <Col key={provider as ConnectorProvider} span={8}>
+                                    <Card
+                                        hoverable
+                                        style={{textAlign: "center"}}
+                                        onClick={() => {
+                                            setProvider(provider as ConnectorProvider)
+                                            next()
+                                        }}
+                                    >
+                                        <div style={{fontSize: "3rem"}}><BankOutlined/></div>
+                                        <h3>{Object.keys(ConnectorProvider).find(p => ConnectorProvider[p as keyof typeof ConnectorProvider] === provider)}</h3>
+                                    </Card>
+                                </Col>
+                            ))}
+                        </Row>
+                    </>
+                )}
+
+                {current === 1 && ProviderForm && <ProviderForm form={form} onCreate={onCreate}/>}
+            </div>
+        </>
+    )
 }

assets/utils/providers/forms/AutoDnsConnectorForm.tsx

@@ -1,10 +1,10 @@
 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 type {Connector} from '../../api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function AutoDnsConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function AutoDnsConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form

assets/utils/providers/forms/GandiConnectorForm.tsx

@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function GandiConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function GandiConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form
@@ -47,7 +50,6 @@ export function GandiConnectorForm({form, onCreate}: { form: FormInstance, onCre
             >
                 <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,10 +1,10 @@
 import type {FormInstance} from 'antd'
 import {Form, Input} from 'antd'
 import React from 'react'
-import type {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,7 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function NamecheapConnectorForm({form, onCreate}: {
+export default function NamecheapConnectorForm({form, onCreate}: {
     form: FormInstance,
     onCreate: (values: Connector) => void
 }) {
@@ -44,7 +44,6 @@ export function NamecheapConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-
             <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Namecheap].tosLink}/>
         </Form>
     )

assets/utils/providers/forms/NamecomConnectorForm.tsx

@@ -1,10 +1,10 @@
 import type {FormInstance} from 'antd'
 import {Alert, Form, Input} from 'antd'
 import React from 'react'
-import type {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function NamecomConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function NamecomConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form

assets/utils/providers/forms/OvhCloudConnectorForm.tsx

@@ -1,38 +1,13 @@
 import {t} from 'ttag'
 import {regionNames} from "../../../i18n"
 import React, {useState} from 'react'
-import type { FormInstance} from "antd"
+import type {FormInstance} from "antd"
 import {Form, Input, Popconfirm, Select} from "antd"
 import type {Connector} from "../../api/connectors"
-import { ConnectorProvider} 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},
@@ -40,14 +15,35 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function OvhCloudConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function OvhCloudConnectorForm({form, onCreate}: {
-    const ovhFields = ovhFieldsFunction()
+    form: FormInstance,
-    const ovhEndpointList = ovhEndpointListFunction()
+    onCreate: (values: Connector) => void
-    const ovhSubsidiaryList = ovhSubsidiaryListFunction()
+}) {
-    const ovhPricingMode = ovhPricingModeFunction()
     const [open, setOpen] = useState(false)
     const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
 
+    const ovhFields = {
+        appKey: t`Application key`,
+        appSecret: t`Application secret`,
+        consumerKey: t`Consumer key`
+    }
+    const ovhEndpointList = [
+        {
+            label: t`European Region`,
+            value: 'ovh-eu'
+        }
+    ]
+    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`}]
+    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`
+        }
+    ]
+
     return (
         <Form
             {...formItemLayoutWithOutLabel}
@@ -114,7 +110,6 @@ export function OvhCloudConnectorForm({form, onCreate}: { form: FormInstance, on
                     />
                 </Popconfirm>
             </Form.Item>
-
             <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.OVHcloud].tosLink}/>
         </Form>
     )

assets/utils/providers/forms/index.tsx

@@ -1,8 +1,8 @@
-import {Button, Checkbox, Form, Space, Typography} from "antd"
+import {Button, Checkbox, Form, Typography} from "antd"
 import {t} from "ttag"
 import React from "react"
 
-export function DefaultConnectorFormItems({tosLink}: {tosLink: string}) {
+export function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
     return <>
         <Form.Item
             valuePropName='checked'
@@ -43,15 +43,10 @@ export function DefaultConnectorFormItems({tosLink}: {tosLink: string}) {
         </Form.Item>
 
 
-        <Form.Item style={{marginTop: '5vh'}}>
+        <Form.Item style={{marginTop: '5vh', textAlign: 'center'}}>
-            <Space>
+            <Button type='primary' htmlType='submit'>
-                <Button type='primary' htmlType='submit'>
+                {t`Create`}
-                    {t`Create`}
+            </Button>
-                </Button>
-                <Button type='default' htmlType='reset'>
-                    {t`Reset`}
-                </Button>
-            </Space>
         </Form.Item>
     </>
 }

assets/utils/providers/index.tsx

@@ -1,12 +1,12 @@
 import type {Connector} from '../api/connectors'
-import { ConnectorProvider} from '../api/connectors'
+import {ConnectorProvider} from '../api/connectors'
-import {OvhCloudConnectorForm} from "./forms/OvhCloudConnectorForm"
+import OvhCloudConnectorForm from "./forms/OvhCloudConnectorForm"
 import type {FormInstance} from "antd"
 import type React from "react"
-import {GandiConnectorForm} from "./forms/GandiConnectorForm"
+import GandiConnectorForm from "./forms/GandiConnectorForm"
-import {NamecheapConnectorForm} from "./forms/NamecheapConnectorForm"
+import NamecheapConnectorForm from "./forms/NamecheapConnectorForm"
-import {AutoDnsConnectorForm} from "./forms/AutoDnsConnectorForm"
+import AutoDnsConnectorForm from "./forms/AutoDnsConnectorForm"
-import {NamecomConnectorForm} from "./forms/NamecomConnectorForm"
+import NamecomConnectorForm from "./forms/NamecomConnectorForm"
 
 export type ProviderConfig = {
     tosLink: string