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 type {Connector} 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 prev = () => setCurrent(current - 1)
form.setFieldValue('provider', provider)
return (
<Form
{...formItemLayoutWithOutLabel}
@ -49,9 +51,9 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
{current === 0 && (
<>
<h2>{t`Choose a registrar`}</h2>
<Row gutter={[16, 16]}>
<Row gutter={[16, 16]} justify='center'>
{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
hoverable
style={{textAlign: "center"}}
@ -60,7 +62,8 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
next()
}}
>
<div style={{fontSize: "3rem"}}><BankOutlined style={{color: 'lightblue'}}/>
<div style={{fontSize: "3rem"}}>
<BankOutlined style={{color: 'lightblue'}}/>
</div>
<h3>{Object.keys(ConnectorProvider).find(p => ConnectorProvider[p as keyof typeof ConnectorProvider] === provider)}</h3>
</Card>
@ -71,7 +74,7 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
)}
<div hidden={current !== 1}>
{ProviderForm && <ProviderForm form={form} onCreate={onCreate}/>}
{ProviderForm && <ProviderForm form={form}/>}
</div>
<div hidden={current !== 2}>
{provider && <DefaultConnectorFormItems tosLink={providersConfig[provider].tosLink}/>}

View File

@ -84,7 +84,7 @@ export default function WatchlistPage() {
return (
<Flex gap='middle' align='center' justify='center' vertical>
{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) &&
<WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation/>}
</Card>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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