Port hijack frontend finished

frontend/src/components/PortAndInterface.tsx

@@ -40,7 +40,7 @@ export default function PortAndInterface({ form, int_name, port_name, label }:{
                 style={{width:"100%"}}
             />
             <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>
     </>
 }

frontend/src/components/PortHijack/AddNewService.tsx

@@ -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 React, { useState } from 'react';
 import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';

frontend/src/components/PortHijack/ServiceRow/index.module.scss

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

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

@@ -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 { FaPlay, FaStop } from 'react-icons/fa';
 import { porthijack, Service } from '../utils';
 import style from "./index.module.scss";
 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 { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
 import ChangeDestination from './ChangeDestination';
+import PortInput from '../../PortInput';
+import { useForm } from '@mantine/hooks';
 
 function ServiceRow({ service }:{ service:Service }) {
 
@@ -19,6 +21,30 @@ function ServiceRow({ service }:{ service:Service }) {
     const [deleteModal, setDeleteModal] = useState(false)
     const [renameModal, setRenameModal] = 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 () => {
         setButtonLoading(true)
@@ -62,80 +88,81 @@ function ServiceRow({ service }:{ service:Service }) {
     }
 
     return <>
-        <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
-            <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.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.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>
-                </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' />
-                </MediaQuery>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
-                
+        <div className={style.row} style={{width:"100%"}}>
+            <Space w="xl" /><Space w="xl" />
+            <div>
                 <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>
+                    <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>
+                    <div className="center-flex">
+                        <Badge color={status_color} radius="sm" size="md" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge>
+                        <Space w="sm" />
+                        <Badge color={service.proto === "tcp"?"cyan":"orange"} radius="sm" size="md" variant="filled">
+                            {service.proto}
+                        </Badge>
+                    </div>
                 </div>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
-                <div className="center-flex">
-                    <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>
-                    </Menu>
-                    <Space w="md"/>                        
-                    <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
-                        <ActionIcon color="red" loading={buttonLoading}
-                        onClick={stopService} size="xl" radius="md" variant="filled"
-                        disabled={!service.active}
-                        aria-describedby="tooltip-stop-id"
-                        onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
-                        onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
-                            <FaStop size="20px" />
-                        </ActionIcon>
-                    </Tooltip>
-                    <Space w="md"/>
-                    <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} transitionTimingFunction="ease" color="teal">
-                        <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
-                                    variant="filled" disabled={service.active}>
-                            <FaPlay size="20px" />
-                        </ActionIcon>
-                    </Tooltip>
-                </div>
-                <Space w="xl" /><Space w="xl" />
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+            </div>
+        
+            <div className='flex-spacer' />
+            <div className="center-flex-row">
+                <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>
+                </Badge>
+            </div>
+
+            <Space w="xl" /><Space w="xl" />
+            <div className="center-flex">
+                <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>
+                </Menu>
+                <Space w="md"/>                        
+                <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
+                    <ActionIcon color="red" loading={buttonLoading}
+                    onClick={stopService} size="xl" radius="md" variant="filled"
+                    disabled={!service.active}
+                    aria-describedby="tooltip-stop-id"
+                    onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
+                    onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
+                        <FaStop size="20px" />
+                    </ActionIcon>
+                </Tooltip>
+                <Space w="md"/>
+                <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} transitionTimingFunction="ease" color="teal">
+                    <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
+                                variant="filled" disabled={service.active}>
+                        <FaPlay size="20px" />
+                    </ActionIcon>
+                </Tooltip>
+            </div>
+            <Space w="xl" /><Space w="xl" />
                 
-            </Grid.Col>
-        </Grid>
+        </div>
         <hr style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'

frontend/src/components/PortInput.tsx

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

frontend/src/components/RegexProxy/AddNewService.tsx

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

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

@@ -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 React, { useEffect, useState } from 'react';
 import { ImCross } from "react-icons/im"
@@ -62,7 +62,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
             <PortInput
                 fullWidth
                 label="Internal Proxy Port"
-                others={form.getInputProps('internalPort')}
+                {...form.getInputProps('internalPort')}
             />  
 
             <Space h="xl" />
@@ -71,7 +71,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
             <PortInput
                 fullWidth
                 label="Public Service Port"
-                others={form.getInputProps('port')}
+                {...form.getInputProps('port')}
             />
             
             <Space h="xl" />