add(todo): additional setting to implement

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { ImCross } from 'react-icons/im';
 import { Outlet, Route, Routes } from 'react-router-dom';
 import MainLayout from './components/MainLayout';
 import { PasswordSend, ServerStatusResponse } from './js/models';
-import { DEV_IP_BACKEND, errorNotify, fireUpdateRequest, getstatus, HomeRedirector, IS_DEV, login, setpassword } from './js/utils';
+import { DEV_IP_BACKEND, errorNotify, getstatus, HomeRedirector, IS_DEV, login, setpassword } from './js/utils';
 import NFRegex from './pages/NFRegex';
 import io from 'socket.io-client';
 import RegexProxy from './pages/RegexProxy';
@@ -13,6 +13,7 @@ import ServiceDetailsNFRegex from './pages/NFRegex/ServiceDetails';
 import ServiceDetailsProxyRegex from './pages/RegexProxy/ServiceDetails';
 import PortHijack from './pages/PortHijack';
 import { Firewall } from './pages/Firewall';
+import { useQueryClient } from '@tanstack/react-query';
 
 
 const socket = IS_DEV?io("ws://"+DEV_IP_BACKEND, {transports: ["websocket", "polling"], path:"/sock" }):io({transports: ["websocket", "polling"], path:"/sock"});
@@ -24,6 +25,7 @@ function App() {
   const [reqError, setReqError] = useState<undefined|string>()
   const [error, setError] = useState<string|null>()
   const [loadinBtn, setLoadingBtn] = useState(false);
+  const queryClient = useQueryClient()
 
   const getStatus = () =>{
       getstatus().then( res =>{
@@ -39,8 +41,8 @@ function App() {
 
   useEffect(()=>{
     getStatus()
-    socket.on("update", () => {
-      fireUpdateRequest()
+    socket.on("update", (data) => {
+      queryClient.invalidateQueries({ queryKey: data  })
     })
     socket.on("connect_error", (err) => {
       errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`)

frontend/src/components/Firewall/utils.ts

@@ -44,6 +44,12 @@ export type RuleAddForm = {
     policy: ActionType
 }
 
+export type FirewallSettings = {
+    keep_rules: boolean,
+    allow_loopback: boolean,
+    allow_established: boolean,
+}
+
 
 export type ServerResponseListed = {
     status:(ServerResponse & {rule_id:number})[]|string,
@@ -56,6 +62,12 @@ export const firewall = {
     rules: async() => {
         return await getapi("firewall/rules") as RuleInfo;
     },
+    settings: async() => {
+        return await getapi("firewall/settings") as FirewallSettings;
+    },
+    setsettings: async(data:FirewallSettings) => {
+        return await postapi("firewall/settings/set", data) as ServerResponse;
+    },
     enable: async() => {
         return await getapi("firewall/enable") as ServerResponse;
     },

frontend/src/js/utils.tsx

@@ -103,11 +103,6 @@ export function HomeRedirector(){
     return <Navigate to={path} replace/>
 }
 
-export function fireUpdateRequest(){ //TODO: change me: specify what to update
-    queryClient.invalidateQueries({ queryKey: [] })
-}
-
-
 export async function resetfiregex(delete_data:boolean = false){
     const { status } = await postapi("reset",{delete:delete_data}) as ServerResponse;
     return (status === "ok"?undefined:status)

frontend/src/pages/Firewall/SettingsModal.tsx

@@ -0,0 +1,48 @@
+import { Button, Group, Space, Modal, Switch } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { errorNotify, okNotify } from '../../js/utils';
+import { FirewallSettings, firewall } from '../../components/Firewall/utils';
+
+export function SettingsModal({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
+
+    const [settings, setSettings] = useState<FirewallSettings>({keep_rules:false, allow_established:true, allow_loopback:true})
+
+    useEffect(()=>{
+        firewall.settings().then( res => {
+            setSettings(res)
+        }).catch( err => {
+            errorNotify("Setting fetch failed!", err.toString())
+            onClose()
+        })
+    },[])
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+ 
+    const submitRequest = () =>{
+        setSubmitLoading(true)
+        firewall.setsettings(settings).then( () => {
+            okNotify("Settings updated!", "Settings updated successfully")
+            setSubmitLoading(false)
+            onClose()
+        }).catch( err => {
+            errorNotify("Settings update failed!", err.toString())
+            setSubmitLoading(false)
+        })
+    }
+
+
+  return <Modal size="xl" title="Change firewall settings" opened={opened} onClose={onClose} closeOnClickOutside={false} centered>
+
+            <Switch label="Keep rules on firegex shutdown" checked={settings.keep_rules} onChange={v => setSettings({...settings, keep_rules:v.target.checked})}/>
+            <Space h="md" />
+            <Switch label="Allow loopback to communicate with itself" checked={settings.allow_loopback} onChange={v => setSettings({...settings, allow_loopback:v.target.checked})}/>
+            <Space h="md" />
+            <Switch label="Allow established connection (essential to allow opening connection) (Dangerous to disable)" checked={settings.allow_established} onChange={v => setSettings({...settings, allow_established:v.target.checked})}/>
+            <Space h="md" />
+
+            <Group position="right" mt="md">
+                <Button loading={submitLoading} onClick={submitRequest}>Save Setting</Button>
+            </Group>
+    </Modal>
+
+}

frontend/src/pages/Firewall/index.tsx

@@ -18,6 +18,8 @@ import { ModeSelector } from "../../components/Firewall/ModeSelector";
 import { OnOffButton } from "../../components/OnOffButton";
 import { LuArrowBigRightDash } from "react-icons/lu"
 import { ImCheckmark, ImCross } from "react-icons/im";
+import { IoSettingsSharp } from "react-icons/io5";
+import { SettingsModal } from "./SettingsModal";
 
 
 export const Firewall = () => {
@@ -25,6 +27,7 @@ export const Firewall = () => {
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
     const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
     const [tooltipApplyOpened, setTooltipApplyOpened] = useState(false);
+    const [tooltipSettingsOpened, setTooltipSettingsOpened] = useState(false);
     const [currentPolicy, setCurrentPolicy] = useState<ActionType>(ActionType.ACCEPT)
     const [tooltipAddRulOpened, setTooltipAddRulOpened] = useState(false)
     const queryClient = useQueryClient()
@@ -32,6 +35,7 @@ export const Firewall = () => {
     const [state, handlers] = useListState<Rule & {rule_id:string}>([]);
     const [enableFwModal, setEnableFwModal] = useState(false)
     const [applyChangeModal, setApplyChangeModal] = useState(false)
+    const [settingsModal, setSettingsModal] = useState(false)
     const theme = useMantineTheme();
 
     const [updateMevalueinternal, internalUpdateme] = useState(false)
@@ -383,6 +387,12 @@ export const Firewall = () => {
                 onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
             </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Settings" position='bottom' color="cyan" opened={tooltipSettingsOpened}>
+                <ActionIcon color="cyan" onClick={()=>setSettingsModal(true)} size="lg" radius="md" variant="filled"
+                onFocus={() => setTooltipSettingsOpened(false)} onBlur={() => setTooltipSettingsOpened(false)}
+                onMouseEnter={() => setTooltipSettingsOpened(true)} onMouseLeave={() => setTooltipSettingsOpened(false)}><IoSettingsSharp size={18} /></ActionIcon>
+            </Tooltip>
+            <Space w="xs" />
             <Tooltip label="Apply" position='bottom' color="grape" opened={tooltipApplyOpened}>
                 <ActionIcon color="grape" onClick={applyChanges} size="lg" radius="md" variant="filled"
                 onFocus={() => setTooltipApplyOpened(false)} onBlur={() => setTooltipApplyOpened(false)}
@@ -436,5 +446,11 @@ export const Firewall = () => {
           opened={applyChangeModal}
       />
 
+      <SettingsModal
+        opened={settingsModal}
+        onClose={()=>setSettingsModal(false)}
+      />
+
+
     </>
 }