gui: reposive? yeah responsive

Pwnzer0tt1 · Oct 12, 2023 · 0e34805 · 0e34805
1 parent 13a8711
commit 0e34805
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 186 deletions.
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { ActionIcon, Divider, Image, Menu, Tooltip, MediaQuery, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core';
+import { ActionIcon, Divider, Image, Menu, Tooltip, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core';
 import style from "./index.module.scss";
-import { errorNotify, getmainpath, logout } from '../../js/utils';
+import { errorNotify, getmainpath, isLargeScreen, logout } from '../../js/utils';
 import { AiFillHome } from "react-icons/ai"
 import { useNavigate } from 'react-router-dom';
 import { FaLock } from 'react-icons/fa';
@@ -32,18 +32,19 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
   const [resetFiregexModal, setResetFiregexModal] = useState(false);
   const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
   const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false);
-
+  const isLarge = isLargeScreen()
+  console.log(isLarge)
   return <Header height={100} className={style.header} {...other}>
         <Space w="lg" />
-        <MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
+        {isLarge?null:<div>
           <Burger
             opened={navOpen}
             className={style.navbtn}
             onClick={() => setNav((o) => !o)}
             size="sm"
             mr="xl"
           />
-        </div></MediaQuery>
+        </div>}
         <div className={style.divlogo}>
           <Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" >
             <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>

diff --git a/frontend/src/components/NFRegex/ServiceRow/index.tsx b/frontend/src/components/NFRegex/ServiceRow/index.tsx
@@ -1,11 +1,11 @@
-import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
 import { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
 import { nfregex, Service, serviceQueryKey } from '../utils';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -25,6 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
     const [renameModal, setRenameModal] = useState(false)
+    const isMedium = isMediumScreen()
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -73,32 +74,17 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     return <>
         <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.port}</Badge></div>
-                        <Badge color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></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.port}</Badge></div>
-                        <Badge style={{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
-                        <Space w="xl" />
-                    </div>
-                </div></MediaQuery>
-
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <Space h="xl" />
-                </MediaQuery>
+
+                <div className={isMedium?"center-flex-row":"center-flex"}>
+                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
+                    <Badge style={isMedium?{}:{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
+                    {isMedium?null:<Space w="xl" />}
+                </div>
+                {!isMedium?<Space h="xl" />:null}
             </Grid.Col>
 
             <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>
+                {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
 
                 <div className="center-flex-row">
                     <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
@@ -107,12 +93,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <Space h="xs" />
                     <Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
                 </div>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex">
                     <MenuDropDownWithButton>
                         <Menu.Label><b>Rename service</b></Menu.Label>
@@ -145,13 +126,10 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <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>
-
+                {isMedium?<><Space w="xl" /><Space w="xl" /></>:null}                
             </Grid.Col>
         </Grid>
-        <hr style={{width:"100%"}}/>
+        <Divider size="md" style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

diff --git a/frontend/src/components/PortHijack/ServiceRow/index.module.scss b/frontend/src/components/PortHijack/ServiceRow/index.module.scss
@@ -9,6 +9,11 @@
     @extend .center-flex;
 }
 
+.row-mobile{
+    @extend .row;
+    @extend .center-flex-row;
+}
+
 .name{
     font-size: 2.3em;
     font-weight: bolder;

diff --git a/frontend/src/components/PortHijack/ServiceRow/index.tsx b/frontend/src/components/PortHijack/ServiceRow/index.tsx
@@ -4,7 +4,7 @@ import { FaPlay, FaStop } from 'react-icons/fa';
 import { porthijack, Service } from '../utils';
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -23,6 +23,7 @@ function ServiceRow({ service }:{ service:Service }) {
     const [renameModal, setRenameModal] = useState(false)
     const [changeDestModal, setChangeDestModal] = useState(false)
     const portInputRef = React.createRef<HTMLInputElement>()
+    const isMedium = isMediumScreen()
 
     const form = useForm({
         initialValues: { proxy_port:service.proxy_port },
@@ -89,7 +90,7 @@ function ServiceRow({ service }:{ service:Service }) {
     }
 
     return <>
-        <div className={style.row} style={{width:"100%"}}>
+        <div className={isMedium?style.row:style.row_mobile} style={{width:"100%"}}>
             <Space w="xl" /><Space w="xl" />
             <div>
                 <div className="center-flex-row">
@@ -105,6 +106,8 @@ function ServiceRow({ service }:{ service:Service }) {
             </div>
 
             <div className='flex-spacer' />
+            {isMedium?null:<Space h="xl" />}
+            <div className='center-flex'>
             <div className="center-flex-row">
                 <Badge color="lime" radius="sm" size="md" variant="filled">
                     FROM {service.ip_src} : {service.public_port}
@@ -119,7 +122,7 @@ function ServiceRow({ service }:{ service:Service }) {
                                 size="xs"
                                 variant="unstyled"
                                 style={{
-                                    width: (6+form.values.proxy_port.toString().length*6.2) +"px"
+                                    width: (10+form.values.proxy_port.toString().length*6.2) +"px"
                                 }}
                                 className={style.portInput}
                                 onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
@@ -161,10 +164,13 @@ function ServiceRow({ service }:{ service:Service }) {
                     </ActionIcon>
                 </Tooltip>
             </div>
+            </div>
+            {isMedium?null:<Space h="xl" />}
             <Space w="xl" /><Space w="xl" />
 
         </div>
-        <hr style={{width:"100%"}}/>
+        <Divider size="sm" style={{width:"100%"}}/>
+
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

diff --git a/frontend/src/components/RegexProxy/ServiceRow/index.tsx b/frontend/src/components/RegexProxy/ServiceRow/index.tsx
@@ -1,10 +1,10 @@
-import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
 import { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, okNotify } from '../../../js/utils';
+import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
@@ -32,6 +32,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [choosePortModal, setChoosePortModal] = useState(false)
     const [renameModal, setRenameModal] = useState(false)
 
+    const isMedium = isMediumScreen()
+
     const stopService = async () => {
         setButtonLoading(true)
         await regexproxy.servicestop(service.id).then(res => {
@@ -101,44 +103,21 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     return <>
         <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="lg" 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="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
-                    </div>
-                </div></MediaQuery>
-
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <Space h="xl" />
-                </MediaQuery>
+                <div className={isMedium?"center-flex-row":"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>
+                    <Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
+                </div>
+                {!isMedium?<Space h="xl" />:null}
             </Grid.Col>
 
             <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>
-
+                {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex-row">
                     <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
                     <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
                     <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
                 </div>
-                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
-                    <div className='flex-spacer' />
-                </MediaQuery>
-                <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
-                    <><Space w="xl" /><Space w="xl" /></>
-                </MediaQuery>
+                {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
                 <div className="center-flex">
                     <MenuDropDownWithButton>
                         <Menu.Label><b>Rename service</b></Menu.Label>
@@ -185,9 +164,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                     <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>
+                {!isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
 
             </Grid.Col>
         </Grid>
@@ -198,7 +175,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             action={stopService}
             opened={stopModal}
         />
-        <hr style={{width:"100%"}}/>
+        <Divider size="md" style={{width:"100%"}}/>
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

diff --git a/frontend/src/js/utils.tsx b/frontend/src/js/utils.tsx
@@ -7,6 +7,7 @@ import { regexproxy } from "../components/RegexProxy/utils";
 import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
 import { Buffer } from "buffer"
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { useMediaQuery } from "@mantine/hooks";
 
 export const IS_DEV = import.meta.env.DEV
 
@@ -201,3 +202,11 @@ export function b64encode(data:number[]|string){
 export function b64decode(regexB64:string){
     return Buffer.from(regexB64, "base64").toString()
 }
+
+export function isMediumScreen(){
+    return useMediaQuery('(min-width: 600px)');
+}
+
+export function isLargeScreen(){
+    return useMediaQuery('(min-width: 992px)');
+}