add/fix: frontend and backend improves

frontend/src/components/Firewall/ActionTypeSelector.tsx

@@ -18,6 +18,7 @@ export const ActionTypeSelector = (props:Omit<SegmentedControlProps, "data">) =>
                 label: 'Drop',
             }
         ]}
+        size={props.size?props.size:"xs"}
         {...props}
     />
 )

frontend/src/components/Firewall/ModeSelector.tsx

@@ -8,13 +8,14 @@ export const ModeSelector = (props:Omit<SegmentedControlProps, "data">) => (
         data={[
             {
                 value: RuleMode.IN,
-                label: 'IN',
+                label: 'Inbound',
             },
             {
                 value: RuleMode.OUT,
-                label: 'OUT',
+                label: 'Outbound',
             }
         ]}
+        size={props.size?props.size:"xs"}
         {...props}
     />
 )

frontend/src/components/Firewall/ProtocolSelector.tsx

@@ -18,6 +18,7 @@ export const ProtocolSelector = (props:Omit<SegmentedControlProps, "data">) => (
                 label: 'ANY',
             }
         ]}
+        size={props.size?props.size:"xs"}
         {...props}
     />
 )

frontend/src/components/OnOffButton.tsx

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

frontend/src/components/PortInput.tsx

@@ -1,21 +1,11 @@
 import { Input, NumberInput, NumberInputProps, TextInput, TextInputProps } from "@mantine/core"
 import React, { useState } from "react"
+import { regex_port, regex_range_port } from "../js/utils"
 
 interface PortInputProps extends NumberInputProps {
     fullWidth?: boolean
 }
 
-const valueParse = (raw_value:string, oldValue:string = "") => {
-    const value = parseInt(raw_value)
-    if (value > 65535) {
-        return oldValue
-    } else if (value < 1) {
-        return oldValue
-    }else{
-        return value.toString()
-    }
-}
-
 
 const PortInput =  React.forwardRef<HTMLInputElement, PortInputProps>( (props, ref) => {
     const [oldValue, setOldValue] = useState<string>(props.defaultValue?props.defaultValue.toString():"")
@@ -29,8 +19,7 @@ const PortInput =  React.forwardRef<HTMLInputElement, PortInputProps>( (props, r
         style={fullWidth?props.style:{ width: "75px", ...props.style }}
         onInput={(e) => {
             const target = e.target as HTMLInputElement
-            target.value = target.value?valueParse(target.value, oldValue):""
-            setOldValue(target.value)
+            target.value.match(regex_port)?setOldValue(target.value):target.value = oldValue
             props.onInput?.(e)
         }}
         ref={ref}
@@ -46,10 +35,7 @@ interface PortRangeInputProps extends TextInputProps {
 }
 
 export const PortRangeInput =  React.forwardRef<HTMLInputElement, PortRangeInputProps>( (props, ref) => {
-    const oldValueStates = [
-        useState<string>(props.defaultValue?props.defaultValue?.toString().split("-")[0]:""),
-        useState<string|undefined>(props.defaultValue?.toString().split("-")[1])
-    ]
+    const [oldValue, setOldValue] = useState<string>(props.defaultValue?props.defaultValue.toString():"")
     const {fullWidth, defaultValues, ...propeties} = props
     let defaultValuesInt = defaultValues
     if (defaultValuesInt?.length == 2 && defaultValuesInt[0] == defaultValuesInt[1]){
@@ -62,13 +48,7 @@ export const PortRangeInput =  React.forwardRef<HTMLInputElement, PortRangeInput
         style={fullWidth?props.style:{ width: "150px", ...props.style }}
         onInput={(e) => {
             const target = e.target as HTMLInputElement
-            const splitted = target.value.split("-")
-            const parsedValues = [splitted[0], splitted[1]].map((value, index) => {
-                const res = value?valueParse(value,oldValueStates[index][0]):value
-                if (res != oldValueStates[index][0]) oldValueStates[index][1](value)
-                return res
-            })
-            target.value = parsedValues.filter((v, i) => (v !== undefined && (i != 0 || v !== ""))).join("-")
+            target.value.match(regex_range_port)?setOldValue(target.value):target.value = oldValue
             props.onInput?.(e)
         }}
         ref={ref}