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

feat: refactor connector form

Browse Source
This commit is contained in:
Maël Gangloff 2025-02-18 17:20:33 +01:00
parent a5efa73b21
commit ddd63a47d9
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
8 changed files with 120 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
assets/components/tracking/connector/ConnectorForm.tsx
View File

@ -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>
</>
)
}

11
assets/utils/providers/forms/AutoDnsConnectorForm.tsx
View File

@ -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 {ConnectorProvider} from '../../../utils/api/connectors'
import type {Connector} from '../../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

6
assets/utils/providers/forms/GandiConnectorForm.tsx
View File

@ -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>

9
assets/utils/providers/forms/NamecheapConnectorForm.tsx
View File

@ -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 {ConnectorProvider} from '../../../utils/api/connectors'
import type {Connector} from '../../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>
)

11
assets/utils/providers/forms/NamecomConnectorForm.tsx
View File

@ -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 {ConnectorProvider} from '../../../utils/api/connectors'
import type {Connector} from '../../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

61
assets/utils/providers/forms/OvhCloudConnectorForm.tsx
View File

@ -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 }) {
const ovhFields = ovhFieldsFunction()
const ovhEndpointList = ovhEndpointListFunction()
const ovhSubsidiaryList = ovhSubsidiaryListFunction()
const ovhPricingMode = ovhPricingModeFunction()
export default function OvhCloudConnectorForm({form, onCreate}: {
form: FormInstance,
onCreate: (values: Connector) => void
}) {
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>
)

17
assets/utils/providers/forms/index.tsx
View File

@ -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'}}>
<Space>
<Button type='primary' htmlType='submit'>
{t`Create`}
</Button>
<Button type='default' htmlType='reset'>
{t`Reset`}
</Button>
</Space>
<Form.Item style={{marginTop: '5vh', textAlign: 'center'}}>
<Button type='primary' htmlType='submit'>
{t`Create`}
</Button>
</Form.Item>
</>
}

12
assets/utils/providers/index.tsx
View File

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