feat: update connector page

assets/components/tracking/ConnectorForm.tsx

@@ -1,8 +1,124 @@
-import {FormInstance} from "antd";
+import {Button, Form, FormInstance, Input, Select, Space, Typography} from "antd";
-import React from "react";
+import React, {useState} from "react";
-import {Connector} from "../../utils/api/connectors";
+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>
 }

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"

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>

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 => {

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)

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>
 
 

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>
 
 

assets/utils/api/connectors.ts

@@ -1,6 +1,6 @@
 import {request} from "./index";
 
-enum ConnectorProvider {
+export enum ConnectorProvider {
     OVH = 'ovh'
 }
 

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',

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);

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, // TODO: Infer from the user
-                            true,
+                            true, // TODO: Infer from the user
-                            true,
+                            true, // TODO: Infer from the user
                             $isDebug
                         );
                         $this->sendEmailDomainOrdered($domain, $connector, $watchList->getUser());