Port hijack frontend finished

This commit is contained in:
DomySh
2022-08-12 18:51:50 +00:00
parent a8330a9516
commit 354770279b
8 changed files with 137 additions and 95 deletions

View File

@@ -40,7 +40,7 @@ export default function PortAndInterface({ form, int_name, port_name, label }:{
style={{width:"100%"}} style={{width:"100%"}}
/> />
<Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" /> <Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" />
<PortInput others={form.getInputProps(port_name)} /> <PortInput {...form.getInputProps(port_name)} />
</div> </div>
</> </>
} }

View File

@@ -1,4 +1,4 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete } from '@mantine/core'; import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/hooks'; import { useForm } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils'; import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';

View File

@@ -3,7 +3,7 @@
.row{ .row{
width: 95%; width: 95%;
padding: 30px 0px; padding: 15px 0px;
border-radius: 20px; border-radius: 20px;
margin: 10px; margin: 10px;
@extend .center-flex; @extend .center-flex;
@@ -16,3 +16,11 @@
margin-bottom: 13px; margin-bottom: 13px;
color:#FFF; color:#FFF;
} }
.portInput *{
color: #FFF;
font-weight: bold;
font-size: 1em;
margin-top: -1px;
text-decoration: underline;
}

View File

@@ -1,14 +1,16 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Divider, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa'; import { FaPlay, FaStop } from 'react-icons/fa';
import { porthijack, Service } from '../utils'; import { porthijack, Service } from '../utils';
import style from "./index.module.scss"; import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal'; import YesNoModal from '../../YesNoModal';
import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils'; import { errorNotify, okNotify } from '../../../js/utils';
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs'; import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi' import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm'; import RenameForm from './RenameForm';
import ChangeDestination from './ChangeDestination'; import ChangeDestination from './ChangeDestination';
import PortInput from '../../PortInput';
import { useForm } from '@mantine/hooks';
function ServiceRow({ service }:{ service:Service }) { function ServiceRow({ service }:{ service:Service }) {
@@ -19,6 +21,30 @@ function ServiceRow({ service }:{ service:Service }) {
const [deleteModal, setDeleteModal] = useState(false) const [deleteModal, setDeleteModal] = useState(false)
const [renameModal, setRenameModal] = useState(false) const [renameModal, setRenameModal] = useState(false)
const [changeDestModal, setChangeDestModal] = useState(false) const [changeDestModal, setChangeDestModal] = useState(false)
const portInputRef = React.createRef<HTMLInputElement>()
const form = useForm({
initialValues: { proxy_port:service.proxy_port },
validationRules:{ proxy_port: (value) => value > 0 && value < 65536 }
})
const onChangeProxyPort = ({proxy_port}:{proxy_port:number}) => {
if (proxy_port === service.proxy_port) return
if (proxy_port > 0 && proxy_port < 65536 && proxy_port !== service.public_port){
porthijack.changedestination(service.service_id, service.ip_dst, proxy_port).then( res => {
if (res.status === "ok"){
okNotify(`Service ${service.name} destination port has changed in ${ proxy_port }`, `Successfully changed destination port`)
}else{
errorNotify(`Error while changing the destination port of ${service.name}`,`Error: ${res.status}`)
}
}).catch( err => {
errorNotify("Request for changing port failed!",`Error: [ ${err} ]`)
})
}else{
form.setFieldValue("proxy_port", service.proxy_port)
errorNotify(`Error while changing the destination port of ${service.name}`,`Insert a valid port number`)
}
}
const stopService = async () => { const stopService = async () => {
setButtonLoading(true) setButtonLoading(true)
@@ -62,44 +88,49 @@ function ServiceRow({ service }:{ service:Service }) {
} }
return <> return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}> <div className={style.row} style={{width:"100%"}}>
<Grid.Col md={4} xs={12}> <Space w="xl" /><Space w="xl" />
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div> <div>
<div className="center-flex-row"> <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.public_port}</Badge></div> <div className="center-flex"><Title order={4} 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">
<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="md" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge>
<Badge style={{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge> <Space w="sm" />
<Space w="xl" /> <Badge color={service.proto === "tcp"?"cyan":"orange"} radius="sm" size="md" variant="filled">
{service.proto}
</Badge>
</div>
</div>
</div> </div>
</div></MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<Space h="xl" />
</MediaQuery>
</Grid.Col>
<Grid.Col className="center-flex" md={8} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' /> <div className='flex-spacer' />
</MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex-row"> <div className="center-flex-row">
<Badge color={service.ip_src.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_src} on {service.proto}</Badge> <Badge color="lime" radius="sm" size="md" variant="filled">
FROM {service.ip_src} : {service.public_port}
</Badge>
<Space h="sm" />
<Badge color="blue" radius="sm" size="md" variant="filled">
<div className="center-flex">
TO {service.ip_dst} :
<form onSubmit={form.onSubmit((v)=>portInputRef.current?.blur())}>
<PortInput
defaultValue={service.proxy_port}
size="xs"
variant="unstyled"
style={{
width: (6+form.values.proxy_port.toString().length*6.2) +"px"
}}
className={style.portInput}
onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
ref={portInputRef}
{...form.getInputProps("proxy_port")}
/>
</form>
</div> </div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}> </Badge>
<div className='flex-spacer' /> </div>
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}> <Space w="xl" /><Space w="xl" />
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex"> <div className="center-flex">
<Menu> <Menu>
<Menu.Label><b>Rename service</b></Menu.Label> <Menu.Label><b>Rename service</b></Menu.Label>
@@ -130,12 +161,8 @@ function ServiceRow({ service }:{ service:Service }) {
</Tooltip> </Tooltip>
</div> </div>
<Space w="xl" /><Space w="xl" /> <Space w="xl" /><Space w="xl" />
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
</Grid.Col> </div>
</Grid>
<hr style={{width:"100%"}}/> <hr style={{width:"100%"}}/>
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'

View File

@@ -1,17 +1,20 @@
import { NumberInput } from "@mantine/core" import { NumberInput, NumberInputProps } from "@mantine/core"
import React, { useState } from "react" import React, { useState } from "react"
export default function PortInput({ onInput, defaultValue, others, label, fullWidth }: interface PortInputProps extends NumberInputProps {
{ onInput?:React.FormEventHandler<HTMLInputElement>, defaultValue?:number, label?:React.ReactNode, others:any, fullWidth?:boolean }) { fullWidth?: boolean
const [oldValue, setOldValue] = useState<string>(defaultValue?defaultValue.toString():"") }
const PortInput = React.forwardRef<HTMLInputElement, PortInputProps>( (props, ref) => {
const [oldValue, setOldValue] = useState<string>(props.defaultValue?props.defaultValue.toString():"")
return <NumberInput return <NumberInput
variant="filled" variant={props.variant?props.variant:"filled"}
hideControls hideControls
placeholder="80" placeholder="80"
label={label} min={props.min?props.min:1}
min={1} max={props.max?props.min:65535}
max={65535} style={props.fullWidth?props.style:{ width: "75px", ...props.style }}
style={fullWidth?{}:{ width: "75px" }}
onInput={(e) => { onInput={(e) => {
const value = parseInt((e.target as HTMLInputElement).value) const value = parseInt((e.target as HTMLInputElement).value)
if (value > 65535) { if (value > 65535) {
@@ -22,8 +25,12 @@ export default function PortInput({ onInput, defaultValue, others, label, fullWi
(e.target as HTMLInputElement).value = value.toString() (e.target as HTMLInputElement).value = value.toString()
} }
setOldValue((e.target as HTMLInputElement).value) setOldValue((e.target as HTMLInputElement).value)
onInput?.(e) props.onInput?.(e)
}} }}
{...others} ref={ref}
{...props}
/> />
}
})
export default PortInput

View File

@@ -71,7 +71,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
<PortInput <PortInput
fullWidth fullWidth
label="Public Service port" label="Public Service port"
others={form.getInputProps('port')} {...form.getInputProps('port')}
/> />
{form.values.chosenInternalPort?<> {form.values.chosenInternalPort?<>
@@ -79,7 +79,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
<PortInput <PortInput
fullWidth fullWidth
label="Internal Proxy Port" label="Internal Proxy Port"
others={form.getInputProps('internalPort')} {...form.getInputProps('internalPort')}
/> />
<Space h="sm" /> <Space h="sm" />
</>:null} </>:null}

View File

@@ -1,4 +1,4 @@
import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core'; import { Button, Group, Space, Notification, Modal, Center, Title } from '@mantine/core';
import { useForm } from '@mantine/hooks'; import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { ImCross } from "react-icons/im" import { ImCross } from "react-icons/im"
@@ -62,7 +62,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
<PortInput <PortInput
fullWidth fullWidth
label="Internal Proxy Port" label="Internal Proxy Port"
others={form.getInputProps('internalPort')} {...form.getInputProps('internalPort')}
/> />
<Space h="xl" /> <Space h="xl" />
@@ -71,7 +71,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
<PortInput <PortInput
fullWidth fullWidth
label="Public Service Port" label="Public Service Port"
others={form.getInputProps('port')} {...form.getInputProps('port')}
/> />
<Space h="xl" /> <Space h="xl" />

View File

@@ -12,8 +12,8 @@ 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_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_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_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 = "^(([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 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>{ export async function getapi(path:string):Promise<any>{