Change port front and backend finished

backend/app.py

@@ -206,6 +206,8 @@ async def change_port(service_id: str, change_port:ChangePortForm, auth: bool =
         if not change_port.port is None:
             sql_inj+=" public_port = ? "
             query.append(change_port.port)
+        if not change_port.port is None and not change_port.internalPort is None:
+            sql_inj += ","
         if not change_port.internalPort is None:
             sql_inj+=" internal_port = ? "
             query.append(change_port.internalPort)

frontend/src/components/ServiceRow/ChangePortModal.tsx

@@ -1,21 +1,33 @@
-import { Button, Group, NumberInput, Space, Notification, Modal } from '@mantine/core';
+import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { Service } from '../../js/models';
+import { BsArrowDownSquareFill } from 'react-icons/bs';
 
 type InputForm = {
     internalPort:number,
+    port:number
 }
 
-function ChangeInternalPort({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
+function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
-        initialValues: { internalPort:service.internal_port },
+        initialValues: {
-        validationRules:{ internalPort: (value) => value>0 && value<65536 && value != service.internal_port }
+            internalPort: service.internal_port,
+            port: service.public_port
+        },
+        validationRules:{
+            internalPort: (value) => value>0 && value<65536,
+            port: (value) => value>0 && value<65536 
+        }
     })
 
+    useEffect(()=>{
+        form.setValues({internalPort: service.internal_port, port:service.public_port})
+    },[opened])
+
     const close = () =>{
         onClose()
         form.reset()
@@ -44,19 +56,40 @@ function ChangeInternalPort({ service, opened, onClose }:{ service:Service, open
     }    
 
 
-  return <Modal size="xl" title="Change Internal Proxy Port" opened={opened} onClose={close} closeOnClickOutside={false} centered>
+  return <Modal size="xl" title="Change Ports" opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
 
+
+
             <NumberInput
-                placeholder="8080"
+                placeholder="30001"
                 min={1}
                 max={65535}
                 label="Internal Proxy Port"
                 {...form.getInputProps('internalPort')}
             />    
 
+            <Space h="xl" />
+            <Center><BsArrowDownSquareFill size={50}/></Center>
+            
+            <NumberInput
+                placeholder="8080"
+                min={1}
+                max={65535}
+                label="Public Service Port"
+                {...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>
+
+            <Space h="md" />
+
             <Group position="right" mt="md">
-                <Button loading={submitLoading} disabled={service.internal_port === form.values.internalPort} type="submit">Change Port</Button>
+                <Button loading={submitLoading} disabled={
+                    service.internal_port === form.values.internalPort && service.public_port === form.values.port
+                    } type="submit">Change Port</Button>
             </Group>
 
             <Space h="md" />
@@ -71,4 +104,4 @@ function ChangeInternalPort({ service, opened, onClose }:{ service:Service, open
 
 }
 
-export default ChangeInternalPort;
+export default ChangePortModal;

frontend/src/components/ServiceRow/index.tsx

@@ -9,7 +9,7 @@ import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice,
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
-import ChangeInternalPort from './ChangeInternalPort';
+import ChangePortModal from './ChangePortModal';
 
 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -27,7 +27,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
     const [changePortModal, setChangePortModal] = useState(false)
-    const [chooseInternalPortModal, setChooseInternalPortModal] = useState(false)
+    const [choosePortModal, setChoosePortModal] = useState(false)
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -146,14 +146,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                         <Menu.Label><b>Rename service</b></Menu.Label>
                         <Menu.Item icon={<BiRename size={18} />} onClick={()=>{}}>Change service name</Menu.Item>
                         <Divider />
-                        <Menu.Label><b>Public proxy port</b></Menu.Label>
+                        <Menu.Label><b>Change ports</b></Menu.Label>
-                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>{}}>Change port</Menu.Item>
+                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChoosePortModal(true)}>Change port</Menu.Item>
+                        <Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen proxy port</Menu.Item>
                         <Divider />
-                        <Menu.Label><b>Internal proxy port</b></Menu.Label>
+                        <Menu.Label><b>Danger zone</b></Menu.Label>
-                        <Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen port</Menu.Item>
-                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChooseInternalPortModal(true)}>Choose port</Menu.Item>
-                        <Divider />
-                        <Menu.Label><b>Delete service</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
                     </Menu>
                     <Space w="md"/>
@@ -219,7 +216,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             action={changePort}
             opened={changePortModal}
         />
-        <ChangeInternalPort service={service} onClose={()=> setChooseInternalPortModal(false)} opened={chooseInternalPortModal} />
+        <ChangePortModal service={service} onClose={()=> setChoosePortModal(false)} opened={choosePortModal} />
     </>
 }