Port hijack frontend progresses

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

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