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

mantine update + passed to vite

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-06-05 00:55:38 +02:00
parent cef573b537
commit 0430cb3773
37 changed files with 740 additions and 8234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/AddNewRegex.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
@@ -24,7 +24,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
is_case_insensitive:false,
deactive:false
},
validationRules:{
validate:{
regex: (value) => value !== "",
type: (value) => ["blacklist","whitelist"].includes(value),
mode: (value) => ['C -> S', 'S -> C', 'C <-> S'].includes(value)

4
frontend/src/components/Header/ResetModal.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Modal, Notification, Space, Switch, Text } from "@mantine/core";
import { useForm } from "@mantine/hooks";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { ImCross } from "react-icons/im";
import { okNotify, resetfiregex } from "../../js/utils";
@@ -61,4 +61,4 @@ function ResetModal({ opened, onClose }:{ opened: boolean, onClose: () => void }
}
export default ResetModal;
export default ResetModal;

6
frontend/src/components/Header/ResetPasswordModal.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Modal, Notification, PasswordInput, Space, Switch } from "@mantine/core";
import { useForm } from "@mantine/hooks";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { ImCross } from "react-icons/im";
import { ChangePassword } from "../../js/models";
@@ -11,7 +11,7 @@ function ResetPasswordModal({ opened, onClose }:{ opened: boolean, onClose: () =
password:"",
expire:true
},
validationRules:{
validate:{
password: (value) => value !== ""
}
})
@@ -59,4 +59,4 @@ function ResetPasswordModal({ opened, onClose }:{ opened: boolean, onClose: () =
}
export default ResetPasswordModal;
export default ResetPasswordModal;

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

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { ActionIcon, Divider, Image, Menu, Tooltip, FloatingTooltip, MediaQuery, Burger, Space, Header } from '@mantine/core';
import { ActionIcon, Divider, Image, Menu, Tooltip, MediaQuery, Burger, Space, Header } from '@mantine/core';
import style from "./index.module.scss";
import { errorNotify, getmainpath, logout } from '../../js/utils';
import { AiFillHome } from "react-icons/ai"
@@ -44,9 +44,9 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
/>
</div></MediaQuery>
<div className={style.divlogo}>
<FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" >
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</FloatingTooltip>
</Tooltip>
</div>
<div className="flex-spacer" />
@@ -61,7 +61,7 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
</Menu>
<Space w="md" />
<Tooltip label="Home" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="teal" opened={tooltipHomeOpened} tooltipId="tooltip-home-id">
<Tooltip label="Home" position='bottom' color="teal" opened={tooltipHomeOpened}>
<ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled"
onClick={go_to_home}
@@ -70,7 +70,7 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
<AiFillHome size="25px" />
</ActionIcon>
</Tooltip>
<Tooltip label="Logout" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipLogoutOpened} tooltipId="tooltip-add-id">
<Tooltip label="Logout" position='bottom' color="blue" opened={tooltipLogoutOpened}>
<ActionIcon color="blue" onClick={logout_action} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipLogoutOpened(false)} onBlur={() => setTooltipLogoutOpened(false)}
onMouseEnter={() => setTooltipLogoutOpened(true)} onMouseLeave={() => setTooltipLogoutOpened(false)}><ImExit size={23} style={{marginTop:"3px", marginLeft:"2px"}}/></ActionIcon>

4
frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
import { ImCross } from "react-icons/im"
@@ -24,7 +24,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
proto:"tcp",
autostart: true
},
validationRules:{
validate:{
name: (value) => value !== ""?true:false,
port: (value) => value>0 && value<65536,
proto: (value) => ["tcp","udp"].includes(value),

4
frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
@@ -9,7 +9,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const form = useForm({
initialValues: { name:service.name },
validationRules:{ name: (value) => value !== "" }
validate:{ name: (value) => value !== "" }
})
const close = () =>{

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

@@ -116,7 +116,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
</Menu>
<Space w="md"/>
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
<ActionIcon color="red" loading={buttonLoading}
onClick={stopService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}
@@ -127,7 +127,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
</ActionIcon>
</Tooltip>
<Space w="md"/>
<Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} transitionTimingFunction="ease" color="teal">
<Tooltip label="Start service" zIndex={0} 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" />

2
frontend/src/components/NavBar/index.tsx
View File

@@ -46,4 +46,4 @@ export default function NavBar({ closeNav, opened }: {closeNav: () => void, open
</Navbar.Section>
</Navbar>
}
}

5
frontend/src/components/PortAndInterface.tsx
View File

@@ -1,9 +1,8 @@
import { Autocomplete, AutocompleteItem, Space, Title } from "@mantine/core"
import { UseForm } from "@mantine/hooks/lib/use-form/use-form";
import React, { useEffect, useState } from "react"
import { getipinterfaces } from "../js/utils";
import PortInput from "./PortInput";
import { UseFormReturnType } from "@mantine/form/lib/types";
interface ItemProps extends AutocompleteItem {
label: string;
@@ -16,7 +15,7 @@ const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
);
export default function PortAndInterface({ form, int_name, port_name, label }:{ form:UseForm<any>, int_name:string, port_name:string, label?:string }) {
export default function PortAndInterface({ form, int_name, port_name, label }:{ form:UseFormReturnType<any>, int_name:string, port_name:string, label?:string }) {
const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);

4
frontend/src/components/PortHijack/AddNewService.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';
import { ImCross } from "react-icons/im"
@@ -28,7 +28,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
ip_dst:"127.0.0.1",
autostart: false,
},
validationRules:{
validate:{
name: (value) => value !== ""?true:false,
public_port: (value) => value>0 && value<65536,
proxy_port: (value) => value>0 && value<65536,

4
frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { okNotify, regex_ipv4_no_cidr, regex_ipv6_no_cidr } from '../../../js/utils';
import { ImCross } from "react-icons/im"
@@ -13,7 +13,7 @@ function ChangeDestination({ opened, onClose, service }:{ opened:boolean, onClos
ip_dst:service.ip_dst,
proxy_port:service.proxy_port
},
validationRules:{
validate:{
proxy_port: (value) => value>0 && value<65536,
ip_dst: (value) => value.match(regex_ipv6_no_cidr)?true:false || value.match(regex_ipv4_no_cidr)?true:false
}

4
frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
@@ -9,7 +9,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const form = useForm({
initialValues: { name:service.name },
validationRules:{ name: (value) => value !== "" }
validate:{ name: (value) => value !== "" }
})
const close = () =>{

8
frontend/src/components/PortHijack/ServiceRow/index.tsx
View File

@@ -10,7 +10,7 @@ import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
import ChangeDestination from './ChangeDestination';
import PortInput from '../../PortInput';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
function ServiceRow({ service }:{ service:Service }) {
@@ -25,7 +25,7 @@ function ServiceRow({ service }:{ service:Service }) {
const form = useForm({
initialValues: { proxy_port:service.proxy_port },
validationRules:{ proxy_port: (value) => value > 0 && value < 65536 }
validate:{ proxy_port: (value) => value > 0 && value < 65536 }
})
const onChangeProxyPort = ({proxy_port}:{proxy_port:number}) => {
@@ -142,7 +142,7 @@ function ServiceRow({ service }:{ service:Service }) {
<Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
</Menu>
<Space w="md"/>
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
<ActionIcon color="red" loading={buttonLoading}
onClick={stopService} size="xl" radius="md" variant="filled"
disabled={!service.active}
@@ -153,7 +153,7 @@ function ServiceRow({ service }:{ service:Service }) {
</ActionIcon>
</Tooltip>
<Space w="md"/>
<Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} transitionTimingFunction="ease" color="teal">
<Tooltip label="Start service" zIndex={0} color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={service.active}>
<FaPlay size="20px" />

4
frontend/src/components/RegexProxy/AddNewService.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
@@ -24,7 +24,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
chosenInternalPort:false,
autostart: true
},
validationRules:{
validate:{
name: (value) => value !== ""?true:false,
port: (value) => value>0 && value<65536,
internalPort: (value) => value>0 && value<65536,

4
frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, Notification, Modal, Center, Title } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { ImCross } from "react-icons/im"
import { FaLongArrowAltDown } from 'react-icons/fa';
@@ -19,7 +19,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
internalPort: service.internal_port,
port: service.public_port
},
validationRules:{
validate:{
internalPort: (value) => value>0 && value<65536,
port: (value) => value>0 && value<65536
}

6
frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
@@ -9,7 +9,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const form = useForm({
initialValues: { name:service.name },
validationRules:{ name: (value) => value !== "" }
validate:{ name: (value) => value !== "" }
})
const close = () =>{
@@ -65,4 +65,4 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
}
export default RenameForm;
export default RenameForm;

6
frontend/src/components/RegexProxy/ServiceRow/index.tsx
View File

@@ -153,7 +153,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<Space w="md"/>
{["pause","wait"].includes(service.status)?
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<Tooltip label="Stop service" zIndex={0} color="orange" opened={tooltipStopOpened}>
<ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}
@@ -163,7 +163,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<FaStop size="20px" />
</ActionIcon>
</Tooltip>:
<Tooltip label={service.status === "stop"?"Start in pause mode":"Pause service"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={service.status === "stop"?"cyan":"red"}>
<Tooltip label={service.status === "stop"?"Start in pause mode":"Pause service"} zIndex={0} color={service.status === "stop"?"cyan":"red"}>
<ActionIcon color={service.status === "stop"?"cyan":"red"} loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled">
<FaPause size="20px" />
@@ -172,7 +172,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
<Space w="md"/>
<Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
<Tooltip label="Start service" zIndex={0} 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" />

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

@@ -51,14 +51,14 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
</Grid.Col>
<Grid.Col span={2} className='center-flex'>
<Space w="xs" />
<Tooltip label={regexInfo.active?"Deactivate":"Activate"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={regexInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
<Tooltip label={regexInfo.active?"Deactivate":"Activate"} zIndex={0} color={regexInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
<ActionIcon color={regexInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="xl" radius="md" variant="filled"
onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
>{regexInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
</Tooltip>
<Space w="xs" />
<Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={deleteTooltipOpened} >
<Tooltip label="Delete regex" zIndex={0} color="red" opened={deleteTooltipOpened} >
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
onFocus={() => setDeleteTooltipOpened(false)} onBlur={() => setDeleteTooltipOpened(false)}
onMouseEnter={() => setDeleteTooltipOpened(true)} onMouseLeave={() => setDeleteTooltipOpened(false)}