feat: update front layout

assets/components/DrawerBox.tsx

@@ -4,6 +4,7 @@ import {Bookmark, ChevronLeft, Dns, Explore, LocalPolice, MenuBook, People} from
 import {Divider, List, ListItemButton, ListItemIcon, ListItemText, ListSubheader, styled} from "@mui/material";
 import React from "react";
 import MuiDrawer from "@mui/material/Drawer";
+import {useNavigate} from "react-router-dom";
 
 
 const Drawer = styled(MuiDrawer, {shouldForwardProp: (prop) => prop !== 'open'})(
@@ -37,6 +38,8 @@ export default function DrawerBox() {
     const toggleDrawer = () => {
         setOpen(!open);
     };
+    const navigate = useNavigate()
+
     return <Drawer variant="permanent" open={open}>
         <Toolbar
             sx={{
@@ -56,19 +59,19 @@ export default function DrawerBox() {
             <ListSubheader component="div" inset>
                 Domain names
             </ListSubheader>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/finder/domain')}>
                 <ListItemIcon>
                     <Explore/>
                 </ListItemIcon>
                 <ListItemText primary="Domain finder"/>
             </ListItemButton>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/tld')}>
                 <ListItemIcon>
                     <LocalPolice/>
                 </ListItemIcon>
                 <ListItemText primary="Top Level Domain"/>
             </ListItemButton>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/finder/nameserver')}>
                 <ListItemIcon>
                     <Dns/>
                 </ListItemIcon>
@@ -79,13 +82,13 @@ export default function DrawerBox() {
             <ListSubheader component="div" inset>
                 Entities
             </ListSubheader>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/finder/entity')}>
                 <ListItemIcon>
                     <People/>
                 </ListItemIcon>
                 <ListItemText primary="Entity finder"/>
             </ListItemButton>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/reverse')}>
                 <ListItemIcon>
                     <MenuBook/>
                 </ListItemIcon>
@@ -96,7 +99,7 @@ export default function DrawerBox() {
             <ListSubheader component="div" inset>
                 Tracking
             </ListSubheader>
-            <ListItemButton>
+            <ListItemButton onClick={() => navigate('/watchlist')}>
                 <ListItemIcon>
                     <Bookmark/>
                 </ListItemIcon>

assets/components/HeadTable.tsx

@@ -6,18 +6,10 @@ interface Column {
     label: string;
     minWidth?: number;
     align?: 'right';
-    format?: (value: number) => string;
+    format?: (value: any) => any;
 }
 
-interface Data {
+export default function HeadTable({columns, rows}: { rows: any[], columns: Column[] }) {
-    name: string;
-    code: string;
-    population: number;
-    size: number;
-    density: number;
-}
-
-export default function StickyHeadTable({columns, rows}: { rows: Data[], columns: Column[] }) {
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
 
@@ -32,8 +24,8 @@ export default function StickyHeadTable({columns, rows}: { rows: Data[], columns
 
     return (
         <Paper sx={{width: '100%', overflow: 'hidden'}}>
-            <TableContainer sx={{maxHeight: 440}}>
+            <TableContainer>
-                <Table stickyHeader aria-label="sticky table">
+                <Table size="small">
                     <TableHead>
                         <TableRow>
                             {columns.map((column) => (
@@ -50,16 +42,15 @@ export default function StickyHeadTable({columns, rows}: { rows: Data[], columns
                     <TableBody>
                         {rows
                             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                            .map((row: Data) => {
+                            .map((row: any) => {
                                 return (
-                                    <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                                    <TableRow hover sx={{'&:last-child td, &:last-child th': {border: 0}}}
+                                              role="checkbox" tabIndex={-1} key={row.code}>
                                         {columns.map((column) => {
                                             const value = row[column.id as keyof typeof row]
                                             return (
                                                 <TableCell key={column.id} align={column.align}>
-                                                    {column.format && typeof value === 'number'
+                                                    {column.format ? column.format(value) : value}
-                                                        ? column.format(value)
-                                                        : value}
                                                 </TableCell>
                                             );
                                         })}

assets/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import ReactDOM from "react-dom/client";
 import TextPage from "./pages/TextPage";
-import {HashRouter, Route, Routes} from "react-router-dom";
+import {HashRouter, Navigate, Route, Routes} from "react-router-dom";
 
 import tosContent from "./content/tos.md"
 import privacyContent from "./content/privacy.md"
@@ -9,11 +9,15 @@ import LoginPage from "./pages/LoginPage";
 import {createTheme, PaletteMode, ThemeProvider} from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import AppAppBar from "./components/AppAppBar";
-import DashboardPage from "./pages/DashboardPage";
+import {getUser} from "./utils/api/user";
-import {getUser} from "./utils/api";
-import Footer from "./components/Footer";
 import DrawerBox from "./components/DrawerBox";
 import Box from "@mui/material/Box";
+import DomainFinderPage from "./pages/DomainFinderPage";
+import EntityFinderPage from "./pages/EntityFinderPage";
+import NameserverFinderPage from "./pages/NameserverFinderPage";
+import ReverseDirectoryPage from "./pages/ReverseDirectoryPage";
+import TldPage from "./pages/TldPage";
+import WatchlistsPage from "./pages/WatchlistsPage";
 
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
@@ -41,7 +45,15 @@ function App() {
                     <AppAppBar mode={mode} toggleColorMode={toggleColorMode} isAuthenticated={isAuthenticated}/>
                     <Routes>
                         {isAuthenticated ?
-                            <Route path="/" element={<DashboardPage/>}/>
+                            <>
+                                <Route path="/" element={<Navigate to="/finder/domain"/>}/>
+                                <Route path="/finder/domain" element={<DomainFinderPage/>}/>
+                                <Route path="/finder/entity" element={<EntityFinderPage/>}/>
+                                <Route path="/finder/nameserver" element={<NameserverFinderPage/>}/>
+                                <Route path="/reverse" element={<ReverseDirectoryPage/>}/>
+                                <Route path="/tld" element={<TldPage/>}/>
+                                <Route path="/watchlist" element={<WatchlistsPage/>}/>
+                            </>
                             :
                             <Route path="*" element={<LoginPage setIsAuthenticated={setIsAuthenticated}/>}/>
                         }
@@ -50,7 +62,6 @@ function App() {
 
                     </Routes>
                 </Box>
-                <Footer/>
             </HashRouter>
         </ThemeProvider>
     </React.StrictMode>

assets/pages/DomainFinderPage.tsx

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

assets/pages/EntityFinderPage.tsx

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

assets/pages/LoginPage.tsx

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

assets/pages/NameserverFinderPage.tsx

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

assets/pages/NameserverPage.tsx

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

assets/pages/ReverseDirectoryPage.tsx

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

assets/pages/TextPage.tsx

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

assets/pages/TldPage.tsx

@@ -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: 20, mb: 4}}>
-            <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
+            <Grid container spacing={3}>
-                <Grid container spacing={3}>
+                <Grid item xs={12} md={8} lg={9}>
-                    <Grid item xs={12} md={8} lg={9}>
+                    <Accordion>
-                        <Paper
+                        <AccordionSummary expandIcon={<ExpandMore/>}>
-                            sx={{
+                            <Typography sx={{width: '33%', flexShrink: 0}}>
-                                p: 2,
+                                sTLD
-                                display: 'flex',
+                            </Typography>
-                                flexDirection: 'column',
+                            <Typography sx={{color: 'text.secondary'}}>Sponsored Top-Level Domains</Typography>
-                                height: 240,
+                        </AccordionSummary>
-                            }}
+                        <AccordionDetails>
-                        >
+                            <HeadTable rows={sTld} columns={sTldColumns}/>
-
+                        </AccordionDetails>
-                        </Paper>
+                    </Accordion>
-                    </Grid>
+                    <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>
     );
 };

assets/pages/WatchlistsPage.tsx

@@ -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: 20, mb: 4}}>
-            <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
+            <Grid container spacing={3}>
-                <Grid container spacing={3}>
+                <Grid item xs={12} md={8} lg={9}>
-                    <Grid item xs={12} md={8} lg={9}>
+                    <List sx={{width: '100%', bgcolor: 'background.paper'}}>
-                        <Paper
+                        {watchlists.map((w) => (
-                            sx={{
+                            <ListItem
-                                p: 2,
+                                key={w.token}
-                                display: 'flex',
+                                secondaryAction={
-                                flexDirection: 'column',
+                                    <IconButton aria-label="delete"
-                                height: 240,
+                                                onClick={(e) => deleteWatchlist(w.token).then(() => setRefreshKey(refreshKey + 1))}>
-                            }}
+                                        <DeleteForever/>
-                        >
+                                    </IconButton>
-
+                                }
-                        </Paper>
+                            >
-                    </Grid>
+                                <ListItemText primary={`Token ${w.token}`}/>
+                            </ListItem>
+                        ))}
+                    </List>
                 </Grid>
-            </Container>
+            </Grid>
-        </>
+            <Footer/>
+        </Container>
     );
 };

assets/utils/api.ts

@@ -1,31 +0,0 @@
-import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
-
-
-export async function login(email: string, password: string): Promise<boolean> {
-    const response = await request({
-        method: 'POST',
-        url: 'login',
-        data: {email, password}
-    })
-    return response.status === 200
-}
-
-export async function getUser(): Promise<object> {
-    const response = await request({
-        url: 'me'
-    })
-    return response.data
-}
-
-
-async function request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig): Promise<R> {
-    const axiosConfig: AxiosRequestConfig = {
-        ...config,
-        baseURL: '/api',
-        withCredentials: true,
-        headers: {
-            Accept: 'application/ld+json'
-        }
-    }
-    return await axios.request<T, any, D>(axiosConfig)
-}

assets/utils/api/domain.ts

@@ -0,0 +1,9 @@
+import {Domain, request} from ".";
+
+
+export async function getDomain(ldhName: string): Promise<Domain> {
+    const response = await request<Domain>({
+        url: 'domains/' + ldhName
+    })
+    return response.data
+}

assets/utils/api/index.ts

@@ -0,0 +1,69 @@
+import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
+
+
+export interface Event {
+    action: string
+    date: string
+}
+
+export interface Entity {
+    handle: string
+    events: Event[]
+    roles: string[]
+}
+
+export interface Nameserver {
+    ldhName: string
+    entities: Entity[]
+}
+
+export interface Tld {
+    tld: string
+    contractTerminated: boolean
+    dateOfContractSignature: string
+    registryOperator: string
+    delegationDate: string
+    removalDate: string
+    specification13: boolean
+    type: string
+}
+
+export interface Domain {
+    ldhName: string
+    handle: string
+    status: string[]
+    events: Event[]
+    entities: Entity[]
+    nameservers: Nameserver[]
+    tld: Tld
+}
+
+export interface User {
+    email: string
+    roles: string[]
+}
+
+export interface Watchlist {
+    domains: string[]
+    triggers: Event[]
+}
+
+export async function request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig): Promise<R> {
+    const axiosConfig: AxiosRequestConfig = {
+        ...config,
+        baseURL: '/api',
+        withCredentials: true,
+        headers: {
+            ...config.headers,
+            Accept: 'application/json'
+        }
+    }
+    return await axios.request<T, R, D>(axiosConfig)
+}
+
+export * from './domain'
+export * from './tld'
+export * from './user'
+export * from './watchlist'
+
+

assets/utils/api/tld.ts

@@ -0,0 +1,28 @@
+import {request} from "./index";
+
+interface Tld {
+    tld: string
+    contractTerminated: boolean
+    registryOperator: string
+    specification13: boolean
+}
+
+export async function getTldList(params: object): Promise<Tld[]> {
+    let page = 1
+    let response = (await request<Tld[]>({
+        url: 'tld',
+        params: {...params, page},
+    })).data
+    const tldList: Tld[] = response;
+
+    while (response.length !== 0) {
+        page++
+        response = (await request<Tld[]>({
+            url: 'tld',
+            params: {...params, page},
+        })).data
+
+        tldList.push(...response)
+    }
+    return tldList
+}

assets/utils/api/user.ts

@@ -0,0 +1,18 @@
+import {request, User} from "./index";
+
+
+export async function login(email: string, password: string): Promise<boolean> {
+    const response = await request({
+        method: 'POST',
+        url: 'login',
+        data: {email, password}
+    })
+    return response.status === 200
+}
+
+export async function getUser(): Promise<User> {
+    const response = await request<User>({
+        url: 'me'
+    })
+    return response.data
+}

assets/utils/api/watchlist.ts

@@ -0,0 +1,52 @@
+import {Event, request, Watchlist} from "./index";
+
+export async function getWatchlists() {
+    const response = await request<{ token: string }[]>({
+        url: 'watchlists'
+    })
+    return response.data
+}
+
+export async function getWatchlist(token: string) {
+    const response = await request<Watchlist>({
+        url: 'watchlists/' + token
+    })
+    return response.data
+}
+
+export async function postWatchlist(domains: string[], triggers: Event[]) {
+    const response = await request<{ token: string }>({
+        method: 'POST',
+        url: 'watchlists',
+        data: {
+            domains,
+            triggers
+        },
+        headers: {
+            "Content-Type": 'application/json'
+        }
+    })
+    return response.data
+}
+
+export async function deleteWatchlist(token: string): Promise<void> {
+    await request({
+        method: 'DELETE',
+        url: 'watchlists/' + token
+    })
+}
+
+export async function patchWatchlist(domains: string[], triggers: Event[]) {
+    const response = await request<Watchlist>({
+        method: 'PATCH',
+        url: 'watchlists',
+        data: {
+            domains,
+            triggers
+        },
+        headers: {
+            "Content-Type": 'application/merge-patch+json'
+        }
+    })
+    return response.data
+}