feat: update front layout

This commit is contained in:
Maël Gangloff 2024-07-27 12:59:40 +02:00
parent 8f04e0ed7e
commit ea97e93f94
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
3 changed files with 36 additions and 26 deletions

View File

@ -32,8 +32,7 @@ on [How to deploy a Symfony application](https://symfony.com/doc/current/deploym
### Prerequisites ### Prerequisites
- PHP 8.2 or higher - PHP 8.2 or higher
- Symfony 5.9 or higher - PostgreSQL
- A SQL-compatible database (e.g., MariaDB, MySQL, PostgreSQL)
### Steps ### Steps

View File

@ -1,11 +1,12 @@
import {Badge, Layout, Menu, theme} from "antd"; import {Badge, Layout, Menu, theme} from "antd";
import { import {
CompassOutlined,
ApiOutlined, ApiOutlined,
BankOutlined, BankOutlined,
CloudServerOutlined, CloudServerOutlined,
CompassOutlined,
FileProtectOutlined, FileProtectOutlined,
FileSearchOutlined, FileSearchOutlined,
HomeOutlined,
InfoCircleOutlined, InfoCircleOutlined,
LineChartOutlined, LineChartOutlined,
LoginOutlined, LoginOutlined,
@ -17,8 +18,6 @@ import {
} from "@ant-design/icons"; } from "@ant-design/icons";
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 tos from "./content/tos.md";
import privacy from "./content/privacy.md";
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";
@ -33,6 +32,11 @@ import LoginPage, {AuthenticatedContext} from "./pages/LoginPage";
import ConnectorsPage from "./pages/tracking/ConnectorsPage"; import ConnectorsPage from "./pages/tracking/ConnectorsPage";
import NotFoundPage from "./pages/NotFoundPage"; import NotFoundPage from "./pages/NotFoundPage";
import tos from "./content/tos.md";
import privacy from "./content/privacy.md";
import home from './content/home.md'
import {ItemType, MenuItemType} from "antd/lib/menu/interface";
export default function App() { export default function App() {
const { const {
token: {colorBgContainer, borderRadiusLG}, token: {colorBgContainer, borderRadiusLG},
@ -60,19 +64,25 @@ export default function App() {
if (location.pathname === '/login') navigate('/search/domain') if (location.pathname === '/login') navigate('/search/domain')
}).catch(() => { }).catch(() => {
setIsAuthenticated(false) setIsAuthenticated(false)
if (location.pathname !== '/login') navigate('/login') navigate('/home')
}) })
}, []); }, []);
const menuItems = [ const menuItems: ItemType<MenuItemType>[] = [
{ {
key: '1', key: 'home',
label: 'Home',
icon: <HomeOutlined/>,
onClick: () => navigate('/home')
},
{
key: 'search',
label: 'Search', label: 'Search',
icon: <SearchOutlined/>, icon: <SearchOutlined/>,
children: [ children: [
{ {
key: '1-1', key: 'domain-finder',
icon: <CompassOutlined/>, icon: <CompassOutlined/>,
label: 'Domain', label: 'Domain',
title: 'Domain Finder', title: 'Domain Finder',
@ -80,7 +90,7 @@ export default function App() {
onClick: () => navigate('/search/domain') onClick: () => navigate('/search/domain')
}, },
{ {
key: '1-2', key: 'entity-finder',
icon: <TeamOutlined/>, icon: <TeamOutlined/>,
label: 'Entity', label: 'Entity',
title: 'Entity Finder', title: 'Entity Finder',
@ -88,7 +98,7 @@ export default function App() {
onClick: () => navigate('/search/entity') onClick: () => navigate('/search/entity')
}, },
{ {
key: '1-3', key: 'ns-finder',
icon: <CloudServerOutlined/>, icon: <CloudServerOutlined/>,
label: 'Nameserver', label: 'Nameserver',
title: 'Nameserver Finder', title: 'Nameserver Finder',
@ -98,12 +108,12 @@ export default function App() {
] ]
}, },
{ {
key: '2', key: 'info',
label: 'Information', label: 'Information',
icon: <InfoCircleOutlined/>, icon: <InfoCircleOutlined/>,
children: [ children: [
{ {
key: '2-1', key: 'tld-list',
icon: <BankOutlined/>, icon: <BankOutlined/>,
label: 'TLD', label: 'TLD',
title: 'TLD list', title: 'TLD list',
@ -111,7 +121,7 @@ export default function App() {
onClick: () => navigate('/info/tld') onClick: () => navigate('/info/tld')
}, },
{ {
key: '2-2', key: 'stats',
icon: <LineChartOutlined/>, icon: <LineChartOutlined/>,
label: 'Statistics', label: 'Statistics',
disabled: !isAuthenticated, disabled: !isAuthenticated,
@ -120,19 +130,19 @@ export default function App() {
] ]
}, },
{ {
key: '3', key: 'tracking',
label: 'Tracking', label: 'Tracking',
icon: <FileSearchOutlined/>, icon: <FileSearchOutlined/>,
children: [ children: [
{ {
key: '3-1', key: 'watchlist',
icon: <Badge count={0} size="small"><FileSearchOutlined/></Badge>, icon: <Badge count={0} size="small"><FileSearchOutlined/></Badge>,
label: 'My Watchlists', label: 'My Watchlists',
disabled: !isAuthenticated, disabled: !isAuthenticated,
onClick: () => navigate('/tracking/watchlist') onClick: () => navigate('/tracking/watchlist')
}, },
{ {
key: '3-2', key: 'connectors',
icon: <ApiOutlined/>, icon: <ApiOutlined/>,
label: 'My connectors', label: 'My connectors',
disabled: !isAuthenticated, disabled: !isAuthenticated,
@ -141,25 +151,25 @@ export default function App() {
] ]
}, },
{ {
key: '4', key: 'watchdog',
label: 'My Watchdog', label: 'My Watchdog',
icon: <UserOutlined/>, icon: <UserOutlined/>,
children: [ children: [
{ {
key: '4-1', key: 'account',
icon: <UserOutlined/>, icon: <UserOutlined/>,
label: 'My Account', label: 'My Account',
disabled: !isAuthenticated, disabled: !isAuthenticated,
onClick: () => navigate('/user') onClick: () => navigate('/user')
}, },
{ {
key: '4-2', key: 'tos',
icon: <InfoCircleOutlined/>, icon: <InfoCircleOutlined/>,
label: 'TOS', label: 'TOS',
onClick: () => navigate('/tos') onClick: () => navigate('/tos')
}, },
{ {
key: '4-3', key: 'privacy',
icon: <FileProtectOutlined/>, icon: <FileProtectOutlined/>,
label: 'Privacy Policy', label: 'Privacy Policy',
onClick: () => navigate('/privacy') onClick: () => navigate('/privacy')
@ -180,8 +190,8 @@ export default function App() {
<Layout hasSider style={{minHeight: '100vh'}}> <Layout hasSider style={{minHeight: '100vh'}}>
<Layout.Sider collapsible> <Layout.Sider collapsible>
<Menu <Menu
defaultSelectedKeys={['1-1']} defaultSelectedKeys={['home']}
defaultOpenKeys={['1', '2', '3', '4']} defaultOpenKeys={['search', 'info', 'tracking', 'watchdog']}
mode="inline" mode="inline"
theme="dark" theme="dark"
items={[...menuItems, isAuthenticated ? { items={[...menuItems, isAuthenticated ? {
@ -210,7 +220,8 @@ export default function App() {
}}> }}>
<Routes> <Routes>
<Route path="/" element={<Navigate to="/search/domain"/>}/> <Route path="/" element={<Navigate to="/login"/>}/>
<Route path="/home" element={<TextPage markdown={home}/>}/>
<Route path="/search/domain" element={<DomainSearchPage/>}/> <Route path="/search/domain" element={<DomainSearchPage/>}/>
<Route path="/search/entity" element={<EntitySearchPage/>}/> <Route path="/search/entity" element={<EntitySearchPage/>}/>

View File

@ -19,7 +19,7 @@ export default function Page() {
const onFinish = (data: FieldType) => { const onFinish = (data: FieldType) => {
login(data.username, data.password).then(() => { login(data.username, data.password).then(() => {
setIsAuthenticated(true) setIsAuthenticated(true)
navigate('/search/domain') navigate('/home')
}).catch((e) => { }).catch((e) => {
setIsAuthenticated(false) setIsAuthenticated(false)
setError(e.response.data.message) setError(e.response.data.message)