0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: backend optional types + firewall frontend initial code

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-23 02:02:02 +02:00
parent e549d9cf2a
commit ae8dbd9423
12 changed files with 175 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/NavBar/index.tsx
View File

@@ -1,13 +1,14 @@
import { Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import React from "react";
import { Box, Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import { useState } from "react";
import { IoMdGitNetwork } from "react-icons/io";
import { MdTransform } from "react-icons/md";
import { MdOutlineExpandLess, MdOutlineExpandMore, MdTransform } from "react-icons/md";
import { useNavigate } from "react-router-dom";
import { getmainpath } from "../../js/utils";
import { GrDirections } from "react-icons/gr";
import { PiWallLight } from "react-icons/pi";
function NavBarButton({ navigate, closeNav, name, icon, color, disabled }:
{ navigate: string, closeNav: () => void, name:string, icon:any, color:MantineColor, disabled?:boolean }) {
function NavBarButton({ navigate, closeNav, name, icon, color, disabled, onClick }:
{ navigate?: string, closeNav: () => void, name:string, icon:any, color:MantineColor, disabled?:boolean, onClick?:CallableFunction }) {
const navigator = useNavigate()
return <UnstyledButton sx={(theme) => ({
@@ -22,7 +23,10 @@ function NavBarButton({ navigate, closeNav, name, icon, color, disabled }:
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
},
})} onClick={()=>{navigator(`/${navigate}`);closeNav()}} disabled={disabled}>
})} onClick={()=>{
if(navigate){navigator(`/${navigate}`);closeNav()}
if (onClick) onClick()
}} disabled={disabled}>
<Group>
<ThemeIcon color={color} variant="light">
{icon}
@@ -33,16 +37,26 @@ function NavBarButton({ navigate, closeNav, name, icon, color, disabled }:
}
export default function NavBar({ closeNav, opened }: {closeNav: () => void, opened: boolean}) {
const [toggleState, setToggleState] = useState(false);
const advancedPaths = ["regexproxy"]
const advancedSelected = advancedPaths.includes(getmainpath())
const toggle = (toggleState||advancedSelected)
return <Navbar p="md" hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
<Navbar.Section px="xs" mt="xs">
<Title order={3}>[Fi]*regex 🔥</Title>
</Navbar.Section>
<hr style={{width:"100%"}}/>
<Divider my="xs" />
<Navbar.Section grow component={ScrollArea} px="xs" mt="xs">
<NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="blue" icon={<IoMdGitNetwork />} />
<NavBarButton navigate="regexproxy" closeNav={closeNav} name="TCP Proxy Regex Filter" color="lime" icon={<MdTransform />} />
<NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="red" icon={<GrDirections />} />
<NavBarButton navigate="firewall" closeNav={closeNav} name="Firewall Rules" color="red" icon={<PiWallLight />} />
<NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="lime" icon={<IoMdGitNetwork />} />
<NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections />} />
<Divider my="xs" label="Advanced" labelPosition="center" />
<NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggleState)} disabled={advancedSelected}/>
<Collapse in={toggle}>
<NavBarButton navigate="regexproxy" closeNav={closeNav} name="TCP Proxy Regex Filter" color="grape" icon={<MdTransform />} />
</Collapse>
</Navbar.Section>
</Navbar>