0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modulating frontend

Browse Source
This commit is contained in:
DomySh
2022-07-21 12:39:30 +02:00
parent 29761b71da
commit 6fd2f6b359
16 changed files with 73 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/build/asset-manifest.json
View File

@@ -1,13 +1,13 @@
{
"files": {
"main.css": "/static/css/main.77b279e8.css",
"main.js": "/static/js/main.6378664a.js",
"main.css": "/static/css/main.166875ec.css",
"main.js": "/static/js/main.703a556c.js",
"index.html": "/index.html",
"main.77b279e8.css.map": "/static/css/main.77b279e8.css.map",
"main.6378664a.js.map": "/static/js/main.6378664a.js.map"
"main.166875ec.css.map": "/static/css/main.166875ec.css.map",
"main.703a556c.js.map": "/static/js/main.703a556c.js.map"
},
"entrypoints": [
"static/css/main.77b279e8.css",
"static/js/main.6378664a.js"
"static/css/main.166875ec.css",
"static/js/main.703a556c.js"
]
}

2
frontend/build/index.html
View File

@@ -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.6378664a.js"></script><link href="/static/css/main.77b279e8.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.703a556c.js"></script><link href="/static/css/main.166875ec.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

4
frontend/build/static/css/main.77b279e8.css → frontend/build/static/css/main.166875ec.css
View File

@@ -1,2 +1,2 @@
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);.center-flex,.center-flex-row{align-items:center;display:flex;justify-content:center}.center-flex-row{flex-direction:column}.flex-spacer{flex-grow:1}.Footer_center-flex-row__Iibc4,.Footer_center-flex__mTXcH,.Footer_footer__V8Lu\+{align-items:center;display:flex;justify-content:center}.Footer_center-flex-row__Iibc4{flex-direction:column}.Footer_flex-spacer__6R1Ah{flex-grow:1}.Footer_footer__V8Lu\+{background-color:#242a33;height:150px;margin-top:50px}.Header_header__MY7fH{align-items:center;background-color:#242a33;display:flex;height:140px;justify-content:center;width:100%}.Header_logo__qeTuP{height:70%;margin-left:40px;width:200px}body{font-family:Lato,sans-serif;margin:0}.ServiceRow_center-flex-row__NF59z,.ServiceRow_center-flex__Ffq-d,.ServiceRow_row__HwgWF{align-items:center;display:flex;justify-content:center}.ServiceRow_center-flex-row__NF59z{flex-direction:column}.ServiceRow_flex-spacer__OVA44{flex-grow:1}::-webkit-scrollbar{background:#333;cursor:pointer;margin:3px;width:12px}::-webkit-scrollbar-thumb{background:#757575;border-radius:8px}.ServiceRow_row__HwgWF{border-radius:20px;margin:10px;padding:30px 0;width:95%}.ServiceRow_name__HSrHR{color:#fff;font-size:2.3em;font-weight:bolder;margin-bottom:13px;margin-right:10px}.RegexView_box__Z6\+8g{margin:5px;padding:30px}.RegexView_regex_text__YbrUl{background-color:#25262b;border-radius:15px;padding:10px}
/*# sourceMappingURL=main.77b279e8.css.map*/
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);.center-flex,.center-flex-row{align-items:center;display:flex;justify-content:center}.center-flex-row{flex-direction:column}.flex-spacer{flex-grow:1}.Footer_center-flex-row__Iibc4,.Footer_center-flex__mTXcH,.Footer_footer__V8Lu\+{align-items:center;display:flex;justify-content:center}.Footer_center-flex-row__Iibc4{flex-direction:column}.Footer_flex-spacer__6R1Ah{flex-grow:1}.Footer_footer__V8Lu\+{background-color:#242a33;height:150px;margin-top:50px}.Header_header__MY7fH{align-items:center;background-color:#242a33;display:flex;height:140px;justify-content:center;width:100%}.Header_logo__qeTuP{height:70%;margin-left:40px;width:200px}body{font-family:Lato,sans-serif;margin:0}.ServiceRow_center-flex-row__NF59z,.ServiceRow_center-flex__Ffq-d,.ServiceRow_row__HwgWF{align-items:center;display:flex;justify-content:center}.ServiceRow_center-flex-row__NF59z{flex-direction:column}.ServiceRow_flex-spacer__OVA44{flex-grow:1}::-webkit-scrollbar{background:#333;cursor:pointer;margin:3px;width:12px}::-webkit-scrollbar-thumb{background:#757575;border-radius:8px}.ServiceRow_row__HwgWF{border-radius:20px;margin:10px;padding:30px 0;width:95%}.ServiceRow_name__HSrHR{color:#fff;font-size:2.3em;font-weight:bolder;margin-bottom:13px;margin-right:10px}.RegexView_box__Z6\+8g{margin:5px;padding:30px}.RegexView_regex_text__YbrUl{background-color:#25262b;border-radius:8px;margin:6px;padding:6px}
/*# sourceMappingURL=main.166875ec.css.map*/

1
frontend/build/static/css/main.166875ec.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"static/css/main.166875ec.css","mappings":"wEAUA,8BAGE,mBAFA,aACA,sBACA,CAGF,iBAEE,sBAGF,aACE,YAZF,iFAGE,mBAFA,aACA,sBACA,CAGF,+BAEE,sBAGF,2BACE,YCnBF,uBAGI,yBAFA,aACA,eCJY,CCEhB,sBAKI,mBAFA,wBDLY,CCMZ,aAFA,aAIA,uBALA,UAKA,CAGJ,oBAGI,WADA,iBADA,WAEA,CHVJ,KAEE,4BADA,QACA,CAGF,yFAGE,mBAFA,aACA,sBACA,CAGF,mCAEE,sBAGF,+BACE,YAGF,oBAGE,gBACA,eAFA,UAAU,CADV,UAGA,CAEF,0BACE,mBACA,kBI9BF,uBAGI,mBACA,YAFA,eADA,SAGA,CAIJ,wBAKI,WAJA,gBACA,mBAEA,mBADA,iBAEA,CCbJ,uBAEI,UAAS,CADT,YACU,CAGd,6BAEI,wBHPS,CGQT,kBACA,WAHA,WAGA","sources":["index.scss","components/Footer/index.module.scss","_vars.scss","components/Header/index.module.scss","components/NFRegex/ServiceRow/index.module.scss","components/NFRegex/RegexView/index.module.scss"],"sourcesContent":["\n@use \"vars\" as *;\n\n@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');\n\nbody {\n margin: 0;\n font-family: 'Lato', sans-serif;\n}\n\n.center-flex{\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center-flex-row{\n @extend .center-flex;\n flex-direction: column;\n}\n\n.flex-spacer{\n flex-grow: 1;\n}\n\n::-webkit-scrollbar {\n width: 12px;\n margin:3px;\n background: #333;\n cursor: pointer;\n}\n::-webkit-scrollbar-thumb {\n background: #757575;\n border-radius: 8px;\n}","@use \"../../vars\" as *;\r\n@use \"../../index.scss\" as *;\r\n\r\n.footer{\r\n height: 150px;\r\n margin-top: 50px;\r\n background-color: $primary_color;\r\n @extend .center-flex;\r\n}","\r\n$primary_color: #242a33;\r\n$second_color: #1A1B1E;\r\n$third_color:#25262b;\r\n","\r\n@use \"../../vars\" as *;\r\n\r\n.header{\r\n width: 100%;\r\n height: 140px;\r\n background-color: $primary_color;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo{\r\n width: 200px;\r\n margin-left: 40px;\r\n height: 70%;\r\n}","\r\n@use \"../../../index.scss\" as *;\r\n\r\n.row{\r\n width: 95%;\r\n padding: 30px 0px;\r\n border-radius: 20px;\r\n margin: 10px;\r\n @extend .center-flex;\r\n}\r\n\r\n.name{\r\n font-size: 2.3em;\r\n font-weight: bolder;\r\n margin-right: 10px;\r\n margin-bottom: 13px;\r\n color:#FFF;\r\n}","\r\n@use \"../../../vars\" as *;\r\n\r\n.box{\r\n padding:30px;\r\n margin:5px;\r\n}\r\n\r\n.regex_text{\r\n padding: 6px;\r\n background-color: $third_color;\r\n border-radius: 8px;\r\n margin: 6px;\r\n}"],"names":[],"sourceRoot":""}

1
frontend/build/static/css/main.77b279e8.css.map
View File

@@ -1 +0,0 @@
{"version":3,"file":"static/css/main.77b279e8.css","mappings":"wEAUA,8BAGE,mBAFA,aACA,sBACA,CAGF,iBAEE,sBAGF,aACE,YAZF,iFAGE,mBAFA,aACA,sBACA,CAGF,+BAEE,sBAGF,2BACE,YCnBF,uBAGI,yBAFA,aACA,eCJY,CCEhB,sBAKI,mBAFA,wBDLY,CCMZ,aAFA,aAIA,uBALA,UAKA,CAGJ,oBAGI,WADA,iBADA,WAEA,CHVJ,KAEE,4BADA,QACA,CAGF,yFAGE,mBAFA,aACA,sBACA,CAGF,mCAEE,sBAGF,+BACE,YAGF,oBAGE,gBACA,eAFA,UAAU,CADV,UAGA,CAEF,0BACE,mBACA,kBI9BF,uBAGI,mBACA,YAFA,eADA,SAGA,CAIJ,wBAKI,WAJA,gBACA,mBAEA,mBADA,iBAEA,CCbJ,uBAEI,UAAS,CADT,YACU,CAGd,6BAEI,wBHPS,CGQT,mBAFA,YAEA","sources":["index.scss","components/Footer/index.module.scss","_vars.scss","components/Header/index.module.scss","components/NFRegex/ServiceRow/index.module.scss","components/NFRegex/RegexView/index.module.scss"],"sourcesContent":["\n@use \"vars\" as *;\n\n@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');\n\nbody {\n margin: 0;\n font-family: 'Lato', sans-serif;\n}\n\n.center-flex{\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center-flex-row{\n @extend .center-flex;\n flex-direction: column;\n}\n\n.flex-spacer{\n flex-grow: 1;\n}\n\n::-webkit-scrollbar {\n width: 12px;\n margin:3px;\n background: #333;\n cursor: pointer;\n}\n::-webkit-scrollbar-thumb {\n background: #757575;\n border-radius: 8px;\n}","@use \"../../vars\" as *;\r\n@use \"../../index.scss\" as *;\r\n\r\n.footer{\r\n height: 150px;\r\n margin-top: 50px;\r\n background-color: $primary_color;\r\n @extend .center-flex;\r\n}","\r\n$primary_color: #242a33;\r\n$second_color: #1A1B1E;\r\n$third_color:#25262b;\r\n","\r\n@use \"../../vars\" as *;\r\n\r\n.header{\r\n width: 100%;\r\n height: 140px;\r\n background-color: $primary_color;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo{\r\n width: 200px;\r\n margin-left: 40px;\r\n height: 70%;\r\n}","\r\n@use \"../../../index.scss\" as *;\r\n\r\n.row{\r\n width: 95%;\r\n padding: 30px 0px;\r\n border-radius: 20px;\r\n margin: 10px;\r\n @extend .center-flex;\r\n}\r\n\r\n.name{\r\n font-size: 2.3em;\r\n font-weight: bolder;\r\n margin-right: 10px;\r\n margin-bottom: 13px;\r\n color:#FFF;\r\n}","\r\n@use \"../../../vars\" as *;\r\n\r\n.box{\r\n padding:30px;\r\n margin:5px;\r\n}\r\n\r\n.regex_text{\r\n padding: 10px;\r\n background-color: $third_color;\r\n border-radius: 15px;\r\n}"],"names":[],"sourceRoot":""}

6
frontend/build/static/js/main.6378664a.js → frontend/build/static/js/main.703a556c.js
View File

File diff suppressed because one or more lines are too long

0
frontend/build/static/js/main.6378664a.js.LICENSE.txt → frontend/build/static/js/main.703a556c.js.LICENSE.txt
View File

2
frontend/build/static/js/main.6378664a.js.map → frontend/build/static/js/main.703a556c.js.map
View File

File diff suppressed because one or more lines are too long

3
frontend/src/App.tsx
View File

@@ -9,7 +9,6 @@ import { errorNotify, fireUpdateRequest, getstatus, login, setpassword } from '.
import NFRegex from './pages/NFRegex.tsx';
import ServiceDetails from './pages/NFRegex.tsx/ServiceDetails';
import io from 'socket.io-client';
import HomePage from './pages/HomePage';
const socket = io({transports: ["websocket", "polling"], path:"/sock" });
@@ -146,11 +145,9 @@ function App() {
}else if (systemStatus.status === "run" && systemStatus.loggined){
return <Routes>
<Route element={<MainLayout><Outlet /></MainLayout>}>
<Route element={<HomePage><Outlet /></HomePage>}>
<Route path="nfregex" element={<NFRegex><Outlet /></NFRegex>} >
<Route path=":srv" element={<ServiceDetails />} />
</Route>
</Route>
<Route path="*" element={<Navigate to="/nfregex" />} />
</Route>
</Routes>

51
frontend/src/components/Header/index.tsx
View File

@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import { ActionIcon, Badge, Divider, Image, Menu, Space, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
import { ActionIcon, Divider, Image, Menu, Tooltip, FloatingTooltip } from '@mantine/core';
import style from "./index.module.scss";
import { errorNotify, eventUpdateName, logout, nfregex } from '../../js/utils';
import { GeneralStats } from '../../js/models';
import { errorNotify, logout } from '../../js/utils';
import { BsPlusLg } from "react-icons/bs"
import { AiFillHome } from "react-icons/ai"
import { useNavigate, useParams } from 'react-router-dom';
@@ -11,26 +10,13 @@ import AddNewService from '../NFRegex/AddNewService';
import { FaLock } from 'react-icons/fa';
import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
import { ImExit } from 'react-icons/im';
import { useWindowEvent } from '@mantine/hooks';
import ResetPasswordModal from './ResetPasswordModal';
import ResetModal from './ResetModal';
function Header() {
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const navigator = useNavigate()
const updateInfo = () => {
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
)
}
useWindowEvent(eventUpdateName, updateInfo)
const logout_action = () => {
logout().then(r => {
@@ -51,34 +37,14 @@ function Header() {
const closeModal = () => {setOpen(false);}
return <div id="header-page" className={style.header}>
<FloatingTooltip zIndex={0} 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' }}>
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</div>
</FloatingTooltip>
<div className="flex-spacer" />
<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>
</FloatingTooltip>
</div>
<div className="flex-spacer" />
<div style={{marginLeft:"20px"}}></div>
<Menu>
@@ -122,7 +88,6 @@ function Header() {
}
<ResetPasswordModal opened={changePasswordModal} onClose={() => setChangePasswordModal(false)} />
<ResetModal opened={resetFiregexModal} onClose={() => setResetFiregexModal(false)} />
<div style={{marginLeft:"40px"}}></div>
</div>
}

25
frontend/src/components/MainLayout.tsx
View File

@@ -1,19 +1,22 @@
import React from 'react';
import { Container, Space } from '@mantine/core';
import { Container, Space, Tabs } from '@mantine/core';
import Footer from './Footer';
import Header from './Header';
function MainLayout({ children }:{ children:any }) {
return <>
<Header/>
<Space h="xl" />
<Container size="xl" style={{minHeight:"57.5vh"}}>
{children}
</Container>
<Space h="xl" />
<Footer />
return <>
<Header/>
<Tabs grow variant="pills">
<Tabs.Tab label="Regex Prox"></Tabs.Tab>
<Tabs.Tab label="Port Hijacking"></Tabs.Tab>
<Tabs.Tab label="Netfilter regex"></Tabs.Tab>
</Tabs>
<Space h="xl" />
<Container size="md" style={{minHeight:"57.5vh"}}>
{children}
</Container>
<Space h="xl" />
<Footer />
</>
}

5
frontend/src/components/NFRegex/RegexView/index.module.scss
View File

@@ -7,7 +7,8 @@
}
.regex_text{
padding: 10px;
padding: 6px;
background-color: $third_color;
border-radius: 15px;
border-radius: 8px;
margin: 6px;
}

4
frontend/src/components/NFRegex/RegexView/index.tsx
View File

@@ -45,8 +45,8 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
return <div className={style.box}>
<Grid>
<Grid.Col span={2}>
<Title order={2} style={{color:"#FFF"}}>Regex:</Title>
<Grid.Col span={2} className="center-flex">
<Title order={4}>Regex:</Title>
</Grid.Col>
<Grid.Col span={8}>
<Text className={style.regex_text}> {regex_expr}</Text>

6
frontend/src/pages/HomePage.tsx
View File

@@ -1,6 +0,0 @@
import React from "react"
export default function HomePage({ children }: { children: any }) {
return children
}

6
frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
View File

@@ -55,7 +55,7 @@ function ServiceDetails() {
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
return <div>
return <>
<LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
@@ -77,9 +77,7 @@ function ServiceDetails() {
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
</div>
</>
}
export default ServiceDetails;

39
frontend/src/pages/NFRegex.tsx/index.tsx
View File

@@ -1,9 +1,9 @@
import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import { Service } from '../../js/models';
import { GeneralStats, Service } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
@@ -18,13 +18,22 @@ function NFRegex({ children }: { children: any }) {
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
await nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
await Promise.all([
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
@@ -33,8 +42,18 @@ function NFRegex({ children }: { children: any }) {
const closeModal = () => {setOpen(false);}
return <div id="service-list" className="center-flex-row">
{srv?children:<>
return <>
<div id="service-list" className="center-flex-row">
<Space h="sm" />
<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>
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/nfregex/"+srv.service_id)
@@ -51,6 +70,8 @@ function NFRegex({ children }: { children: any }) {
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
{srv?children:null}
</>
}
export default NFRegex;