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: add eslint linter

Browse Source
This commit is contained in:
Maël Gangloff
2024-12-30 23:50:15 +01:00
parent ebfcc58d16
commit 99d135cc31
64 changed files with 3579 additions and 1846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.github/workflows/symfony.yml vendored
View File

@@ -23,10 +23,15 @@ jobs:
extensions: mbstring, xml, intl, curl, iconv, pdo_pgsql, sodium, zip, http extensions: mbstring, xml, intl, curl, iconv, pdo_pgsql, sodium, zip, http
- name: Install dependencies - name: Install dependencies
run: composer install --prefer-dist --no-progress --no-suggest --optimize-autoloader run: >
composer install --prefer-dist --no-progress --no-suggest --optimize-autoloader
yarn install
- name: Run PHP-CS-Fixer - name: Run PHP-CS-Fixer
run: vendor/bin/php-cs-fixer fix --dry-run --diff run: vendor/bin/php-cs-fixer fix --dry-run --diff
- name: Run PHPStan - name: Run PHPStan
run: vendor/bin/phpstan analyse run: vendor/bin/phpstan analyse
- name: Run ESLint
run: yarn run eslint

114
assets/App.tsx
View File

@@ -1,23 +1,23 @@
import {Button, ConfigProvider, FloatButton, Layout, Space, theme, Tooltip, Typography} from "antd"; import {Button, ConfigProvider, FloatButton, Layout, Space, theme, Tooltip, Typography} from 'antd'
import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom"; import {Link, Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom'
import TextPage from "./pages/TextPage"; import TextPage from './pages/TextPage'
import DomainSearchPage from "./pages/search/DomainSearchPage"; import DomainSearchPage from './pages/search/DomainSearchPage'
import EntitySearchPage from "./pages/search/EntitySearchPage"; import EntitySearchPage from './pages/search/EntitySearchPage'
import NameserverSearchPage from "./pages/search/NameserverSearchPage"; import NameserverSearchPage from './pages/search/NameserverSearchPage'
import TldPage from "./pages/search/TldPage"; import TldPage from './pages/search/TldPage'
import StatisticsPage from "./pages/StatisticsPage"; import StatisticsPage from './pages/StatisticsPage'
import WatchlistPage from "./pages/tracking/WatchlistPage"; import WatchlistPage from './pages/tracking/WatchlistPage'
import UserPage from "./pages/UserPage"; import UserPage from './pages/UserPage'
import React, {useCallback, useEffect, useMemo, useState} from "react"; import React, {useCallback, useEffect, useMemo, useState} from 'react'
import {getUser} from "./utils/api"; import {getUser} from './utils/api'
import LoginPage, {AuthenticatedContext} from "./pages/LoginPage"; import LoginPage, {AuthenticatedContext} from './pages/LoginPage'
import ConnectorPage from "./pages/tracking/ConnectorPage"; import ConnectorPage from './pages/tracking/ConnectorPage'
import NotFoundPage from "./pages/NotFoundPage"; import NotFoundPage from './pages/NotFoundPage'
import useBreakpoint from "./hooks/useBreakpoint"; import useBreakpoint from './hooks/useBreakpoint'
import {Sider} from "./components/Sider"; import {Sider} from './components/Sider'
import {jt, t} from "ttag"; import {jt, t} from 'ttag'
import {BugOutlined, InfoCircleOutlined, MergeOutlined} from '@ant-design/icons' import {BugOutlined, InfoCircleOutlined, MergeOutlined} from '@ant-design/icons'
import TrackedDomainPage from "./pages/tracking/TrackedDomainPage"; import TrackedDomainPage from './pages/tracking/TrackedDomainPage'
const PROJECT_LINK = 'https://github.com/maelgangloff/domain-watchdog' const PROJECT_LINK = 'https://github.com/maelgangloff/domain-watchdog'
const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt' const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt'
@@ -25,35 +25,33 @@ const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt'
const ProjectLink = <Typography.Link target='_blank' href={PROJECT_LINK}>Domain Watchdog</Typography.Link> const ProjectLink = <Typography.Link target='_blank' href={PROJECT_LINK}>Domain Watchdog</Typography.Link>
const LicenseLink = <Typography.Link target='_blank' href={LICENSE_LINK}>AGPL-3.0-or-later</Typography.Link> const LicenseLink = <Typography.Link target='_blank' href={LICENSE_LINK}>AGPL-3.0-or-later</Typography.Link>
export default function App() { export default function App(): React.ReactElement {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation() const location = useLocation()
const sm = useBreakpoint('sm') const sm = useBreakpoint('sm')
const [isAuthenticated, setIsAuthenticated] = useState(false) const [isAuthenticated, setIsAuthenticated] = useState(false)
const authenticated = useCallback((authenticated: boolean) => { const authenticated = useCallback((authenticated: boolean) => {
setIsAuthenticated(authenticated) setIsAuthenticated(authenticated)
}, []); }, [])
const contextValue = useMemo(() => ({ const contextValue = useMemo(() => ({
authenticated, authenticated,
setIsAuthenticated setIsAuthenticated
}), [authenticated, setIsAuthenticated]) }), [authenticated, setIsAuthenticated])
const [darkMode, setDarkMode] = useState(false); const [darkMode, setDarkMode] = useState(false)
const windowQuery = window.matchMedia("(prefers-color-scheme:dark)"); const windowQuery = window.matchMedia('(prefers-color-scheme:dark)')
const darkModeChange = useCallback((event: MediaQueryListEvent) => { const darkModeChange = useCallback((event: MediaQueryListEvent) => {
setDarkMode(event.matches) setDarkMode(event.matches)
}, []) }, [])
useEffect(() => { useEffect(() => {
windowQuery.addEventListener("change", darkModeChange) windowQuery.addEventListener('change', darkModeChange)
return () => { return () => {
windowQuery.removeEventListener("change", darkModeChange) windowQuery.removeEventListener('change', darkModeChange)
} }
}, [windowQuery, darkModeChange]) }, [windowQuery, darkModeChange])
@@ -69,16 +67,16 @@ export default function App() {
}) })
}, []) }, [])
return (
return <ConfigProvider <ConfigProvider
theme={{ theme={{
algorithm: darkMode ? theme.darkAlgorithm : theme.compactAlgorithm algorithm: darkMode ? theme.darkAlgorithm : theme.compactAlgorithm
}} }}
> >
<AuthenticatedContext.Provider value={contextValue}> <AuthenticatedContext.Provider value={contextValue}>
<Layout hasSider style={{minHeight: '100vh'}}> <Layout hasSider style={{minHeight: '100vh'}}>
{/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0*/} {/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0 */}
<Layout.Sider collapsible breakpoint="sm" width={220} {...(sm ? {collapsedWidth: 0} : {})}> <Layout.Sider collapsible breakpoint='sm' width={220} {...(sm ? {collapsedWidth: 0} : {})}>
<Sider isAuthenticated={isAuthenticated}/> <Sider isAuthenticated={isAuthenticated}/>
</Layout.Sider> </Layout.Sider>
<Layout> <Layout>
@@ -86,32 +84,33 @@ export default function App() {
<Layout.Content style={sm ? {margin: '24px 0'} : {margin: '24px 16px 0'}}> <Layout.Content style={sm ? {margin: '24px 0'} : {margin: '24px 16px 0'}}>
<div style={{ <div style={{
padding: 24, padding: 24,
minHeight: 360, minHeight: 360
}}> }}
>
<Routes> <Routes>
<Route path="/" element={<Navigate to="/login"/>}/> <Route path='/' element={<Navigate to='/login'/>}/>
<Route path="/home" element={<TextPage resource='home.md'/>}/> <Route path='/home' element={<TextPage resource='home.md'/>}/>
<Route path="/search/domain" element={<DomainSearchPage/>}/> <Route path='/search/domain' element={<DomainSearchPage/>}/>
<Route path="/search/domain/:query" element={<DomainSearchPage/>}/> <Route path='/search/domain/:query' element={<DomainSearchPage/>}/>
<Route path="/search/entity" element={<EntitySearchPage/>}/> <Route path='/search/entity' element={<EntitySearchPage/>}/>
<Route path="/search/nameserver" element={<NameserverSearchPage/>}/> <Route path='/search/nameserver' element={<NameserverSearchPage/>}/>
<Route path="/search/tld" element={<TldPage/>}/> <Route path='/search/tld' element={<TldPage/>}/>
<Route path="/tracking/watchlist" element={<WatchlistPage/>}/> <Route path='/tracking/watchlist' element={<WatchlistPage/>}/>
<Route path="/tracking/domains" element={<TrackedDomainPage/>}/> <Route path='/tracking/domains' element={<TrackedDomainPage/>}/>
<Route path="/tracking/connectors" element={<ConnectorPage/>}/> <Route path='/tracking/connectors' element={<ConnectorPage/>}/>
<Route path="/stats" element={<StatisticsPage/>}/> <Route path='/stats' element={<StatisticsPage/>}/>
<Route path="/user" element={<UserPage/>}/> <Route path='/user' element={<UserPage/>}/>
<Route path="/faq" element={<TextPage resource='faq.md'/>}/> <Route path='/faq' element={<TextPage resource='faq.md'/>}/>
<Route path="/tos" element={<TextPage resource='tos.md'/>}/> <Route path='/tos' element={<TextPage resource='tos.md'/>}/>
<Route path="/privacy" element={<TextPage resource='privacy.md'/>}/> <Route path='/privacy' element={<TextPage resource='privacy.md'/>}/>
<Route path="/login" element={<LoginPage/>}/> <Route path='/login' element={<LoginPage/>}/>
<Route path="*" element={<NotFoundPage/>}/> <Route path='*' element={<NotFoundPage/>}/>
</Routes> </Routes>
</div> </div>
</Layout.Content> </Layout.Content>
@@ -120,9 +119,15 @@ export default function App() {
<Link to='/tos'><Button type='text'>{t`TOS`}</Button></Link> <Link to='/tos'><Button type='text'>{t`TOS`}</Button></Link>
<Link to='/privacy'><Button type='text'>{t`Privacy Policy`}</Button></Link> <Link to='/privacy'><Button type='text'>{t`Privacy Policy`}</Button></Link>
<Link to='/faq'><Button type='text'>{t`FAQ`}</Button></Link> <Link to='/faq'><Button type='text'>{t`FAQ`}</Button></Link>
<Typography.Link target='_blank' <Typography.Link
href='https://github.com/maelgangloff/domain-watchdog/wiki'><Button target='_blank'
type='text'>{t`Documentation`}</Button></Typography.Link> href='https://github.com/maelgangloff/domain-watchdog/wiki'
>
<Button
type='text'
>{t`Documentation`}
</Button>
</Typography.Link>
</Space> </Space>
<Typography.Paragraph style={{marginTop: '1em'}}> <Typography.Paragraph style={{marginTop: '1em'}}>
{jt`${ProjectLink} is an open source project distributed under the ${LicenseLink} license.`} {jt`${ProjectLink} is an open source project distributed under the ${LicenseLink} license.`}
@@ -134,7 +139,7 @@ export default function App() {
style={{ style={{
position: 'fixed', position: 'fixed',
insetInlineEnd: (100 - 40) / 2, insetInlineEnd: (100 - 40) / 2,
bottom: 100 - 40 / 2, bottom: 100 - 40 / 2
}} }}
icon={<InfoCircleOutlined/>} icon={<InfoCircleOutlined/>}
> >
@@ -148,4 +153,5 @@ export default function App() {
</Layout> </Layout>
</AuthenticatedContext.Provider> </AuthenticatedContext.Provider>
</ConfigProvider> </ConfigProvider>
)
} }

41
assets/components/LoginForm.tsx
View File

@@ -1,34 +1,29 @@
import {Button, Form, Input, message, Space} from "antd"; import {Button, Form, Input, message, Space} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import React, {useContext, useEffect} from "react"; import React, {useContext, useEffect} from 'react'
import {getUser, login} from "../utils/api"; import {getUser, login} from '../utils/api'
import {AuthenticatedContext} from "../pages/LoginPage"; import {AuthenticatedContext} from '../pages/LoginPage'
import {useNavigate} from "react-router-dom"; import {useNavigate} from 'react-router-dom'
import {showErrorAPI} from "../utils/functions/showErrorAPI"; import {showErrorAPI} from '../utils/functions/showErrorAPI'
interface FieldType {
type FieldType = { username: string
username: string; password: string
password: string;
} }
export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) { export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
const navigate = useNavigate() const navigate = useNavigate()
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
const {setIsAuthenticated} = useContext(AuthenticatedContext) const {setIsAuthenticated} = useContext(AuthenticatedContext)
useEffect(() => { useEffect(() => {
getUser().then(() => { getUser().then(() => {
setIsAuthenticated(true) setIsAuthenticated(true)
navigate('/home') navigate('/home')
}) })
}, []) }, [])
const onFinish = (data: FieldType) => { const onFinish = (data: FieldType) => {
login(data.username, data.password).then(() => { login(data.username, data.password).then(() => {
setIsAuthenticated(true) setIsAuthenticated(true)
@@ -38,19 +33,20 @@ export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
showErrorAPI(e, messageApi) showErrorAPI(e, messageApi)
}) })
} }
return <> return (
<>
{contextHolder} {contextHolder}
<Form <Form
name="basic" name='basic'
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 16}} wrapperCol={{span: 16}}
style={{maxWidth: 600}} style={{maxWidth: 600}}
onFinish={onFinish} onFinish={onFinish}
autoComplete="off" autoComplete='off'
> >
<Form.Item <Form.Item
label={t`Email address`} label={t`Email address`}
name="username" name='username'
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Input autoFocus/> <Input autoFocus/>
@@ -58,7 +54,7 @@ export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
<Form.Item<FieldType> <Form.Item<FieldType>
label={t`Password`} label={t`Password`}
name="password" name='password'
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Input.Password/> <Input.Password/>
@@ -66,16 +62,17 @@ export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
<Space> <Space>
<Form.Item wrapperCol={{offset: 8, span: 16}}> <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type="primary" htmlType="submit"> <Button type='primary' htmlType='submit'>
{t`Submit`} {t`Submit`}
</Button> </Button>
</Form.Item> </Form.Item>
{ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}> {ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type="dashed" htmlType="button" href="/login/oauth"> <Button type='dashed' htmlType='button' href='/login/oauth'>
{t`Log in with SSO`} {t`Log in with SSO`}
</Button> </Button>
</Form.Item>} </Form.Item>}
</Space> </Space>
</Form> </Form>
</> </>
)
} }

35
assets/components/RegisterForm.tsx
View File

@@ -1,20 +1,17 @@
import {Button, Form, Input, message} from "antd"; import {Button, Form, Input, message} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import React, {useState} from "react"; import React from 'react'
import {register} from "../utils/api"; import {register} from '../utils/api'
import {useNavigate} from "react-router-dom"; import {useNavigate} from 'react-router-dom'
import {showErrorAPI} from "../utils/functions/showErrorAPI"; import {showErrorAPI} from '../utils/functions/showErrorAPI'
interface FieldType {
type FieldType = { username: string
username: string; password: string
password: string;
} }
export function RegisterForm() { export function RegisterForm() {
const [error, setError] = useState<string>()
const navigate = useNavigate() const navigate = useNavigate()
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
@@ -25,19 +22,20 @@ export function RegisterForm() {
showErrorAPI(e, messageApi) showErrorAPI(e, messageApi)
}) })
} }
return <> return (
<>
{contextHolder} {contextHolder}
<Form <Form
name="basic" name='basic'
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 16}} wrapperCol={{span: 16}}
style={{maxWidth: 600}} style={{maxWidth: 600}}
onFinish={onFinish} onFinish={onFinish}
autoComplete="off" autoComplete='off'
> >
<Form.Item <Form.Item
label={t`Email address`} label={t`Email address`}
name="username" name='username'
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Input autoFocus/> <Input autoFocus/>
@@ -45,17 +43,18 @@ export function RegisterForm() {
<Form.Item<FieldType> <Form.Item<FieldType>
label={t`Password`} label={t`Password`}
name="password" name='password'
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Input.Password/> <Input.Password/>
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{offset: 8, span: 16}}> <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button block type="primary" htmlType="submit"> <Button block type='primary' htmlType='submit'>
{t`Register`} {t`Register`}
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</> </>
)
} }

25
assets/components/Sider.tsx
View File

@@ -1,5 +1,5 @@
import {ItemType} from "antd/lib/menu/interface"; import {ItemType} from 'antd/lib/menu/interface'
import {t} from "ttag"; import {t} from 'ttag'
import { import {
AimOutlined, AimOutlined,
ApiOutlined, ApiOutlined,
@@ -13,10 +13,10 @@ import {
SearchOutlined, SearchOutlined,
TableOutlined, TableOutlined,
UserOutlined UserOutlined
} from "@ant-design/icons"; } from '@ant-design/icons'
import {Menu} from "antd"; import {Menu} from 'antd'
import React from "react"; import React from 'react'
import {useLocation, useNavigate} from "react-router-dom"; import {useLocation, useNavigate} from 'react-router-dom'
export function Sider({isAuthenticated}: { isAuthenticated: boolean }) { export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
const navigate = useNavigate() const navigate = useNavigate()
@@ -49,7 +49,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
title: t`TLD list`, title: t`TLD list`,
disabled: !isAuthenticated, disabled: !isAuthenticated,
onClick: () => navigate('/search/tld') onClick: () => navigate('/search/tld')
}, }
/* /*
{ {
key: 'entity-finder', key: 'entity-finder',
@@ -118,7 +118,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
icon: <LogoutOutlined/>, icon: <LogoutOutlined/>,
label: t`Log out`, label: t`Log out`,
danger: true, danger: true,
onClick: () => window.location.replace("/logout") onClick: () => window.location.replace('/logout')
}]) }])
} else { } else {
menuItems.push({ menuItems.push({
@@ -129,12 +129,13 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
}) })
} }
return <Menu return (
<Menu
defaultOpenKeys={['search', 'info', 'tracking', 'doc']} defaultOpenKeys={['search', 'info', 'tracking', 'doc']}
selectedKeys={[location.pathname.includes('/search/domain') ? '/search/domain' : location.pathname]} selectedKeys={[location.pathname.includes('/search/domain') ? '/search/domain' : location.pathname]}
mode="inline" mode='inline'
theme="dark" theme='dark'
items={menuItems} items={menuItems}
/> />
)
} }

23
assets/components/search/DomainDiagram.tsx
View File

@@ -1,15 +1,14 @@
import React, {useEffect} from "react"; import React, {useEffect} from 'react'
import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from "@xyflow/react"; import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
import {Flex} from "antd"; import {Flex} from 'antd'
import {Domain} from "../../utils/api"; import {Domain} from '../../utils/api'
import {getLayoutedElements} from "../tracking/watchlist/diagram/getLayoutedElements"; import {getLayoutedElements} from '../tracking/watchlist/diagram/getLayoutedElements'
import {domainEntitiesToNode, domainToNode, nsToNode, tldToNode} from "../tracking/watchlist/diagram/watchlistToNodes"; import {domainEntitiesToNode, domainToNode, nsToNode, tldToNode} from '../tracking/watchlist/diagram/watchlistToNodes'
import {domainEntitiesToEdges, domainNSToEdges, tldToEdge} from "../tracking/watchlist/diagram/watchlistToEdges"; import {domainEntitiesToEdges, domainNSToEdges, tldToEdge} from '../tracking/watchlist/diagram/watchlistToEdges'
export function DomainDiagram({domain}: { domain: Domain }) { export function DomainDiagram({domain}: { domain: Domain }) {
const [nodes, setNodes, onNodesChange] = useNodesState([]) const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
const [edges, setEdges, onEdgesChange] = useEdgesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
useEffect(() => { useEffect(() => {
const nodes = [ const nodes = [
@@ -33,7 +32,8 @@ export function DomainDiagram({domain}: { domain: Domain }) {
setEdges(e.edges) setEdges(e.edges)
}, []) }, [])
return <Flex style={{width: '100%', height: '100vh'}}> return (
<Flex style={{width: '100%', height: '100vh'}}>
<ReactFlow <ReactFlow
fitView fitView
colorMode='system' colorMode='system'
@@ -50,4 +50,5 @@ export function DomainDiagram({domain}: { domain: Domain }) {
<Background/> <Background/>
</ReactFlow> </ReactFlow>
</Flex> </Flex>
)
} }

25
assets/components/search/DomainLifecycleSteps.tsx
View File

@@ -1,21 +1,19 @@
import {StepProps, Steps, Tooltip} from "antd"; import {StepProps, Steps, Tooltip} from 'antd'
import React from "react"; import React from 'react'
import {t} from "ttag"; import {t} from 'ttag'
import { import {
CheckOutlined, CheckOutlined,
DeleteOutlined, DeleteOutlined,
ExclamationCircleOutlined, ExclamationCircleOutlined,
FieldTimeOutlined, FieldTimeOutlined,
SignatureOutlined SignatureOutlined
} from "@ant-design/icons"; } from '@ant-design/icons'
import {rdapEventDetailTranslation, rdapStatusCodeDetailTranslation} from "../../utils/functions/rdapTranslation"; import {rdapEventDetailTranslation, rdapStatusCodeDetailTranslation} from '../../utils/functions/rdapTranslation'
export function DomainLifecycleSteps({status}: { status: string[] }) { export function DomainLifecycleSteps({status}: { status: string[] }) {
const rdapEventDetailTranslated = rdapEventDetailTranslation() const rdapEventDetailTranslated = rdapEventDetailTranslation()
const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation() const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
const steps: StepProps[] = [ const steps: StepProps[] = [
{ {
title: <Tooltip title={rdapEventDetailTranslated.registration}>{t`Registration`}</Tooltip>, title: <Tooltip title={rdapEventDetailTranslated.registration}>{t`Registration`}</Tooltip>,
@@ -26,16 +24,19 @@ export function DomainLifecycleSteps({status}: { status: string[] }) {
icon: <CheckOutlined/> icon: <CheckOutlined/>
}, },
{ {
title: <Tooltip title={rdapStatusCodeDetailTranslated["auto renew period"]}>{t`Auto-Renew Grace Period`}</Tooltip>, title: <Tooltip
title={rdapStatusCodeDetailTranslated['auto renew period']}>{t`Auto-Renew Grace Period`}</Tooltip>,
icon: <FieldTimeOutlined style={{color: 'palevioletred'}}/> icon: <FieldTimeOutlined style={{color: 'palevioletred'}}/>
}, },
{ {
title: <Tooltip title: <Tooltip
title={rdapStatusCodeDetailTranslated["redemption period"]}>{t`Redemption Grace Period`}</Tooltip>, title={rdapStatusCodeDetailTranslated['redemption period']}
>{t`Redemption Grace Period`}
</Tooltip>,
icon: <ExclamationCircleOutlined style={{color: 'magenta'}}/> icon: <ExclamationCircleOutlined style={{color: 'magenta'}}/>
}, },
{ {
title: <Tooltip title={rdapStatusCodeDetailTranslated["pending delete"]}>{t`Pending Delete`}</Tooltip>, title: <Tooltip title={rdapStatusCodeDetailTranslated['pending delete']}>{t`Pending Delete`}</Tooltip>,
icon: <DeleteOutlined style={{color: 'orangered'}}/> icon: <DeleteOutlined style={{color: 'orangered'}}/>
} }
] ]
@@ -50,8 +51,10 @@ export function DomainLifecycleSteps({status}: { status: string[] }) {
currentStep = 4 currentStep = 4
} }
return <Steps return (
<Steps
current={currentStep} current={currentStep}
items={steps} items={steps}
/> />
)
} }

112
assets/components/search/DomainResult.tsx
View File

@@ -1,98 +1,111 @@
import {Badge, Card, Col, Divider, Flex, Row, Space, Tag, Tooltip, Typography} from "antd"; import {Badge, Card, Col, Divider, Flex, Row, Space, Tag, Tooltip, Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {EventTimeline} from "./EventTimeline"; import {EventTimeline} from './EventTimeline'
import {EntitiesList} from "./EntitiesList"; import {EntitiesList} from './EntitiesList'
import {DomainDiagram} from "./DomainDiagram"; import {DomainDiagram} from './DomainDiagram'
import React from "react"; import React from 'react'
import {Domain} from "../../utils/api"; import {Domain} from '../../utils/api'
import {rdapStatusCodeDetailTranslation} from "../../utils/functions/rdapTranslation"; import {regionNames} from '../../i18n'
import {regionNames} from "../../i18n";
import {getCountryCode} from "../../utils/functions/getCountryCode"; import {getCountryCode} from '../../utils/functions/getCountryCode'
import {eppStatusCodeToColor} from "../../utils/functions/eppStatusCodeToColor"; import {DomainLifecycleSteps} from './DomainLifecycleSteps'
import {DomainLifecycleSteps} from "./DomainLifecycleSteps";
import {BankOutlined, KeyOutlined, SafetyCertificateOutlined} from '@ant-design/icons' import {BankOutlined, KeyOutlined, SafetyCertificateOutlined} from '@ant-design/icons'
import {statusToTag} from '../tracking/StatusToTag'
export function DomainResult({domain}: { domain: Domain }) { export function DomainResult({domain}: { domain: Domain }) {
const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
const {tld, events} = domain const {tld, events} = domain
const domainEvents = events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime()) const domainEvents = events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
const clientStatus = domain.status.filter(s => s.startsWith('client')) const clientStatus = domain.status.filter(s => s.startsWith('client'))
const serverStatus = domain.status.filter(s => !clientStatus.includes(s)) const serverStatus = domain.status.filter(s => !clientStatus.includes(s))
const isLocked = (type: 'client' | 'server'): boolean => const isDomainLocked = (type: 'client' | 'server'): boolean =>
(domain.status.includes(type + ' update prohibited') && domain.status.includes(type + ' delete prohibited')) (domain.status.includes(type + ' update prohibited') && domain.status.includes(type + ' delete prohibited')) ||
|| domain.status.includes(type + ' transfer prohibited') domain.status.includes(type + ' transfer prohibited')
const statusToTag = (s: string) => <Tooltip return (
placement='bottomLeft' <Space direction='vertical' size='middle' style={{width: '100%'}}>
title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip>
return <Space direction="vertical" size="middle" style={{width: '100%'}}> <Badge.Ribbon
text={
<Badge.Ribbon text={
<Tooltip <Tooltip
title={tld.type === 'ccTLD' ? regionNames.of(getCountryCode(tld.tld)) : tld.type === 'gTLD' ? tld?.registryOperator : undefined}> title={tld.type === 'ccTLD' ? regionNames.of(getCountryCode(tld.tld)) : tld.type === 'gTLD' ? tld?.registryOperator : undefined}
>
{`${domain.tld.tld.toUpperCase()} (${tld.type})`} {`${domain.tld.tld.toUpperCase()} (${tld.type})`}
</Tooltip> </Tooltip>
} }
color={ color={
tld.type === 'ccTLD' ? 'purple' : tld.type === 'ccTLD'
(tld.type === 'gTLD' && tld.specification13) ? "volcano" : ? 'purple'
tld.type === 'gTLD' ? "green" : (tld.type === 'gTLD' && tld.specification13)
: "cyan" ? 'volcano'
}> : tld.type === 'gTLD'
? 'green'
: 'cyan'
}
>
<Card title={<Space> <Card
title={<Space>
{domain.ldhName}{domain.handle && <Typography.Text code>{domain.handle}</Typography.Text>} {domain.ldhName}{domain.handle && <Typography.Text code>{domain.handle}</Typography.Text>}
</Space>} </Space>}
size="small"> size='small'
>
{ {
domain.events.length > 0 && <DomainLifecycleSteps status={domain.status}/> domain.events.length > 0 && <DomainLifecycleSteps status={domain.status}/>
} }
<Row gutter={8}> <Row gutter={8}>
<Col span={24} xl={12} xxl={12}> <Col span={24} xl={12} xxl={12}>
<Flex justify='center' align='center' style={{margin: 10}} wrap gap="4px 0"> <Flex justify='center' align='center' style={{margin: 10}} wrap gap='4px 0'>
<Tooltip <Tooltip
title={t`Registry-level protection, ensuring the highest level of security by preventing unauthorized, unwanted, or accidental changes to the domain name at the registry level`}> title={t`Registry-level protection, ensuring the highest level of security by preventing unauthorized, unwanted, or accidental changes to the domain name at the registry level`}
<Tag bordered={false} color={isLocked('server') ? 'green' : 'default'} >
<Tag
bordered={false} color={isDomainLocked('server') ? 'green' : 'default'}
icon={<SafetyCertificateOutlined icon={<SafetyCertificateOutlined
style={{fontSize: '16px'}}/>}>{t`Registry Lock`}</Tag> style={{fontSize: '16px'}}
/>}
>{t`Registry Lock`}
</Tag>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
title={t`Registrar-level protection, safeguarding the domain from unauthorized, unwanted, or accidental changes through registrar controls`}> title={t`Registrar-level protection, safeguarding the domain from unauthorized, unwanted, or accidental changes through registrar controls`}
<Tag bordered={false} color={isLocked('client') ? 'green' : 'default'} >
<Tag
bordered={false} color={isDomainLocked('client') ? 'green' : 'default'}
icon={<BankOutlined icon={<BankOutlined
style={{fontSize: '16px'}}/>}>{t`Registrar Lock`}</Tag> style={{fontSize: '16px'}}
/>}
>{t`Registrar Lock`}
</Tag>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
title={t`DNSSEC secures DNS by adding cryptographic signatures to DNS records, ensuring authenticity and integrity of responses`}> title={t`DNSSEC secures DNS by adding cryptographic signatures to DNS records, ensuring authenticity and integrity of responses`}
<Tag bordered={false} color={domain.delegationSigned ? 'green' : 'default'} >
icon={<KeyOutlined style={{fontSize: '16px'}}/>}>{t`DNSSEC`}</Tag> <Tag
bordered={false} color={domain.delegationSigned ? 'green' : 'default'}
icon={<KeyOutlined style={{fontSize: '16px'}}/>}
>{t`DNSSEC`}
</Tag>
</Tooltip> </Tooltip>
</Flex> </Flex>
{domain.status.length > 0 && {domain.status.length > 0 &&
<> <>
<Divider orientation="left">{t`EPP Status Codes`}</Divider> <Divider orientation='left'>{t`EPP Status Codes`}</Divider>
<Flex gap="4px 0" wrap> <Flex gap='4px 0' wrap>
{serverStatus.map(statusToTag)} {serverStatus.map(statusToTag)}
{clientStatus.map(statusToTag)} {clientStatus.map(statusToTag)}
</Flex> </Flex>
</> </>}
}
{ {
domain.events.length > 0 && <> domain.events.length > 0 && <>
<Divider orientation="left">{t`Timeline`}</Divider> <Divider orientation='left'>{t`Timeline`}</Divider>
<EventTimeline events={domainEvents}/> <EventTimeline events={domainEvents}/>
</> </>
} }
{ {
domain.entities.length > 0 && domain.entities.length > 0 &&
<> <>
<Divider orientation="left">{t`Entities`}</Divider> <Divider orientation='left'>{t`Entities`}</Divider>
<EntitiesList domain={domain}/> <EntitiesList domain={domain}/>
</> </>
} }
@@ -104,4 +117,5 @@ export function DomainResult({domain}: { domain: Domain }) {
</Card> </Card>
</Badge.Ribbon> </Badge.Ribbon>
</Space> </Space>
)
} }

30
assets/components/search/DomainSearchBar.tsx
View File

@@ -1,20 +1,24 @@
import {Form, Input} from "antd"; import {Form, Input} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {SearchOutlined} from "@ant-design/icons"; import {SearchOutlined} from '@ant-design/icons'
import React from "react"; import React from 'react'
export type FieldType = { export interface FieldType {
ldhName: string ldhName: string
} }
export function DomainSearchBar({onFinish, initialValue}: { onFinish: (values: FieldType) => void, initialValue?: string }) { export function DomainSearchBar({onFinish, initialValue}: {
return <Form onFinish: (values: FieldType) => void,
initialValue?: string
}) {
return (
<Form
onFinish={onFinish} onFinish={onFinish}
autoComplete="off" autoComplete='off'
style={{width: '100%'}} style={{width: '100%'}}
> >
<Form.Item<FieldType> <Form.Item<FieldType>
name="ldhName" name='ldhName'
initialValue={initialValue} initialValue={initialValue}
rules={[{ rules={[{
required: true, required: true,
@@ -26,13 +30,15 @@ export function DomainSearchBar({onFinish, initialValue}: { onFinish: (values: F
min: 2 min: 2
}]} }]}
> >
<Input style={{textAlign: 'center'}} <Input
size="large" style={{textAlign: 'center'}}
size='large'
prefix={<SearchOutlined/>} prefix={<SearchOutlined/>}
placeholder="example.com" placeholder='example.com'
autoComplete='off' autoComplete='off'
autoFocus autoFocus
/> />
</Form.Item> </Form.Item>
</Form> </Form>
)
} }

38
assets/components/search/EntitiesList.tsx
View File

@@ -1,30 +1,33 @@
import {List, Tag, Tooltip, Typography} from "antd"; import {List, Tag, Tooltip, Typography} from 'antd'
import React from "react"; import React from 'react'
import {Domain} from "../../utils/api"; import {Domain} from '../../utils/api'
import {rdapRoleDetailTranslation, rdapRoleTranslation} from "../../utils/functions/rdapTranslation"; import {rdapRoleDetailTranslation, rdapRoleTranslation} from '../../utils/functions/rdapTranslation'
import {roleToAvatar} from "../../utils/functions/roleToAvatar"; import {roleToAvatar} from '../../utils/functions/roleToAvatar'
import {rolesToColor} from "../../utils/functions/rolesToColor"; import {rolesToColor} from '../../utils/functions/rolesToColor'
import {sortDomainEntities} from "../../utils/functions/sortDomainEntities"; import {sortDomainEntities} from '../../utils/functions/sortDomainEntities'
import {extractDetailsFromJCard} from "../../utils/functions/extractDetailsFromJCard"; import {extractDetailsFromJCard} from '../../utils/functions/extractDetailsFromJCard'
export function EntitiesList({domain}: { domain: Domain }) { export function EntitiesList({domain}: { domain: Domain }) {
const rdapRoleTranslated = rdapRoleTranslation() const rdapRoleTranslated = rdapRoleTranslation()
const rdapRoleDetailTranslated = rdapRoleDetailTranslation() const rdapRoleDetailTranslated = rdapRoleDetailTranslation()
const roleToTag = (r: string) => <Tooltip const roleToTag = (r: string) => <Tooltip
title={rdapRoleDetailTranslated[r as keyof typeof rdapRoleDetailTranslated] || undefined}> title={rdapRoleDetailTranslated[r as keyof typeof rdapRoleDetailTranslated] || undefined}
<Tag color={rolesToColor([r])}>{rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] || r >
}</Tag> <Tag color={rolesToColor([r])}>{rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] || r}
</Tag>
</Tooltip> </Tooltip>
return <List return (
className="demo-loadmore-list" <List
itemLayout="horizontal" className='demo-loadmore-list'
itemLayout='horizontal'
dataSource={sortDomainEntities(domain)} dataSource={sortDomainEntities(domain)}
renderItem={(e) => { renderItem={(e) => {
const details = extractDetailsFromJCard(e) const details = extractDetailsFromJCard(e)
return <List.Item> return (
<List.Item>
<List.Item.Meta <List.Item.Meta
avatar={roleToAvatar(e)} avatar={roleToAvatar(e)}
title={<Typography.Text code>{e.entity.handle}</Typography.Text>} title={<Typography.Text code>{e.entity.handle}</Typography.Text>}
@@ -35,7 +38,8 @@ export function EntitiesList({domain}: { domain: Domain }) {
/> />
{e.roles.map(roleToTag)} {e.roles.map(roleToTag)}
</List.Item> </List.Item>
} )
} }}
/> />
)
} }

42
assets/components/search/EventTimeline.tsx
View File

@@ -1,10 +1,10 @@
import {Timeline, Tooltip, Typography} from "antd"; import {Timeline, Tooltip, Typography} from 'antd'
import React from "react"; import React from 'react'
import {Event} from "../../utils/api"; import {Event} from '../../utils/api'
import useBreakpoint from "../../hooks/useBreakpoint"; import useBreakpoint from '../../hooks/useBreakpoint'
import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../utils/functions/rdapTranslation"; import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../utils/functions/rdapTranslation'
import {actionToColor} from "../../utils/functions/actionToColor"; import {actionToColor} from '../../utils/functions/actionToColor'
import {actionToIcon} from "../../utils/functions/actionToIcon"; import {actionToIcon} from '../../utils/functions/actionToIcon'
export function EventTimeline({events}: { events: Event[] }) { export function EventTimeline({events}: { events: Event[] }) {
const sm = useBreakpoint('sm') const sm = useBreakpoint('sm')
@@ -13,27 +13,35 @@ export function EventTimeline({events}: { events: Event[] }) {
const rdapEventNameTranslated = rdapEventNameTranslation() const rdapEventNameTranslated = rdapEventNameTranslation()
const rdapEventDetailTranslated = rdapEventDetailTranslation() const rdapEventDetailTranslated = rdapEventDetailTranslation()
return <> return (
<>
<Timeline <Timeline
mode={sm ? "left" : "right"} mode={sm ? 'left' : 'right'}
items={events.map(e => { items={events.map(e => {
const eventName = <Typography.Text style={{color: e.deleted ? 'grey' : 'default'}}> const eventName = (
<Typography.Text style={{color: e.deleted ? 'grey' : 'default'}}>
{rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] || e.action} {rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] || e.action}
</Typography.Text> </Typography.Text>
)
const dateStr = <Typography.Text const dateStr = (
style={{color: e.deleted ? 'grey' : 'default'}}>{new Date(e.date).toLocaleString(locale)} <Typography.Text
style={{color: e.deleted ? 'grey' : 'default'}}
>{new Date(e.date).toLocaleString(locale)}
</Typography.Text> </Typography.Text>
)
const eventDetail = rdapEventDetailTranslated[e.action as keyof typeof rdapEventDetailTranslated] || undefined const eventDetail = rdapEventDetailTranslated[e.action as keyof typeof rdapEventDetailTranslated] || undefined
const text = sm ? { const text = sm
? {
children: <Tooltip placement='bottom' title={eventDetail}> children: <Tooltip placement='bottom' title={eventDetail}>
{eventName}&emsp;{dateStr} {eventName}&emsp;{dateStr}
</Tooltip> </Tooltip>
} : { }
: {
label: dateStr, label: dateStr,
children: <Tooltip placement='left' title={eventDetail}>{eventName}</Tooltip>, children: <Tooltip placement='left' title={eventDetail}>{eventName}</Tooltip>
} }
return { return {
@@ -43,8 +51,8 @@ export function EventTimeline({events}: { events: Event[] }) {
...text ...text
} }
} }
) )}
}
/> />
</> </>
)
} }

34
assets/components/tracking/DomainToTag.tsx
View File

@@ -1,21 +1,29 @@
import {Tag} from "antd"; import {Tag} from 'antd'
import {DeleteOutlined, ExclamationCircleOutlined} from "@ant-design/icons"; import {DeleteOutlined, ExclamationCircleOutlined} from '@ant-design/icons'
import punycode from "punycode/punycode"; import punycode from 'punycode/punycode'
import {Link} from "react-router-dom"; import {Link} from 'react-router-dom'
import React from "react"; import React from 'react'
export function DomainToTag({domain}: { domain: { ldhName: string, deleted: boolean, status: string[] } }) { export function DomainToTag({domain}: { domain: { ldhName: string, deleted: boolean, status: string[] } }) {
return <Link to={'/search/domain/' + domain.ldhName}> return (
<Link to={'/search/domain/' + domain.ldhName}>
<Tag <Tag
color={ color={
domain.deleted ? 'magenta' : domain.deleted
domain.status.includes('redemption period') ? 'yellow' : ? 'magenta'
domain.status.includes('pending delete') ? 'volcano' : 'default' : domain.status.includes('redemption period')
? 'yellow'
: domain.status.includes('pending delete') ? 'volcano' : 'default'
} }
icon={ icon={
domain.deleted ? <DeleteOutlined/> : domain.deleted
domain.status.includes('redemption period') ? <ExclamationCircleOutlined/> : ? <DeleteOutlined/>
domain.status.includes('pending delete') ? <DeleteOutlined/> : null : domain.status.includes('redemption period')
}>{punycode.toUnicode(domain.ldhName)}</Tag> ? <ExclamationCircleOutlined/>
: domain.status.includes('pending delete') ? <DeleteOutlined/> : null
}
>{punycode.toUnicode(domain.ldhName)}
</Tag>
</Link> </Link>
)
} }

17
assets/components/tracking/StatusToTag.tsx Normal file
View File

@@ -0,0 +1,17 @@
import {Tag, Tooltip} from 'antd'
import {eppStatusCodeToColor} from '../../utils/functions/eppStatusCodeToColor'
import React from 'react'
import {rdapStatusCodeDetailTranslation} from '../../utils/functions/rdapTranslation'
export function statusToTag(s: string) {
const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
return (
<Tooltip
placement='bottomLeft'
title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}
>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip>
)
}

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

@@ -1,21 +1,21 @@
import {Alert, Button, Checkbox, Form, FormInstance, Input, Popconfirm, Select, Space, Typography} from "antd"; import {Alert, Button, Checkbox, Form, FormInstance, Input, Popconfirm, Select, Space, Typography} from 'antd'
import React, {useState} from "react"; import React, {useState} from 'react'
import {Connector, ConnectorProvider} from "../../../utils/api/connectors"; import {Connector, ConnectorProvider} from '../../../utils/api/connectors'
import {t} from "ttag"; import {t} from 'ttag'
import {BankOutlined} from "@ant-design/icons"; import {BankOutlined} from '@ant-design/icons'
import { import {
ovhEndpointList as ovhEndpointListFunction, ovhEndpointList as ovhEndpointListFunction,
ovhFields as ovhFieldsFunction, ovhFields as ovhFieldsFunction,
ovhPricingMode as ovhPricingModeFunction, ovhPricingMode as ovhPricingModeFunction,
ovhSubsidiaryList as ovhSubsidiaryListFunction ovhSubsidiaryList as ovhSubsidiaryListFunction
} from "../../../utils/providers/ovh"; } from '../../../utils/providers/ovh'
import {helpGetTokenLink, tosHyperlink} from "../../../utils/providers"; import {helpGetTokenLink, tosHyperlink} from '../../../utils/providers'
const formItemLayoutWithOutLabel = { const formItemLayoutWithOutLabel = {
wrapperCol: { wrapperCol: {
xs: {span: 24, offset: 0}, xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}, sm: {span: 20, offset: 4}
}, }
} }
export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) { export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
@@ -27,18 +27,18 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>() const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
return (
return <Form <Form
{...formItemLayoutWithOutLabel} {...formItemLayoutWithOutLabel}
form={form} form={form}
layout="horizontal" layout='horizontal'
labelCol={{span: 6}} labelCol={{span: 6}}
wrapperCol={{span: 14}} wrapperCol={{span: 14}}
onFinish={onCreate} onFinish={onCreate}
> >
<Form.Item <Form.Item
label={t`Provider`} label={t`Provider`}
name="provider" name='provider'
help={helpGetTokenLink(provider)} help={helpGetTokenLink(provider)}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
@@ -50,9 +50,9 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
value: ConnectorProvider[c as keyof typeof ConnectorProvider], value: ConnectorProvider[c as keyof typeof ConnectorProvider],
label: ( label: (
<> <>
<BankOutlined/>{" "} {c} <BankOutlined/>{' '} {c}
</> </>
), )
}))} }))}
value={provider} value={provider}
onChange={setProvider} onChange={setProvider}
@@ -64,6 +64,7 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
provider === ConnectorProvider.OVH && <> provider === ConnectorProvider.OVH && <>
{ {
Object.keys(ovhFields).map(fieldName => <Form.Item Object.keys(ovhFields).map(fieldName => <Form.Item
key={ovhFields[fieldName as keyof typeof ovhFields]}
label={ovhFields[fieldName as keyof typeof ovhFields]} label={ovhFields[fieldName as keyof typeof ovhFields]}
name={['authData', fieldName]} name={['authData', fieldName]}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
@@ -76,14 +77,14 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
name={['authData', 'apiEndpoint']} name={['authData', 'apiEndpoint']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Select options={ovhEndpointList} optionFilterProp="label"/> <Select options={ovhEndpointList} optionFilterProp='label'/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`OVH subsidiary`} label={t`OVH subsidiary`}
name={['authData', 'ovhSubsidiary']} name={['authData', 'ovhSubsidiary']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Select options={ovhSubsidiaryList} optionFilterProp="label"/> <Select options={ovhSubsidiaryList} optionFilterProp='label'/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -102,14 +103,16 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
onConfirm={() => setOpen(false)} onConfirm={() => setOpen(false)}
open={open} open={open}
> >
<Select options={ovhPricingMode} optionFilterProp="label" value={ovhPricingModeValue} <Select
options={ovhPricingMode} optionFilterProp='label' value={ovhPricingModeValue}
onChange={(value: string) => { onChange={(value: string) => {
setOvhPricingModeValue(value) setOvhPricingModeValue(value)
form.setFieldValue(['authData', 'pricingMode'], value) form.setFieldValue(['authData', 'pricingMode'], value)
if (value !== 'create-default') { if (value !== 'create-default') {
setOpen(true) setOpen(true)
} }
}}/> }}
/>
</Popconfirm> </Popconfirm>
</Form.Item> </Form.Item>
</> </>
@@ -119,15 +122,19 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
<Form.Item <Form.Item
label={t`Personal Access Token (PAT)`} label={t`Personal Access Token (PAT)`}
name={['authData', 'token']} name={['authData', 'token']}
rules={[{required: true, message: t`Required`}]}> rules={[{required: true, message: t`Required`}]}
>
<Input autoComplete='off'/> <Input autoComplete='off'/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`Organization sharing ID`} label={t`Organization sharing ID`}
name={['authData', 'sharingId']} name={['authData', 'sharingId']}
help={<Typography.Text help={<Typography.Text
type='secondary'>{t`It indicates the organization that will pay for the ordered product`}</Typography.Text>} type='secondary'
required={false}> >{t`It indicates the organization that will pay for the ordered product`}
</Typography.Text>}
required={false}
>
<Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/> <Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/>
</Form.Item> </Form.Item>
</> </>
@@ -136,41 +143,54 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
provider === ConnectorProvider.AUTODNS && <> provider === ConnectorProvider.AUTODNS && <>
<Alert <Alert
message={t`This provider does not provide a list of supported TLD. Please double check if the domain you want to register is supported.`} message={t`This provider does not provide a list of supported TLD. Please double check if the domain you want to register is supported.`}
type="warning"/> type='warning'
/>
<br/> <br/>
<Form.Item <Form.Item
label={t`AutoDNS Username`} label={t`AutoDNS Username`}
name={['authData', 'username']} name={['authData', 'username']}
help={<Typography.Text help={<Typography.Text
type='secondary'>{t`Attention: AutoDNS do not support 2-Factor Authentication on API Users for automated systems`}</Typography.Text>} type='secondary'
rules={[{required: true, message: t`Required`}]}> >{t`Attention: AutoDNS do not support 2-Factor Authentication on API Users for automated systems`}
<Input autoComplete='off' required={true}/> </Typography.Text>}
rules={[{required: true, message: t`Required`}]}
>
<Input autoComplete='off' required/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`AutoDNS Password`} label={t`AutoDNS Password`}
name={['authData', 'password']} name={['authData', 'password']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
required={true}> required
<Input.Password autoComplete='off' required={true} placeholder=''/> >
<Input.Password autoComplete='off' required placeholder=''/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`Owner nic-handle`} label={t`Owner nic-handle`}
name={['authData', 'contactid']} name={['authData', 'contactid']}
help={<Typography.Text help={<Typography.Text
type='secondary'>{t`The nic-handle of the domain name owner`}<a type='secondary'
href="https://cloud.autodns.com/contacts/domain">{t`You can get it from this page`}</a></Typography.Text>} >{t`The nic-handle of the domain name owner`}<a
href='https://cloud.autodns.com/contacts/domain'
>{t`You can get it from this page`}
</a>
</Typography.Text>}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
required={true}> required
<Input autoComplete='off' required={true} placeholder=''/> >
<Input autoComplete='off' required placeholder=''/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`Context Value`} label={t`Context Value`}
name={['authData', 'context']} name={['authData', 'context']}
help={<Typography.Text help={<Typography.Text
type='secondary'>{t`If you not sure, use the default value 4`}</Typography.Text>} type='secondary'
>{t`If you not sure, use the default value 4`}
</Typography.Text>}
required={false}> required={false}
>
<Input autoComplete='off' required={false} placeholder='4'/> <Input autoComplete='off' required={false} placeholder='4'/>
</Form.Item> </Form.Item>
@@ -182,7 +202,9 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Checkbox <Checkbox
required={true}>{t`Owner confirms his consent of domain order jobs`}</Checkbox> required
>{t`Owner confirms his consent of domain order jobs`}
</Checkbox>
</Form.Item> </Form.Item>
</> </>
@@ -193,13 +215,13 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
label={t`Username`} label={t`Username`}
name={['authData', 'ApiUser']} name={['authData', 'ApiUser']}
> >
<Input autoComplete='off'></Input> <Input autoComplete='off'/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t`API key`} label={t`API key`}
name={['authData', 'ApiKey']} name={['authData', 'ApiKey']}
> >
<Input autoComplete='off'></Input> <Input autoComplete='off'/>
</Form.Item> </Form.Item>
</> </>
} }
@@ -207,49 +229,55 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
{ {
provider !== undefined && <> provider !== undefined && <>
<Form.Item <Form.Item
valuePropName="checked" valuePropName='checked'
label={t`API Terms of Service`} label={t`API Terms of Service`}
name={['authData', 'acceptConditions']} name={['authData', 'acceptConditions']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
style={{marginTop: '3em'}} style={{marginTop: '3em'}}
> >
<Checkbox <Checkbox
required={true}> required
>
<Typography.Link target='_blank' href={tosHyperlink(provider)}> <Typography.Link target='_blank' href={tosHyperlink(provider)}>
{t`I have read and accepted the conditions of use of the Provider API, accessible from this hyperlink`} {t`I have read and accepted the conditions of use of the Provider API, accessible from this hyperlink`}
</Typography.Link> </Typography.Link>
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked" valuePropName='checked'
label={t`Legal age`} label={t`Legal age`}
name={['authData', 'ownerLegalAge']} name={['authData', 'ownerLegalAge']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Checkbox <Checkbox
required={true}>{t`I am of the minimum age required to consent to these conditions`}</Checkbox> required
>{t`I am of the minimum age required to consent to these conditions`}
</Checkbox>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked" valuePropName='checked'
label={t`Withdrawal period`} label={t`Withdrawal period`}
name={['authData', 'waiveRetractationPeriod']} name={['authData', 'waiveRetractationPeriod']}
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Checkbox <Checkbox
required={true}>{t`I waive my right of withdrawal regarding the purchase of domain names via the Provider's API`}</Checkbox> required
>{t`I waive my right of withdrawal regarding the purchase of domain names via the Provider's API`}
</Checkbox>
</Form.Item> </Form.Item>
</> </>
} }
<Form.Item style={{marginTop: '5vh'}}> <Form.Item style={{marginTop: '5vh'}}>
<Space> <Space>
<Button type="primary" htmlType="submit"> <Button type='primary' htmlType='submit'>
{t`Create`} {t`Create`}
</Button> </Button>
<Button type="default" htmlType="reset"> <Button type='default' htmlType='reset'>
{t`Reset`} {t`Reset`}
</Button> </Button>
</Space> </Space>
</Form.Item> </Form.Item>
</Form> </Form>
)
} }

35
assets/components/tracking/connector/ConnectorsList.tsx
View File

@@ -1,11 +1,10 @@
import {Card, Divider, message, Popconfirm, theme, Typography} from "antd"; import {Card, Divider, message, Popconfirm, theme, Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {DeleteFilled} from "@ant-design/icons"; import {DeleteFilled} from '@ant-design/icons'
import React from "react"; import React from 'react'
import {Connector, deleteConnector} from "../../../utils/api/connectors"; import {Connector, deleteConnector} from '../../../utils/api/connectors'
const {useToken} = theme;
const {useToken} = theme
export type ConnectorElement = Connector & { id: string, createdAt: string } export type ConnectorElement = Connector & { id: string, createdAt: string }
@@ -13,28 +12,36 @@ export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorEl
const {token} = useToken() const {token} = useToken()
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
const onConnectorDelete = (connector: ConnectorElement) => deleteConnector(connector.id) const onConnectorDelete = async (connector: ConnectorElement) => await deleteConnector(connector.id)
.then(onDelete) .then(onDelete)
.catch(() => messageApi.error(t`An error occurred while deleting the Connector. Make sure it is not used in any Watchlist`)) .catch(() => messageApi.error(t`An error occurred while deleting the Connector. Make sure it is not used in any Watchlist`))
return <> return (
<>
{connectors.map(connector => {connectors.map(connector =>
<> <>
{contextHolder} {contextHolder}
<Card hoverable title={<Typography.Text <Card
title={new Date(connector.createdAt).toLocaleString()}>{t`Connector ${connector.provider}`}</Typography.Text>} hoverable title={<Typography.Text
title={new Date(connector.createdAt).toLocaleString()}
>{t`Connector ${connector.provider}`}
</Typography.Text>}
size='small' size='small'
style={{width: '100%'}} style={{width: '100%'}}
extra={<Popconfirm title={t`Delete the Connector`} extra={<Popconfirm
title={t`Delete the Connector`}
description={t`Are you sure to delete this Connector?`} description={t`Are you sure to delete this Connector?`}
onConfirm={() => onConnectorDelete(connector)} onConfirm={async () => await onConnectorDelete(connector)}
okText={t`Yes`} okText={t`Yes`}
cancelText={t`No`} cancelText={t`No`}
><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}> ><DeleteFilled style={{color: token.colorError}}/>
</Popconfirm>}
>
<Card.Meta description={connector.id} style={{marginBottom: '1em'}}/> <Card.Meta description={connector.id} style={{marginBottom: '1em'}}/>
</Card> </Card>
<Divider/> <Divider/>
</> </>
)} )}
</> </>
)
} }

24
assets/components/tracking/watchlist/CalendarWatchlistButton.tsx
View File

@@ -1,22 +1,26 @@
import {CalendarFilled} from "@ant-design/icons"; import {CalendarFilled} from '@ant-design/icons'
import {t} from "ttag"; import {t} from 'ttag'
import {Popover, QRCode, Typography} from "antd"; import {Popover, QRCode, Typography} from 'antd'
import React from "react"; import React from 'react'
import {Watchlist} from "../../../pages/tracking/WatchlistPage"; import {Watchlist} from '../../../utils/api'
export function CalendarWatchlistButton({watchlist}: { watchlist: Watchlist }) { export function CalendarWatchlistButton({watchlist}: { watchlist: Watchlist }) {
const icsResourceLink = `${window.location.origin}/api/watchlists/${watchlist.token}/calendar` const icsResourceLink = `${window.location.origin}/api/watchlists/${watchlist.token}/calendar`
return <Typography.Link href={icsResourceLink}> return (
<Popover content={<QRCode value={icsResourceLink} <Typography.Link href={icsResourceLink}>
<Popover content={<QRCode
value={icsResourceLink}
bordered={false} bordered={false}
title={t`QR Code for iCalendar export`} title={t`QR Code for iCalendar export`}
type='svg' type='svg'
/>}> />}
<CalendarFilled title={t`Export events to iCalendar format`} >
<CalendarFilled
title={t`Export events to iCalendar format`}
style={{color: 'limegreen'}} style={{color: 'limegreen'}}
/> />
</Popover> </Popover>
</Typography.Link> </Typography.Link>
)
} }

20
assets/components/tracking/watchlist/DeleteWatchlistButton.tsx
View File

@@ -1,22 +1,24 @@
import {Popconfirm, theme, Typography} from "antd"; import {Popconfirm, theme, Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {deleteWatchlist} from "../../../utils/api"; import {deleteWatchlist, Watchlist} from '../../../utils/api'
import {DeleteFilled} from "@ant-design/icons"; import {DeleteFilled} from '@ant-design/icons'
import React from "react"; import React from 'react'
import {Watchlist} from "../../../pages/tracking/WatchlistPage";
export function DeleteWatchlistButton({watchlist, onDelete}: { watchlist: Watchlist, onDelete: () => void }) { export function DeleteWatchlistButton({watchlist, onDelete}: { watchlist: Watchlist, onDelete: () => void }) {
const {token} = theme.useToken() const {token} = theme.useToken()
return <Popconfirm return (
<Popconfirm
title={t`Delete the Watchlist`} title={t`Delete the Watchlist`}
description={t`Are you sure to delete this Watchlist?`} description={t`Are you sure to delete this Watchlist?`}
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)} onConfirm={async () => await deleteWatchlist(watchlist.token).then(onDelete)}
okText={t`Yes`} okText={t`Yes`}
cancelText={t`No`} cancelText={t`No`}
okButtonProps={{danger: true}}> okButtonProps={{danger: true}}
>
<Typography.Link> <Typography.Link>
<DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/> <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
</Typography.Link> </Typography.Link>
</Popconfirm> </Popconfirm>
)
} }

91
assets/components/tracking/watchlist/TrackedDomainTable.tsx
View File

@@ -1,27 +1,41 @@
import React, {ReactElement, useEffect, useState} from "react"; import React, {ReactElement, useEffect, useState} from 'react'
import {Domain, getTrackedDomainList} from "../../../utils/api"; import {Domain, getTrackedDomainList} from '../../../utils/api'
import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from "antd"; import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {ColumnType} from "antd/es/table"; import {ColumnType} from 'antd/es/table'
import {rdapStatusCodeDetailTranslation} from "../../../utils/functions/rdapTranslation"; import {rdapStatusCodeDetailTranslation} from '../../../utils/functions/rdapTranslation'
import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor"; import {eppStatusCodeToColor} from '../../../utils/functions/eppStatusCodeToColor'
import {Link} from "react-router-dom"; import {Link} from 'react-router-dom'
import {ExceptionOutlined, MonitorOutlined} from '@ant-design/icons' import {ExceptionOutlined, MonitorOutlined} from '@ant-design/icons'
import {DomainToTag} from "../DomainToTag"; import {DomainToTag} from '../DomainToTag'
export function TrackedDomainTable() { export function TrackedDomainTable() {
const REDEMPTION_NOTICE = <Tooltip const REDEMPTION_NOTICE = (
title={t`At least one domain name is in redemption period and will potentially be deleted soon`}> <Tooltip
title={t`At least one domain name is in redemption period and will potentially be deleted soon`}
>
<Tag color={eppStatusCodeToColor('redemption period')}>redemption period</Tag> <Tag color={eppStatusCodeToColor('redemption period')}>redemption period</Tag>
</Tooltip> </Tooltip>
)
const PENDING_DELETE_NOTICE = <Tooltip const PENDING_DELETE_NOTICE = (
title={t`At least one domain name is pending deletion and will soon become available for registration again`}> <Tooltip
title={t`At least one domain name is pending deletion and will soon become available for registration again`}
>
<Tag color={eppStatusCodeToColor('pending delete')}>pending delete</Tag> <Tag color={eppStatusCodeToColor('pending delete')}>pending delete</Tag>
</Tooltip> </Tooltip>
)
const [dataTable, setDataTable] = useState<(Domain & { domain: Domain })[]>([]) interface TableRow {
key: string
ldhName: ReactElement
expirationDate: string
status: ReactElement[]
updatedAt: string
domain: Domain
}
const [dataTable, setDataTable] = useState<TableRow[]>([])
const [total, setTotal] = useState<number>() const [total, setTotal] = useState<number>()
const [specialNotice, setSpecialNotice] = useState<ReactElement[]>([]) const [specialNotice, setSpecialNotice] = useState<ReactElement[]>([])
@@ -46,8 +60,10 @@ export function TrackedDomainTable() {
ldhName: <DomainToTag domain={d}/>, ldhName: <DomainToTag domain={d}/>,
expirationDate: expirationDate ? new Date(expirationDate).toLocaleString() : '-', expirationDate: expirationDate ? new Date(expirationDate).toLocaleString() : '-',
status: d.status.map(s => <Tooltip status: d.status.map(s => <Tooltip
key={s}
placement='bottomLeft' placement='bottomLeft'
title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}> title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}
>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag> <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip> </Tooltip>
), ),
@@ -63,17 +79,19 @@ export function TrackedDomainTable() {
fetchData({page: 1, itemsPerPage: 30}) fetchData({page: 1, itemsPerPage: 30})
}, []) }, [])
interface RecordType {
domain: Domain
}
const columns: ColumnType<any>[] = [ const columns: Array<ColumnType<RecordType>> = [
{ {
title: t`Domain`, title: t`Domain`,
dataIndex: "ldhName" dataIndex: 'ldhName'
}, },
{ {
title: t`Expiration date`, title: t`Expiration date`,
dataIndex: 'expirationDate', dataIndex: 'expirationDate',
sorter: (a: { domain: Domain }, b: { domain: Domain }) => { sorter: (a: RecordType, b: RecordType) => {
const expirationDate1 = a.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date const expirationDate1 = a.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date
const expirationDate2 = b.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date const expirationDate2 = b.domain.events.find(e => e.action === 'expiration' && !e.deleted)?.date
@@ -85,47 +103,51 @@ export function TrackedDomainTable() {
{ {
title: t`Updated at`, title: t`Updated at`,
dataIndex: 'updatedAt', dataIndex: 'updatedAt',
sorter: (a: { domain: Domain }, b: { sorter: (a: RecordType, b: RecordType) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime()
domain: Domain
}) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime()
}, },
{ {
title: t`Status`, title: t`Status`,
dataIndex: 'status', dataIndex: 'status',
showSorterTooltip: {target: 'full-header'}, showSorterTooltip: {target: 'full-header'},
filters: [...new Set(dataTable.map((d: any) => d.domain.status).flat())].map(s => ({ filters: [...new Set(dataTable.map((d: RecordType) => d.domain.status).flat())].map(s => ({
text: <Tooltip text: <Tooltip
placement='bottomLeft' placement='bottomLeft'
title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}> title={rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] || undefined}
>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag> <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip>, </Tooltip>,
value: s, value: s
})), })),
onFilter: (value, record: { domain: Domain }) => record.domain.status.includes(value as string) onFilter: (value, record: RecordType) => record.domain.status.includes(value as string)
} }
] ]
return <> return (
<>
{ {
total === 0 ? <Empty total === 0
? <Empty
description={t`No tracked domain names were found, please create your first Watchlist`} description={t`No tracked domain names were found, please create your first Watchlist`}
> >
<Link to='/tracking/watchlist'> <Link to='/tracking/watchlist'>
<Button type="primary">Create Now</Button> <Button type='primary'>Create Now</Button>
</Link> </Link>
</Empty> : <Skeleton loading={total === undefined}> </Empty>
: <Skeleton loading={total === undefined}>
<Result <Result
style={{paddingTop: 0}} style={{paddingTop: 0}}
subTitle={t`Please note that this table does not include domain names marked as expired or those with an unknown expiration date`} subTitle={t`Please note that this table does not include domain names marked as expired or those with an unknown expiration date`}
{...(specialNotice.length > 0 ? { {...(specialNotice.length > 0
? {
icon: <ExceptionOutlined/>, icon: <ExceptionOutlined/>,
status: 'warning', status: 'warning',
title: t`At least one domain name you are tracking requires special attention`, title: t`At least one domain name you are tracking requires special attention`,
extra: specialNotice extra: specialNotice
} : { }
: {
icon: <MonitorOutlined/>, icon: <MonitorOutlined/>,
status: 'info', status: 'info',
title: t`The domain names below are subject to special monitoring`, title: t`The domain names below are subject to special monitoring`
})} })}
/> />
@@ -146,4 +168,5 @@ export function TrackedDomainTable() {
</Skeleton> </Skeleton>
} }
</> </>
)
} }

35
assets/components/tracking/watchlist/UpdateWatchlistButton.tsx
View File

@@ -1,22 +1,20 @@
import {Button, Drawer, Form, Typography} from "antd"; import {Button, Drawer, Form, Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {WatchlistForm} from "./WatchlistForm"; import {WatchlistForm} from './WatchlistForm'
import React, {useState} from "react"; import React, {useState} from 'react'
import {Watchlist} from "../../../pages/tracking/WatchlistPage"; import {EditOutlined} from '@ant-design/icons'
import {EditOutlined} from "@ant-design/icons"; import {Connector} from '../../../utils/api/connectors'
import {Connector} from "../../../utils/api/connectors"; import {Watchlist} from '../../../utils/api'
export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: { export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
watchlist: Watchlist, watchlist: Watchlist
onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>, onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>
connectors: (Connector & { id: string })[] connectors: Array<Connector & { id: string }>
}) { }) {
const [form] = Form.useForm() const [form] = Form.useForm()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const showDrawer = () => { const showDrawer = () => {
setOpen(true) setOpen(true)
} }
@@ -26,9 +24,11 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
setLoading(false) setLoading(false)
} }
return <> return (
<>
<Typography.Link> <Typography.Link>
<EditOutlined title={t`Edit the Watchlist`} onClick={() => { <EditOutlined
title={t`Edit the Watchlist`} onClick={() => {
showDrawer() showDrawer()
form.setFields([ form.setFields([
{name: 'token', value: watchlist.token}, {name: 'token', value: watchlist.token},
@@ -38,7 +38,8 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
{name: 'triggers', value: [...new Set(watchlist.triggers?.map(t => t.event))]}, {name: 'triggers', value: [...new Set(watchlist.triggers?.map(t => t.event))]},
{name: 'dsn', value: watchlist.dsn} {name: 'dsn', value: watchlist.dsn}
]) ])
}}/> }}
/>
</Typography.Link> </Typography.Link>
<Drawer <Drawer
title={t`Update a Watchlist`} title={t`Update a Watchlist`}
@@ -48,7 +49,7 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
loading={loading} loading={loading}
styles={{ styles={{
body: { body: {
paddingBottom: 80, paddingBottom: 80
} }
}} }}
extra={<Button onClick={onClose}>{t`Cancel`}</Button>} extra={<Button onClick={onClose}>{t`Cancel`}</Button>}
@@ -64,5 +65,5 @@ export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}
/> />
</Drawer> </Drawer>
</> </>
)
} }

58
assets/components/tracking/watchlist/WatchlistCard.tsx
View File

@@ -1,46 +1,45 @@
import {Card, Col, Divider, Row, Space, Tag, Tooltip} from "antd"; import {Card, Col, Divider, Row, Space, Tag, Tooltip} from 'antd'
import {DisconnectOutlined, LinkOutlined} from "@ant-design/icons"; import {DisconnectOutlined, LinkOutlined} from '@ant-design/icons'
import {t} from "ttag"; import {t} from 'ttag'
import {ViewDiagramWatchlistButton} from "./diagram/ViewDiagramWatchlistButton"; import {ViewDiagramWatchlistButton} from './diagram/ViewDiagramWatchlistButton'
import {UpdateWatchlistButton} from "./UpdateWatchlistButton"; import {UpdateWatchlistButton} from './UpdateWatchlistButton'
import {DeleteWatchlistButton} from "./DeleteWatchlistButton"; import {DeleteWatchlistButton} from './DeleteWatchlistButton'
import React from "react"; import React from 'react'
import {Watchlist} from "../../../pages/tracking/WatchlistPage"; import {Connector} from '../../../utils/api/connectors'
import {Connector} from "../../../utils/api/connectors"; import {CalendarWatchlistButton} from './CalendarWatchlistButton'
import useBreakpoint from "../../../hooks/useBreakpoint"; import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
import {CalendarWatchlistButton} from "./CalendarWatchlistButton";
import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../../utils/functions/rdapTranslation";
import {actionToColor} from "../../../utils/functions/actionToColor"; import {actionToColor} from '../../../utils/functions/actionToColor'
import {DomainToTag} from "../DomainToTag"; import {DomainToTag} from '../DomainToTag'
import {Watchlist} from '../../../utils/api'
export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: { export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
watchlist: Watchlist, watchlist: Watchlist
onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>, onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>
connectors: (Connector & { id: string })[], connectors: Array<Connector & { id: string }>
onDelete: () => void onDelete: () => void
}) { }) {
const rdapEventNameTranslated = rdapEventNameTranslation() const rdapEventNameTranslated = rdapEventNameTranslation()
const rdapEventDetailTranslated = rdapEventDetailTranslation() const rdapEventDetailTranslated = rdapEventDetailTranslation()
return <> return (
<>
<Card <Card
type='inner' type='inner'
title={<> title={<>
{ {
watchlist.connector ? (watchlist.connector != null)
<Tooltip title={watchlist.connector.id}> ? <Tooltip title={watchlist.connector.id}>
<Tag icon={<LinkOutlined/>} color="lime-inverse"/> <Tag icon={<LinkOutlined/>} color='lime-inverse'/>
</Tooltip> : </Tooltip>
<Tooltip title={t`This Watchlist is not linked to a Connector.`}> : <Tooltip title={t`This Watchlist is not linked to a Connector.`}>
<Tag icon={<DisconnectOutlined/>} color="default"/> <Tag icon={<DisconnectOutlined/>} color='default'/>
</Tooltip> </Tooltip>
} }
<Tooltip title={new Date(watchlist.createdAt).toLocaleString()}> <Tooltip title={new Date(watchlist.createdAt).toLocaleString()}>
{t`Watchlist` + (watchlist.name ? ` (${watchlist.name})` : '')} {t`Watchlist` + (watchlist.name ? ` (${watchlist.name})` : '')}
</Tooltip> </Tooltip>
</> </>}
}
size='small' size='small'
style={{width: '100%'}} style={{width: '100%'}}
extra={ extra={
@@ -62,12 +61,14 @@ export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelet
<Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/> <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
<Row gutter={16}> <Row gutter={16}>
<Col span={16}> <Col span={16}>
{watchlist.domains.map(d => <DomainToTag domain={d}/>)} {watchlist.domains.map(d => <DomainToTag key={d.ldhName} domain={d}/>)}
</Col> </Col>
<Col span={8}> <Col span={8}>
{watchlist.triggers?.filter(t => t.action === 'email') {watchlist.triggers?.filter(t => t.action === 'email')
.map(t => <Tooltip .map(t => <Tooltip
title={rdapEventDetailTranslated[t.event as keyof typeof rdapEventDetailTranslated] || undefined}> key={t.event}
title={rdapEventDetailTranslated[t.event as keyof typeof rdapEventDetailTranslated] || undefined}
>
<Tag color={actionToColor(t.event)}> <Tag color={actionToColor(t.event)}>
{rdapEventNameTranslated[t.event as keyof typeof rdapEventNameTranslated]} {rdapEventNameTranslated[t.event as keyof typeof rdapEventNameTranslated]}
</Tag> </Tag>
@@ -78,4 +79,5 @@ export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelet
</Card> </Card>
<Divider/> <Divider/>
</> </>
)
} }

139
assets/components/tracking/watchlist/WatchlistForm.tsx
View File

@@ -1,49 +1,55 @@
import {Button, Form, FormInstance, Input, Select, SelectProps, Space, Tag, Tooltip, Typography} from "antd"; import {Button, Form, FormInstance, Input, Select, SelectProps, Space, Tag, Tooltip, Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from "@ant-design/icons"; import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
import React from "react"; import React from 'react'
import {Connector} from "../../../utils/api/connectors"; import {Connector} from '../../../utils/api/connectors'
import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../../utils/functions/rdapTranslation"; import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
import {actionToColor} from "../../../utils/functions/actionToColor"; import {actionToColor} from '../../../utils/functions/actionToColor'
import {actionToIcon} from "../../../utils/functions/actionToIcon"; import {actionToIcon} from '../../../utils/functions/actionToIcon'
import {EventAction} from '../../../utils/api'
type TagRender = SelectProps['tagRender']; type TagRender = SelectProps['tagRender']
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 24}, xs: {span: 24},
sm: {span: 4}, sm: {span: 4}
}, },
wrapperCol: { wrapperCol: {
xs: {span: 24}, xs: {span: 24},
sm: {span: 20}, sm: {span: 20}
}, }
}; }
const formItemLayoutWithOutLabel = { const formItemLayoutWithOutLabel = {
wrapperCol: { wrapperCol: {
xs: {span: 24, offset: 0}, xs: {span: 24, offset: 0},
sm: {span: 20, offset: 4}, sm: {span: 20, offset: 4}
}, }
}; }
export function WatchlistForm({form, connectors, onFinish, isCreation}: { export function WatchlistForm({form, connectors, onFinish, isCreation}: {
form: FormInstance, form: FormInstance
connectors: (Connector & { id: string })[] connectors: Array<Connector & { id: string }>
onFinish: (values: { domains: string[], triggers: string[], token: string }) => void onFinish: (values: { domains: string[], triggers: string[], token: string }) => void
isCreation: boolean isCreation: boolean
}) { }) {
const rdapEventNameTranslated = rdapEventNameTranslation() const rdapEventNameTranslated = rdapEventNameTranslation()
const rdapEventDetailTranslated = rdapEventDetailTranslation() const rdapEventDetailTranslated = rdapEventDetailTranslation()
const triggerTagRenderer: TagRender = (props) => { const triggerTagRenderer: TagRender = ({value, closable, onClose}: {
const {value, closable, onClose} = props; value: EventAction
closable: boolean
onClose: () => void
}) => {
const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => { const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
} }
return (<Tooltip return (
title={rdapEventDetailTranslated[value as keyof typeof rdapEventDetailTranslated] || undefined}> <Tooltip
title={rdapEventDetailTranslated[value as keyof typeof rdapEventDetailTranslated] || undefined}
>
<Tag <Tag
icon={actionToIcon(value)} icon={actionToIcon(value)}
color={actionToColor(value)} color={actionToColor(value)}
@@ -58,7 +64,8 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
) )
} }
return <Form return (
<Form
{...formItemLayoutWithOutLabel} {...formItemLayoutWithOutLabel}
form={form} form={form}
onFinish={onFinish} onFinish={onFinish}
@@ -69,33 +76,35 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
<Input hidden/> <Input hidden/>
</Form.Item> </Form.Item>
<Form.Item label={t`Name`} <Form.Item
label={t`Name`}
name='name' name='name'
labelCol={{ labelCol={{
xs: {span: 24}, xs: {span: 24},
sm: {span: 4}, sm: {span: 4}
}} }}
wrapperCol={{ wrapperCol={{
md: {span: 12}, md: {span: 12},
sm: {span: 20}, sm: {span: 20}
}} }}
> >
<Input placeholder={t`Watchlist Name`} <Input
placeholder={t`Watchlist Name`}
title={t`Naming the Watchlist makes it easier to find in the list below.`} title={t`Naming the Watchlist makes it easier to find in the list below.`}
autoComplete='off' autoComplete='off'
autoFocus autoFocus
/> />
</Form.Item> </Form.Item>
<Form.List <Form.List
name="domains" name='domains'
rules={[ rules={[
{ {
validator: async (_, domains) => { validator: async (_, domains) => {
if (!domains || domains.length < 1) { if (!domains || domains.length < 1) {
return Promise.reject(new Error(t`At least one domain name`)); return await Promise.reject(new Error(t`At least one domain name`))
}
}
} }
},
},
]} ]}
> >
{(fields, {add, remove}, {errors}) => ( {(fields, {add, remove}, {errors}) => (
@@ -104,7 +113,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
<Form.Item <Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)} {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? t`Domain names` : ''} label={index === 0 ? t`Domain names` : ''}
required={true} required
key={field.key} key={field.key}
> >
<Form.Item <Form.Item
@@ -123,17 +132,19 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
> >
<Input placeholder={t`Domain name`} style={{width: '60%'}} autoComplete='off'/> <Input placeholder={t`Domain name`} style={{width: '60%'}} autoComplete='off'/>
</Form.Item> </Form.Item>
{fields.length > 1 ? ( {fields.length > 1
? (
<MinusCircleOutlined <MinusCircleOutlined
className="dynamic-delete-button" className='dynamic-delete-button'
onClick={() => remove(field.name)} onClick={() => remove(field.name)}
/> />
) : null} )
: null}
</Form.Item> </Form.Item>
))} ))}
<Form.Item> <Form.Item>
<Button <Button
type="dashed" type='dashed'
onClick={() => add()} onClick={() => add()}
style={{width: '60%'}} style={{width: '60%'}}
icon={<PlusOutlined/>} icon={<PlusOutlined/>}
@@ -145,21 +156,22 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
</> </>
)} )}
</Form.List> </Form.List>
<Form.Item label={t`Tracked events`} <Form.Item
label={t`Tracked events`}
name='triggers' name='triggers'
rules={[{required: true, message: t`At least one trigger`, type: 'array'}]} rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
labelCol={{ labelCol={{
xs: {span: 24}, xs: {span: 24},
sm: {span: 4}, sm: {span: 4}
}} }}
wrapperCol={{ wrapperCol={{
md: {span: 12}, md: {span: 12},
sm: {span: 20}, sm: {span: 20}
}} }}
required required
> >
<Select <Select
mode="multiple" mode='multiple'
tagRender={triggerTagRenderer} tagRender={triggerTagRenderer}
style={{width: '100%'}} style={{width: '100%'}}
options={Object.keys(rdapEventNameTranslated).map(e => ({ options={Object.keys(rdapEventNameTranslated).map(e => ({
@@ -170,23 +182,25 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
/> />
</Form.Item> </Form.Item>
<Form.Item label={t`Connector`} <Form.Item
label={t`Connector`}
name='connector' name='connector'
labelCol={{ labelCol={{
xs: {span: 24}, xs: {span: 24},
sm: {span: 4}, sm: {span: 4}
}} }}
wrapperCol={{ wrapperCol={{
md: {span: 12}, md: {span: 12},
sm: {span: 20}, sm: {span: 20}
}} }}
help={t`Please make sure the connector information is valid to purchase a domain that may be available soon.`} help={t`Please make sure the connector information is valid to purchase a domain that may be available soon.`}
> >
<Select showSearch <Select
showSearch
allowClear allowClear
placeholder={t`Connector`} placeholder={t`Connector`}
suffixIcon={<ApiOutlined/>} suffixIcon={<ApiOutlined/>}
optionFilterProp="label" optionFilterProp='label'
options={connectors.map(c => ({ options={connectors.map(c => ({
label: `${c.provider} (${c.id})`, label: `${c.provider} (${c.id})`,
value: c.id value: c.id
@@ -194,14 +208,15 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
/> />
</Form.Item> </Form.Item>
<Form.List <Form.List
name="dsn"> name='dsn'
>
{(fields, {add, remove}, {errors}) => ( {(fields, {add, remove}, {errors}) => (
<> <>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item <Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)} {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? t`DSN` : ''} label={index === 0 ? t`DSN` : ''}
required={true} required
key={field.key} key={field.key}
> >
<Form.Item <Form.Item
@@ -216,25 +231,32 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
}]} }]}
noStyle noStyle
> >
<Input placeholder={'slack://TOKEN@default?channel=CHANNEL'} style={{width: '60%'}} <Input
autoComplete='off'/> placeholder='slack://TOKEN@default?channel=CHANNEL' style={{width: '60%'}}
autoComplete='off'
/>
</Form.Item> </Form.Item>
{fields.length > 0 ? ( {fields.length > 0
? (
<MinusCircleOutlined <MinusCircleOutlined
className="dynamic-delete-button" className='dynamic-delete-button'
onClick={() => remove(field.name)} onClick={() => remove(field.name)}
/> />
) : null} )
: null}
</Form.Item> </Form.Item>
))} ))}
<Form.Item help={ <Form.Item help={
<Typography.Link href='https://symfony.com/doc/current/notifier.html#chat-channel' <Typography.Link
target='_blank'> href='https://symfony.com/doc/current/notifier.html#chat-channel'
target='_blank'
>
{t`Check out this link to the Symfony documentation to help you build the DSN`} {t`Check out this link to the Symfony documentation to help you build the DSN`}
</Typography.Link>} </Typography.Link>
}
> >
<Button <Button
type="dashed" type='dashed'
onClick={() => add()} onClick={() => add()}
style={{width: '60%'}} style={{width: '60%'}}
icon={<PlusOutlined/>} icon={<PlusOutlined/>}
@@ -248,13 +270,14 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
</Form.List> </Form.List>
<Form.Item style={{marginTop: '5vh'}}> <Form.Item style={{marginTop: '5vh'}}>
<Space> <Space>
<Button type="primary" htmlType="submit"> <Button type='primary' htmlType='submit'>
{isCreation ? t`Create` : t`Update`} {isCreation ? t`Create` : t`Update`}
</Button> </Button>
<Button type="default" htmlType="reset"> <Button type='default' htmlType='reset'>
{t`Reset`} {t`Reset`}
</Button> </Button>
</Space> </Space>
</Form.Item> </Form.Item>
</Form> </Form>
)
} }

32
assets/components/tracking/watchlist/WatchlistsList.tsx
View File

@@ -1,23 +1,25 @@
import React from "react"; import React from 'react'
import {Watchlist} from "../../../pages/tracking/WatchlistPage"; import {Connector} from '../../../utils/api/connectors'
import {Connector} from "../../../utils/api/connectors"; import {WatchlistCard} from './WatchlistCard'
import {WatchlistCard} from "./WatchlistCard"; import {Watchlist} from '../../../utils/api'
export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: { export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
watchlists: Watchlist[], watchlists: Watchlist[]
onDelete: () => void, onDelete: () => void
onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>, onUpdateWatchlist: (values: { domains: string[], triggers: string[], token: string }) => Promise<void>
connectors: (Connector & { id: string })[] connectors: Array<Connector & { id: string }>
}) { }) {
return (
<>
return <>
{watchlists.map(watchlist => {watchlists.map(watchlist =>
<WatchlistCard watchlist={watchlist} <WatchlistCard
key={watchlist.token}
watchlist={watchlist}
onUpdateWatchlist={onUpdateWatchlist} onUpdateWatchlist={onUpdateWatchlist}
connectors={connectors} connectors={connectors}
onDelete={onDelete}/> onDelete={onDelete}
) />
} )}
</> </>
)
} }

37
assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx
View File

@@ -1,21 +1,20 @@
import {Button, Flex, Modal, Space, Typography} from "antd" import {Button, Flex, Modal, Space, Typography} from 'antd'
import {t} from "ttag" import {t} from 'ttag'
import React, {useEffect, useState} from "react" import React, {useEffect, useState} from 'react'
import {ApartmentOutlined} from "@ant-design/icons" import {ApartmentOutlined} from '@ant-design/icons'
import '@xyflow/react/dist/style.css' import '@xyflow/react/dist/style.css'
import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from "@xyflow/react"; import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
import {getWatchlist} from "../../../../utils/api"; import {getWatchlist} from '../../../../utils/api'
import {getLayoutedElements} from "./getLayoutedElements"; import {getLayoutedElements} from './getLayoutedElements'
import {watchlistToNodes} from "./watchlistToNodes"; import {watchlistToNodes} from './watchlistToNodes'
import {watchlistToEdges} from "./watchlistToEdges"; import {watchlistToEdges} from './watchlistToEdges'
export function ViewDiagramWatchlistButton({token}: { token: string }) { export function ViewDiagramWatchlistButton({token}: { token: string }) {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [nodes, setNodes, onNodesChange] = useNodesState([]) const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
const [edges, setEdges, onEdgesChange] = useEdgesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
useEffect(() => { useEffect(() => {
setEdges([]) setEdges([])
@@ -30,15 +29,16 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
setNodes(e.nodes) setNodes(e.nodes)
setEdges(e.edges) setEdges(e.edges)
}).catch(() => setOpen(false)).finally(() => setLoading(false)) }).catch(() => setOpen(false)).finally(() => setLoading(false))
}, [open]) }, [open])
return (
return <> <>
<Typography.Link> <Typography.Link>
<ApartmentOutlined title={t`View the Watchlist Entity Diagram`} <ApartmentOutlined
title={t`View the Watchlist Entity Diagram`}
style={{color: 'darkviolet'}} style={{color: 'darkviolet'}}
onClick={() => setOpen(true)}/> onClick={() => setOpen(true)}
/>
</Typography.Link> </Typography.Link>
<Modal <Modal
title={t`Watchlist Entity Diagram`} title={t`Watchlist Entity Diagram`}
@@ -47,7 +47,7 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
loading={loading} loading={loading}
footer={ footer={
<Space> <Space>
<Button type="default" onClick={() => setOpen(false)}> <Button type='default' onClick={() => setOpen(false)}>
Close Close
</Button> </Button>
</Space> </Space>
@@ -78,4 +78,5 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
</Flex> </Flex>
</Modal> </Modal>
</> </>
)
} }

37
assets/components/tracking/watchlist/diagram/getLayoutedElements.tsx
View File

@@ -1,38 +1,39 @@
import dagre from "dagre" import dagre from 'dagre'
import {Edge, Node, Position} from '@xyflow/react'
export const getLayoutedElements = (nodes: any, edges: any, direction = 'TB') => { export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
const dagreGraph = new dagre.graphlib.Graph() const dagreGraph = new dagre.graphlib.Graph()
dagreGraph.setDefaultEdgeLabel(() => ({})) dagreGraph.setDefaultEdgeLabel(() => ({}))
const nodeWidth = 172 const nodeWidth = 172
const nodeHeight = 200 const nodeHeight = 200
const isHorizontal = direction === 'LR'; const isHorizontal = direction === 'LR'
dagreGraph.setGraph({rankdir: direction}); dagreGraph.setGraph({rankdir: direction})
nodes.forEach((node: any) => { nodes.forEach(node => {
dagreGraph.setNode(node.id, {width: nodeWidth, height: nodeHeight}); dagreGraph.setNode(node.id, {width: nodeWidth, height: nodeHeight})
}); })
edges.forEach((edge: any) => { edges.forEach(edge => {
dagreGraph.setEdge(edge.source, edge.target); dagreGraph.setEdge(edge.source, edge.target)
}); })
dagre.layout(dagreGraph); dagre.layout(dagreGraph)
const newNodes = nodes.map((node: any) => { const newNodes: Node[] = nodes.map(node => {
const nodeWithPosition = dagreGraph.node(node.id) const nodeWithPosition = dagreGraph.node(node.id)
return { return {
...node, ...node,
targetPosition: isHorizontal ? 'left' : 'top', targetPosition: isHorizontal ? Position.Left : Position.Top,
sourcePosition: isHorizontal ? 'right' : 'bottom', sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
position: { position: {
x: nodeWithPosition.x - nodeWidth / 2, x: nodeWithPosition.x - nodeWidth / 2,
y: nodeWithPosition.y - nodeHeight / 2 y: nodeWithPosition.y - nodeHeight / 2
}, }
}; }
}); })
return {nodes: newNodes, edges}; return {nodes: newNodes, edges}
} }

21
assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx
View File

@@ -1,17 +1,18 @@
import {Domain, Watchlist} from "../../../../utils/api"; import {Domain, Watchlist} from '../../../../utils/api'
import {rdapRoleTranslation} from "../../../../utils/functions/rdapTranslation"; import {rdapRoleTranslation} from '../../../../utils/functions/rdapTranslation'
import {t} from "ttag"; import {t} from 'ttag'
import {rolesToColor} from "../../../../utils/functions/rolesToColor"; import {rolesToColor} from '../../../../utils/functions/rolesToColor'
import {Edge} from '@xyflow/react'
export function domainEntitiesToEdges(d: Domain, withRegistrar = false) { export function domainEntitiesToEdges(d: Domain, withRegistrar = false): Edge[] {
const rdapRoleTranslated = rdapRoleTranslation() const rdapRoleTranslated = rdapRoleTranslation()
const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor')) const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor'))
return d.entities return d.entities
.filter(e => .filter(e =>
!e.deleted && !e.deleted &&
(withRegistrar || !e.roles.includes('registrar')) && (withRegistrar || !e.roles.includes('registrar')) &&
(!sponsor || !e.roles.includes('registrar') || e.roles.includes('sponsor')) ((sponsor == null) || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
) )
.map(e => ({ .map(e => ({
id: `e-${d.ldhName}-${e.entity.handle}`, id: `e-${d.ldhName}-${e.entity.handle}`,
@@ -21,11 +22,11 @@ export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
label: e.roles label: e.roles
.map(r => rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] || r) .map(r => rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] || r)
.join(', '), .join(', '),
animated: e.roles.includes('registrant'), animated: e.roles.includes('registrant')
})) }))
} }
export const domainNSToEdges = (d: Domain) => d.nameservers export const domainNSToEdges = (d: Domain): Edge[] => d.nameservers
.map(ns => ({ .map(ns => ({
id: `ns-${d.ldhName}-${ns.ldhName}`, id: `ns-${d.ldhName}-${ns.ldhName}`,
source: d.ldhName, source: d.ldhName,
@@ -34,7 +35,7 @@ export const domainNSToEdges = (d: Domain) => d.nameservers
label: 'DNS' label: 'DNS'
})) }))
export const tldToEdge = (d: Domain) => ({ export const tldToEdge = (d: Domain): Edge => ({
id: `tld-${d.ldhName}-${d.tld.tld}`, id: `tld-${d.ldhName}-${d.tld.tld}`,
source: d.tld.tld, source: d.tld.tld,
target: d.ldhName, target: d.ldhName,
@@ -42,7 +43,7 @@ export const tldToEdge = (d: Domain) => ({
label: t`Registry` label: t`Registry`
}) })
export function watchlistToEdges(watchlist: Watchlist, withRegistrar = false, withTld = false) { export function watchlistToEdges(watchlist: Watchlist, withRegistrar = false, withTld = false): Edge[] {
const entitiesEdges = watchlist.domains.map(d => domainEntitiesToEdges(d, withRegistrar)).flat() const entitiesEdges = watchlist.domains.map(d => domainEntitiesToEdges(d, withRegistrar)).flat()
const nameserversEdges = watchlist.domains.map(domainNSToEdges).flat() const nameserversEdges = watchlist.domains.map(domainNSToEdges).flat()
const tldEdge = watchlist.domains.map(tldToEdge) const tldEdge = watchlist.domains.map(tldToEdge)

24
assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx
View File

@@ -1,28 +1,31 @@
import {Domain, Nameserver, Tld, Watchlist} from "../../../../utils/api"; import {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
import React from "react"; import React from 'react'
import {t} from 'ttag' import {t} from 'ttag'
import {entityToName} from "../../../../utils/functions/entityToName"; import {entityToName} from '../../../../utils/functions/entityToName'
import {Node} from '@xyflow/react'
export const domainToNode = (d: Domain) => ({ export const domainToNode = (d: Domain): Node => ({
id: d.ldhName, id: d.ldhName,
position: {x: 0, y: 0},
data: {label: <b>{d.ldhName}</b>}, data: {label: <b>{d.ldhName}</b>},
style: { style: {
width: 200 width: 200
} }
}) })
export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => { export const domainEntitiesToNode = (d: Domain, withRegistrar = false): Node[] => {
const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor')) const sponsor = d.entities.find(e => !e.deleted && e.roles.includes('sponsor'))
return d.entities return d.entities
.filter(e => .filter(e =>
!e.deleted && !e.deleted &&
(withRegistrar || !e.roles.includes('registrar')) && (withRegistrar || !e.roles.includes('registrar')) &&
(!sponsor || !e.roles.includes('registrar') || e.roles.includes('sponsor')) ((sponsor == null) || !e.roles.includes('registrar') || e.roles.includes('sponsor'))
) )
.map(e => { .map(e => {
return { return {
id: e.entity.handle, id: e.entity.handle,
position: {x: 0, y: 0},
type: e.roles.includes('registrant') || e.roles.includes('registrar') ? 'input' : 'output', type: e.roles.includes('registrant') || e.roles.includes('registrar') ? 'input' : 'output',
data: {label: entityToName(e)}, data: {label: entityToName(e)},
style: { style: {
@@ -32,8 +35,9 @@ export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => {
}) })
} }
export const tldToNode = (tld: Tld) => ({ export const tldToNode = (tld: Tld): Node => ({
id: tld.tld, id: tld.tld,
position: {x: 0, y: 0},
data: {label: t`.${tld.tld} Registry`}, data: {label: t`.${tld.tld} Registry`},
type: 'input', type: 'input',
style: { style: {
@@ -41,8 +45,9 @@ export const tldToNode = (tld: Tld) => ({
} }
}) })
export const nsToNode = (ns: Nameserver) => ({ export const nsToNode = (ns: Nameserver): Node => ({
id: ns.ldhName, id: ns.ldhName,
position: {x: 0, y: 0},
data: {label: ns.ldhName}, data: {label: ns.ldhName},
type: 'output', type: 'output',
style: { style: {
@@ -50,8 +55,7 @@ export const nsToNode = (ns: Nameserver) => ({
} }
}) })
export function watchlistToNodes(watchlist: Watchlist, withRegistrar = false, withTld = false) { export function watchlistToNodes(watchlist: Watchlist, withRegistrar = false, withTld = false): Node[] {
const domains = watchlist.domains.map(domainToNode) const domains = watchlist.domains.map(domainToNode)
const entities = [...new Set(watchlist.domains.map(d => domainEntitiesToNode(d, withRegistrar)).flat())] const entities = [...new Set(watchlist.domains.map(d => domainEntitiesToNode(d, withRegistrar)).flat())]
const tlds = [...new Set(watchlist.domains.map(d => d.tld))].filter(t => t.tld !== '.').map(tldToNode) const tlds = [...new Set(watchlist.domains.map(d => d.tld))].filter(t => t.tld !== '.').map(tldToNode)

6
assets/declaration.d.ts vendored
View File

@@ -1,4 +1,4 @@
declare module "*.md" { declare module '*.md' {
const content: string; const content: string
export default content; export default content
} }

10
assets/hooks/useBreakpoint.tsx
View File

@@ -1,13 +1,13 @@
import {Breakpoint, theme} from 'antd'; import {Breakpoint, theme} from 'antd'
import {useMediaQuery} from 'react-responsive'; import {useMediaQuery} from 'react-responsive'
const {useToken} = theme; const {useToken} = theme
type ScreenProperty = 'screenXXL' | 'screenXL' | 'screenLG' | 'screenMD' | 'screenSM' | 'screenXS'; type ScreenProperty = 'screenXXL' | 'screenXL' | 'screenLG' | 'screenMD' | 'screenSM' | 'screenXS'
const propertyName = (breakpoint: Breakpoint): ScreenProperty => { const propertyName = (breakpoint: Breakpoint): ScreenProperty => {
return 'screen' + breakpoint.toUpperCase() as ScreenProperty return 'screen' + breakpoint.toUpperCase() as ScreenProperty
}; }
export default function useBreakpoint( export default function useBreakpoint(
breakpoint: Breakpoint breakpoint: Breakpoint

16
assets/index.tsx
View File

@@ -1,23 +1,21 @@
import React from "react"; import React from 'react'
import ReactDOM from "react-dom/client"; import ReactDOM from 'react-dom/client'
import App from "./App"; import App from './App'
import {HashRouter} from "react-router-dom"; import {HashRouter} from 'react-router-dom'
import 'antd/dist/reset.css'; import 'antd/dist/reset.css'
import './i18n' import './i18n'
import './index.css' import './index.css'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
function Index() { function Index() {
return ( return (
<HashRouter> <HashRouter>
<App/> <App/>
</HashRouter> </HashRouter>
); )
} }
root.render(<Index/>) root.render(<Index/>)

37
assets/pages/LoginPage.tsx
View File

@@ -1,16 +1,24 @@
import React, {createContext, useEffect, useState} from "react"; import React, {createContext, useEffect, useState} from 'react'
import {Button, Card} from "antd"; import {Button, Card} from 'antd'
import {t} from 'ttag' import {t} from 'ttag'
import TextPage from "./TextPage"; import TextPage from './TextPage'
import {LoginForm} from "../components/LoginForm"; import {LoginForm} from '../components/LoginForm'
import {getConfiguration, InstanceConfig} from "../utils/api"; import {getConfiguration, InstanceConfig} from '../utils/api'
import {RegisterForm} from "../components/RegisterForm"; import {RegisterForm} from '../components/RegisterForm'
export const AuthenticatedContext = createContext<
export const AuthenticatedContext = createContext<any>(null) {
authenticated: (authenticated: boolean) => void
setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>
}
>({
authenticated: () => {
},
setIsAuthenticated: () => {
}
})
export default function LoginPage() { export default function LoginPage() {
const [wantRegister, setWantRegister] = useState<boolean>(false) const [wantRegister, setWantRegister] = useState<boolean>(false)
const [configuration, setConfiguration] = useState<InstanceConfig>() const [configuration, setConfiguration] = useState<InstanceConfig>()
@@ -22,19 +30,24 @@ export default function LoginPage() {
getConfiguration().then(setConfiguration) getConfiguration().then(setConfiguration)
}, []) }, [])
return <Card title={wantRegister ? t`Register` : t`Log in`} style={{width: '100%'}}> return (
<Card title={wantRegister ? t`Register` : t`Log in`} style={{width: '100%'}}>
<Card.Grid style={{width: '50%', textAlign: 'center'}} hoverable={false}> <Card.Grid style={{width: '50%', textAlign: 'center'}} hoverable={false}>
{wantRegister ? <RegisterForm/> : <LoginForm ssoLogin={configuration?.ssoLogin}/>} {wantRegister ? <RegisterForm/> : <LoginForm ssoLogin={configuration?.ssoLogin}/>}
{ {
configuration?.registerEnabled && configuration?.registerEnabled &&
<Button type='link' <Button
type='link'
block block
style={{marginTop: '1em'}} style={{marginTop: '1em'}}
onClick={toggleWantRegister}>{wantRegister ? t`Log in` : t`Create an account`}</Button> onClick={toggleWantRegister}
>{wantRegister ? t`Log in` : t`Create an account`}
</Button>
} }
</Card.Grid> </Card.Grid>
<Card.Grid style={{width: '50%'}} hoverable={false}> <Card.Grid style={{width: '50%'}} hoverable={false}>
<TextPage resource='ads.md'/> <TextPage resource='ads.md'/>
</Card.Grid> </Card.Grid>
</Card> </Card>
)
} }

13
assets/pages/NotFoundPage.tsx
View File

@@ -1,12 +1,13 @@
import {Result} from "antd"; import {Result} from 'antd'
import React from "react"; import React from 'react'
import {t} from 'ttag' import {t} from 'ttag'
export default function NotFoundPage() { export default function NotFoundPage() {
return <Result return (
status="404" <Result
title="404" status='404'
title='404'
subTitle={t`Sorry, the page you visited does not exist.`} subTitle={t`Sorry, the page you visited does not exist.`}
/> />
)
} }

24
assets/pages/StatisticsPage.tsx
View File

@@ -1,17 +1,16 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import {getStatistics, Statistics} from "../utils/api"; import {getStatistics, Statistics} from '../utils/api'
import {Card, Col, Divider, Row, Statistic, Tooltip} from "antd"; import {Card, Col, Divider, Row, Statistic, Tooltip} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import { import {
AimOutlined, AimOutlined,
CompassOutlined, CompassOutlined,
DatabaseOutlined, DatabaseOutlined,
FieldTimeOutlined, FieldTimeOutlined,
NotificationOutlined NotificationOutlined
} from "@ant-design/icons"; } from '@ant-design/icons'
export default function StatisticsPage() { export default function StatisticsPage() {
const [stats, setStats] = useState<Statistics>() const [stats, setStats] = useState<Statistics>()
useEffect(() => { useEffect(() => {
@@ -20,11 +19,12 @@ export default function StatisticsPage() {
const totalDomainPurchase = (stats?.domainPurchased ?? 0) + (stats?.domainPurchaseFailed ?? 0) const totalDomainPurchase = (stats?.domainPurchased ?? 0) + (stats?.domainPurchaseFailed ?? 0)
const successRate = stats !== undefined ? const successRate = stats !== undefined
(totalDomainPurchase === 0 ? undefined : stats.domainPurchased / totalDomainPurchase) ? (totalDomainPurchase === 0 ? undefined : stats.domainPurchased / totalDomainPurchase)
: undefined : undefined
return <> return (
<>
<Row gutter={16}> <Row gutter={16}>
<Col span={12}> <Col span={12}>
<Card bordered={false}> <Card bordered={false}>
@@ -89,7 +89,8 @@ export default function StatisticsPage() {
<Col span={12}> <Col span={12}>
<Card bordered={false}> <Card bordered={false}>
<Tooltip <Tooltip
title={t`This value is based on the status code of the HTTP response from the providers following the domain order.`}> title={t`This value is based on the status code of the HTTP response from the providers following the domain order.`}
>
<Statistic <Statistic
loading={stats === undefined} loading={stats === undefined}
title={t`Success rate`} title={t`Success rate`}
@@ -105,7 +106,7 @@ export default function StatisticsPage() {
<Row gutter={16} justify='center' align='middle'> <Row gutter={16} justify='center' align='middle'>
{stats?.domainCount {stats?.domainCount
.sort((a, b) => b.domain - a.domain) .sort((a, b) => b.domain - a.domain)
.map(({domain, tld}) => <Col span={4}> .map(({domain, tld}) => <Col key={tld} span={4}>
<Card bordered={false}> <Card bordered={false}>
<Statistic <Statistic
loading={stats === undefined} loading={stats === undefined}
@@ -117,4 +118,5 @@ export default function StatisticsPage() {
</Col>)} </Col>)}
</Row> </Row>
</> </>
)
} }

24
assets/pages/TextPage.tsx
View File

@@ -1,8 +1,8 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import snarkdown from "snarkdown" import snarkdown from 'snarkdown'
import {Skeleton, Typography} from "antd"; import {Skeleton, Typography} from 'antd'
import axios from "axios"; import axios from 'axios'
import {t} from "ttag"; import {t} from 'ttag'
export default function TextPage({resource}: { resource: string }) { export default function TextPage({resource}: { resource: string }) {
const [loading, setLoading] = useState<boolean>(false) const [loading, setLoading] = useState<boolean>(false)
@@ -12,18 +12,22 @@ export default function TextPage({resource}: { resource: string }) {
setLoading(true) setLoading(true)
axios.get('/content/' + resource) axios.get('/content/' + resource)
.then(res => setMarkdown(res.data)) .then(res => setMarkdown(res.data))
.catch(err => { .catch(() => {
console.error(`Please create the /public/content/${resource} file.`) console.error(`Please create the /public/content/${resource} file.`)
setMarkdown(undefined) setMarkdown(undefined)
}) })
.finally(() => setLoading(false)) .finally(() => setLoading(false))
}, [resource]) }, [resource])
return <Skeleton loading={loading} active> return (
{markdown !== undefined ? <div <Skeleton loading={loading} active>
dangerouslySetInnerHTML={{__html: snarkdown(markdown)}}></div> : {markdown !== undefined
<Typography.Text strong> ? <div
dangerouslySetInnerHTML={{__html: snarkdown(markdown)}}
/>
: <Typography.Text strong>
{t`📝 Please create the /public/content/${resource} file.`} {t`📝 Please create the /public/content/${resource} file.`}
</Typography.Text>} </Typography.Text>}
</Skeleton> </Skeleton>
)
} }

13
assets/pages/UserPage.tsx
View File

@@ -1,18 +1,18 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import {Card, Flex, Skeleton, Typography} from "antd"; import {Card, Flex, Skeleton, Typography} from 'antd'
import {getUser, User} from "../utils/api"; import {getUser, User} from '../utils/api'
import {t} from 'ttag' import {t} from 'ttag'
export default function UserPage() { export default function UserPage() {
const [user, setUser] = useState<User | null>(null) const [user, setUser] = useState<User | null>(null)
useEffect(() => { useEffect(() => {
getUser().then(setUser) getUser().then(setUser)
}, []) }, [])
return <Skeleton loading={user === null} active> return (
<Flex gap="middle" align="center" justify="center" vertical> <Skeleton loading={user === null} active>
<Flex gap='middle' align='center' justify='center' vertical>
<Card title={t`My Account`}> <Card title={t`My Account`}>
<Typography.Paragraph> <Typography.Paragraph>
{t`Username`} : {user?.email} {t`Username`} : {user?.email}
@@ -23,4 +23,5 @@ export default function UserPage() {
</Card> </Card>
</Flex> </Flex>
</Skeleton> </Skeleton>
)
} }

28
assets/pages/search/DomainSearchPage.tsx
View File

@@ -1,12 +1,12 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import {Empty, Flex, FormProps, message, Skeleton} from "antd"; import {Empty, Flex, FormProps, message, Skeleton} from 'antd'
import {Domain, getDomain} from "../../utils/api"; import {Domain, getDomain} from '../../utils/api'
import {AxiosError} from "axios" import {AxiosError} from 'axios'
import {t} from 'ttag' import {t} from 'ttag'
import {DomainSearchBar, FieldType} from "../../components/search/DomainSearchBar"; import {DomainSearchBar, FieldType} from '../../components/search/DomainSearchBar'
import {DomainResult} from "../../components/search/DomainResult"; import {DomainResult} from '../../components/search/DomainResult'
import {showErrorAPI} from "../../utils/functions/showErrorAPI"; import {showErrorAPI} from '../../utils/functions/showErrorAPI'
import {useNavigate, useParams} from "react-router-dom"; import {useNavigate, useParams} from 'react-router-dom'
export default function DomainSearchPage() { export default function DomainSearchPage() {
const {query} = useParams() const {query} = useParams()
@@ -36,17 +36,21 @@ export default function DomainSearchPage() {
onFinish({ldhName: query}) onFinish({ldhName: query})
}, []) }, [])
return <Flex gap="middle" align="center" justify="center" vertical> return (
<Flex gap='middle' align='center' justify='center' vertical>
{contextHolder} {contextHolder}
<DomainSearchBar initialValue={query} onFinish={onFinish}/> <DomainSearchBar initialValue={query} onFinish={onFinish}/>
<Skeleton loading={domain === null} active> <Skeleton loading={domain === null} active>
{ {
domain && (domain != null) &&
(!domain.deleted ? <DomainResult domain={domain}/> (!domain.deleted
? <DomainResult domain={domain}/>
: <Empty : <Empty
description={t`Although the domain exists in my database, it has been deleted from the WHOIS by its registrar.`}/>) description={t`Although the domain exists in my database, it has been deleted from the WHOIS by its registrar.`}
/>)
} }
</Skeleton> </Skeleton>
</Flex> </Flex>
)
} }

6
assets/pages/search/EntitySearchPage.tsx
View File

@@ -1,7 +1,9 @@
import React from "react"; import React from 'react'
export default function EntitySearchPage() { export default function EntitySearchPage() {
return <p> return (
<p>
Not implemented Not implemented
</p> </p>
)
} }

6
assets/pages/search/NameserverSearchPage.tsx
View File

@@ -1,7 +1,9 @@
import React from "react"; import React from 'react'
export default function NameserverSearchPage() { export default function NameserverSearchPage() {
return <p> return (
<p>
Not implemented Not implemented
</p> </p>
)
} }

72
assets/pages/search/TldPage.tsx
View File

@@ -1,41 +1,53 @@
import React, {useEffect, useState} from "react"; import React, {ReactElement, useEffect, useState} from 'react'
import {Collapse, Divider, Table, Typography} from "antd"; import {Collapse, Divider, Table, Typography} from 'antd'
import {getTldList, Tld} from "../../utils/api"; import {getTldList, Tld} from '../../utils/api'
import {t} from 'ttag' import {t} from 'ttag'
import {regionNames} from "../../i18n"; import {regionNames} from '../../i18n'
import useBreakpoint from "../../hooks/useBreakpoint"; import useBreakpoint from '../../hooks/useBreakpoint'
import {ColumnType} from "antd/es/table"; import {ColumnType} from 'antd/es/table'
import punycode from "punycode/punycode"; import punycode from 'punycode/punycode'
import {getCountryCode} from "../../utils/functions/getCountryCode"; import {getCountryCode} from '../../utils/functions/getCountryCode'
import {tldToEmoji} from "../../utils/functions/tldToEmoji"; import {tldToEmoji} from '../../utils/functions/tldToEmoji'
const {Text, Paragraph} = Typography const {Text, Paragraph} = Typography
type TldType = 'iTLD' | 'sTLD' | 'gTLD' | 'ccTLD' type TldType = 'iTLD' | 'sTLD' | 'gTLD' | 'ccTLD'
type FiltersType = { type: TldType, contractTerminated?: boolean, specification13?: boolean }
interface FiltersType {
type: TldType,
contractTerminated?: boolean,
specification13?: boolean
}
function TldTable(filters: FiltersType) { function TldTable(filters: FiltersType) {
interface TableRow {
key: string
TLD: ReactElement
Flag?: string
Country?: string
}
const sm = useBreakpoint('sm') const sm = useBreakpoint('sm')
const [dataTable, setDataTable] = useState<Tld[]>([]) const [dataTable, setDataTable] = useState<TableRow[]>([])
const [total, setTotal] = useState(0) const [total, setTotal] = useState(0)
const fetchData = (params: FiltersType & { page: number, itemsPerPage: number }) => { const fetchData = (params: FiltersType & { page: number, itemsPerPage: number }) => {
getTldList(params).then((data) => { getTldList(params).then((data) => {
setTotal(data['hydra:totalItems']) setTotal(data['hydra:totalItems'])
setDataTable(data['hydra:member'].map((tld: Tld) => { setDataTable(data['hydra:member'].map((tld: Tld) => {
const rowData = { const rowData = {
key: tld.tld, key: tld.tld,
TLD: <Typography.Text code>{punycode.toUnicode(tld.tld)}</Typography.Text> TLD: <Typography.Text code>{punycode.toUnicode(tld.tld)}</Typography.Text>
} }
switch (filters.type) { const type = filters.type
case 'ccTLD':
let countryName let countryName
switch (type) {
case 'ccTLD':
try { try {
countryName = regionNames.of(getCountryCode(tld.tld)) countryName = regionNames.of(getCountryCode(tld.tld))
} catch (e) { } catch {
countryName = '-' countryName = '-'
} }
@@ -60,28 +72,32 @@ function TldTable(filters: FiltersType) {
fetchData({...filters, page: 1, itemsPerPage: 30}) fetchData({...filters, page: 1, itemsPerPage: 30})
}, []) }, [])
let columns: ColumnType<any>[] = [ let columns: Array<ColumnType<TableRow>> = [
{ {
title: t`TLD`, title: t`TLD`,
dataIndex: "TLD" dataIndex: 'TLD'
} }
] ]
if (filters.type === 'ccTLD') columns = [...columns, { if (filters.type === 'ccTLD') {
columns = [...columns, {
title: t`Flag`, title: t`Flag`,
dataIndex: "Flag", dataIndex: 'Flag'
}, { }, {
title: t`Country`, title: t`Country`,
dataIndex: "Country" dataIndex: 'Country'
}] }]
}
if (filters.type === 'gTLD') columns = [...columns, { if (filters.type === 'gTLD') {
columns = [...columns, {
title: t`Registry Operator`, title: t`Registry Operator`,
dataIndex: "Operator" dataIndex: 'Operator'
}] }]
}
return (
return <Table <Table
columns={columns} columns={columns}
dataSource={dataTable} dataSource={dataTable}
pagination={{ pagination={{
@@ -95,13 +111,14 @@ function TldTable(filters: FiltersType) {
{...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})} {...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
/> />
)
} }
export default function TldPage() { export default function TldPage() {
const sm = useBreakpoint('sm') const sm = useBreakpoint('sm')
return <> return (
<>
<Paragraph> <Paragraph>
{t`This page presents all active TLDs in the root zone database.`} {t`This page presents all active TLDs in the root zone database.`}
</Paragraph> </Paragraph>
@@ -140,7 +157,7 @@ export default function TldPage() {
children: <> children: <>
<Text>{t`Generic top-level domains associated with specific brands, allowing companies to use their own brand names as domains.`}</Text> <Text>{t`Generic top-level domains associated with specific brands, allowing companies to use their own brand names as domains.`}</Text>
<Divider/> <Divider/>
<TldTable type='gTLD' contractTerminated={false} specification13={true}/> <TldTable type='gTLD' contractTerminated={false} specification13/>
</> </>
}, },
{ {
@@ -154,4 +171,5 @@ export default function TldPage() {
]} ]}
/> />
</> </>
)
} }

31
assets/pages/tracking/ConnectorPage.tsx
View File

@@ -1,12 +1,12 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import {Card, Flex, Form, message, Skeleton} from "antd"; import {Card, Flex, Form, message, Skeleton} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import {Connector, getConnectors, postConnector} from "../../utils/api/connectors"; import {Connector, getConnectors, postConnector} from '../../utils/api/connectors'
import {ConnectorForm} from "../../components/tracking/connector/ConnectorForm"; import {ConnectorForm} from '../../components/tracking/connector/ConnectorForm'
import {AxiosError} from "axios"; import {AxiosError} from 'axios'
import {ConnectorElement, ConnectorsList} from "../../components/tracking/connector/ConnectorsList"; import {ConnectorElement, ConnectorsList} from '../../components/tracking/connector/ConnectorsList'
import {showErrorAPI} from "../../utils/functions/showErrorAPI"; import {showErrorAPI} from '../../utils/functions/showErrorAPI'
export default function ConnectorPage() { export default function ConnectorPage() {
const [form] = Form.useForm() const [form] = Form.useForm()
@@ -14,7 +14,7 @@ export default function ConnectorPage() {
const [connectors, setConnectors] = useState<ConnectorElement[] | null>() const [connectors, setConnectors] = useState<ConnectorElement[] | null>()
const onCreateConnector = (values: Connector) => { const onCreateConnector = (values: Connector) => {
postConnector(values).then((w) => { postConnector(values).then(() => {
form.resetFields() form.resetFields()
refreshConnectors() refreshConnectors()
messageApi.success(t`Connector created !`) messageApi.success(t`Connector created !`)
@@ -23,7 +23,7 @@ export default function ConnectorPage() {
}) })
} }
const refreshConnectors = () => getConnectors().then(c => { const refreshConnectors = async () => await getConnectors().then(c => {
setConnectors(c['hydra:member']) setConnectors(c['hydra:member'])
}).catch((e: AxiosError) => { }).catch((e: AxiosError) => {
setConnectors(undefined) setConnectors(undefined)
@@ -34,18 +34,17 @@ export default function ConnectorPage() {
refreshConnectors() refreshConnectors()
}, []) }, [])
return (
return <Flex gap="middle" align="center" justify="center" vertical> <Flex gap='middle' align='center' justify='center' vertical>
<Card title={t`Create a Connector`} style={{width: '100%'}}> <Card title={t`Create a Connector`} style={{width: '100%'}}>
{contextHolder} {contextHolder}
<ConnectorForm form={form} onCreate={onCreateConnector}/> <ConnectorForm form={form} onCreate={onCreateConnector}/>
</Card> </Card>
<Skeleton loading={connectors === undefined} active> <Skeleton loading={connectors === undefined} active>
{connectors && connectors.length > 0 && {(connectors != null) && connectors.length > 0 &&
<ConnectorsList connectors={connectors} onDelete={refreshConnectors}/> <ConnectorsList connectors={connectors} onDelete={refreshConnectors}/>}
}
</Skeleton> </Skeleton>
</Flex> </Flex>
)
} }

4
assets/pages/tracking/TrackedDomainPage.tsx
View File

@@ -1,5 +1,5 @@
import {TrackedDomainTable} from "../../components/tracking/watchlist/TrackedDomainTable"; import {TrackedDomainTable} from '../../components/tracking/watchlist/TrackedDomainTable'
import React from "react"; import React from 'react'
export default function TrackedDomainPage() { export default function TrackedDomainPage() {
return <TrackedDomainTable/> return <TrackedDomainTable/>

62
assets/pages/tracking/WatchlistPage.tsx
View File

@@ -1,34 +1,19 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from 'react'
import {Card, Divider, Flex, Form, message} from "antd"; import {Card, Divider, Flex, Form, message} from 'antd'
import {EventAction, getWatchlists, postWatchlist, putWatchlist} from "../../utils/api"; import {getWatchlists, postWatchlist, putWatchlist, Watchlist} from '../../utils/api'
import {AxiosError} from "axios"; import {AxiosError} from 'axios'
import {t} from 'ttag' import {t} from 'ttag'
import {WatchlistForm} from "../../components/tracking/watchlist/WatchlistForm"; import {WatchlistForm} from '../../components/tracking/watchlist/WatchlistForm'
import {WatchlistsList} from "../../components/tracking/watchlist/WatchlistsList"; import {WatchlistsList} from '../../components/tracking/watchlist/WatchlistsList'
import {Connector, getConnectors} from "../../utils/api/connectors"; import {Connector, getConnectors} from '../../utils/api/connectors'
import {showErrorAPI} from "../../utils/functions/showErrorAPI"; import {showErrorAPI} from '../../utils/functions/showErrorAPI'
interface FormValuesType {
export type Watchlist = {
name?: string name?: string
token: string, domains: string[]
domains: { ldhName: string, deleted: boolean, status: string[] }[],
triggers?: { event: EventAction, action: string }[],
dsn?: string[]
connector?: {
id: string
provider: string
createdAt: string
}
createdAt: string
}
type FormValuesType = {
name?: string
domains: string[],
triggers: string[] triggers: string[]
connector?: string, connector?: string
dsn?: string[] dsn?: string[]
} }
@@ -52,14 +37,13 @@ const getRequestDataFromForm = (values: FormValuesType) => {
} }
export default function WatchlistPage() { export default function WatchlistPage() {
const [form] = Form.useForm() const [form] = Form.useForm()
const [messageApi, contextHolder] = message.useMessage() const [messageApi, contextHolder] = message.useMessage()
const [watchlists, setWatchlists] = useState<Watchlist[]>() const [watchlists, setWatchlists] = useState<Watchlist[]>()
const [connectors, setConnectors] = useState<(Connector & { id: string })[]>() const [connectors, setConnectors] = useState<Array<Connector & { id: string }>>()
const onCreateWatchlist = (values: FormValuesType) => { const onCreateWatchlist = (values: FormValuesType) => {
postWatchlist(getRequestDataFromForm(values)).then((w) => { postWatchlist(getRequestDataFromForm(values)).then(() => {
form.resetFields() form.resetFields()
refreshWatchlists() refreshWatchlists()
messageApi.success(t`Watchlist created !`) messageApi.success(t`Watchlist created !`)
@@ -68,18 +52,18 @@ export default function WatchlistPage() {
}) })
} }
const onUpdateWatchlist = async (values: FormValuesType & { token: string }) => putWatchlist({ const onUpdateWatchlist = async (values: FormValuesType & { token: string }) => await putWatchlist({
token: values.token, token: values.token,
...getRequestDataFromForm(values) ...getRequestDataFromForm(values)
} }
).then((w) => { ).then(() => {
refreshWatchlists() refreshWatchlists()
messageApi.success(t`Watchlist updated !`) messageApi.success(t`Watchlist updated !`)
}).catch((e: AxiosError) => { }).catch((e: AxiosError) => {
throw showErrorAPI(e, messageApi) throw showErrorAPI(e, messageApi)
}) })
const refreshWatchlists = () => getWatchlists().then(w => { const refreshWatchlists = async () => await getWatchlists().then(w => {
setWatchlists(w['hydra:member']) setWatchlists(w['hydra:member'])
}).catch((e: AxiosError) => { }).catch((e: AxiosError) => {
setWatchlists(undefined) setWatchlists(undefined)
@@ -95,18 +79,20 @@ export default function WatchlistPage() {
}) })
}, []) }, [])
return <Flex gap="middle" align="center" justify="center" vertical> return (
<Flex gap='middle' align='center' justify='center' vertical>
{contextHolder} {contextHolder}
<Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}> <Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}>
{connectors && {(connectors != null) &&
<WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/> <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation/>}
}
</Card> </Card>
<Divider/> <Divider/>
{connectors && watchlists && watchlists.length > 0 && {(connectors != null) && (watchlists != null) && watchlists.length > 0 &&
<WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists} <WatchlistsList
watchlists={watchlists} onDelete={refreshWatchlists}
connectors={connectors} connectors={connectors}
onUpdateWatchlist={onUpdateWatchlist} onUpdateWatchlist={onUpdateWatchlist}
/>} />}
</Flex> </Flex>
)
} }

16
assets/utils/api/connectors.ts
View File

@@ -1,4 +1,5 @@
import {request} from "./index"; import {request} from './index'
import {ConnectorElement} from '../../components/tracking/connector/ConnectorsList'
export enum ConnectorProvider { export enum ConnectorProvider {
OVH = 'ovh', OVH = 'ovh',
@@ -7,13 +8,18 @@ export enum ConnectorProvider {
NAMECHEAP = 'namecheap' NAMECHEAP = 'namecheap'
} }
export type Connector = { export interface Connector {
provider: ConnectorProvider provider: ConnectorProvider
authData: object authData: object
} }
export async function getConnectors() { interface ConnectorResponse {
const response = await request({ 'hydra:totalItems': number
'hydra:member': ConnectorElement[]
}
export async function getConnectors(): Promise<ConnectorResponse> {
const response = await request<ConnectorResponse>({
url: 'connectors' url: 'connectors'
}) })
return response.data return response.data
@@ -25,7 +31,7 @@ export async function postConnector(connector: Connector) {
url: 'connectors', url: 'connectors',
data: connector, data: connector,
headers: { headers: {
"Content-Type": 'application/json' 'Content-Type': 'application/json'
} }
}) })
return response.data return response.data

3
assets/utils/api/domain.ts
View File

@@ -1,5 +1,4 @@
import {Domain, request} from "."; import {Domain, request} from '.'
export async function getDomain(ldhName: string): Promise<Domain> { export async function getDomain(ldhName: string): Promise<Domain> {
const response = await request<Domain>({ const response = await request<Domain>({

46
assets/utils/api/index.ts
View File

@@ -1,5 +1,4 @@
import axios, {AxiosRequestConfig, AxiosResponse} from "axios"; import axios, {AxiosRequestConfig, AxiosResponse} from 'axios'
export type EventAction = export type EventAction =
'registration' 'registration'
@@ -26,7 +25,12 @@ export interface Event {
export interface Entity { export interface Entity {
handle: string handle: string
jCard: any jCard: ['vcard', Array<[
string,
{ [key: string]: string | string[] },
string,
string | string[],
]>] | []
} }
export interface Nameserver { export interface Nameserver {
@@ -50,12 +54,12 @@ export interface Domain {
handle: string handle: string
status: string[] status: string[]
events: Event[] events: Event[]
entities: { entities: Array<{
entity: Entity entity: Entity
events: Event[] events: Event[]
roles: string[] roles: string[]
deleted: boolean deleted: boolean
}[] }>
nameservers: Nameserver[] nameservers: Nameserver[]
tld: Tld tld: Tld
deleted: boolean deleted: boolean
@@ -70,20 +74,24 @@ export interface User {
export interface WatchlistRequest { export interface WatchlistRequest {
name?: string name?: string
domains: string[], domains: string[]
triggers: { event: EventAction, action: TriggerAction }[], triggers: Array<{ event: EventAction, action: TriggerAction }>
connector?: string connector?: string
dsn?: string[] dsn?: string[]
} }
export interface Watchlist { export interface Watchlist {
token: string
name?: string name?: string
domains: Domain[], token: string
triggers: { event: EventAction, action: TriggerAction }[], domains: Domain[]
connector?: string triggers?: Array<{ event: EventAction, action: string }>
createdAt: string
dsn?: string[] dsn?: string[]
connector?: {
id: string
provider: string
createdAt: string
}
createdAt: string
} }
export interface InstanceConfig { export interface InstanceConfig {
@@ -97,28 +105,30 @@ export interface Statistics {
alertSent: number alertSent: number
domainPurchased: number domainPurchased: number
domainPurchaseFailed: number domainPurchaseFailed: number
domainCount: {tld: string, domain: number}[] domainCount: Array<{ tld: string, domain: number }>
domainCountTotal: number domainCountTotal: number
domainTracked: number domainTracked: number
} }
export async function request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig): Promise<R> { export interface TrackedDomains {
'hydra:totalItems': number
'hydra:member': Domain[]
}
export async function request<T = object, R = AxiosResponse<T>, D = object>(config: AxiosRequestConfig): Promise<R> {
const axiosConfig: AxiosRequestConfig = { const axiosConfig: AxiosRequestConfig = {
...config, ...config,
baseURL: '/api', baseURL: '/api',
withCredentials: true, withCredentials: true,
headers: { headers: {
Accept: 'application/ld+json', Accept: 'application/ld+json',
...config.headers, ...config.headers
} }
} }
return await axios.request<T, R, D>(axiosConfig) return await axios.request<T, R, D>(axiosConfig)
} }
export * from './domain' export * from './domain'
export * from './tld' export * from './tld'
export * from './user' export * from './user'
export * from './watchlist' export * from './watchlist'

16
assets/utils/api/tld.ts
View File

@@ -1,15 +1,13 @@
import {request} from "./index"; import {request, Tld} from './index'
interface Tld { interface TldList {
tld: string 'hydra:totalItems': number
contractTerminated: boolean 'hydra:member': Tld[]
registryOperator: string
specification13: boolean
} }
export async function getTldList(params: object): Promise<any> { export async function getTldList(params: object): Promise<TldList> {
return (await request<Tld[]>({ return (await request<TldList>({
url: 'tld', url: 'tld',
params, params
})).data })).data
} }

4
assets/utils/api/user.ts
View File

@@ -1,5 +1,4 @@
import {InstanceConfig, request, Statistics, User} from "./index"; import {InstanceConfig, request, Statistics, User} from './index'
export async function login(email: string, password: string): Promise<boolean> { export async function login(email: string, password: string): Promise<boolean> {
const response = await request({ const response = await request({
@@ -19,7 +18,6 @@ export async function register(email: string, password: string): Promise<boolean
return response.status === 201 return response.status === 201
} }
export async function getUser(): Promise<User> { export async function getUser(): Promise<User> {
const response = await request<User>({ const response = await request<User>({
url: 'me' url: 'me'

20
assets/utils/api/watchlist.ts
View File

@@ -1,7 +1,12 @@
import {Domain, request, Watchlist, WatchlistRequest} from "./index"; import {request, TrackedDomains, Watchlist, WatchlistRequest} from './index'
export async function getWatchlists() { interface WatchlistList {
const response = await request({ 'hydra:totalItems': number
'hydra:member': Watchlist[]
}
export async function getWatchlists(): Promise<WatchlistList> {
const response = await request<WatchlistList>({
url: 'watchlists' url: 'watchlists'
}) })
return response.data return response.data
@@ -20,7 +25,7 @@ export async function postWatchlist(watchlist: WatchlistRequest) {
url: 'watchlists', url: 'watchlists',
data: watchlist, data: watchlist,
headers: { headers: {
"Content-Type": 'application/json' 'Content-Type': 'application/json'
} }
}) })
return response.data return response.data
@@ -37,17 +42,16 @@ export async function putWatchlist(watchlist: Partial<WatchlistRequest> & { toke
const response = await request<WatchlistRequest>({ const response = await request<WatchlistRequest>({
method: 'PUT', method: 'PUT',
url: 'watchlists/' + watchlist.token, url: 'watchlists/' + watchlist.token,
data: watchlist, data: watchlist
}) })
return response.data return response.data
} }
export async function getTrackedDomainList(params: { page: number, itemsPerPage: number }): Promise<any> { export async function getTrackedDomainList(params: { page: number, itemsPerPage: number }): Promise<TrackedDomains> {
const response = await request({ const response = await request<TrackedDomains>({
method: 'GET', method: 'GET',
url: 'tracked', url: 'tracked',
params params
}) })
return response.data return response.data
} }

28
assets/utils/functions/actionToColor.tsx
View File

@@ -1,11 +1,19 @@
import {EventAction} from "../api"; import {EventAction} from '../api'
export const actionToColor = (a: EventAction) => a === 'registration' ? 'green' : export const actionToColor = (a: EventAction) => a === 'registration'
a === 'reregistration' ? 'cyan' : ? 'green'
a === 'expiration' ? 'red' : : a === 'reregistration'
a === 'deletion' ? 'magenta' : ? 'cyan'
a === 'transfer' ? 'orange' : : a === 'expiration'
a === 'last changed' ? 'blue' : ? 'red'
a === 'registrar expiration' ? 'red' : : a === 'deletion'
a === 'reinstantiation' ? 'purple' : ? 'magenta'
a === 'enum validation expiration' ? 'red' : 'default' : a === 'transfer'
? 'orange'
: a === 'last changed'
? 'blue'
: a === 'registrar expiration'
? 'red'
: a === 'reinstantiation'
? 'purple'
: a === 'enum validation expiration' ? 'red' : 'default'

45
assets/utils/functions/actionToIcon.tsx
View File

@@ -1,4 +1,4 @@
import {EventAction} from "../api"; import {EventAction} from '../api'
import { import {
ClockCircleOutlined, ClockCircleOutlined,
DeleteOutlined, DeleteOutlined,
@@ -9,20 +9,31 @@ import {
SignatureOutlined, SignatureOutlined,
SyncOutlined, SyncOutlined,
UnlockOutlined UnlockOutlined
} from "@ant-design/icons"; } from '@ant-design/icons'
import React from "react"; import React from 'react'
export const actionToIcon = (a: EventAction) => a === 'registration' ? export const actionToIcon = (a: EventAction) => a === 'registration'
<SignatureOutlined style={{fontSize: '16px'}}/> : a === 'expiration' ? ? <SignatureOutlined style={{fontSize: '16px'}}/>
<ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'transfer' ? : a === 'expiration'
<ShareAltOutlined style={{fontSize: '16px'}}/> : a === 'last changed' ? ? <ClockCircleOutlined style={{fontSize: '16px'}}/>
<SyncOutlined style={{fontSize: '16px'}}/> : a === 'deletion' ? : a === 'transfer'
<DeleteOutlined style={{fontSize: '16px'}}/> : a === 'reregistration' ? ? <ShareAltOutlined style={{fontSize: '16px'}}/>
<ReloadOutlined style={{fontSize: '16px'}}/> : a === 'locked' ? : a === 'last changed'
<LockOutlined style={{fontSize: '16px'}}/> : a === 'unlocked' ? ? <SyncOutlined style={{fontSize: '16px'}}/>
<UnlockOutlined style={{fontSize: '16px'}}/> : a === 'registrar expiration' ? : a === 'deletion'
<ClockCircleOutlined ? <DeleteOutlined style={{fontSize: '16px'}}/>
style={{fontSize: '16px'}}/> : a === 'enum validation expiration' ? : a === 'reregistration'
<ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'reinstantiation' ? ? <ReloadOutlined style={{fontSize: '16px'}}/>
<ReloadOutlined style={{fontSize: '16px'}}/> : : a === 'locked'
<PushpinOutlined style={{fontSize: '16px'}}/> ? <LockOutlined style={{fontSize: '16px'}}/>
: a === 'unlocked'
? <UnlockOutlined style={{fontSize: '16px'}}/>
: a === 'registrar expiration'
? <ClockCircleOutlined
style={{fontSize: '16px'}}
/>
: a === 'enum validation expiration'
? <ClockCircleOutlined style={{fontSize: '16px'}}/>
: a === 'reinstantiation'
? <ReloadOutlined style={{fontSize: '16px'}}/>
: <PushpinOutlined style={{fontSize: '16px'}}/>

4
assets/utils/functions/entityToName.tsx
View File

@@ -1,5 +1,5 @@
import {Entity} from "../api"; import {Entity} from '../api'
import vCard from "vcf"; import vCard from 'vcf'
export const entityToName = (e: { entity: Entity }): string => { export const entityToName = (e: { entity: Entity }): string => {
if (e.entity.jCard.length === 0) return e.entity.handle if (e.entity.jCard.length === 0) return e.entity.handle

11
assets/utils/functions/eppStatusCodeToColor.tsx
View File

@@ -1,5 +1,8 @@
export const eppStatusCodeToColor = (s: string) => export const eppStatusCodeToColor = (s: string) =>
['active', 'ok'].includes(s) ? 'green' : ['active', 'ok'].includes(s)
['pending delete', 'redemption period'].includes(s) ? 'red' : ? 'green'
s.startsWith('client') ? 'purple' : : ['pending delete', 'redemption period'].includes(s)
s.startsWith('server') ? 'geekblue' : 'blue' ? 'red'
: s.startsWith('client')
? 'purple'
: s.startsWith('server') ? 'geekblue' : 'blue'

6
assets/utils/functions/extractDetailsFromJCard.tsx
View File

@@ -1,9 +1,9 @@
import vCard from "vcf"; import vCard from 'vcf'
import {Entity} from "../api"; import {Entity} from '../api'
export const extractDetailsFromJCard = (e: { entity: Entity }): { export const extractDetailsFromJCard = (e: { entity: Entity }): {
fn?: string fn?: string
organization?: string; organization?: string
} => { } => {
if (e.entity.jCard.length === 0) return {fn: e.entity.handle} if (e.entity.jCard.length === 0) return {fn: e.entity.handle}
const jCard = vCard.fromJSON(e.entity.jCard) const jCard = vCard.fromJSON(e.entity.jCard)

28
assets/utils/functions/rdapTranslation.ts
View File

@@ -1,4 +1,4 @@
import {t} from "ttag"; import {t} from 'ttag'
/** /**
* @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
@@ -17,7 +17,6 @@ export const rdapRoleTranslation = () => ({
noc: t`Noc` noc: t`Noc`
}) })
/** /**
* @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
*/ */
@@ -35,7 +34,6 @@ export const rdapRoleDetailTranslation = () => ({
noc: t`The entity object instance handles communications related to a network operations center (NOC).` noc: t`The entity object instance handles communications related to a network operations center (NOC).`
}) })
/** /**
* @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
*/ */
@@ -75,20 +73,20 @@ export const rdapEventDetailTranslation = () => ({
* @see https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en * @see https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en
*/ */
export const rdapStatusCodeDetailTranslation = () => ({ export const rdapStatusCodeDetailTranslation = () => ({
'validated': t`Signifies that the data of the object instance has been found to be accurate.`, validated: t`Signifies that the data of the object instance has been found to be accurate.`,
'renew prohibited': t`Renewal or reregistration of the object instance is forbidden.`, 'renew prohibited': t`Renewal or reregistration of the object instance is forbidden.`,
'update prohibited': t`Updates to the object instance are forbidden.`, 'update prohibited': t`Updates to the object instance are forbidden.`,
'transfer prohibited': t`Transfers of the registration from one registrar to another are forbidden.`, 'transfer prohibited': t`Transfers of the registration from one registrar to another are forbidden.`,
'delete prohibited': t`Deletion of the registration of the object instance is forbidden.`, 'delete prohibited': t`Deletion of the registration of the object instance is forbidden.`,
'proxy': t`The registration of the object instance has been performed by a third party.`, proxy: t`The registration of the object instance has been performed by a third party.`,
'private': t`The information of the object instance is not designated for public consumption.`, private: t`The information of the object instance is not designated for public consumption.`,
'removed': t`Some of the information of the object instance has not been made available and has been removed.`, removed: t`Some of the information of the object instance has not been made available and has been removed.`,
'obscured': t`Some of the information of the object instance has been altered for the purposes of not readily revealing the actual information of the object instance.`, obscured: t`Some of the information of the object instance has been altered for the purposes of not readily revealing the actual information of the object instance.`,
'associated': t`The object instance is associated with other object instances in the registry.`, associated: t`The object instance is associated with other object instances in the registry.`,
'locked': t`Changes to the object instance cannot be made, including the association of other object instances.`, locked: t`Changes to the object instance cannot be made, including the association of other object instances.`,
'active': t`This is the standard status for a domain, meaning it has no pending operations or prohibitions.`, active: t`This is the standard status for a domain, meaning it has no pending operations or prohibitions.`,
'inactive': t`This status code indicates that delegation information (name servers) has not been associated with your domain. Your domain is not activated in the DNS and will not resolve.`, inactive: t`This status code indicates that delegation information (name servers) has not been associated with your domain. Your domain is not activated in the DNS and will not resolve.`,
'pending create': t`This status code indicates that a request to create your domain has been received and is being processed.`, 'pending create': t`This status code indicates that a request to create your domain has been received and is being processed.`,
'pending renew': t`This status code indicates that a request to renew your domain has been received and is being processed.`, 'pending renew': t`This status code indicates that a request to renew your domain has been received and is being processed.`,
'pending transfer': t`This status code indicates that a request to transfer your domain to a new registrar has been received and is being processed.`, 'pending transfer': t`This status code indicates that a request to transfer your domain to a new registrar has been received and is being processed.`,
@@ -96,7 +94,7 @@ export const rdapStatusCodeDetailTranslation = () => ({
'pending delete': t`This status code may be mixed with redemptionPeriod or pendingRestore. In such case, depending on the status (i.e. redemptionPeriod or pendingRestore) set in the domain name, the corresponding description presented above applies. If this status is not combined with the redemptionPeriod or pendingRestore status, the pendingDelete status code indicates that your domain has been in redemptionPeriod status for 30 days and you have not restored it within that 30-day period. Your domain will remain in this status for several days, after which time your domain will be purged and dropped from the registry database. Once deletion occurs, the domain is available for re-registration in accordance with the registry's policies.`, 'pending delete': t`This status code may be mixed with redemptionPeriod or pendingRestore. In such case, depending on the status (i.e. redemptionPeriod or pendingRestore) set in the domain name, the corresponding description presented above applies. If this status is not combined with the redemptionPeriod or pendingRestore status, the pendingDelete status code indicates that your domain has been in redemptionPeriod status for 30 days and you have not restored it within that 30-day period. Your domain will remain in this status for several days, after which time your domain will be purged and dropped from the registry database. Once deletion occurs, the domain is available for re-registration in accordance with the registry's policies.`,
'add period': t`This grace period is provided after the initial registration of a domain name. If the registrar deletes the domain name during this period, the registry may provide credit to the registrar for the cost of the registration.`, 'add period': t`This grace period is provided after the initial registration of a domain name. If the registrar deletes the domain name during this period, the registry may provide credit to the registrar for the cost of the registration.`,
'auto renew period': t`This grace period is provided after a domain name registration period expires and is extended (renewed) automatically by the registry. If the registrar deletes the domain name during this period, the registry provides a credit to the registrar for the cost of the renewal.`, 'auto renew period': t`This grace period is provided after a domain name registration period expires and is extended (renewed) automatically by the registry. If the registrar deletes the domain name during this period, the registry provides a credit to the registrar for the cost of the renewal.`,
'ok': t`This is the standard status for a domain, meaning it has no pending operations or prohibitions.`, ok: t`This is the standard status for a domain, meaning it has no pending operations or prohibitions.`,
'client delete prohibited': t`This status code tells your domain's registry to reject requests to delete the domain.`, 'client delete prohibited': t`This status code tells your domain's registry to reject requests to delete the domain.`,
'client hold': t`This status code tells your domain's registry to not activate your domain in the DNS and as a consequence, it will not resolve. It is an uncommon status that is usually enacted during legal disputes, non-payment, or when your domain is subject to deletion.`, 'client hold': t`This status code tells your domain's registry to not activate your domain in the DNS and as a consequence, it will not resolve. It is an uncommon status that is usually enacted during legal disputes, non-payment, or when your domain is subject to deletion.`,
'client renew prohibited': t`This status code tells your domain's registry to reject requests to renew your domain. It is an uncommon status that is usually enacted during legal disputes or when your domain is subject to deletion.`, 'client renew prohibited': t`This status code tells your domain's registry to reject requests to renew your domain. It is an uncommon status that is usually enacted during legal disputes or when your domain is subject to deletion.`,
@@ -112,6 +110,6 @@ export const rdapStatusCodeDetailTranslation = () => ({
'server hold': t`This status code is set by your domain's Registry Operator. Your domain is not activated in the DNS.`, 'server hold': t`This status code is set by your domain's Registry Operator. Your domain is not activated in the DNS.`,
'transfer period': t`This grace period is provided after the successful transfer of a domain name from one registrar to another. If the new registrar deletes the domain name during this period, the registry provides a credit to the registrar for the cost of the transfer.`, 'transfer period': t`This grace period is provided after the successful transfer of a domain name from one registrar to another. If the new registrar deletes the domain name during this period, the registry provides a credit to the registrar for the cost of the transfer.`,
'administrative': t`The object instance has been allocated administratively (i.e., not for use by the recipient in their own right in operational networks).`, administrative: t`The object instance has been allocated administratively (i.e., not for use by the recipient in their own right in operational networks).`,
'reserved': t`The object instance has been allocated to an IANA special-purpose address registry.`, reserved: t`The object instance has been allocated to an IANA special-purpose address registry.`
}) })

34
assets/utils/functions/roleToAvatar.tsx
View File

@@ -1,4 +1,4 @@
import {Avatar} from "antd"; import {Avatar} from 'antd'
import { import {
BankOutlined, BankOutlined,
DollarOutlined, DollarOutlined,
@@ -6,20 +6,22 @@ import {
SignatureOutlined, SignatureOutlined,
ToolOutlined, ToolOutlined,
UserOutlined UserOutlined
} from "@ant-design/icons"; } from '@ant-design/icons'
import React from "react"; import React from 'react'
import {rolesToColor} from "./rolesToColor"; import {rolesToColor} from './rolesToColor'
export const roleToAvatar = (e: { roles: string[] }) => <Avatar style={{backgroundColor: rolesToColor(e.roles)}} export const roleToAvatar = (e: { roles: string[] }) => <Avatar
icon={e.roles.includes('registrant') ? style={{backgroundColor: rolesToColor(e.roles)}}
<SignatureOutlined/> : icon={e.roles.includes('registrant')
e.roles.includes('registrar') ? ? <SignatureOutlined/>
<BankOutlined/> : : e.roles.includes('registrar')
e.roles.includes('administrative') ? ? <BankOutlined/>
<IdcardOutlined/> : : e.roles.includes('administrative')
e.roles.includes('technical') ? ? <IdcardOutlined/>
<ToolOutlined/> : : e.roles.includes('technical')
e.roles.includes('billing') ? ? <ToolOutlined/>
<DollarOutlined/> : : e.roles.includes('billing')
<UserOutlined/>}/> ? <DollarOutlined/>
: <UserOutlined/>}
/>

17
assets/utils/functions/rolesToColor.tsx
View File

@@ -1,6 +1,11 @@
export const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' : export const rolesToColor = (roles: string[]) => roles.includes('registrant')
roles.includes('registrar') ? 'purple' : ? 'green'
roles.includes('administrative') ? 'blue' : : roles.includes('registrar')
roles.includes('technical') ? 'orange' : ? 'purple'
roles.includes('sponsor') ? 'magenta' : : roles.includes('administrative')
roles.includes('billing') ? 'cyan' : 'default' ? 'blue'
: roles.includes('technical')
? 'orange'
: roles.includes('sponsor')
? 'magenta'
: roles.includes('billing') ? 'cyan' : 'default'

7
assets/utils/functions/showErrorAPI.tsx
View File

@@ -1,9 +1,8 @@
import {AxiosError, AxiosResponse} from "axios"; import {AxiosError, AxiosResponse} from 'axios'
import {MessageInstance, MessageType} from "antd/lib/message/interface"; import {MessageInstance, MessageType} from 'antd/lib/message/interface'
import {t} from "ttag"; import {t} from 'ttag'
export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined { export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined {
const response = e.response as AxiosResponse const response = e.response as AxiosResponse
const data = response.data const data = response.data

13
assets/utils/functions/sortDomainEntities.tsx
View File

@@ -1,11 +1,14 @@
import {Domain} from "../api"; import {Domain} from '../api'
export const sortDomainEntities = (domain: Domain) => domain.entities export const sortDomainEntities = (domain: Domain) => domain.entities
.filter(e => !e.deleted) .filter(e => !e.deleted)
.sort((e1, e2) => { .sort((e1, e2) => {
const p = (r: string[]) => r.includes('registrant') ? 5 : const p = (r: string[]) => r.includes('registrant')
r.includes('administrative') ? 4 : ? 5
r.includes('billing') ? 3 : : r.includes('administrative')
r.includes('registrar') ? 2 : 1 ? 4
: r.includes('billing')
? 3
: r.includes('registrar') ? 2 : 1
return p(e2.roles) - p(e1.roles) return p(e2.roles) - p(e1.roles)
}) })

2
assets/utils/functions/tldToEmoji.tsx
View File

@@ -1,4 +1,4 @@
import {getCountryCode} from "./getCountryCode"; import {getCountryCode} from './getCountryCode'
export const tldToEmoji = (tld: string) => { export const tldToEmoji = (tld: string) => {
if (tld.startsWith('xn--')) return '-' if (tld.startsWith('xn--')) return '-'

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

@@ -1,31 +1,40 @@
import {ConnectorProvider} from "../api/connectors"; import {ConnectorProvider} from '../api/connectors'
import {Typography} from "antd"; import {Typography} from 'antd'
import {t} from "ttag"; import {t} from 'ttag'
import React from "react"; import React from 'react'
export const helpGetTokenLink = (provider?: string) => { export const helpGetTokenLink = (provider?: string) => {
switch (provider) { switch (provider) {
case ConnectorProvider.OVH: case ConnectorProvider.OVH:
return <Typography.Link target='_blank' return (
href="https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions"> <Typography.Link
target='_blank'
href='https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions'
>
{t`Retrieve a set of tokens from your customer account on the Provider's website`} {t`Retrieve a set of tokens from your customer account on the Provider's website`}
</Typography.Link> </Typography.Link>
)
case ConnectorProvider.GANDI: case ConnectorProvider.GANDI:
return <Typography.Link target='_blank' href="https://admin.gandi.net/organizations/account/pat"> return (
<Typography.Link target='_blank' href='https://admin.gandi.net/organizations/account/pat'>
{t`Retrieve a Personal Access Token from your customer account on the Provider's website`} {t`Retrieve a Personal Access Token from your customer account on the Provider's website`}
</Typography.Link> </Typography.Link>
)
case ConnectorProvider.NAMECHEAP: case ConnectorProvider.NAMECHEAP:
return <Typography.Link target='_blank' href="https://ap.www.namecheap.com/settings/tools/apiaccess/"> return (
<Typography.Link target='_blank' href='https://ap.www.namecheap.com/settings/tools/apiaccess/'>
{t`Retreive an API key and whitelist this instance's IP address on Namecheap's website`} {t`Retreive an API key and whitelist this instance's IP address on Namecheap's website`}
</Typography.Link> </Typography.Link>
)
case ConnectorProvider.AUTODNS: case ConnectorProvider.AUTODNS:
return <Typography.Link target='_blank' href="https://en.autodns.com/domain-robot-api/"> return (
<Typography.Link target='_blank' href='https://en.autodns.com/domain-robot-api/'>
{t`Because of some limitations in API of AutoDNS, we suggest to create an dedicated user for API with limited rights`} {t`Because of some limitations in API of AutoDNS, we suggest to create an dedicated user for API with limited rights`}
</Typography.Link> </Typography.Link>
)
default: default:
return <></> return <></>
} }
} }

4
assets/utils/providers/ovh.tsx
View File

@@ -1,5 +1,5 @@
import {t} from "ttag"; import {t} from 'ttag'
import {regionNames} from "../../i18n"; import {regionNames} from '../../i18n'
export const ovhFields = () => ({ export const ovhFields = () => ({
appKey: t`Application key`, appKey: t`Application key`,

29
eslint.config.mjs Normal file
View File

@@ -0,0 +1,29 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
/** @type {import('eslint').Linter.Config[]} */
export default [
{
files: ["**/*.{ts,tsx}"],
languageOptions: {globals: globals.browser},
rules: {
semi: ["error", "never"]
},
},
{
ignores: ["public", "vendor", "webpack.config.js"]
},
{
settings: {
react: {
version: "detect"
}
}
},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
];

5
package.json
View File

@@ -18,6 +18,7 @@
"@babel/core": "^7.17.0", "@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.0", "@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.24.7", "@babel/preset-react": "^7.24.7",
"@eslint/js": "^9.17.0",
"@fontsource/noto-color-emoji": "^5.0.27", "@fontsource/noto-color-emoji": "^5.0.27",
"@hotwired/stimulus": "^3.0.0", "@hotwired/stimulus": "^3.0.0",
"@hotwired/turbo": "^7.1.1 || ^8.0", "@hotwired/turbo": "^7.1.1 || ^8.0",
@@ -37,6 +38,9 @@
"axios": "^1.7.2", "axios": "^1.7.2",
"core-js": "^3.23.0", "core-js": "^3.23.0",
"dagre": "^0.8.5", "dagre": "^0.8.5",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.3",
"globals": "^15.14.0",
"html-loader": "^5.1.0", "html-loader": "^5.1.0",
"html-to-image": "^1.11.11", "html-to-image": "^1.11.11",
"jsonld": "^8.3.2", "jsonld": "^8.3.2",
@@ -51,6 +55,7 @@
"ttag": "^1.8.7", "ttag": "^1.8.7",
"ttag-cli": "^1.10.12", "ttag-cli": "^1.10.12",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.19.0",
"vcf": "^2.1.2", "vcf": "^2.1.2",
"webpack": "^5.74.0", "webpack": "^5.74.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",

1480
yarn.lock
View File

File diff suppressed because it is too large Load Diff