From a8330a951684500914db74b2f3a9880aefd191f2 Mon Sep 17 00:00:00 2001 From: DomySh Date: Fri, 12 Aug 2022 16:00:58 +0000 Subject: [PATCH] Port hijack frontend progresses --- README.md | 1 - .../components/InlineEdit/index.module.scss | 20 ------ frontend/src/components/InlineEdit/index.tsx | 24 ------- .../src/components/NFRegex/AddNewService.tsx | 46 ++---------- frontend/src/components/PortAndInterface.tsx | 46 ++++++++++++ .../components/PortHijack/AddNewService.tsx | 72 ++++--------------- .../ServiceRow/ChangeDestination.tsx | 71 ++++++++++++++++++ .../PortHijack/ServiceRow/RenameForm.tsx | 4 +- .../PortHijack/ServiceRow/index.tsx | 38 +++++----- frontend/src/components/PortHijack/utils.ts | 11 +-- frontend/src/components/PortInput.tsx | 29 ++++++++ .../components/RegexProxy/AddNewService.tsx | 19 +++-- .../RegexProxy/ServiceRow/ChangePortModal.tsx | 23 +++--- frontend/src/js/utils.tsx | 4 +- frontend/src/pages/PortHijack/index.tsx | 57 +++++++-------- 15 files changed, 241 insertions(+), 224 deletions(-) delete mode 100755 frontend/src/components/InlineEdit/index.module.scss delete mode 100755 frontend/src/components/InlineEdit/index.tsx create mode 100644 frontend/src/components/PortAndInterface.tsx create mode 100644 frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx create mode 100644 frontend/src/components/PortInput.tsx diff --git a/README.md b/README.md index d1cdc4c..5bfda25 100644 --- a/README.md +++ b/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 diff --git a/frontend/src/components/InlineEdit/index.module.scss b/frontend/src/components/InlineEdit/index.module.scss deleted file mode 100755 index 80d14cf..0000000 --- a/frontend/src/components/InlineEdit/index.module.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/components/InlineEdit/index.tsx b/frontend/src/components/InlineEdit/index.tsx deleted file mode 100755 index cda39e4..0000000 --- a/frontend/src/components/InlineEdit/index.tsx +++ /dev/null @@ -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 ( - { - if (event.key === "Enter" || event.key === "Escape") { - event.target.blur(); - } - }} - onBlur={(event) => { - setValue((event.target as HTMLSpanElement).textContent ?? ""); - }} - {...others} - /> - ) -} - -export default InlineEdit; diff --git a/frontend/src/components/NFRegex/AddNewService.tsx b/frontend/src/components/NFRegex/AddNewService.tsx index a102789..f05810c 100755 --- a/frontend/src/components/NFRegex/AddNewService.tsx +++ b/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 { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils'; +import React, { useState } from 'react'; +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( - ({ label, value, ...props }: ItemProps, ref) =>
- ( {label} ) -{">"} {value} -
- ); - 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([]); - - 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')} /> - - - + - - - - -
( + ({ label, value, ...props }: ItemProps, ref) =>
+ ( {label} ) -{">"} {value} +
+); + + +export default function PortAndInterface({ form, int_name, port_name, label }:{ form:UseForm, int_name:string, port_name:string, label?:string }) { + + const [ipInterfaces, setIpInterfaces] = useState([]); + + useEffect(()=>{ + getipinterfaces().then(data => { + setIpInterfaces(data.map(item => ({label:item.name, value:item.addr}))); + }) + },[]) + + return <> + {label?<> + {label} + :null} + +
+ + : + +
+ +} \ No newline at end of file diff --git a/frontend/src/components/PortHijack/AddNewService.tsx b/frontend/src/components/PortHijack/AddNewService.tsx index 832ea99..e850523 100755 --- a/frontend/src/components/PortHijack/AddNewService.tsx +++ b/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 { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils'; +import React, { useState } from 'react'; +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( - ({ label, value, ...props }: ItemProps, ref) =>
- ( {label} ) -{">"} {value} -
- ); - 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:"", - autostart: true, + ip_src:"", + 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([]); - - 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(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')} /> -
- - - : - - -
- + - - - + -
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(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 +
+ + + + + + + + {error?<> + } color="red" onClose={()=>{setError(null)}}> + Error: {error} + :null} + + +
+ +} + +export default ChangeDestination; diff --git a/frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx b/frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx index 07dd300..fb5157d 100644 --- a/frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx +++ b/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 + return
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 })
-
{service.name} :{service.port}
+
{service.name} :{service.public_port}
Status: {service.active?"ENABLED":"DISABLED"}
-
{service.name} :{service.port}
+
{service.name} :{service.public_port}
Status: {service.active?"ENABLED":"DISABLED"}
@@ -91,7 +92,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
- {service.ip_int} on {service.proto} + {service.ip_src} on {service.proto}
@@ -103,6 +104,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) Rename service } onClick={()=>setRenameModal(true)}>Change service name + Change destination + } onClick={()=>setChangeDestModal(true)}>Change hijacking destination Danger zone } onClick={()=>setDeleteModal(true)}>Delete Service @@ -127,10 +130,6 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
- {onClick?
- - -
:null} <> @@ -140,7 +139,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
setDeleteModal(false) } action={deleteService} opened={deleteModal} @@ -150,6 +149,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) opened={renameModal} service={service} /> + setChangeDestModal(false)} + opened={changeDestModal} + service={service} + /> } diff --git a/frontend/src/components/PortHijack/utils.ts b/frontend/src/components/PortHijack/utils.ts index 9bd2234..12cbe4a 100755 --- a/frontend/src/components/PortHijack/utils.ts +++ b/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) => { - return await postapi(`porthijack/service/${service_id}/changeport`, {proxy_port}) as ServerResponse; + changedestination: async (service_id:string, ip_dst:string, proxy_port:number) => { + return await postapi(`porthijack/service/${service_id}/change-destination`, {proxy_port, ip_dst}) as ServerResponse; } } \ No newline at end of file diff --git a/frontend/src/components/PortInput.tsx b/frontend/src/components/PortInput.tsx new file mode 100644 index 0000000..0d40894 --- /dev/null +++ b/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, defaultValue?:number, label?:React.ReactNode, others:any, fullWidth?:boolean }) { + const [oldValue, setOldValue] = useState(defaultValue?defaultValue.toString():"") + return { + 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} + /> +} \ No newline at end of file diff --git a/frontend/src/components/RegexProxy/AddNewService.tsx b/frontend/src/components/RegexProxy/AddNewService.tsx index 68ae7a6..c20de9c 100755 --- a/frontend/src/components/RegexProxy/AddNewService.tsx +++ b/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 }) /> - {form.values.chosenInternalPort?<> - :null} diff --git a/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx b/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx index d7c618e..aec91c0 100755 --- a/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx +++ b/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 - - - + others={form.getInputProps('internalPort')} + />
- - +
The change of the ports will cause a temporarily shutdown of the service! ⚠️
diff --git a/frontend/src/js/utils.tsx b/frontend/src/js/utils.tsx index 7141e49..cf44275 100755 --- a/frontend/src/js/utils.tsx +++ b/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{ diff --git a/frontend/src/pages/PortHijack/index.tsx b/frontend/src/pages/PortHijack/index.tsx index 3712d32..a646f04 100755 --- a/frontend/src/pages/PortHijack/index.tsx +++ b/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([]); 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 <> - -
- Hijack port to proxy -
- Services: {generalStats.services} - - - setOpen(true)} size="lg" radius="md" variant="filled" - onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} - onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> - -
-
- - {services.length > 0?services.map( srv => { - navigator("/nfregex/"+srv.service_id) - }} />):<> No services found! Add one clicking the "+" buttons - -
- - setOpen(true)} size="xl" radius="md" variant="filled" - onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)} - onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}> - -
- } + +
+ Hijack port to proxy +
+ Services: {generalStats.services} + + + setOpen(true)} size="lg" radius="md" variant="filled" + onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} + onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> + +
+
+ + {services.length > 0?services.map( srv => ):<> No services found! Add one clicking the "+" buttons + +
+ + setOpen(true)} size="xl" radius="md" variant="filled" + onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)} + onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}> + +
+ } + +
-
- - }