Autosuggestion for network interfaces ips

frontend/build/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.08225a85.css",
-    "main.js": "/static/js/main.6bded0d7.js",
+    "main.js": "/static/js/main.10378d73.js",
     "index.html": "/index.html",
     "main.08225a85.css.map": "/static/css/main.08225a85.css.map",
-    "main.6bded0d7.js.map": "/static/js/main.6bded0d7.js.map"
+    "main.10378d73.js.map": "/static/js/main.10378d73.js.map"
   },
   "entrypoints": [
     "static/css/main.08225a85.css",
-    "static/js/main.6bded0d7.js"
+    "static/js/main.10378d73.js"
   ]
 }

frontend/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#FFFFFFFF"/><meta name="description" content="Firegex by Pwnzer0tt1"/><title>Firegex</title><script defer="defer" src="/static/js/main.6bded0d7.js"></script><link href="/static/css/main.08225a85.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#FFFFFFFF"/><meta name="description" content="Firegex by Pwnzer0tt1"/><title>Firegex</title><script defer="defer" src="/static/js/main.10378d73.js"></script><link href="/static/css/main.08225a85.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

frontend/src/components/AddNewService.tsx

@@ -1,7 +1,7 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, SelectItemProps, Autocomplete, AutocompleteItem } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6 } from '../js/utils';
+import React, { useEffect, useState } from 'react';
+import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6, getipinterfaces } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
 type ServiceAddForm = {
@@ -12,13 +12,23 @@ type ServiceAddForm = {
     autostart: boolean,
 }
 
+interface ItemProps extends AutocompleteItem {
+    label: string;
+}
+
+const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
+    ({ label, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
+            ( <b>{label}</b> ) -{">"} <b>{value}</b> 
+    </div>
+  );
+
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
         initialValues: {
             name:"",
             port:8080,
-            ip_int:"127.0.0.1",
+            ip_int:"",
             proto:"tcp",
             autostart: true
         },
@@ -30,6 +40,14 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         }
     })
 
+    const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
+
+    useEffect(()=>{
+        getipinterfaces().then(data => {
+            setIpInterfaces(data.map(item => ({label:item.name, value:item.addr})));
+        })
+    },[])
+
     const close = () =>{
         onClose()
         form.reset()
@@ -55,7 +73,8 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             setSubmitLoading(false)
             setError("Request Failed! [ "+err+" ]")
         })
-    }    
+    }
+
 
   return <Modal size="xl" title="Add a new service" opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
@@ -66,9 +85,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             />
             <Space h="md" />
 
-            <TextInput
+            <Autocomplete
                 label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
                 placeholder="10.1.1.0/24"
+                itemComponent={AutoCompleteItem}
+                data={ipInterfaces}
                 {...form.getInputProps('ip_int')}
             />
 

frontend/src/js/models.ts

@@ -74,4 +74,9 @@ export type RegexAddForm = {
     is_blacklist:boolean,
     mode:string, // C->S S->C BOTH,
     active: boolean
+}
+
+export type IpInterface = {
+    name:string,
+    addr:string
 }

frontend/src/js/utils.tsx

@@ -1,7 +1,7 @@
 import { showNotification } from "@mantine/notifications";
 import { ImCross } from "react-icons/im";
 import { TiTick } from "react-icons/ti"
-import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServiceAddResponse } from "./models";
+import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServiceAddResponse, IpInterface } from "./models";
 
 var Buffer = require('buffer').Buffer 
 
@@ -54,6 +54,10 @@ export function fireUpdateRequest(){
     window.dispatchEvent(new Event(eventUpdateName))
 }
 
+export async function getipinterfaces(){
+    return await getapi("interfaces") as IpInterface[];
+}
+
 export async function getstatus(){
     return await getapi(`status`) as ServerStatusResponse;
 }