feat: update connector page

2025-12-29 16:15:04 +00:00 · 2024-07-30 00:55:36 +02:00
parent 3a9f22318f
commit 469537d275
11 changed files with 205 additions and 32 deletions
--- a/assets/components/tracking/ConnectorForm.tsx
+++ b/assets/components/tracking/ConnectorForm.tsx
@@ -1,8 +1,124 @@
-import {FormInstance} from "antd";
-import React from "react";
-import {Connector} from "../../utils/api/connectors";
+import {Button, Form, FormInstance, Input, Select, Space, Typography} from "antd";
+import React, {useState} from "react";
+import {Connector, ConnectorProvider} from "../../utils/api/connectors";
+import {t} from "ttag";
+import {BankOutlined} from "@ant-design/icons";
+import {regionNames} from "../../i18n";
+
+const formItemLayoutWithOutLabel = {
+    wrapperCol: {
+        xs: {span: 24, offset: 0},
+        sm: {span: 20, offset: 4},
+    },
+};

 export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
-    return <>
-    </>
+    const [provider, setProvider] = useState<string>()
+
+    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 = [{value: 'EU', label: t`Europa`}, ...[
+        'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
+    ].map(c => ({value: c, label: regionNames.of(c) ?? c}))]
+
+    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 is a premium. Its price varies from one domain to another`
+        }
+    ]
+
+    return <Form
+        {...formItemLayoutWithOutLabel}
+        form={form}
+        layout="horizontal"
+        labelCol={{span: 6}}
+        wrapperCol={{span: 14}}
+        onFinish={onCreate}
+    >
+        <Form.Item
+            label={t`Provider`}
+            name="provider"
+            rules={[{required: true, message: t`Required`}]}
+        >
+            <Select
+                placeholder={t`Please select a Provider`}
+                suffixIcon={<BankOutlined/>}
+                options={Object.keys(ConnectorProvider).map((c) => ({
+                    value: ConnectorProvider[c as keyof typeof ConnectorProvider],
+                    label: (
+                        <>
+                            <BankOutlined/>{" "} {c}
+                        </>
+                    ),
+                }))}
+                value={provider}
+                onChange={setProvider}
+            />
+        </Form.Item>
+
+        {
+            provider === ConnectorProvider.OVH && <>
+                <Typography.Link target='_blank'
+                                 href="https://api.ovh.com/createToken/index.cgi?GET=/*&PUT=/*&POST=/*&DELETE=/*">
+                    Retrieve a token set from the OVH API
+                </Typography.Link>
+                {
+                    Object.keys(ovhFields).map(fieldName => <Form.Item
+                        label={ovhFields[fieldName as keyof typeof ovhFields]}
+                        name={['authData', fieldName]}
+                        rules={[{required: true, message: t`Required`}]}
+                    >
+                        <Input/>
+                    </Form.Item>)
+                }
+                <Form.Item
+                    label={t`OVH Endpoint`}
+                    name={['authData', 'apiEndpoint']}
+                    rules={[{required: true, message: t`Required`}]}
+                >
+                    <Select options={ovhEndpointList} optionFilterProp="label"/>
+                </Form.Item>
+                <Form.Item
+                    label={t`OVH subsidiary`}
+                    name={['authData', 'ovhSubsidiary']}
+                    rules={[{required: true, message: t`Required`}]}
+                >
+                    <Select options={ovhSubsidiaryList} optionFilterProp="label"/>
+                </Form.Item>
+
+                <Form.Item
+                    label={t`OVH pricing mode`}
+                    name={['authData', 'pricingMode']}
+                    rules={[{required: true, message: t`Required`}]}
+                >
+                    <Select options={ovhPricingMode} optionFilterProp="label"/>
+                </Form.Item>
+            </>
+        }
+
+
+        <Form.Item style={{marginTop: 10}}>
+            <Space>
+                <Button type="primary" htmlType="submit">
+                    {t`Create`}
+                </Button>
+                <Button type="default" htmlType="reset">
+                    {t`Reset`}
+                </Button>
+            </Space>
+        </Form.Item>
+    </Form>
 }
--- a/assets/components/tracking/WatchlistForm.tsx
+++ b/assets/components/tracking/WatchlistForm.tsx
@@ -1,8 +1,9 @@
 import {Button, Form, FormInstance, Input, Select, Space} from "antd";
 import {t} from "ttag";
 import {MinusCircleOutlined, PlusOutlined, ThunderboltFilled} from "@ant-design/icons";
-import React from "react";
+import React, {useState} from "react";
 import {EventAction} from "../../utils/api";
+import {Connector} from "../../utils/api/connectors";


 const formItemLayout = {
@@ -23,8 +24,9 @@ const formItemLayoutWithOutLabel = {
    },
 };

-export function WatchlistForm({form, onCreateWatchlist}: {
+export function WatchlistForm({form, connectors, onCreateWatchlist}: {
    form: FormInstance,
+    connectors: (Connector & { id: string })[]
    onCreateWatchlist: (values: { domains: string[], triggers: { event: string, action: string }[] }) => void
 }) {

@@ -67,12 +69,17 @@ export function WatchlistForm({form, onCreateWatchlist}: {
        }
    ]

-    const trigerActionItems = [
+    const triggerActionItems = [
        {
            label: t`Send me an email`,
            value: 'email'
+        },
+        {
+            label: t`Buy the domain if available`,
+            value: 'buy'
        }
    ]
+    const [actionsSelect, setActionsSelect] = useState<{ [key: number]: string }>({})

    return <Form
        {...formItemLayoutWithOutLabel}
@@ -159,7 +166,6 @@ export function WatchlistForm({form, onCreateWatchlist}: {
                            required={true}
                            key={field.key}
                        >
-
                            <Space wrap>
                                <Form.Item {...field}
                                           validateTrigger={['onChange', 'onBlur']}
@@ -178,13 +184,31 @@ export function WatchlistForm({form, onCreateWatchlist}: {
                                               message: t`Required`
                                           }]}
                                           noStyle name={[field.name, 'action']}>
-                                    <Select style={{minWidth: 300}} options={trigerActionItems} showSearch
+                                    <Select style={{minWidth: 300}} options={triggerActionItems} showSearch
                                            placeholder={t`Then do that`}
-                                            optionFilterProp="label"/>
+                                            optionFilterProp="label" value={actionsSelect[field.key]}
+                                            onChange={(e) => setActionsSelect({...actionsSelect, [field.key]: e})}/>
                                </Form.Item>
+                                {actionsSelect[field.key] === 'buy' && <Form.Item {...field}
+                                                                                  validateTrigger={['onChange', 'onBlur']}
+                                                                                  rules={[{
+                                                                                      required: true,
+                                                                                      message: t`Required`
+                                                                                  }]}
+                                                                                  noStyle
+                                                                                  name={[field.name, 'connector']}>
+                                    <Select style={{minWidth: 500}} showSearch
+                                            placeholder={t`Connector`}
+                                            optionFilterProp="label"
+                                            options={connectors.map(c => ({
+                                                label: `${c.provider} (${c.id})`,
+                                                value: c.id
+                                            }))}
+                                    />
+                                </Form.Item>
+                                }
                            </Space>

-
                            {fields.length > 1 ? (
                                <MinusCircleOutlined
                                    className="dynamic-delete-button"
--- a/assets/components/tracking/WatchlistsList.tsx
+++ b/assets/components/tracking/WatchlistsList.tsx
@@ -17,7 +17,7 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                    onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
                    okText={t`Yes`}
                    cancelText={t`No`}
-                ><DeleteFilled/> </Popconfirm>}>
+                ><DeleteFilled/></Popconfirm>}>
                    <Typography.Paragraph>
                        {t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
                    </Typography.Paragraph>
--- a/assets/i18n/index.ts
+++ b/assets/i18n/index.ts
@@ -1,6 +1,7 @@
 import {addLocale, useLocale} from 'ttag'

-const locale = navigator.language.split('-')[0];
+const locale = navigator.language.split('-')[0]
+export const regionNames = new Intl.DisplayNames([locale], {type: 'region'})

 if (locale !== 'en') {
    fetch(`/locales/${locale}.po.json`).then(response => {
--- a/assets/pages/info/TldPage.tsx
+++ b/assets/pages/info/TldPage.tsx
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 import {Collapse, Divider, Table, Typography} from "antd";
 import {getTldList, Tld} from "../../utils/api";
 import {t} from 'ttag'
+import {regionNames} from "../../i18n";

 const {Text, Paragraph} = Typography

@@ -23,10 +24,6 @@ const getCountryCode = (tld: string): string => {
    return tld
 }

-const locale = navigator.language.split('-')[0]
-const regionNames = new Intl.DisplayNames([locale], {type: 'region'})
-
-
 function TldTable(filters: FiltersType) {
    const [dataTable, setDataTable] = useState<Tld[]>([])
    const [total, setTotal] = useState(0)
--- a/assets/pages/tracking/ConnectorsPage.tsx
+++ b/assets/pages/tracking/ConnectorsPage.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {Card, Flex, Form, message, Skeleton} from "antd";
 import {t} from "ttag";
-import {Connector, getConnectors} from "../../utils/api/connectors";
+import {Connector, getConnectors, postConnector} from "../../utils/api/connectors";
 import {ConnectorForm} from "../../components/tracking/ConnectorForm";
 import {AxiosError} from "axios";
 import {ConnectorsList} from "../../components/tracking/ConnectorsList";
@@ -13,6 +13,16 @@ export default function ConnectorsPage() {
    const [messageApi, contextHolder] = message.useMessage()
    const [connectors, setConnectors] = useState<ConnectorElement[] | null>()

+    const onCreateConnector = (values: Connector) => {
+        postConnector(values).then((w) => {
+            form.resetFields()
+            refreshConnectors()
+            messageApi.success(t`Connector created !`)
+        }).catch((e: AxiosError) => {
+            const data = e?.response?.data as { detail: string }
+            messageApi.error(data.detail ?? t`An error occurred`)
+        })
+    }

    const refreshConnectors = () => getConnectors().then(c => {
        setConnectors(c['hydra:member'])
@@ -28,10 +38,9 @@ export default function ConnectorsPage() {


    return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Create a Connector`} style={{width: '100%'}} loading={true}>
+        <Card title={t`Create a Connector`} style={{width: '100%'}}>
            {contextHolder}
-            <ConnectorForm form={form} onCreate={() => {
-            }}/>
+            <ConnectorForm form={form} onCreate={onCreateConnector}/>
        </Card>


--- a/assets/pages/tracking/WatchlistPage.tsx
+++ b/assets/pages/tracking/WatchlistPage.tsx
@@ -5,6 +5,7 @@ import {AxiosError} from "axios";
 import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/WatchlistForm";
 import {WatchlistsList} from "../../components/tracking/WatchlistsList";
+import {Connector, getConnectors} from "../../utils/api/connectors";


 type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
@@ -14,10 +15,18 @@ export default function WatchlistPage() {
    const [form] = Form.useForm()
    const [messageApi, contextHolder] = message.useMessage()
    const [watchlists, setWatchlists] = useState<Watchlist[] | null>()
+    const [connectors, setConnectors] = useState<(Connector & { id: string })[] | null>()

-    const onCreateWatchlist = (values: { domains: string[], triggers: { event: string, action: string }[] }) => {
+    const onCreateWatchlist = (values: {
+        domains: string[],
+        triggers: { event: string, action: string, connector?: string }[]
+    }) => {
        const domainsURI = values.domains.map(d => '/api/domains/' + d)
-        postWatchlist(domainsURI, values.triggers).then((w) => {
+        postWatchlist(domainsURI, values.triggers.map(({action, event, connector}) => ({
+            action,
+            event,
+            connector: connector !== undefined ? '/api/connectors/' + connector : undefined
+        }))).then((w) => {
            form.resetFields()
            refreshWatchlists()
            messageApi.success(t`Watchlist created !`)
@@ -37,12 +46,16 @@ export default function WatchlistPage() {

    useEffect(() => {
        refreshWatchlists()
+        getConnectors().then(c => setConnectors(c['hydra:member']))
    }, [])

    return <Flex gap="middle" align="center" justify="center" vertical>
        <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
            {contextHolder}
-            <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist}/>
+            {
+                connectors &&
+                <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist} connectors={connectors}/>
+            }
        </Card>


--- a/assets/utils/api/connectors.ts
+++ b/assets/utils/api/connectors.ts
@@ -1,6 +1,6 @@
 import {request} from "./index";

-enum ConnectorProvider {
+export enum ConnectorProvider {
    OVH = 'ovh'
 }

--- a/assets/utils/api/watchlist.ts
+++ b/assets/utils/api/watchlist.ts
@@ -14,7 +14,11 @@ export async function getWatchlist(token: string) {
    return response.data
 }

-export async function postWatchlist(domains: string[], triggers: { action: string, event: EventAction }[]) {
+export async function postWatchlist(domains: string[], triggers: {
+    action: string,
+    event: EventAction,
+    connector?: string
+}[]) {
    const response = await request<{ token: string }>({
        method: 'POST',
        url: 'watchlists',
--- a/src/Controller/ConnectorController.php
+++ b/src/Controller/ConnectorController.php
@@ -9,6 +9,7 @@ use App\Entity\User;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\EntityManagerInterface;
 use Exception;
+use Ovh\Api;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Routing\Attribute\Route;
@@ -56,7 +57,16 @@ class ConnectorController extends AbstractController
        $connector->setUser($this->getUser());

        if ($connector->getProvider() === ConnectorProvider::OVH) {
-            $connector->setAuthData(OvhConnector::verifyAuthData($connector->getAuthData()));
+            $authData = OvhConnector::verifyAuthData($connector->getAuthData());
+            $connector->setAuthData($authData);
+            $ovh = new Api(
+                $authData['appKey'],
+                $authData['appSecret'],
+                $authData['apiEndpoint'],
+                $authData['consumerKey']
+            );
+
+
        } else throw new Exception('Unknown provider');

        $this->em->persist($connector);
--- a/src/MessageHandler/ProcessDomainTriggerHandler.php
+++ b/src/MessageHandler/ProcessDomainTriggerHandler.php
@@ -63,12 +63,11 @@ final readonly class ProcessDomainTriggerHandler
                        $ovh = new OVHConnector($connector->getAuthData());
                        $isDebug = $this->kernel->isDebug();

-
                        $ovh->orderDomain(
                            $domain,
-                            true,
-                            true,
-                            true,
+                            true, // TODO: Infer from the user
+                            true, // TODO: Infer from the user
+                            true, // TODO: Infer from the user
                            $isDebug
                        );
                        $this->sendEmailDomainOrdered($domain, $connector, $watchList->getUser());