Now on IPv6

2022-07-10 15:05:56 +02:00
parent 8cd1b69752
commit ada3a7212b
13 changed files with 208 additions and 163 deletions
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -15,7 +15,7 @@ type RegexAddInfo = {
    deactive:boolean
 }

-function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:number }) { 
+function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) { 

    const form = useForm({
        initialValues: {
@@ -48,7 +48,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
        const request:RegexAddForm = {
            is_blacklist:values.type !== "whitelist",
            is_case_sensitive: !values.is_case_insensitive,
-            service_port: service,
+            service_id: service,
            mode: filter_mode?filter_mode:"B",
            regex: b64encode(values.regex),
            active: !values.deactive
@@ -58,7 +58,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
            if (!res){
                setSubmitLoading(false)
                close();
-                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_port} 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")
--- a/frontend/src/components/AddNewService.tsx
+++ b/frontend/src/components/AddNewService.tsx
@@ -7,6 +7,7 @@ import { ImCross } from "react-icons/im"
 type ServiceAddForm = {
    name:string,
    port:number,
+    ipv6:boolean,
    autostart: boolean,
 }

@@ -16,6 +17,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
        initialValues: {
            name:"",
            port:8080,
+            ipv6:false,
            autostart: true
        },
        validationRules:{
@@ -33,13 +35,13 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
    const [submitLoading, setSubmitLoading] = useState(false)
    const [error, setError] = useState<string|null>(null)
 
-    const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
+    const submitRequest = ({ name, port, autostart, ipv6 }:ServiceAddForm) =>{
        setSubmitLoading(true)
-        addservice({name, port}).then( res => {
-            if (res.status === "ok"){
+        addservice({name, port, ipv6}).then( res => {
+            if (res.status === "ok" && res.service_id){
                setSubmitLoading(false)
                close();
-                if (autostart) startservice(port)
+                if (autostart) startservice(res.service_id)
                okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
            }else{
                setSubmitLoading(false)
@@ -76,6 +78,13 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                {...form.getInputProps('autostart', { type: 'checkbox' })}
            />

+            <Space h="sm" />
+
+            <Switch
+                label="Filter on Ipv6"
+                {...form.getInputProps('ipv6', { type: 'checkbox' })}
+            />
+
            <Group position="right" mt="md">
                <Button loading={submitLoading} type="submit">Add Service</Button>
            </Group>
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -70,7 +70,6 @@ function Header() {
  }

  const {srv} = useParams()
-  const service_port = srv?parseInt(srv):null

  const [open, setOpen] = useState(false);
  const closeModal = () => {setOpen(false);}
@@ -125,7 +124,7 @@ function Header() {
            </ActionIcon>
          </Tooltip>
        :null}
-        { service_port?
+        { srv?
          <Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
             aria-describedby="tooltip-add-id"
@@ -140,8 +139,8 @@ function Header() {
          </Tooltip>
      }
        
-        {service_port?
-            <AddNewRegex opened={open} onClose={closeModal} service={service_port} />:
+        {srv?
+            <AddNewRegex opened={open} onClose={closeModal} service={srv} />:
            <AddNewService opened={open} onClose={closeModal} />
        }
        <Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -79,7 +79,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
            />
            <Space h="md" />
            <div className='center-flex'>
-              <Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_port}</Badge>
+              <Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_id}</Badge>
              <Space w="xs" />
              <Badge size="md" color={regexInfo.active?"lime":"red"} variant="filled">{regexInfo.active?"ACTIVE":"DISABLED"}</Badge>
              <Space w="xs" />
--- a/frontend/src/components/ServiceRow/RenameForm.tsx
+++ b/frontend/src/components/ServiceRow/RenameForm.tsx
@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v

    const submitRequest = ({ name }:{ name:string }) => {
        setSubmitLoading(true)
-        renameservice(service.port, name).then( res => {
+        renameservice(service.service_id, name).then( res => {
            if (!res){
                setSubmitLoading(false)
                close();
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -25,7 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })

    const stopService = async () => {
        setButtonLoading(true)
-        await stopservice(service.port).then(res => {
+        await stopservice(service.service_id).then(res => {
            if(!res){
                okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
            }else{
@@ -39,7 +39,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })

    const startService = async () => {
        setButtonLoading(true)
-        await startservice(service.port).then(res => {
+        await startservice(service.service_id).then(res => {
            if(!res){
                okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
            }else{
@@ -52,7 +52,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
    }

    const deleteService = () => {
-        deleteservice(service.port).then(res => {
+        deleteservice(service.service_id).then(res => {
            if (!res){
                okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
            }else
@@ -94,8 +94,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                </MediaQuery>
                
                <div className="center-flex-row">
-                    <Badge style={{marginBottom:"8px"}} color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
+                    <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
+                    <Space h="xs" />
                    <Badge color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
+                    <Space h="xs" />
+                    <Badge color={service.ipv6?"pink":"cyan"} radius="sm" size="md" variant="filled">Protocol: {service.ipv6?"IPv6":"IPv4"}</Badge>
                </div>
                <MediaQuery largerThan="md" styles={{ display: 'none' }}>
                    <div className='flex-spacer' />