React Interface v3

frontend/src/components/AddNewRegex.tsx

@@ -1,33 +1,60 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Switch, NativeSelect } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { ServiceAddForm } from '../js/models';
-import { addservice } from '../js/utils';
+import { RegexAddForm, ServiceAddForm } from '../js/models';
+import { addregex, addservice, b64encode, validateRegex } from '../js/utils';
 import { ImCross } from "react-icons/im"
+import FilterTypeSelector from './FilterTypeSelector';
 
-function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:string }) {
 
-    return <></>
-    /*    
+type RegexAddInfo = {
+    regex:string,
+    type:string,
+    mode:string,
+    regex_exact:boolean,
+    percentage_encoding:boolean
+}
+
+function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:string }) { 
 
     const form = useForm({
         initialValues: {
             regex:"",
-            is_blacklist:true,
-            mode:"B"
+            type:"blacklist",
+            mode:"C <-> S",
+            regex_exact:false,
+            percentage_encoding:false
         },
         validationRules:{
-            regex: (value) => value !== ""?true:false,
-            port: (value) => value>0 && value<65536
+            regex: (value) => value !== "" && validateRegex(value),
+            type: (value) => ["blacklist","whitelist"].includes(value),
+            mode: (value) => ['C -> S', 'S -> C', 'C <-> S'].includes(value)
         }
     })
 
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
 
-    const submitRequest = (values:ServiceAddForm) =>{
+    const submitRequest = (values:RegexAddInfo) => {
         setSubmitLoading(true)
-        addservice(values).then( res => {
+        const filter_mode = ({'C -> S':'C', 'S -> C':'S', 'C <-> S':'B'}[values.mode])
+
+        let final_regex = values.regex
+        if (values.percentage_encoding){
+            final_regex = decodeURIComponent(final_regex)
+        }
+        if(!values.regex_exact){
+            final_regex = ".*"+final_regex+".*"
+        }
+
+        const request:RegexAddForm = {
+            is_blacklist:values.type !== "whitelist",
+            service_id: service,
+            mode: filter_mode?filter_mode:"B",
+            regex: b64encode(final_regex)
+        }
+        setSubmitLoading(false)
+        addregex(request).then( res => {
             if (!res){
                 setSubmitLoading(false)
                 closePopup();
@@ -39,32 +66,44 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
             setSubmitLoading(false)
             setError("Request Failed! [ "+err+" ]")
         })
+        
     }    
 
 
   return <form onSubmit={form.onSubmit(submitRequest)}>
         <TextInput
             required
-            label="Service name"
-            placeholder="Challenge 01"
-            {...form.getInputProps('name')}
+            label="Regex"
+            placeholder="[A-Z0-9]{31}="
+            {...form.getInputProps('regex')}
         />
         <Space h="md" />
-
-        <NumberInput
+        <Switch
+            label="Use percentage encoding for binary values"
+            {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
+        />
+        <Space h="md" />
+        <Switch
+            label="Match the exactly the regex"
+            {...form.getInputProps('regex_exact', { type: 'checkbox' })}
+        />
+        <Space h="md" />
+        <NativeSelect
+            data={['C -> S', 'S -> C', 'C <-> S']}
+            label="Choose the source of the packets to filter"
+            variant="filled"
             required
-            placeholder="8080"
-            min={1}
-            max={65535}
-            label="Service port"
-            {...form.getInputProps('port')}
+            {...form.getInputProps('mode')}
         />
-
-
         <Space h="md" />
-
+        <FilterTypeSelector
+            size="md"
+            color="gray"
+            required
+            {...form.getInputProps('type')}
+        />
         <Group position="right" mt="md">
-            <Button loading={submitLoading} type="submit">Add Service</Button>
+            <Button loading={submitLoading} type="submit">Add Filter</Button>
         </Group>
 
         <Space h="md" />
@@ -75,7 +114,6 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
         </Notification><Space h="md" /></>:null}
         
     </form>
-    */
 
 }