PCRE2 standard applied

frontend/src/components/AddNewRegex.tsx

@@ -1,8 +1,8 @@
-import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip, Modal } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
-import { addregex, b64encode, fireUpdateRequest, getBinaryRegex, getHumanReadableRegex, okNotify } from '../js/utils';
+import { addregex, b64decode, b64encode, fireUpdateRequest, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 import FilterTypeSelector from './FilterTypeSelector';
 
@@ -12,7 +12,7 @@ type RegexAddInfo = {
     type:string,
     mode:string,
     is_case_insensitive:boolean,
-    percentage_encoding:boolean
+    deactive:boolean
 }
 
 function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) { 
@@ -23,7 +23,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
             type:"blacklist",
             mode:"C -> S",
             is_case_insensitive:false,
-            percentage_encoding:false
+            deactive:false
         },
         validationRules:{
             regex: (value) => value !== "",
@@ -45,17 +45,13 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
         setSubmitLoading(true)
         const filter_mode = ({'C -> S':'C', 'S -> C':'S', 'C <-> S':'B'}[values.mode])
 
-        let final_regex:string|number[] = values.regex
-        if (values.percentage_encoding){
-            final_regex = getBinaryRegex(final_regex)
-        }
-
         const request:RegexAddForm = {
             is_blacklist:values.type !== "whitelist",
             is_case_sensitive: !values.is_case_insensitive,
             service_id: service,
             mode: filter_mode?filter_mode:"B",
-            regex: b64encode(final_regex)
+            regex: b64encode(values.regex),
+            active: !values.deactive
         }
         setSubmitLoading(false)
         addregex(request).then( res => {
@@ -63,7 +59,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
                 setSubmitLoading(false)
                 close();
                 fireUpdateRequest();
-                okNotify(`Regex ${getHumanReadableRegex(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
+                okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
             }else if (res.toLowerCase() === "invalid regex"){
                 setSubmitLoading(false)
                 form.setFieldError("regex", "Invalid Regex")
@@ -87,19 +83,16 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
                 {...form.getInputProps('regex')}
             />
             <Space h="md" />
-            <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-right" openDelay={500} transitionDuration={500} transitionTimingFunction="ease"  
-                    color="gray" wrapLines width={220} withArrow position='right' gutter={20}>      
-                <Switch
-                    label="Use percentage encoding for binary values"
-                    {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
-                />
-            </Tooltip>
-            <Space h="md" />
             <Switch
                 label="Case insensitive"
                 {...form.getInputProps('is_case_insensitive', { type: 'checkbox' })}
             />
             <Space h="md" />
+            <Switch
+                label="Deactivate"
+                {...form.getInputProps('deactive', { type: 'checkbox' })}
+            />
+            <Space h="md" />
             <NativeSelect
                 data={['C -> S', 'S -> C', 'C <-> S']}
                 label="Choose the source of the packets to filter"

frontend/src/components/RegexView/index.tsx

@@ -1,7 +1,7 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { RegexFilter } from '../../js/models';
-import { activateregex, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, getHumanReadableRegex, okNotify } from '../../js/utils';
+import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, okNotify } from '../../js/utils';
 import style from "./RegexView.module.scss";
 import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
@@ -15,7 +15,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
                       regexInfo.mode === "S"? "S -> C":
                       regexInfo.mode === "B"? "S <-> C": "🤔"
 
-  let regex_expr = getHumanReadableRegex(regexInfo.regex);
+  let regex_expr = b64decode(regexInfo.regex);
 
   const [deleteModal, setDeleteModal] = useState(false);
   const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);

frontend/src/components/ServiceRow/ChangePortModal.tsx

@@ -4,7 +4,7 @@ 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';
+import { FaLongArrowAltDown } from 'react-icons/fa';
 
 type InputForm = {
     internalPort:number,
@@ -70,7 +70,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
             />    
 
             <Space h="xl" />
-            <Center><BsArrowDownSquareFill size={50}/></Center>
+            <Center><FaLongArrowAltDown size={50}/></Center>
             
             <NumberInput
                 placeholder="8080"

frontend/src/js/models.ts

@@ -74,5 +74,6 @@ export type RegexAddForm = {
     regex:string,
     is_case_sensitive:boolean,
     is_blacklist:boolean,
-    mode:string // C->S S->C BOTH
+    mode:string, // C->S S->C BOTH,
+    active: boolean
 }

frontend/src/js/utils.tsx

@@ -152,50 +152,7 @@ export async function serviceregexlist(service_id:string){
     return await getapi(`service/${service_id}/regexes`) as RegexFilter[];
 }
 
-const unescapedChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!\"#$&'()*+,-./:;<=>?@[\\]^_`{|}~ ";
 
-export function getHumanReadableRegex(regexB64:string){
-    const regex = Buffer.from(regexB64, "base64")
-    let res = ""
-    for (let i=0; i < regex.length; i++){
-        const byte = String.fromCharCode(regex[i]);
-        if (unescapedChars.includes(byte)){
-            res+=byte
-        }else{
-            let hex_data = regex[i].toString(16)
-            if (hex_data.length === 1) hex_data = "0"+hex_data
-            res+="%"+hex_data
-        }
-    }
-    return res
-}
-
-const hexChars = "0123456789abcdefABCDEF"
-
-export function getBinaryRegex(regexPercentageEncoded:string):number[]{
-    const regex = Buffer.from(regexPercentageEncoded)
-    let res = []
-    for (let i=0; i < regex.length; i++){
-        const byte = String.fromCharCode(regex[i]);
-        if ("%" === byte){
-            if(i+2 < regex.length){
-                const byte_1 = String.fromCharCode(regex[i+1]);
-                const byte_2 = String.fromCharCode(regex[i+2]);
-                if(hexChars.includes(byte_1) && hexChars.includes(byte_2)){
-                    res.push(parseInt(byte_1+byte_2,16))
-                    i += 2
-                }else{
-                    res.push(regex[i])
-                }
-            }else{
-                res.push(regex[i])
-            }
-        }else{
-            res.push(regex[i])
-        }
-    }
-    return res
-}
 
 export function errorNotify(title:string, description:string ){
     showNotification({
@@ -220,3 +177,7 @@ export function okNotify(title:string, description:string ){
 export function b64encode(data:number[]|string){
     return Buffer.from(data).toString('base64')
 }
+
+export function b64decode(regexB64:string){
+    return Buffer.from(regexB64, "base64").toString()
+}