From c639b434481901dd77139d5bbc96e89e76c5208e Mon Sep 17 00:00:00 2001
From: DomySh <me@domysh.com>
Date: Wed, 15 Jun 2022 01:23:54 +0200
Subject: [PATCH] Fixes, and made firegex responsive

---
 backend/proxy/__init__.py                    |  8 +-
 frontend/package-lock.json                   |  2 +-
 frontend/src/components/AddNewRegex.tsx      | 97 +++++++++++---------
 frontend/src/components/AddNewService.tsx    | 65 +++++++------
 frontend/src/components/Header/index.tsx     | 46 +++++++---
 frontend/src/components/RegexView/index.tsx  |  2 +-
 frontend/src/components/ServiceRow/index.tsx | 67 ++++++++++----
 frontend/src/js/utils.tsx                    | 12 +--
 frontend/src/pages/HomePage.tsx              | 23 ++++-
 frontend/src/pages/ServiceDetails.tsx        | 43 +++------
 10 files changed, 211 insertions(+), 154 deletions(-)

diff --git a/backend/proxy/__init__.py b/backend/proxy/__init__.py
index 9ebe03b..d97b695 100755
--- a/backend/proxy/__init__.py
+++ b/backend/proxy/__init__.py
@@ -74,9 +74,11 @@ class Proxy:
     def compile_filters(self):
         res = {}
         for filter_obj in self.filters:
-            raw_filters = filter_obj.compile()
-            for filter in raw_filters:
-                res[filter] = filter_obj
+            try:
+                raw_filters = filter_obj.compile()
+                for filter in raw_filters:
+                    res[filter] = filter_obj
+            except Exception: pass
         return res
 
     def add_filter(self, filter):
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5db9ac8..3f52145 100755
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29141,4 +29141,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/AddNewRegex.tsx b/frontend/src/components/AddNewRegex.tsx
index 0d8945f..142894e 100755
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip } from '@mantine/core';
+import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
@@ -15,7 +15,7 @@ type RegexAddInfo = {
     percentage_encoding:boolean
 }
 
-function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:string }) { 
+function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) { 
 
     const form = useForm({
         initialValues: {
@@ -32,6 +32,11 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
         }
     })
 
+    const close = () =>{
+        onClose()
+        form.reset()
+    }
+
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
 
@@ -57,7 +62,7 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
         addregex(request).then( res => {
             if (!res){
                 setSubmitLoading(false)
-                closePopup();
+                close();
                 okNotify(`Regex ${getHumanReadableRegex(request.regex)} has been added`, `Successfully added ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
             }else{
                 setSubmitLoading(false)
@@ -71,50 +76,52 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
     }    
 
 
-  return <form onSubmit={form.onSubmit(submitRequest)}>
-        <TextInput
-            label="Regex"
-            placeholder="[A-Z0-9]{31}="
-            {...form.getInputProps('regex')}
-        />
-        <Space h="md" />
-        <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" transitionDuration={300} transitionTimingFunction="ease"  
-                color="gray" wrapLines width={220} withArrow position='right'>      
-            <Switch
-                label="Use percentage encoding for binary values"
-                {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
+  return <Modal size="xl" title="Add a new regex filter" opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            <TextInput
+                label="Regex"
+                placeholder="[A-Z0-9]{31}="
+                {...form.getInputProps('regex')}
             />
-        </Tooltip>
-        <Space h="md" />
-        <Switch
-            label="Match 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"
-            {...form.getInputProps('mode')}
-        />
-        <Space h="md" />
-        <FilterTypeSelector
-            size="md"
-            color="gray"
-            {...form.getInputProps('type')}
-        />
-        <Group position="right" mt="md">
-            <Button loading={submitLoading} type="submit">Add Filter</Button>
-        </Group>
+            <Space h="md" />
+            <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" openDelay={600} transitionDuration={250} transitionTimingFunction="ease"  
+                    color="gray" wrapLines width={220} withArrow position='right'>      
+                <Switch
+                    label="Use percentage encoding for binary values"
+                    {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
+                />
+            </Tooltip>
+            <Space h="md" />
+            <Switch
+                label="Match 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"
+                {...form.getInputProps('mode')}
+            />
+            <Space h="md" />
+            <FilterTypeSelector
+                size="md"
+                color="gray"
+                {...form.getInputProps('type')}
+            />
+            <Group position="right" mt="md">
+                <Button loading={submitLoading} type="submit">Add Filter</Button>
+            </Group>
 
-        <Space h="md" />
-        
-        {error?<>
-        <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
-            Error: {error}
-        </Notification><Space h="md" /></>:null}
-        
-    </form>
+            <Space h="md" />
+            
+            {error?<>
+            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                Error: {error}
+            </Notification><Space h="md" /></>:null}
+            
+        </form>
+    </Modal>
 
 }
 
diff --git a/frontend/src/components/AddNewService.tsx b/frontend/src/components/AddNewService.tsx
index 01a8c33..2331532 100755
--- a/frontend/src/components/AddNewService.tsx
+++ b/frontend/src/components/AddNewService.tsx
@@ -1,11 +1,11 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { ServiceAddForm } from '../js/models';
 import { addservice, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
-function AddNewService({ closePopup }:{ closePopup:()=>void }) {
+function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
         initialValues: {
@@ -18,6 +18,11 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
         }
     })
 
+    const close = () =>{
+        onClose()
+        form.reset()
+    }
+
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
 
@@ -26,7 +31,7 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
         addservice(values).then( res => {
             if (!res){
                 setSubmitLoading(false)
-                closePopup();
+                close();
                 okNotify(`Service ${values.name} has been added`, `Successfully added ${values.name} with port ${values.port}`)
             }else{
                 setSubmitLoading(false)
@@ -39,37 +44,39 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
     }    
 
 
-  return <form onSubmit={form.onSubmit(submitRequest)}>
-        <TextInput
-            label="Service name"
-            placeholder="Challenge 01"
-            {...form.getInputProps('name')}
-        />
-        <Space h="md" />
+  return <Modal size="xl" title="Add a new service" opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            <TextInput
+                label="Service name"
+                placeholder="Challenge 01"
+                {...form.getInputProps('name')}
+            />
+            <Space h="md" />
 
-        <NumberInput
-            placeholder="8080"
-            min={1}
-            max={65535}
-            label="Service port"
-            {...form.getInputProps('port')}
-        />
+            <NumberInput
+                placeholder="8080"
+                min={1}
+                max={65535}
+                label="Service port"
+                {...form.getInputProps('port')}
+            />
 
 
-        <Space h="md" />
+            <Space h="md" />
 
-        <Group position="right" mt="md">
-            <Button loading={submitLoading} type="submit">Add Service</Button>
-        </Group>
+            <Group position="right" mt="md">
+                <Button loading={submitLoading} type="submit">Add Service</Button>
+            </Group>
 
-        <Space h="md" />
-        
-        {error?<>
-        <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
-            Error: {error}
-        </Notification><Space h="md" /></>:null}
-        
-    </form>
+            <Space h="md" />
+            
+            {error?<>
+            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                Error: {error}
+            </Notification><Space h="md" /></>:null}
+            
+        </form>
+    </Modal>
 
 }
 
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index f60261c..4a81fee 100755
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip } from '@mantine/core';
+import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
 import style from "./Header.module.scss";
 import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
 import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
@@ -77,15 +77,35 @@ function Header() {
   const closeModal = () => {setOpen(false);}
 
   return <div id="header-page" className={style.header}>
-        <FloatingTooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="dark" position="right" >
+        <FloatingTooltip label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
           <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
             <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
           </div>
         </FloatingTooltip>
         <div className="flex-spacer" />
-        <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
-        <Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
-        <Badge style={{marginLeft:"10px"}} size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+        
+        <MediaQuery largerThan="md" styles={{ display: 'none' }}>
+          <div>
+            <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
+              <Space h="xs" />
+            <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+              <Space h="xs" />
+            <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+          </div>
+        </MediaQuery>  
+
+        <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
+          <div className="center-flex">
+          <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
+            <Space w="xs" />
+          <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+            <Space w="xs" />
+          <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+          </div>
+        </div></MediaQuery>  
+
+        
+      
         <div style={{marginLeft:"20px"}}></div>
         <Menu>
           <Menu.Label>Firewall Access</Menu.Label>
@@ -95,7 +115,7 @@ function Header() {
         </Menu>
         <div style={{marginLeft:"20px"}}></div>
         { location.pathname !== "/"?
-          <Tooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
+          <Tooltip label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
             <ActionIcon color="teal" style={{marginRight:"10px"}}
               size="xl" radius="md" variant="filled"
               onClick={()=>navigator("/")}>
@@ -103,22 +123,18 @@ function Header() {
             </ActionIcon>
           </Tooltip>
         :null}
-        { location.pathname !== "/"?
-          <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+        { srv_id?
+          <Tooltip label="Add a new regex" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
             <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
-        : <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+        : <Tooltip label="Add a new service" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
             <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
       }
         
         {srv_id?
-          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
-            <AddNewRegex closePopup={closeModal} service={srv_id} />
-          </Modal>:
-          <Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
-            <AddNewService closePopup={closeModal} />
-          </Modal>
+            <AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:
+            <AddNewService opened={open} onClose={closeModal} />
         }
         <Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>
 
diff --git a/frontend/src/components/RegexView/index.tsx b/frontend/src/components/RegexView/index.tsx
index cf6c90d..ed7a7ae 100755
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -43,7 +43,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
             <Text className={style.regex_text}> {regex_expr}</Text>
           </Grid.Col>
           <Grid.Col span={2}>
-            <Tooltip label="Delete regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
+            <Tooltip label="Delete regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
               <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             </Grid.Col>
diff --git a/frontend/src/components/ServiceRow/index.tsx b/frontend/src/components/ServiceRow/index.tsx
index 0e52ede..f45f1f9 100755
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Grid, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Grid, MediaQuery, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { Service } from '../../js/models';
@@ -8,7 +8,7 @@ import YesNoModal from '../YesNoModal';
 import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';
 
 //"status":"stop"/"wait"/"active"/"pause",
-function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ service:Service, onClick?:()=>void, additional_buttons?:any, add_new_regex?:any }) {
+function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
 
     let status_color = "gray";
     switch(service.status){
@@ -63,38 +63,59 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
         setButtonLoading(false)
     }
 
-
     return <>
-        <Grid className={style.row} style={{width:"100%"}}>
-            <Grid.Col span={4}>
-                <div className="center-flex-row">
-                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
-                    <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
-                </div>
+        <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
+            <Grid.Col md={4} xs={12}>
+                <MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
+                    <div className="center-flex-row">
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
+                        <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
+                    </div>
+                </div></MediaQuery>
+                <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
+                    <div className="center-flex">
+                        <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
+                        <Space w="xl" />
+                        <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
+                    </div>
+                </div></MediaQuery>
+                
+                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
+                    <Space h="xl" />
+                </MediaQuery>
             </Grid.Col>
-            <Grid.Col className="center-flex" span={8}>
-                <div className="center-flex">
-                    {add_new_regex}
-                </div>
-                <div className='flex-spacer'></div>
+            
+            <Grid.Col className="center-flex" md={8} xs={12}>
+                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+                    <div className='flex-spacer' />
+                </MediaQuery>
+                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
+                    <><Space w="xl" /><Space w="xl" /></>
+                </MediaQuery>
+                
                 <div className="center-flex-row">
                     <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="xl" variant="filled">Status: <u>{service.status}</u></Badge>
                     <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="lg" variant="filled">Regex: {service.n_regex}</Badge>
                     <Badge color="yellow" radius="sm" size="lg" variant="filled">Connections Blocked: {service.n_packets}</Badge>
                 </div>
-                <Space w="xl" /><Space w="xl" />
+                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
+                    <div className='flex-spacer' />
+                </MediaQuery>
+                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+                    <><Space w="xl" /><Space w="xl" /></>
+                </MediaQuery>
                 <div className="center-flex">
                     {additional_buttons}
                     {["pause","wait"].includes(service.status)?
                         
-                        <Tooltip label="Stop service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="orange">
+                        <Tooltip label="Stop service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
                             <ActionIcon color="yellow" loading={buttonLoading}
                             onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
                             disabled={service.status === "stop"}>
                                 <FaStop size="20px" />
                             </ActionIcon>
                         </Tooltip>:
-                        <Tooltip label="Pause service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
+                        <Tooltip label="Pause service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
                             <ActionIcon color="red" loading={buttonLoading}
                                     onClick={pauseService} size="xl" radius="md" variant="filled"
                                     disabled={service.status === "stop"}>
@@ -104,7 +125,7 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
                     }
                     
                     <Space w="md"/>
-                    <Tooltip label="Start service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
+                    <Tooltip label="Start service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
                         <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
                                     variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
                             <FaPlay size="20px" />
@@ -112,8 +133,14 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
                     </Tooltip>
                 </div>
                 <Space w="xl" /><Space w="xl" />
-                {onClick?<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size="45px" />:null}
-                <Space w="xl" />
+                {onClick?<div>
+                    <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
+                    <Space w="xl" />
+                </div>:null}
+                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
+                    <><Space w="xl" /><Space w="xl" /></>
+                </MediaQuery>
+                
             </Grid.Col>
         </Grid>
         <YesNoModal
diff --git a/frontend/src/js/utils.tsx b/frontend/src/js/utils.tsx
index b50cef1..3efd86c 100755
--- a/frontend/src/js/utils.tsx
+++ b/frontend/src/js/utils.tsx
@@ -160,15 +160,9 @@ export function okNotify(title:string, description:string ){
 }
 
 export function validateRegex(pattern:string) {
-    var parts = pattern.split('/'),
-        regex = pattern,
-        options = "";
-    if (parts.length > 1) {
-        regex = parts[1];
-        options = parts[2];
-    }
+    return true; // TO TEST
     try {
-        new RegExp(regex, options);
+        new RegExp(pattern);
         return true;
     }
     catch(e) {
@@ -178,4 +172,4 @@ export function validateRegex(pattern:string) {
 
 export function b64encode(data:string){
     return Buffer.from(data).toString('base64')
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 6b9743d..3d5535e 100755
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,9 +1,11 @@
-import { LoadingOverlay, Space, Title } from '@mantine/core';
+import { ActionIcon, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
+import { BsPlusLg } from "react-icons/bs";
 import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../components/ServiceRow';
 import { Service, update_freq } from '../js/models';
 import { errorNotify, servicelist } from '../js/utils';
+import AddNewService from '../components/AddNewService';
 
 
 function HomePage() {
@@ -11,6 +13,8 @@ function HomePage() {
     const [services, setServices] = useState<Service[]>([]);
     const [loader, setLoader] = useState(true);
     const navigator = useNavigate()
+    const [open, setOpen] = useState(false);
+    const closeModal = () => {setOpen(false);}
     
     const updateInfo = async () => {
         await servicelist().then(res => {
@@ -33,7 +37,22 @@ function HomePage() {
         <LoadingOverlay visible={loader} />
         {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
             navigator("/"+srv.id)
-        }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title></>}
+        }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title>
+        <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                }}>
+                <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
+                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+                </Tooltip>
+            </div>
+        </>}
+
+        <Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
+            <AddNewService closePopup={closeModal} />
+        </Modal>
     </div>
 }
 
diff --git a/frontend/src/pages/ServiceDetails.tsx b/frontend/src/pages/ServiceDetails.tsx
index d356388..63f5b9c 100755
--- a/frontend/src/pages/ServiceDetails.tsx
+++ b/frontend/src/pages/ServiceDetails.tsx
@@ -84,47 +84,32 @@ function ServiceDetails() {
     return <div>
         <LoadingOverlay visible={loader} />
         <ServiceRow service={serviceInfo} additional_buttons={<>
-            <Tooltip label="Delete service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">           
+            <Tooltip label="Delete service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">           
                 <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
-            <Tooltip label="Change proxy port" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">           
+            <Tooltip label="Change proxy port" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">           
                 <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
-        </>} add_new_regex={<>
-            <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
-                <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
-            </Tooltip>
         </>}></ServiceRow>
         
-        {regexesList.length === 0? 
-            <><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
-            <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                }}>
-                <Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
-                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
-                </Tooltip>
-            </div>
-            
-            </>
-            
-            :
+        {regexesList.length === 0?<>
+                <Space h="xl" />
+                <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
+                <Space h="xl" /> <Space h="xl" />
+                <div className='center-flex'>
+                    <Tooltip label="Add a new regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
+                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+                    </Tooltip>
+                </div>
+            </>:
             <Grid>
-                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} span={6}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
+                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
             </Grid>
         }
 
-        {srv_id?
-          <Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
-            <AddNewRegex closePopup={closeModal} service={srv_id} />
-          </Modal>:
-          null
-        }
+        {srv_id?<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:null}
 
         <YesNoModal
             title='Are you sure to delete this service?'