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

feat: update front layout

Browse Source
This commit is contained in:
Maël Gangloff
2024-07-25 02:09:49 +02:00
parent 465aeb1ec9
commit 08da62c1b5
18 changed files with 405 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/pages/DomainFinderPage.tsx
View File

@@ -1,12 +1,25 @@
import React from 'react';
import React, {ChangeEvent, useState} from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Grid, InputAdornment, Paper} from "@mui/material";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import {Explore} from "@mui/icons-material";
import Footer from "../components/Footer";
export default function DashboardPage() {
export default function DomainFinderPage() {
const [ldhName, setLdhName] = useState("")
const [error, setError] = useState(false)
const onChangeDomain = (e: ChangeEvent<HTMLInputElement>) => {
setLdhName(e.currentTarget.value);
const regex = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/
setError(!regex.test(e.currentTarget.value))
}
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
@@ -17,10 +30,31 @@ export default function DashboardPage() {
height: 240,
}}
>
<TextField
sx={{mt: 5}} label="Domain name" variant="standard" value={ldhName}
onChange={onChangeDomain}
helperText={error && "This domain name does not appear to be valid"}
error={error}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Explore/>
</InputAdornment>
),
}}
/>
<Typography variant="subtitle2" sx={{mt: 3}}>
This tool allows you to search for a domain name in the database.
As a reminder, if a domain name is unknown to Domain Watchdog or if the data is
more
than a week old, an RDAP search will be performed. The RDAP search is an operation worth
a token.
</Typography>
</Paper>
</Grid>
</Grid>
<Footer/>
</Container>
</>
);

17
assets/pages/EntityFinderPage.tsx
View File

@@ -1,26 +1,19 @@
import React from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Grid} from "@mui/material";
import Footer from "../components/Footer";
export default function DomainFinderPage() {
export default function EntityFinderPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
</Grid>
<Footer/>
</Container>
</>
);

4
assets/pages/LoginPage.tsx
View File

@@ -11,6 +11,7 @@ import {login} from "../utils/api";
import {useNavigate} from "react-router-dom";
import {Alert} from "@mui/material";
import Container from "@mui/material/Container";
import Footer from "../components/Footer";
interface Props {
setIsAuthenticated: (val: boolean) => void
@@ -30,7 +31,7 @@ export default function LoginPage({setIsAuthenticated}: Props) {
navigate('/');
} catch (e: any) {
setCredentials({email: "", password: ""})
setCredentials({...credentials, password: ""})
setError(e.response.data.message)
}
};
@@ -102,6 +103,7 @@ export default function LoginPage({setIsAuthenticated}: Props) {
Single Sign-On
</Button>
</Link>
<Footer/>
</Container>
</>
);

17
assets/pages/NameserverFinderPage.tsx
View File

@@ -1,26 +1,19 @@
import React from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Grid} from "@mui/material";
import Footer from "../components/Footer";
export default function NameserverPage() {
export default function NameserverFinderPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
</Grid>
<Footer/>
</Container>
</>
);

27
assets/pages/NameserverPage.tsx
View File

@@ -1,27 +0,0 @@
import React from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
export default function DomainFinderPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
</Grid>
</Container>
</>
);
};

17
assets/pages/ReverseDirectoryPage.tsx
View File

@@ -1,26 +1,19 @@
import React from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Grid} from "@mui/material";
import Footer from "../components/Footer";
export default function DomainFinderPage() {
export default function ReverseDirectoryPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
</Grid>
<Footer/>
</Container>
</>
);

2
assets/pages/TextPage.tsx
View File

@@ -1,6 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Container from "@mui/material/Container";
import Footer from "../components/Footer";
interface Props {
content: string
@@ -30,6 +31,7 @@ export default function Index({content}: Props) {
>
<div dangerouslySetInnerHTML={{__html: content}}></div>
</Box>
<Footer/>
</Container>
)

123
assets/pages/TldPage.tsx
View File

@@ -1,27 +1,110 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Accordion, AccordionDetails, AccordionSummary, Grid, Typography} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import HeadTable from "../components/HeadTable";
import {getTldList} from "../utils/api";
import Footer from "../components/Footer";
const gTldColumns = [
{id: 'tld', label: 'TLD'},
{id: 'registryOperator', label: 'Operator'}
]
const sTldColumns = [
{id: 'tld', label: 'TLD'}
]
const toEmoji = (tld: string) => String.fromCodePoint(
...getCountryCode(tld)
.toUpperCase()
.split('')
.map((char) => 127397 + char.charCodeAt(0)
)
)
const getCountryCode = (tld: string): string => {
const exceptions = {uk: 'gb', su: 'ru', tp: 'tl'}
if (tld in exceptions) return exceptions[tld as keyof typeof exceptions]
return tld
}
const regionNames = new Intl.DisplayNames(['en'], {type: 'region'})
const ccTldColumns = [
{id: 'tld', label: 'TLD'},
{
id: 'tld',
label: 'Flag',
format: (tld: string) => toEmoji(tld)
},
{id: 'tld', label: 'Country name', format: (tld: string) => regionNames.of(getCountryCode(tld)) ?? '-'},
]
export default function TldPage() {
const [sTld, setSTld] = useState<any>([])
const [gTld, setGTld] = useState<any>([])
const [ccTld, setCcTld] = useState<any>([])
const [brandGTld, setBrandGTld] = useState<any>([])
useEffect(() => {
getTldList({type: 'sTLD'}).then(setSTld)
getTldList({type: 'gTLD', contractTerminated: 0, specification13: 0}).then(setGTld)
getTldList({type: 'gTLD', contractTerminated: 0, specification13: 1}).then(setBrandGTld)
getTldList({type: 'ccTLD'}).then(setCcTld)
}, [])
export default function DomainFinderPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Accordion>
<AccordionSummary expandIcon={<ExpandMore/>}>
<Typography sx={{width: '33%', flexShrink: 0}}>
sTLD
</Typography>
<Typography sx={{color: 'text.secondary'}}>Sponsored Top-Level Domains</Typography>
</AccordionSummary>
<AccordionDetails>
<HeadTable rows={sTld} columns={sTldColumns}/>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary expandIcon={<ExpandMore/>}>
<Typography sx={{width: '33%', flexShrink: 0}}>
gTLD
</Typography>
<Typography sx={{color: 'text.secondary'}}>Generic Top-Level Domains</Typography>
</AccordionSummary>
<AccordionDetails>
<HeadTable rows={gTld} columns={gTldColumns}/>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary expandIcon={<ExpandMore/>}>
<Typography sx={{width: '33%', flexShrink: 0}}>
Brand gTLD
</Typography>
<Typography sx={{color: 'text.secondary'}}>Brand Generic Top-Level Domains</Typography>
</AccordionSummary>
<AccordionDetails>
<HeadTable rows={brandGTld} columns={gTldColumns}/>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary expandIcon={<ExpandMore/>}>
<Typography sx={{width: '33%', flexShrink: 0}}>
ccTLD
</Typography>
<Typography sx={{color: 'text.secondary'}}>Country-Code Top-Level Domains</Typography>
</AccordionSummary>
<AccordionDetails>
<HeadTable rows={ccTld} columns={ccTldColumns}/>
</AccordionDetails>
</Accordion>
</Grid>
</Container>
</>
</Grid>
<Footer/>
</Container>
);
};

54
assets/pages/WatchlistsPage.tsx
View File

@@ -1,27 +1,41 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import Container from "@mui/material/Container";
import {Grid, Paper} from "@mui/material";
import {Grid, List, ListItem, ListItemText} from "@mui/material";
import Footer from "../components/Footer";
import {deleteWatchlist, getWatchlists, Watchlist} from "../utils/api";
import IconButton from "@mui/material/IconButton";
import {DeleteForever} from '@mui/icons-material'
export default function WatchlistsPage() {
const [watchlists, setWatchlists] = useState<(Partial<Watchlist> & { token: string })[]>([])
const [refreshKey, setRefreshKey] = useState(0)
useEffect(() => {
getWatchlists().then(setWatchlists)
}, [refreshKey])
export default function DomainFinderPage() {
return (
<>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 240,
}}
>
</Paper>
</Grid>
<Container maxWidth="lg" sx={{mt: 20, mb: 4}}>
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<List sx={{width: '100%', bgcolor: 'background.paper'}}>
{watchlists.map((w) => (
<ListItem
key={w.token}
secondaryAction={
<IconButton aria-label="delete"
onClick={(e) => deleteWatchlist(w.token).then(() => setRefreshKey(refreshKey + 1))}>
<DeleteForever/>
</IconButton>
}
>
<ListItemText primary={`Token ${w.token}`}/>
</ListItem>
))}
</List>
</Grid>
</Container>
</>
</Grid>
<Footer/>
</Container>
);
};