fix: backend optional types + firewall frontend initial code

frontend/src/components/Firewall/utils.ts

@@ -0,0 +1,70 @@
+import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
+import { getapi, postapi } from "../../js/utils"
+
+export type GeneralStats = {
+    rules:number,
+}
+
+export enum Protocol {
+    TCP = "tcp",
+    UDP = "udp",
+    ANY = "any"
+}
+
+export enum ActionType {
+    ACCEPT = "accept",
+    DROP = "drop",
+    REJECT = "reject"
+}
+
+export enum RuleMode {
+    OUT = "O",
+    IN = "I",
+}
+
+export type Rule = {
+    active: boolean
+    name:string,
+    proto: Protocol,
+    ip_src: string,
+    ip_dst: string,
+    port_src_from: number,
+    port_dst_from: number,
+    port_src_to: number,
+    port_dst_to: number,
+    action: ActionType,
+    mode: RuleMode,
+}
+
+export type RuleInfo = {
+    rules: Rule[]
+    policy: ActionType
+}
+
+
+export type ServerResponseListed = {
+    status:(ServerResponse & {rule_id:number})[]|string,
+}
+
+
+export const firewall = {
+    stats: async () => {
+        return await getapi("firewall/stats") as GeneralStats;
+    },
+    rules: async() => {
+        return await getapi("firewall/rules") as RuleInfo;
+    },
+    rulenable: async (rule_id:number) => {
+        return await getapi(`firewall/rule/${rule_id}/enable`) as ServerResponse;
+    },
+    ruledisable: async (rule_id:number) => {
+        return await getapi(`firewall/rule/${rule_id}/disable`) as ServerResponse;
+    },
+    rulerename: async (rule_id:number, name: string) => {
+        const { status } = await postapi(`firewall/rule/${rule_id}/rename`,{ name }) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicesadd: async (data:RuleInfo) => {
+        return await postapi("firewall/rules/set", data) as ServerResponseListed;
+    }
+}

frontend/src/components/NavBar/index.tsx

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

frontend/src/components/PortHijack/utils.ts

@@ -25,10 +25,7 @@ export type ServiceAddForm = {
     ip_dst: string,
 }
 
-export type ServiceAddResponse = {
-    status: string,
-    service_id?: string,
-}
+export type ServiceAddResponse = ServerResponse & { service_id: string }
 
 export const porthijack = {
     stats: async () => {

frontend/src/components/PortInput.tsx

@@ -6,15 +6,15 @@ interface PortInputProps extends NumberInputProps {
 }
 
 const PortInput =  React.forwardRef<HTMLInputElement, PortInputProps>( (props, ref) => {
-    
     const [oldValue, setOldValue] = useState<string>(props.defaultValue?props.defaultValue.toString():"")
+    const {fullWidth, ...propeties} = props
     return <NumberInput
         variant={props.variant?props.variant:"filled"}
         hideControls
         placeholder="80"
         min={props.min?props.min:1}
         max={props.max?props.min:65535}
-        style={props.fullWidth?props.style:{ width: "75px", ...props.style }}
+        style={fullWidth?props.style:{ width: "75px", ...props.style }}
         onInput={(e) => {
             const value = parseInt((e.target as HTMLInputElement).value)
             if (value > 65535) {
@@ -28,7 +28,7 @@ const PortInput =  React.forwardRef<HTMLInputElement, PortInputProps>( (props, r
             props.onInput?.(e)
         }}
         ref={ref}
-        {...props}
+        {...propeties}
     />
 
 })