Starting inserting protocol and ip interface in services

frontend/src/components/AddNewService.tsx

@@ -1,13 +1,14 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { addservice, okNotify, startservice } from '../js/utils';
+import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6 } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
 type ServiceAddForm = {
     name:string,
     port:number,
-    ipv6:boolean,
+    proto:string,
+    ip_int:string,
     autostart: boolean,
 }
 
@@ -17,12 +18,15 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         initialValues: {
             name:"",
             port:8080,
-            ipv6:false,
+            ip_int:"127.0.0.1",
+            proto:"tcp",
             autostart: true
         },
         validationRules:{
             name: (value) => value !== ""?true:false,
             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
         }
     })
 
@@ -35,9 +39,10 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
  
-    const submitRequest = ({ name, port, autostart, ipv6 }:ServiceAddForm) =>{
+    const submitRequest = ({ name, port, autostart, proto, ip_int }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        addservice({name, port, ipv6}).then( res => {
+        const ipv6 = ip_int.match(regex_ipv4)?false:true
+        addservice({name, port, ipv6, proto, ip_int }).then( res => {
             if (res.status === "ok" && res.service_id){
                 setSubmitLoading(false)
                 close();
@@ -53,7 +58,6 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         })
     }    
 
-
   return <Modal size="xl" title="Add a new service" opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
             <TextInput
@@ -63,6 +67,14 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             />
             <Space h="md" />
 
+            <TextInput
+                label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
+                placeholder="10.40.20.0/8"
+                {...form.getInputProps('ip_int')}
+            />
+
+            <Space h="md" />
+
             <NumberInput
                 placeholder="8080"
                 min={1}
@@ -70,20 +82,23 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 label="Public Service port"
                 {...form.getInputProps('port')}
             />
+            
+            <Space h="md" />
+
+            <SegmentedControl
+                data={[
+                    { label: 'TCP', value: 'tcp' },
+                    { label: 'UDP', value: 'udp' },
+                ]}
+                {...form.getInputProps('proto')}
+            />
 
             <Space h="xl" />
 
             <Switch
                 label="Auto-Start Service"
                 {...form.getInputProps('autostart', { type: 'checkbox' })}
-            />
-
-            <Space h="sm" />
-
-            <Switch
-                label="Filter on Ipv6"
-                {...form.getInputProps('ipv6', { type: 'checkbox' })}
-            />
+            />        
 
             <Group position="right" mt="md">
                 <Button loading={submitLoading} type="submit">Add Service</Button>

frontend/src/js/models.ts

@@ -18,7 +18,8 @@ export type ServiceAddForm = {
     name:string,
     port:number,
     ipv6:boolean,
-    internalPort?:number
+    proto:string,
+    ip_int:string,
 }
 
 export type ServiceAddResponse = {

frontend/src/js/utils.tsx

@@ -7,6 +7,8 @@ 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 async function getapi(path:string):Promise<any>{
 
@@ -145,6 +147,7 @@ export async function serviceregexlist(service_id:string){
 
 
 
+
 export function errorNotify(title:string, description:string ){
     showNotification({
         autoClose: 2000,