feat: update ConnectorForm UI

This commit is contained in:
Maël Gangloff 2025-02-20 16:32:25 +01:00
parent b498af6f1e
commit 58c226847f
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
9 changed files with 73 additions and 102 deletions

View File

@ -1,4 +1,4 @@
import type { FormInstance} from 'antd' import type {FormInstance} from 'antd'
import {Button, Card, Col, Form, Input, Row, Steps, Typography} from 'antd' import {Button, Card, Col, Form, Input, Row, Steps, Typography} from 'antd'
import type {Connector} from '../../../utils/api/connectors' import type {Connector} from '../../../utils/api/connectors'
import {ConnectorProvider} from '../../../utils/api/connectors' import {ConnectorProvider} from '../../../utils/api/connectors'
@ -15,6 +15,8 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
const next = () => setCurrent(current + 1) const next = () => setCurrent(current + 1)
const prev = () => setCurrent(current - 1) const prev = () => setCurrent(current - 1)
form.setFieldValue('provider', provider)
return ( return (
<Form <Form
{...formItemLayoutWithOutLabel} {...formItemLayoutWithOutLabel}
@ -49,9 +51,9 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
{current === 0 && ( {current === 0 && (
<> <>
<h2>{t`Choose a registrar`}</h2> <h2>{t`Choose a registrar`}</h2>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]} justify='center'>
{Object.keys(providersConfig).map((provider: string) => ( {Object.keys(providersConfig).map((provider: string) => (
<Col key={provider as ConnectorProvider} span={8}> <Col key={provider as ConnectorProvider} xs={24} sm={12} md={8} lg={6} xl={4}>
<Card <Card
hoverable hoverable
style={{textAlign: "center"}} style={{textAlign: "center"}}
@ -60,7 +62,8 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
next() next()
}} }}
> >
<div style={{fontSize: "3rem"}}><BankOutlined style={{color: 'lightblue'}}/> <div style={{fontSize: "3rem"}}>
<BankOutlined style={{color: 'lightblue'}}/>
</div> </div>
<h3>{Object.keys(ConnectorProvider).find(p => ConnectorProvider[p as keyof typeof ConnectorProvider] === provider)}</h3> <h3>{Object.keys(ConnectorProvider).find(p => ConnectorProvider[p as keyof typeof ConnectorProvider] === provider)}</h3>
</Card> </Card>
@ -71,7 +74,7 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
)} )}
<div hidden={current !== 1}> <div hidden={current !== 1}>
{ProviderForm && <ProviderForm form={form} onCreate={onCreate}/>} {ProviderForm && <ProviderForm form={form}/>}
</div> </div>
<div hidden={current !== 2}> <div hidden={current !== 2}>
{provider && <DefaultConnectorFormItems tosLink={providersConfig[provider].tosLink}/>} {provider && <DefaultConnectorFormItems tosLink={providersConfig[provider].tosLink}/>}

View File

@ -84,7 +84,7 @@ export default function WatchlistPage() {
return ( return (
<Flex gap='middle' align='center' justify='center' vertical> <Flex gap='middle' align='center' justify='center' vertical>
{contextHolder} {contextHolder}
<Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}> <Card size='small' loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}>
{(connectors != null) && {(connectors != null) &&
<WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation/>} <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation/>}
</Card> </Card>

View File

@ -1,15 +1,8 @@
import type {FormInstance} from 'antd'
import {Alert, Checkbox, Form, Input, Typography} from 'antd' import {Alert, Checkbox, Form, Input, Typography} from 'antd'
import React from 'react' import React from 'react'
import {ConnectorProvider} from '../../api/connectors'
import {t} from 'ttag' import {t} from 'ttag'
export default function AutoDnsConnectorForm({form}: { export default function AutoDnsConnectorForm() {
form: FormInstance
}) {
form.setFieldValue('provider', ConnectorProvider.AutoDNS)
return ( return (
<> <>
<Alert <Alert

View File

@ -1,15 +1,8 @@
import type {FormInstance} from 'antd'
import {Form, Input, Typography} from 'antd' import {Form, Input, Typography} from 'antd'
import React from 'react' import React from 'react'
import {ConnectorProvider} from '../../api/connectors'
import {t} from 'ttag' import {t} from 'ttag'
export default function GandiConnectorForm({form}: { export default function GandiConnectorForm() {
form: FormInstance
}) {
form.setFieldValue('provider', ConnectorProvider.Gandi)
return ( return (
<> <>
<Form.Item <Form.Item

View File

@ -1,16 +1,8 @@
import type {FormInstance} from 'antd'
import {Form, Input, Typography} from 'antd' import {Form, Input, Typography} from 'antd'
import React from 'react' import React from 'react'
import {ConnectorProvider} from '../../api/connectors'
import {t} from 'ttag' import {t} from 'ttag'
export default function NamecheapConnectorForm({form}: { export default function NamecheapConnectorForm() {
form: FormInstance
}) {
form.setFieldValue('provider', ConnectorProvider.Namecheap)
return ( return (
<> <>
<Form.Item <Form.Item

View File

@ -1,14 +1,8 @@
import type {FormInstance} from 'antd'
import {Alert, Form, Input, Typography} from 'antd' import {Alert, Form, Input, Typography} from 'antd'
import React from 'react' import React from 'react'
import {ConnectorProvider} from '../../api/connectors'
import {t} from 'ttag' import {t} from 'ttag'
export default function NamecomConnectorForm({form}: { export default function NamecomConnectorForm() {
form: FormInstance
}) {
form.setFieldValue('provider', ConnectorProvider["Name.com"])
return ( return (
<> <>

View File

@ -3,7 +3,6 @@ import {regionNames} from "../../../i18n"
import React, {useState} from 'react' import React, {useState} from 'react'
import type {FormInstance} from "antd" import type {FormInstance} from "antd"
import {Form, Input, Popconfirm, Select, Typography} from "antd" import {Form, Input, Popconfirm, Select, Typography} from "antd"
import {ConnectorProvider} from "../../api/connectors"
export default function OvhCloudConnectorForm({form}: { export default function OvhCloudConnectorForm({form}: {
form: FormInstance form: FormInstance
@ -11,8 +10,6 @@ export default function OvhCloudConnectorForm({form}: {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>() const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
form.setFieldValue('provider', ConnectorProvider.OVHcloud)
const ovhEndpointList = [ const ovhEndpointList = [
{label: t`European Region`, value: 'ovh-eu'}, {label: t`European Region`, value: 'ovh-eu'},
{label: t`United States Region`, value: 'ovh-us'}, {label: t`United States Region`, value: 'ovh-us'},

View File

@ -1,4 +1,3 @@
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 {FormInstance} from "antd"
@ -17,7 +16,7 @@ export const formItemLayoutWithOutLabel = {
export type ProviderConfig = { export type ProviderConfig = {
tosLink: string tosLink: string
form: ({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) => React.ReactElement form: ({form}: { form: FormInstance }) => React.ReactElement
} }
export const providersConfig: Record<ConnectorProvider, ProviderConfig> = { export const providersConfig: Record<ConnectorProvider, ProviderConfig> = {

View File

@ -46,21 +46,21 @@ msgstr ""
#: assets/components/search/DomainSearchBar.tsx:28 #: assets/components/search/DomainSearchBar.tsx:28
#: assets/components/tracking/watchlist/WatchlistForm.tsx:119 #: assets/components/tracking/watchlist/WatchlistForm.tsx:119
#: assets/components/tracking/watchlist/WatchlistForm.tsx:222 #: assets/components/tracking/watchlist/WatchlistForm.tsx:222
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:27 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:20
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:38 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:31
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:53 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:46
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:76 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:69
#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:11 #: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:11
#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:26 #: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:26
#: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:37 #: assets/utils/providers/forms/DefaultConnectorFormItems.tsx:37
#: assets/utils/providers/forms/GandiConnectorForm.tsx:21 #: assets/utils/providers/forms/GandiConnectorForm.tsx:14
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:39 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:36
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:53 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:50
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:61 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:58
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:69 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:66
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:77 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:74
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:84 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:81
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:92 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:89
msgid "Required" msgid "Required"
msgstr "" msgstr ""
@ -221,37 +221,37 @@ msgstr ""
msgid "Log in" msgid "Log in"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:34 #: assets/components/tracking/connector/ConnectorForm.tsx:36
#: assets/utils/functions/rdapTranslation.ts:12 #: assets/utils/functions/rdapTranslation.ts:12
msgid "Registrar" msgid "Registrar"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:38 #: assets/components/tracking/connector/ConnectorForm.tsx:40
msgid "Authentication" msgid "Authentication"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:43 #: assets/components/tracking/connector/ConnectorForm.tsx:45
msgid "Consent" msgid "Consent"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:51 #: assets/components/tracking/connector/ConnectorForm.tsx:53
msgid "Choose a registrar" msgid "Choose a registrar"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:83 #: assets/components/tracking/connector/ConnectorForm.tsx:86
msgid "Previous" msgid "Previous"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:88 #: assets/components/tracking/connector/ConnectorForm.tsx:91
msgid "Next" msgid "Next"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:93 #: assets/components/tracking/connector/ConnectorForm.tsx:96
#: assets/components/tracking/watchlist/WatchlistForm.tsx:269 #: assets/components/tracking/watchlist/WatchlistForm.tsx:269
msgid "Create" msgid "Create"
msgstr "" msgstr ""
#: assets/components/tracking/connector/ConnectorForm.tsx:100 #: assets/components/tracking/connector/ConnectorForm.tsx:103
msgid "" msgid ""
"This website is neither affiliated with nor sponsored by the registrars " "This website is neither affiliated with nor sponsored by the registrars "
"mentioned.\n" "mentioned.\n"
@ -641,8 +641,8 @@ msgid "Create a Watchlist"
msgstr "" msgstr ""
#: assets/pages/UserPage.tsx:19 #: assets/pages/UserPage.tsx:19
#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:17 #: assets/utils/providers/forms/NamecheapConnectorForm.tsx:9
#: assets/utils/providers/forms/NamecomConnectorForm.tsx:21 #: assets/utils/providers/forms/NamecomConnectorForm.tsx:15
msgid "Username" msgid "Username"
msgstr "" msgstr ""
@ -1100,58 +1100,58 @@ msgstr ""
msgid "An error occurred" msgid "An error occurred"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:16 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:9
#: assets/utils/providers/forms/NamecomConnectorForm.tsx:16 #: assets/utils/providers/forms/NamecomConnectorForm.tsx:10
msgid "" msgid ""
"This provider does not provide a list of supported TLD. Please double check " "This provider does not provide a list of supported TLD. Please double check "
"if the domain you want to register is supported." "if the domain you want to register is supported."
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:22 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:15
msgid "AutoDNS Username" msgid "AutoDNS Username"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:25 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:18
msgid "" msgid ""
"Because of some limitations in API of AutoDNS, we suggest to create an " "Because of some limitations in API of AutoDNS, we suggest to create an "
"dedicated user for API with limited rights" "dedicated user for API with limited rights"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:32 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:25
msgid "AutoDNS Password" msgid "AutoDNS Password"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:36 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:29
msgid "" msgid ""
"Attention: AutoDNS do not support 2-Factor Authentication on API Users for " "Attention: AutoDNS do not support 2-Factor Authentication on API Users for "
"automated systems" "automated systems"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:44 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:37
msgid "Owner nic-handle" msgid "Owner nic-handle"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:48 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:41
msgid "The nic-handle of the domain name owner" msgid "The nic-handle of the domain name owner"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:50 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:43
msgid "You can get it from this page" msgid "You can get it from this page"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:60 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:53
msgid "Context Value" msgid "Context Value"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:64 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:57
msgid "If you not sure, use the default value 4" msgid "If you not sure, use the default value 4"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:73 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:66
msgid "Owner confirmation" msgid "Owner confirmation"
msgstr "" msgstr ""
#: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:80 #: assets/utils/providers/forms/AutoDnsConnectorForm.tsx:73
msgid "Owner confirms his consent of domain order jobs" msgid "Owner confirms his consent of domain order jobs"
msgstr "" msgstr ""
@ -1183,98 +1183,98 @@ msgid ""
"the Provider's API" "the Provider's API"
msgstr "" msgstr ""
#: assets/utils/providers/forms/GandiConnectorForm.tsx:16 #: assets/utils/providers/forms/GandiConnectorForm.tsx:9
msgid "Personal Access Token (PAT)" msgid "Personal Access Token (PAT)"
msgstr "" msgstr ""
#: assets/utils/providers/forms/GandiConnectorForm.tsx:19 #: assets/utils/providers/forms/GandiConnectorForm.tsx:12
msgid "" msgid ""
"Retrieve a Personal Access Token from your customer account on the " "Retrieve a Personal Access Token from your customer account on the "
"Provider's website" "Provider's website"
msgstr "" msgstr ""
#: assets/utils/providers/forms/GandiConnectorForm.tsx:26 #: assets/utils/providers/forms/GandiConnectorForm.tsx:19
msgid "Organization sharing ID" msgid "Organization sharing ID"
msgstr "" msgstr ""
#: assets/utils/providers/forms/GandiConnectorForm.tsx:30 #: assets/utils/providers/forms/GandiConnectorForm.tsx:23
msgid "It indicates the organization that will pay for the ordered product" msgid "It indicates the organization that will pay for the ordered product"
msgstr "" msgstr ""
#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:20 #: assets/utils/providers/forms/NamecheapConnectorForm.tsx:12
msgid "" msgid ""
"Retreive an API key and whitelist this instance's IP address on Namecheap's " "Retreive an API key and whitelist this instance's IP address on Namecheap's "
"website" "website"
msgstr "" msgstr ""
#: assets/utils/providers/forms/NamecheapConnectorForm.tsx:26 #: assets/utils/providers/forms/NamecheapConnectorForm.tsx:18
#: assets/utils/providers/forms/NamecomConnectorForm.tsx:30 #: assets/utils/providers/forms/NamecomConnectorForm.tsx:24
msgid "API key" msgid "API key"
msgstr "" msgstr ""
#: assets/utils/providers/forms/NamecomConnectorForm.tsx:24 #: assets/utils/providers/forms/NamecomConnectorForm.tsx:18
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:44 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:41
msgid "" msgid ""
"Retrieve a set of tokens from your customer account on the Provider's " "Retrieve a set of tokens from your customer account on the Provider's "
"website" "website"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:17 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:14
msgid "European Region" msgid "European Region"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:18 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:15
msgid "United States Region" msgid "United States Region"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:19 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:16
msgid "Canada Region" msgid "Canada Region"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:24 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:21
msgid "Europe" msgid "Europe"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:27 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:24
msgid "The domain is free and at the standard price" msgid "The domain is free and at the standard price"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:30 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:27
msgid "" msgid ""
"The domain is free but can be premium. Its price varies from one domain to " "The domain is free but can be premium. Its price varies from one domain to "
"another" "another"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:37 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:34
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:67 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:64
msgid "Application key" msgid "Application key"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:51 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:48
msgid "Application secret" msgid "Application secret"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:59 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:56
msgid "Consumer key" msgid "Consumer key"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:75 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:72
msgid "OVH Endpoint" msgid "OVH Endpoint"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:82 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:79
msgid "OVH subsidiary" msgid "OVH subsidiary"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:90 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:87
msgid "OVH pricing mode" msgid "OVH pricing mode"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:95 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:92
msgid "Confirm pricing mode" msgid "Confirm pricing mode"
msgstr "" msgstr ""
#: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:96 #: assets/utils/providers/forms/OvhCloudConnectorForm.tsx:93
msgid "" msgid ""
"Are you sure about this setting? This may result in additional charges from " "Are you sure about this setting? This may result in additional charges from "
"the API Provider" "the API Provider"