Port hijack frontend progresses

README.md

@@ -60,7 +60,6 @@ Initiially the project was based only on regex filters, and also now the main fu
 
 ## Next points
 
-- Create hijacking port to proxy
 - Explanation about tools in the dedicated pages making them more user-friendly
 - buffering the TCP and(/or) the UDP stream to avoid to bypass the proxy dividing the information in more packets
 - Adding new section with "general firewall rules" to manage "simple" TCP traffic rules graphically and through nftables

frontend/src/components/InlineEdit/index.module.scss

@@ -1,20 +0,0 @@
-@use "../../vars" as *;
-@use "../../index.scss" as *;
-
-.click_to_edit {
-    background-color: #1B1B1B;
-    border: 0;
-    padding: 5px 8px;
-    min-width: 10px;
-    user-select: none;
-    border-radius: 13px;
-}
-
-.click_to_edit:hover {
-    cursor: text;
-    background-color: #1B1B1B;
-}
-
-.click_to_edit:focus {
-    outline: none;
-}

frontend/src/components/InlineEdit/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import style from "./index.module.scss";
-
-const InlineEdit = ({ value, setValue, ...others }:{ value:string, setValue: (s:string)=>void}) => {
-  return (
-    <span
-      role="textbox"
-      contentEditable
-      className={style.click_to_edit}
-      aria-label="Field name"
-      onKeyDown={(event) => {
-        if (event.key === "Enter" || event.key === "Escape") {
-          event.target.blur();
-        }
-      }}
-      onBlur={(event) => {
-        setValue((event.target as HTMLSpanElement).textContent ?? "");
-      }}
-      {...others}
-    />
-  )
-}
-
-export default InlineEdit;

frontend/src/components/NFRegex/AddNewService.tsx

@@ -1,9 +1,10 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
-import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils';
+import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { nfregex } from './utils';
+import PortAndInterface from '../PortAndInterface';
 
 type ServiceAddForm = {
     name:string,
@@ -13,16 +14,6 @@ type ServiceAddForm = {
     autostart: boolean,
 }
 
-interface ItemProps extends AutocompleteItem {
-    label: string;
-}
-
-const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
-    ({ label, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
-            ( <b>{label}</b> ) -{">"} <b>{value}</b> 
-    </div>
-  );
-
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
@@ -41,14 +32,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         }
     })
 
-    const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
-
-    useEffect(()=>{
-        getipinterfaces().then(data => {
-            setIpInterfaces(data.map(item => ({label:item.name, value:item.addr})));
-        })
-    },[])
-
     const close = () =>{
         onClose()
         form.reset()
@@ -85,28 +68,9 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 {...form.getInputProps('name')}
             />
             <Space h="md" />
-
+            <PortAndInterface form={form} int_name="ip_int" port_name="port" label={"Public IP Interface and port (ipv4/ipv6 + CIDR allowed)"} />            
-            <Autocomplete
-                label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
-                placeholder="10.1.1.0/24"
-                itemComponent={AutoCompleteItem}
-                data={ipInterfaces}
-                {...form.getInputProps('ip_int')}
-            />
-
             <Space h="md" />
 
-            <NumberInput
-                placeholder="8080"
-                min={1}
-                max={65535}
-                label="Public Service port"
-                {...form.getInputProps('port')}
-            />
-            
-            <Space h="md" />
-
-
             <div className='center-flex'>
                 <Switch
                     label="Auto-Start Service"

frontend/src/components/PortAndInterface.tsx

@@ -0,0 +1,46 @@
+import { Autocomplete, AutocompleteItem, Space, Title } from "@mantine/core"
+import { UseForm } from "@mantine/hooks/lib/use-form/use-form";
+import React, { useEffect, useState } from "react"
+import { getipinterfaces } from "../js/utils";
+import PortInput from "./PortInput";
+
+
+interface ItemProps extends AutocompleteItem {
+    label: string;
+}
+
+const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
+    ({ label, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
+            ( <b>{label}</b> ) -{">"} <b>{value}</b> 
+    </div>
+);
+
+
+export default function PortAndInterface({ form, int_name, port_name, label }:{ form:UseForm<any>, int_name:string, port_name:string, label?:string }) {
+   
+    const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
+    
+    useEffect(()=>{
+        getipinterfaces().then(data => {
+            setIpInterfaces(data.map(item => ({label:item.name, value:item.addr})));
+        })
+    },[])
+
+   return <>
+        {label?<>
+            <Title order={6}>{label}</Title>
+            <Space h="xs" /></> :null}
+        
+        <div className='center-flex' style={{width:"100%"}}>
+            <Autocomplete
+                placeholder="10.1.1.1"
+                itemComponent={AutoCompleteItem}
+                data={ipInterfaces}
+                {...form.getInputProps(int_name)}
+                style={{width:"100%"}}
+            />
+            <Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" />
+            <PortInput others={form.getInputProps(port_name)} />
+        </div>
+    </>
+}

frontend/src/components/PortHijack/AddNewService.tsx

@@ -1,29 +1,21 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
-import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils';
+import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { porthijack } from './utils';
+import PortAndInterface from '../PortAndInterface';
 
 type ServiceAddForm = {
     name:string,
     public_port:number,
     proxy_port:number,
     proto:string,
-    ip_int:string,
+    ip_src:string,
+    ip_dst:string,
     autostart: boolean,
 }
 
-interface ItemProps extends AutocompleteItem {
-    label: string;
-}
-
-const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
-    ({ label, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
-            ( <b>{label}</b> ) -{">"} <b>{value}</b> 
-    </div>
-  );
-
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
@@ -32,26 +24,20 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             public_port:80,
             proxy_port:8080,
             proto:"tcp",
-            ip_int:"",
+            ip_src:"",
-            autostart: true,
+            ip_dst:"127.0.0.1",
+            autostart: false,
         },
         validationRules:{
             name: (value) => value !== ""?true:false,
             public_port: (value) => value>0 && value<65536,
             proxy_port: (value) => value>0 && value<65536,
             proto: (value) => ["tcp","udp"].includes(value),
-            ip_int: (value) => value.match(regex_ipv6)?true:false || value.match(regex_ipv4)?true:false
+            ip_src: (value) => value.match(regex_ipv6_no_cidr)?true:false || value.match(regex_ipv4_no_cidr)?true:false,
+            ip_dst: (value) => value.match(regex_ipv6_no_cidr)?true:false || value.match(regex_ipv4_no_cidr)?true:false
         }
     })
 
-    const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
-
-    useEffect(()=>{
-        getipinterfaces().then(data => {
-            setIpInterfaces(data.map(item => ({label:item.name, value:item.addr})));
-        })
-    },[])
-
     const close = () =>{
         onClose()
         form.reset()
@@ -61,9 +47,9 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
  
-    const submitRequest = ({ name, proxy_port, public_port, autostart, proto, ip_int }:ServiceAddForm) =>{
+    const submitRequest = ({ name, proxy_port, public_port, autostart, proto, ip_src, ip_dst }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        porthijack.servicesadd({name, proxy_port, public_port, proto, ip_int }).then( res => {
+        porthijack.servicesadd({name, proxy_port, public_port, proto, ip_src, ip_dst }).then( res => {
             if (res.status === "ok" && res.service_id){
                 setSubmitLoading(false)
                 close();
@@ -88,39 +74,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 {...form.getInputProps('name')}
             />
             <Space h="md" />
-            <div className='center-flex' style={{width:"100%"}}>
+            <PortAndInterface form={form} int_name="ip_src" port_name="public_port" label="Public IP Address and port (ipv4/ipv6)" />
-                <Autocomplete
-                    label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
-                    placeholder="10.1.1.0/24"
-                    itemComponent={AutoCompleteItem}
-                    data={ipInterfaces}
-                    {...form.getInputProps('ip_int')}
-                />
-
-                <Space w="sm" />:<Space w="sm" />
-
-                <NumberInput      
-                    placeholder="80"
-                    min={1}
-                    max={65535}
-                    label="Public Service port"
-                    {...form.getInputProps('public_port')}
-                />
-            </div>
-
             <Space h="md" />
-
+            <PortAndInterface form={form} int_name="ip_dst" port_name="proxy_port" label="Proxy/Internal IP Address and port (ipv4/ipv6)" />
-            <NumberInput
-                placeholder="8080"
-                min={1}
-                max={65535}
-                label="Redirect to port"
-                {...form.getInputProps('proxy_port')}
-            />
-            
             <Space h="md" />
 
-
             <div className='center-flex'>
                 <Switch
                     label="Auto-Start Service"

frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx

@@ -0,0 +1,71 @@
+import { Button, Group, Space, Notification, Modal } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import React, { useEffect, useState } from 'react';
+import { okNotify, regex_ipv4_no_cidr, regex_ipv6_no_cidr } from '../../../js/utils';
+import { ImCross } from "react-icons/im"
+import { porthijack, Service } from '../utils';
+import PortAndInterface from '../../PortAndInterface';
+
+function ChangeDestination({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 
+
+    const form = useForm({
+        initialValues: { 
+            ip_dst:service.ip_dst,
+            proxy_port:service.proxy_port
+        },
+        validationRules:{
+            proxy_port: (value) => value>0 && value<65536,
+            ip_dst: (value) => value.match(regex_ipv6_no_cidr)?true:false || value.match(regex_ipv4_no_cidr)?true:false
+        }
+    })
+
+    const close = () =>{
+        onClose()
+        form.reset()
+        setError(null)
+    }
+
+    useEffect(() => form.setValues({ip_dst:service.ip_dst, proxy_port: service.proxy_port}),[opened])
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const submitRequest = ({ ip_dst, proxy_port }:{ ip_dst:string, proxy_port:number }) => {
+        setSubmitLoading(true)
+        porthijack.changedestination(service.service_id, ip_dst, proxy_port).then( res => {
+            if (res.status === "ok"){
+                setSubmitLoading(false)
+                close();
+                okNotify(`Service ${service.name} has changed destination in ${ ip_dst }:${ proxy_port }`, `Successfully changed destination of service on port ${service.public_port}`)
+            }else{
+                setSubmitLoading(false)
+                setError(res.status)
+            }
+        }).catch( err => {
+            setSubmitLoading(false)
+            setError("Request Failed! [ "+err+" ]")
+        })
+        
+    }    
+
+
+  return <Modal size="xl" title={`Change destination of '${service.name}' [${service.ip_src}]:${service.public_port}`} opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            
+            <PortAndInterface form={form} int_name="ip_dst" port_name="proxy_port" />
+            <Group position="right" mt="md">
+                <Button loading={submitLoading} type="submit">Change</Button>
+            </Group>
+            <Space h="md" />
+            
+            {error?<>
+            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                Error: {error}
+            </Notification><Space h="md" /></>:null}
+            
+        </form>
+    </Modal>
+
+}
+
+export default ChangeDestination;

frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx

@@ -29,7 +29,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
             if (!res){
                 setSubmitLoading(false)
                 close();
-                okNotify(`Service ${service.name} has been renamed in ${ name }`, `Successfully renamed service on port ${service.port}`)
+                okNotify(`Service ${service.name} has been renamed in ${ name }`, `Successfully renamed service on port ${service.public_port}`)
             }else{
                 setSubmitLoading(false)
                 setError("Error: [ "+res+" ]")
@@ -42,7 +42,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
     }    
 
 
-  return <Modal size="xl" title={`Rename '${service.name}' service on port ${service.port}`} opened={opened} onClose={close} closeOnClickOutside={false} centered>
+  return <Modal size="xl" title={`Rename '${service.name}' service on port ${service.public_port}`} opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
             <TextInput
                 label="Service Name"

frontend/src/components/PortHijack/ServiceRow/index.tsx

@@ -2,15 +2,15 @@ import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Toolt
 import React, { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
 import { porthijack, Service } from '../utils';
-import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
 import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
-import { BsTrashFill } from 'react-icons/bs';
+import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
+import ChangeDestination from './ChangeDestination';
 
-function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
+function ServiceRow({ service }:{ service:Service }) {
 
     let status_color = service.active ? "teal": "red"
 
@@ -18,18 +18,19 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
     const [renameModal, setRenameModal] = useState(false)
+    const [changeDestModal, setChangeDestModal] = useState(false)
 
     const stopService = async () => {
         setButtonLoading(true)
         
         await porthijack.servicestop(service.service_id).then(res => {
             if(!res){
-                okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
+                okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.public_port} has been stopped!`)
             }else{
-                errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
+                errorNotify(`An error as occurred during the stopping of the service ${service.public_port}`,`Error: ${res}`)
             }
         }).catch(err => {
-            errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${err}`)
+            errorNotify(`An error as occurred during the stopping of the service ${service.public_port}`,`Error: ${err}`)
         })
         setButtonLoading(false);
     }
@@ -38,12 +39,12 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         setButtonLoading(true)
         await porthijack.servicestart(service.service_id).then(res => {
             if(!res){
-                okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
+                okNotify(`Service ${service.name} started successfully!`,`The service on ${service.public_port} has been started!`)
             }else{
-                errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
+                errorNotify(`An error as occurred during the starting of the service ${service.public_port}`,`Error: ${res}`)
             }
         }).catch(err => {
-            errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${err}`)
+            errorNotify(`An error as occurred during the starting of the service ${service.public_port}`,`Error: ${err}`)
         })
         setButtonLoading(false)
     }
@@ -65,13 +66,13 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             <Grid.Col md={4} xs={12}>
                 <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
                     <div className="center-flex-row">
-                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
                         <Badge color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge>
                     </div>
                 </div></MediaQuery>
                 <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
                     <div className="center-flex">
-                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
                         <Badge style={{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge>
                         <Space w="xl" />
                     </div>
@@ -91,7 +92,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                 </MediaQuery>
                 
                 <div className="center-flex-row">
-                    <Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
+                    <Badge color={service.ip_src.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_src} on {service.proto}</Badge>
                 </div>
                 <MediaQuery largerThan="md" styles={{ display: 'none' }}>
                     <div className='flex-spacer' />
@@ -103,6 +104,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <Menu>
                         <Menu.Label><b>Rename service</b></Menu.Label>
                         <Menu.Item icon={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
+                        <Menu.Label><b>Change destination</b></Menu.Label>
+                        <Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangeDestModal(true)}>Change hijacking destination</Menu.Item>
                         <Divider />
                         <Menu.Label><b>Danger zone</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
@@ -127,10 +130,6 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     </Tooltip>
                 </div>
                 <Space w="xl" /><Space w="xl" />
-                {onClick?<div>
-                    <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
-                    <Space w="xl" />
-                </div>:null}
                 <MediaQuery largerThan="md" styles={{ display: 'none' }}>
                     <><Space w="xl" /><Space w="xl" /></>
                 </MediaQuery>
@@ -140,7 +139,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         <hr style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
-            description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
+            description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
             onClose={()=>setDeleteModal(false) }
             action={deleteService}
             opened={deleteModal}
@@ -150,6 +149,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             opened={renameModal}
             service={service}
         />
+        <ChangeDestination
+            onClose={()=>setChangeDestModal(false)}
+            opened={changeDestModal}
+            service={service}
+        />
     </>
 }
 

frontend/src/components/PortHijack/utils.ts

@@ -9,9 +9,9 @@ export type Service = {
     name:string,
     service_id:string,
     active:boolean,
-    port:number,
     proto: string,
-    ip_int: string,
+    ip_src: string,
+    ip_dst: string,
     proxy_port: number,
     public_port: number,
 }
@@ -21,7 +21,8 @@ export type ServiceAddForm = {
     public_port:number,
     proxy_port:number,
     proto:string,
-    ip_int:string,
+    ip_src: string,
+    ip_dst: string,
 }
 
 export type ServiceAddResponse = {
@@ -58,7 +59,7 @@ export const porthijack = {
         const { status } = await getapi(`porthijack/service/${service_id}/delete`) as ServerResponse;
         return status === "ok"?undefined:status
     },
-    changeport: async (service_id:string, proxy_port:number) => {
+    changedestination: async (service_id:string, ip_dst:string, proxy_port:number) => {
-        return await postapi(`porthijack/service/${service_id}/changeport`, {proxy_port}) as ServerResponse;
+        return await postapi(`porthijack/service/${service_id}/change-destination`, {proxy_port, ip_dst}) as ServerResponse;
     }
 }

frontend/src/components/PortInput.tsx

@@ -0,0 +1,29 @@
+import { NumberInput } from "@mantine/core"
+import React, { useState } from "react"
+
+export default function PortInput({ onInput, defaultValue, others, label, fullWidth }:
+        { onInput?:React.FormEventHandler<HTMLInputElement>, defaultValue?:number, label?:React.ReactNode, others:any, fullWidth?:boolean }) {
+    const [oldValue, setOldValue] = useState<string>(defaultValue?defaultValue.toString():"")
+    return <NumberInput
+        variant="filled"
+        hideControls
+        placeholder="80"
+        label={label}
+        min={1}
+        max={65535}
+        style={fullWidth?{}:{ width: "75px" }}
+        onInput={(e) => {
+            const value = parseInt((e.target as HTMLInputElement).value)
+            if (value > 65535) {
+                (e.target as HTMLInputElement).value = oldValue
+            } else if (value < 1) {
+                (e.target as HTMLInputElement).value = oldValue
+            }else{
+                (e.target as HTMLInputElement).value = value.toString()
+            }
+            setOldValue((e.target as HTMLInputElement).value)
+            onInput?.(e)
+        }}
+        {...others}
+    />
+}

frontend/src/components/RegexProxy/AddNewService.tsx

@@ -1,9 +1,10 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { okNotify } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { regexproxy } from './utils';
+import PortInput from '../PortInput';
 
 type ServiceAddForm = {
     name:string,
@@ -67,22 +68,18 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             />
             <Space h="md" />
 
-            <NumberInput
+            <PortInput
-                placeholder="8080"
+                fullWidth
-                min={1}
-                max={65535}
                 label="Public Service port"
-                {...form.getInputProps('port')}
+                others={form.getInputProps('port')}
             />
 
             {form.values.chosenInternalPort?<>
                 <Space h="md" />
-                <NumberInput
+                <PortInput
-                    placeholder="8080"
+                    fullWidth
-                    min={1}
-                    max={65535}
                     label="Internal Proxy Port"
-                    {...form.getInputProps('internalPort')}
+                    others={form.getInputProps('internalPort')}
                 />
                 <Space h="sm" />
             </>:null}

frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx

@@ -5,6 +5,7 @@ import { ImCross } from "react-icons/im"
 import { FaLongArrowAltDown } from 'react-icons/fa';
 import { regexproxy, Service } from '../utils';
 import { okNotify } from '../../../js/utils';
+import PortInput from '../../PortInput';
 
 type InputForm = {
     internalPort:number,
@@ -58,27 +59,21 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
   return <Modal size="xl" title="Change Ports" opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
 
-
+            <PortInput
-
+                fullWidth
-            <NumberInput
-                placeholder="30001"
-                min={1}
-                max={65535}
                 label="Internal Proxy Port"
-                {...form.getInputProps('internalPort')}
+                others={form.getInputProps('internalPort')}
-            />    
+            />  
 
             <Space h="xl" />
             <Center><FaLongArrowAltDown size={50}/></Center>
             
-            <NumberInput
+            <PortInput
-                placeholder="8080"
+                fullWidth
-                min={1}
-                max={65535}
                 label="Public Service Port"
-                {...form.getInputProps('port')}
+                others={form.getInputProps('port')}
             />
-
+            
             <Space h="xl" />
 
             <Center><Title order={5}>The change of the ports will cause a temporarily shutdown of the service! ⚠️</Title></Center>

frontend/src/js/utils.tsx

@@ -11,7 +11,9 @@ var Buffer = require('buffer').Buffer
 export const eventUpdateName = "update-info"
 
 export const regex_ipv6 = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))?$";
-export const regex_ipv4 = "^([0-9]{1,3}\\.){3}[0-9]{1,3}(\\/([0-9]|[1-2][0-9]|3[0-2]))?$"
+export const regex_ipv6_no_cidr = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*$";
+export const regex_ipv4 = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/(3[0-2]|[1-2][0-9]|[0-9]))?$"
+export const regex_ipv4_no_cidr = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
 
 export async function getapi(path:string):Promise<any>{
 

frontend/src/pages/PortHijack/index.tsx

@@ -1,7 +1,6 @@
 import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
-import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../../components/PortHijack/ServiceRow';
 import { GeneralStats, porthijack, Service } from '../../components/PortHijack/utils';
 import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
@@ -13,7 +12,6 @@ function PortHijack() {
 
     const [services, setServices] = useState<Service[]>([]);
     const [loader, setLoader] = useState(true);
-    const navigator = useNavigate()
     const [open, setOpen] = useState(false);
     const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
@@ -42,36 +40,33 @@ function PortHijack() {
     const closeModal = () => {setOpen(false);}
 
     return <>
-    <Space h="sm" />
+        <Space h="sm" />
-    <div className='center-flex'>
+        <div className='center-flex'>
-        <Title order={4}>Hijack port to proxy</Title>
+            <Title order={4}>Hijack port to proxy</Title>
-        <div className='flex-spacer' />
+            <div className='flex-spacer' />
-        <Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
+            <Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
-        <Space w="xs" />
+            <Space w="xs" />
-        <Tooltip label="Add a new service" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened}>
+            <Tooltip label="Add a new service" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened}>
-            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
+                <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
-                onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+                    onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
-                onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
+                    onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
-        </Tooltip>
+            </Tooltip>
-    </div>
+        </div>
-    <div id="service-list" className="center-flex-row">
+        <div id="service-list" className="center-flex-row">
-        <LoadingOverlay visible={loader} />
+            <LoadingOverlay visible={loader} />
-        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
+            {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-            navigator("/nfregex/"+srv.service_id)
+                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
-        }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
+                <div className='center-flex'>
-            <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+                    <Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
-            <div className='center-flex'>
+                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
-                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
+                            onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
-                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                            onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
-                        onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
+                    </Tooltip>
-                        onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
+                </div>
-                </Tooltip>
+            </>}
-            </div>
+            <AddNewService opened={open} onClose={closeModal} />
-        </>}
+        </div>
         <AddNewService opened={open} onClose={closeModal} />
-    </div>
-    <AddNewService opened={open} onClose={closeModal} />
-
     </>
 }