add: graphic improvements

backend/routers/porthijack.py

@@ -122,11 +122,11 @@ async def service_delete(service_id: str):
 async def service_rename(service_id: str, form: RenameForm):
     """Request to change the name of a specific service"""
     form.name = refactor_name(form.name)
-    if not form.name: return {'status': 'The name cannot be empty!'} 
+    if not form.name: raise HTTPException(status_code=400, detail="The name cannot be empty!") 
     try:
         db.query('UPDATE services SET name=? WHERE service_id = ?;', form.name, service_id)
     except sqlite3.IntegrityError:
-        return {'status': 'This name is already used'}
+        raise HTTPException(status_code=400, detail="This name is already used")
     await refresh_frontend()
     return {'status': 'ok'}
 
@@ -141,14 +141,14 @@ async def service_change_destination(service_id: str, form: ChangeDestination):
     try:
         form.ip_dst = addr_parse(form.ip_dst)
     except ValueError:
-        return {"status":"Invalid address"}
+        raise HTTPException(status_code=400, detail="Invalid address")
     srv = Service.from_dict(db.query('SELECT * FROM services WHERE service_id = ?;', service_id)[0])
     if ip_family(form.ip_dst) != ip_family(srv.ip_src):
-        return {'status': 'The destination ip is not of the same family as the source ip'}
+        raise HTTPException(status_code=400, detail="The destination ip is not of the same family as the source ip")
     try:
         db.query('UPDATE services SET proxy_port=?, ip_dst=? WHERE service_id = ?;', form.proxy_port, form.ip_dst, service_id)
     except sqlite3.IntegrityError:
-        return {'status': 'Invalid proxy port or service'}
+        raise HTTPException(status_code=400, detail="Invalid proxy port or service")
     
     srv.ip_dst = form.ip_dst
     srv.proxy_port = form.proxy_port
@@ -164,12 +164,12 @@ async def add_new_service(form: ServiceAddForm):
         form.ip_src = addr_parse(form.ip_src)
         form.ip_dst = addr_parse(form.ip_dst)
     except ValueError:
-        return {"status":"Invalid address"}
+        raise HTTPException(status_code=400, detail="Invalid address")
     
     if ip_family(form.ip_dst) != ip_family(form.ip_src):
-        return  {"status":"Destination and source addresses must be of the same family"}
+        raise HTTPException(status_code=400, detail="Destination and source addresses must be of the same family")
     if form.proto not in ["tcp", "udp"]:
-        return {"status":"Invalid protocol"}
+        raise HTTPException(status_code=400, detail="Invalid protocol")
     
     srv_id = None
     try:
@@ -177,7 +177,7 @@ async def add_new_service(form: ServiceAddForm):
         db.query("INSERT INTO services (service_id, active, public_port, proxy_port, name, proto, ip_src, ip_dst) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
                     srv_id, False, form.public_port, form.proxy_port , form.name, form.proto, form.ip_src, form.ip_dst)
     except sqlite3.IntegrityError:
-        return {'status': 'This type of service already exists'}
+        raise HTTPException(status_code=400, detail="This type of service already exists")
 
     await firewall.reload()
     await refresh_frontend()

backend/routers/regexproxy.py

@@ -163,7 +163,7 @@ class ChangePortForm(BaseModel):
 async def change_service_ports(service_id: str, change_port:ChangePortForm):
     """Choose and change the ports of the service"""
     if change_port.port is None and change_port.internalPort is None:
-        return {'status': 'Invalid Request!'}
+        raise HTTPException(status_code=400, detail="Invalid Request!")
     try:
         sql_inj = ""
         query:list[str|int] = []
@@ -178,7 +178,7 @@ async def change_service_ports(service_id: str, change_port:ChangePortForm):
         query.append(service_id)
         db.query(f'UPDATE services SET {sql_inj} WHERE service_id = ?;', *query)
     except sqlite3.IntegrityError:
-        return {'status': 'Port of the service has been already assigned to another service'}
+        raise HTTPException(status_code=400, detail="Port of the service has been already assigned to another service")
     await firewall.get(service_id).update_port()
     await refresh_frontend()
     return {'status': 'ok'}
@@ -260,12 +260,12 @@ async def add_new_regex(form: RegexAddForm):
     try:
         re.compile(b64decode(form.regex))
     except Exception:
-        return {"status":"Invalid regex"}
+        raise HTTPException(status_code=400, detail="Invalid regex")
     try:
         db.query("INSERT INTO regexes (service_id, regex, is_blacklist, mode, is_case_sensitive, active ) VALUES (?, ?, ?, ?, ?, ?);", 
                 form.service_id, form.regex, form.is_blacklist, form.mode, form.is_case_sensitive, True if form.active is None else form.active )
     except sqlite3.IntegrityError:
-        return {'status': 'An identical regex already exists'}
+        raise HTTPException(status_code=400, detail="An identical regex already exists")
     await firewall.get(form.service_id).update_filters()
     await refresh_frontend()
     return {'status': 'ok'}
@@ -286,11 +286,11 @@ class RenameForm(BaseModel):
 async def service_rename(service_id: str, form: RenameForm):
     """Request to change the name of a specific service"""
     form.name = refactor_name(form.name)
-    if not form.name: return {'status': 'The name cannot be empty!'} 
+    if not form.name: raise HTTPException(status_code=400, detail="The name cannot be empty!") 
     try:
         db.query('UPDATE services SET name=? WHERE service_id = ?;', form.name, service_id)
     except sqlite3.IntegrityError:
-        return {'status': 'The name is already used!'}
+        raise HTTPException(status_code=400, detail="The name is already used!")
     await refresh_frontend()
     return {'status': 'ok'}
 
@@ -304,7 +304,7 @@ async def add_new_service(form: ServiceAddForm):
         db.query("INSERT INTO services (name, service_id, internal_port, public_port, status) VALUES (?, ?, ?, ?, ?)",
                     form.name, serv_id, internal_port, form.port, 'stop')
     except sqlite3.IntegrityError:
-        return {'status': 'Name or/and ports of the service has been already assigned to another service'}
+        raise HTTPException(status_code=400, detail="Name or/and ports of the service has been already assigned to another service")
     await firewall.reload()
     await refresh_frontend()
     return {'status': 'ok', "id": serv_id }

frontend/src/components/OnOffButton.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, ActionIconProps } from "@mantine/core"
-import { ImCross } from "react-icons/im"
+import { ImCheckmark, ImCross } from "react-icons/im"
 import { TiTick } from "react-icons/ti"
 import {PolymorphicComponentProps} from "@mantine/utils"
 
@@ -11,6 +11,6 @@ interface IOnOffButtonProps extends Omit<PolymorphicComponentProps<"button",Acti
 
 export const OnOffButton = ({value, ...props}:IOnOffButtonProps) => {
     return <ActionIcon color={props.color?props.color:(value?"green":"red")} {...props}>
-            {value?<TiTick size={20} />:<ImCross size={12} />}
+            {value?<ImCheckmark size={14} />:<ImCross size={12} />}
     </ActionIcon>
 }

frontend/src/pages/Firewall/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Button, LoadingOverlay, Space, Switch, TextInput, Title, Tooltip } from "@mantine/core"
+import { ActionIcon, Badge, Button, Divider, LoadingOverlay, Space, Switch, TextInput, Title, Tooltip, useMantineTheme } from "@mantine/core"
 import { useEffect, useState } from "react";
 import { BsPlusLg, BsTrashFill } from "react-icons/bs"
 import { rem } from '@mantine/core';
@@ -17,6 +17,7 @@ import { ProtocolSelector } from "../../components/Firewall/ProtocolSelector";
 import { ModeSelector } from "../../components/Firewall/ModeSelector";
 import { OnOffButton } from "../../components/OnOffButton";
 import { LuArrowBigRightDash } from "react-icons/lu"
+import { ImCheckmark, ImCross } from "react-icons/im";
 
 
 export const Firewall = () => {
@@ -31,6 +32,7 @@ export const Firewall = () => {
     const [state, handlers] = useListState<Rule & {rule_id:string}>([]);
     const [enableFwModal, setEnableFwModal] = useState(false)
     const [applyChangeModal, setApplyChangeModal] = useState(false)
+    const theme = useMantineTheme();
 
     const [updateMevalueinternal, internalUpdateme] = useState(false)
     const updateMe = () => {
@@ -189,7 +191,21 @@ export const Firewall = () => {
               updateMe()
             }
 
+            const disable_style = { opacity:"0.4", cursor:"not-allowed" }
             const proto_any = item.proto == Protocol.ANY
+            const disabletab = {
+              ips:!ipFilteringEnabled,
+              port_box: proto_any,
+              src_port: !srcPortEnabled || proto_any,
+              dst_port: !dstPortEnabled || proto_any
+            }
+
+            const additionalStyle = {
+              ips:disabletab.ips?disable_style:{},
+              port_box: disabletab.port_box?disable_style:{},
+              src_port: disabletab.src_port?disable_style:{},
+              dst_port: disabletab.dst_port?disable_style:{}
+            }
 
             return <div
               ref={provided.innerRef}
@@ -202,10 +218,28 @@ export const Firewall = () => {
               <Space w="sm" />
               <div className="center-flex-row" style={{width:"100%"}}>
                 <div className="center-flex" style={{width:"97%"}}>
-                <OnOffButton value={item.active} onClick={() =>{
+                <Switch
+                  checked={item.active}
+                  onChange={() =>{
                     item.active = !item.active
                     updateMe()
-                }} size="lg" variant="filled" radius="md" />
+                  }}
+                  color="teal"
+                  size="lg"
+                  thumbIcon={
+                    item.active ? (
+                      <ImCheckmark
+                        style={{ width: rem(12), height: rem(12) }}
+                        color={theme.colors.teal[6]}
+                      />
+                    ) : (
+                      <ImCross
+                        style={{ width: rem(12), height: rem(12) }}
+                        color={theme.colors.red[6]}
+                      />
+                    )
+                  }
+                />
                 <Space w="sm" />
                 <ActionIcon color="red" onClick={()=>handlers.remove(index)} size="lg" radius="md" variant="filled"><BsTrashFill size={18} /></ActionIcon>
                 <Space w="sm" />
@@ -214,7 +248,14 @@ export const Firewall = () => {
                 <Space h="sm" />
                 <div className="center-flex" style={{width:"97%"}}>
                   <div  style={{width:"100%"}}>
-                  <InterfaceInput initialCustomInterfaces={[...src_custom_int, ...customInt]} value={srcIp} onChange={v => ip_setter(item, v, {src:true})} disabled={!ipFilteringEnabled} />
+                  <InterfaceInput
+                    initialCustomInterfaces={[...src_custom_int, ...customInt]}
+                    value={srcIp}
+                    onChange={v => ip_setter(item, v, {src:true})}
+                    disabled={disabletab.ips}
+                    error={!disabletab.ips && !srcIp}
+                    style={additionalStyle.ips}
+                  />
                   <Space h="sm" />
                   <div className="center-flex" style={{width:"100%"}}>
                   <OnOffButton value={srcPortEnabled} onClick={() =>{
@@ -227,16 +268,29 @@ export const Firewall = () => {
                     }else{
                       port_range_setter(item, srcPortValue, {src:true})
                     }
-                  }} size="lg" disabled={proto_any} variant="light" />
+                  }} size="lg" disabled={disabletab.port_box} style={additionalStyle.port_box} variant="light" />
                   <Space w="xs" />
-                  <PortRangeInput onChange={v => port_range_setter(item, v.target.value, {src:true})} value={srcPortValue} disabled={!srcPortEnabled || proto_any} style={{width:"100%"}} />
+                  <PortRangeInput
+                    onChange={v => port_range_setter(item, v.target.value, {src:true})}
+                    value={srcPortValue}
+                    disabled={disabletab.src_port}
+                    error={!disabletab.src_port && !srcPortValue}
+                    style={{width:"100%", ...additionalStyle.src_port}}
+                  />
                   </div>
                   </div>
                   <Space w="lg" />
                   <LuArrowBigRightDash size={100} />
                   <Space w="lg" />
                   <div style={{width:"100%"}}>
-                  <InterfaceInput initialCustomInterfaces={[...dst_custom_int, ...customInt]} defaultValue={dstIp} onChange={v => ip_setter(item, v, {dst:true})} disabled={!ipFilteringEnabled} />
+                  <InterfaceInput
+                    initialCustomInterfaces={[...dst_custom_int, ...customInt]}
+                    defaultValue={dstIp}
+                    onChange={v => ip_setter(item, v, {dst:true})}
+                    disabled={disabletab.ips}
+                    error={!disabletab.ips && !dstIp}
+                    style={additionalStyle.ips}
+                  />
                   <Space h="sm" />
                   <div className="center-flex" style={{width:"100%"}}>
                     <OnOffButton value={dstPortEnabled} onClick={() =>{
@@ -249,9 +303,15 @@ export const Firewall = () => {
                       }else{
                         port_range_setter(item, dstPortValue, {dst:true})
                       }
-                    }} size="lg" disabled={proto_any} variant="light" />
+                    }} size="lg" disabled={disabletab.port_box} style={additionalStyle.port_box} variant="light" />
                     <Space w="xs" />
-                    <PortRangeInput onChange={v => port_range_setter(item, v.target.value, {dst:true})} value={dstPortValue} disabled={!dstPortEnabled || proto_any} style={{width:"100%"}} />
+                    <PortRangeInput
+                      onChange={v => port_range_setter(item, v.target.value, {dst:true})}
+                      value={dstPortValue}
+                      disabled={disabletab.dst_port}
+                      error={!disabletab.dst_port && !dstPortValue}
+                      style={{width:"100%", ...additionalStyle.dst_port}}
+                    />
                   </div>
                   </div>
                 </div>
@@ -260,23 +320,33 @@ export const Firewall = () => {
                   <ActionTypeSelector
                       value={item.action}
                       onChange={(value)=>{item.action = value as ActionType;updateMe()}}
+                      style={{width:"100%"}}
                     />
                     <Space h="xs" />
                   <ModeSelector
                     value={item.mode}
                     onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
+                    style={{width:"100%"}}
                   />
                   <Space h="xs" />
                   <ProtocolSelector
                       value={item.proto}
                       onChange={(value)=>{item.proto = value as Protocol;updateMe()}}
+                      style={{width:"100%"}}
                     />
                     <Space h="xs" />
 
-                  <Button size="xs" variant="light" color={ipFilteringEnabled?"lime":"red"} onClick={()=>set_filtering_ip(!ipFilteringEnabled)} >{ipFilteringEnabled?"IP Filtering ON":"IP Filtering OFF"}</Button>
+                  <Button
+                    size="xs" variant="light"
+                    color={ipFilteringEnabled?"lime":"red"}
+                    onClick={()=>set_filtering_ip(!ipFilteringEnabled)} 
+                    style={{width:"100%"}}
+                  >{ipFilteringEnabled?"IP Filtering ON":"IP Filtering OFF"}</Button>
               </div>
               </div>
               <Space h="md" />
+              <Divider />
+              <Space h="md" />
             </div>
         }}
         </Draggable>
@@ -328,6 +398,8 @@ export const Firewall = () => {
             handlers.reorder({ from: source.index, to: destination?.index || 0 })
           }
         >
+          <Divider />
+          <Space h="md" />
           <Droppable droppableId="dnd-list" direction="vertical">
             {(provided) => (
               <div {...provided.droppableProps} ref={provided.innerRef}>