External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update ConnectorForm UI

Browse Source
This commit is contained in:
Maël Gangloff
2025-02-20 16:32:25 +01:00
parent b498af6f1e
commit 58c226847f
9 changed files with 73 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/components/tracking/connector/ConnectorForm.tsx
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}/>}

2
assets/pages/tracking/WatchlistPage.tsx
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>

9
assets/utils/providers/forms/AutoDnsConnectorForm.tsx
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

9
assets/utils/providers/forms/GandiConnectorForm.tsx
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

10
assets/utils/providers/forms/NamecheapConnectorForm.tsx
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

8
assets/utils/providers/forms/NamecomConnectorForm.tsx
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 (
<>

3
assets/utils/providers/forms/OvhCloudConnectorForm.tsx
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'},

3
assets/utils/providers/index.tsx
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> = {