0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Port hijack frontend progresses

Browse Source
This commit is contained in:
DomySh
2022-08-12 16:00:58 +00:00
parent 50b4871dfb
commit a8330a9516
15 changed files with 241 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -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

20
frontend/src/components/InlineEdit/index.module.scss
View File

@@ -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;
}

24
frontend/src/components/InlineEdit/index.tsx
View File

@@ -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;

46
frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -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<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" />
<Autocomplete
label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
placeholder="10.1.1.0/24"
itemComponent={AutoCompleteItem}
data={ipInterfaces}
{...form.getInputProps('ip_int')}
/>
<PortAndInterface form={form} int_name="ip_int" port_name="port" label={"Public IP Interface and port (ipv4/ipv6 + CIDR allowed)"} />
<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"

46
frontend/src/components/PortAndInterface.tsx Normal file
View File

@@ -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>
</>
}

72
frontend/src/components/PortHijack/AddNewService.tsx
View File

@@ -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<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:"",
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<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%"}}>
<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>
<PortAndInterface form={form} int_name="ip_src" port_name="public_port" label="Public IP Address and port (ipv4/ipv6)" />
<Space h="md" />
<NumberInput
placeholder="8080"
min={1}
max={65535}
label="Redirect to port"
{...form.getInputProps('proxy_port')}
/>
<PortAndInterface form={form} int_name="ip_dst" port_name="proxy_port" label="Proxy/Internal IP Address and port (ipv4/ipv6)" />
<Space h="md" />
<div className='center-flex'>
<Switch
label="Auto-Start Service"

71
frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx Normal file
View File

@@ -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;

4
frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx
View File

@@ -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"

38
frontend/src/components/PortHijack/ServiceRow/index.tsx
View File

@@ -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}
/>
</>
}

11
frontend/src/components/PortHijack/utils.ts
View File

@@ -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;
}
}

29
frontend/src/components/PortInput.tsx Normal file
View File

@@ -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}
/>
}

19
frontend/src/components/RegexProxy/AddNewService.tsx
View File

@@ -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
placeholder="8080"
min={1}
max={65535}
<PortInput
fullWidth
label="Public Service port"
{...form.getInputProps('port')}
others={form.getInputProps('port')}
/>
{form.values.chosenInternalPort?<>
<Space h="md" />
<NumberInput
placeholder="8080"
min={1}
max={65535}
<PortInput
fullWidth
label="Internal Proxy Port"
{...form.getInputProps('internalPort')}
others={form.getInputProps('internalPort')}
/>
<Space h="sm" />
</>:null}

23
frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
View File

@@ -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)}>
<NumberInput
placeholder="30001"
min={1}
max={65535}
<PortInput
fullWidth
label="Internal Proxy Port"
{...form.getInputProps('internalPort')}
/>
others={form.getInputProps('internalPort')}
/>
<Space h="xl" />
<Center><FaLongArrowAltDown size={50}/></Center>
<NumberInput
placeholder="8080"
min={1}
max={65535}
<PortInput
fullWidth
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>

4
frontend/src/js/utils.tsx
View File

@@ -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>{

57
frontend/src/pages/PortHijack/index.tsx
View File

@@ -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" />
<div className='center-flex'>
<Title order={4}>Hijack port to proxy</Title>
<div className='flex-spacer' />
<Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<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"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
</div>
<div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/nfregex/"+srv.service_id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<Space h="sm" />
<div className='center-flex'>
<Title order={4}>Hijack port to proxy</Title>
<div className='flex-spacer' />
<Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<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"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
</div>
<div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{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>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<AddNewService opened={open} onClose={closeModal} />
</div>
<AddNewService opened={open} onClose={closeModal} />
</div>
<AddNewService opened={open} onClose={closeModal} />
</>
}