add(todo): additional setting to implement

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)}
+      />
+
+
     </>
 }