Password Authentication

frontend/src/components/AddNewRegex.tsx

@@ -73,7 +73,6 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
 
   return <form onSubmit={form.onSubmit(submitRequest)}>
         <TextInput
-            required
             label="Regex"
             placeholder="[A-Z0-9]{31}="
             {...form.getInputProps('regex')}
@@ -93,14 +92,12 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
             data={['C -> S', 'S -> C', 'C <-> S']}
             label="Choose the source of the packets to filter"
             variant="filled"
-            required
             {...form.getInputProps('mode')}
         />
         <Space h="md" />
         <FilterTypeSelector
             size="md"
             color="gray"
-            required
             {...form.getInputProps('type')}
         />
         <Group position="right" mt="md">

frontend/src/components/AddNewService.tsx

@@ -41,7 +41,6 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
 
   return <form onSubmit={form.onSubmit(submitRequest)}>
         <TextInput
-            required
             label="Service name"
             placeholder="Challenge 01"
             {...form.getInputProps('name')}
@@ -49,7 +48,6 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
         <Space h="md" />
 
         <NumberInput
-            required
             placeholder="8080"
             min={1}
             max={65535}

frontend/src/components/Header/index.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { ActionIcon, Badge, Image, Modal } from '@mantine/core';
+import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput } from '@mantine/core';
 import style from "./Header.module.scss";
-import { errorNotify, generalstats } from '../../js/utils';
-import { GeneralStats, update_freq } from '../../js/models';
+import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
+import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
 import { BsPlusLg } from "react-icons/bs"
 import { AiFillHome } from "react-icons/ai"
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import AddNewRegex from '../AddNewRegex';
 import AddNewService from '../AddNewService';
+import { MdSettings } from 'react-icons/md';
+import { FaLock } from 'react-icons/fa';
+import { ImCross, ImExit } from 'react-icons/im';
+import { useForm } from '@mantine/hooks';
 
 
 function Header() {
@@ -30,9 +34,50 @@ function Header() {
       const updater = setInterval(updateInfo, update_freq)
       return () => { clearInterval(updater) }
   }, []);
+  
+  const logout_action = () => {
+    logout().then(r => {
+        window.location.reload()
+    }).catch(r => {
+      errorNotify("Logout failed!",`Error: ${r}`)
+    })
+  } 
+
+
+  const form = useForm({
+    initialValues: {
+        password:"",
+        expire:true
+    },
+    validationRules:{
+      password: (value) => value !== ""
+    }
+  })
+
+  const [loadingBtn, setLoadingBtn] = useState(false)
+  const [error, setError] = useState<null|string>(null)
+  const [changePasswordModal, setChangePasswordModal] = useState(false);
+
+  const submitRequest = async (values:ChangePassword) => {
+    setLoadingBtn(true)
+    await changepassword(values).then(res => {
+      if(!res){
+        okNotify("Password change done!","The password of the firewall has been changed!")
+        setChangePasswordModal(false)
+        form.reset()
+      }else{
+        setError(res)
+      }
+    }).catch( err => setError(err.toString()))
+    setLoadingBtn(false)
+  }
+
 
 
   const {srv_id} = useParams()
+
+  
+
   const [open, setOpen] = useState(false);
   const closeModal = () => {setOpen(false);}
 
@@ -45,6 +90,13 @@ function Header() {
         <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>
         <div style={{marginLeft:"20px"}}></div>
+        <Menu>
+          <Menu.Label>Firewall Access</Menu.Label>
+          <Menu.Item icon={<ImExit size={14} />} onClick={logout_action}>Logout</Menu.Item>
+          <Divider />
+          <Menu.Item color="red" icon={<FaLock size={14} />} onClick={() => setChangePasswordModal(true)}>Change Password</Menu.Item>
+        </Menu>
+        <div style={{marginLeft:"20px"}}></div>
         { location.pathname !== "/"?
             <ActionIcon color="teal" style={{marginRight:"10px"}}
               size="xl" radius="md" variant="filled"
@@ -61,8 +113,31 @@ function Header() {
             <AddNewService closePopup={closeModal} />
           </Modal>
         }
-            
-        
+        <Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>
+
+          <form onSubmit={form.onSubmit(submitRequest)}>
+              <Space h="md" />
+              <TextInput
+                  label="New Password"
+                  placeholder="$3cr3t"
+                  {...form.getInputProps('password')}
+              />
+              <Space h="md" />
+              <Switch
+                  label="Expire the login status to all connections"
+                  {...form.getInputProps('expire', { type: 'checkbox' })}
+              />
+              <Space h="md" />
+              <Group position="right" mt="md">
+                <Button loading={loadingBtn} type="submit">Change Password</Button>
+              </Group>
+            </form>
+            <Space h="xl" />
+            {error?<>
+              <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                  Error: {error}
+              </Notification><Space h="md" /></>:null}
+        </Modal>
         <div style={{marginLeft:"40px"}}></div>
   </div>
 }

frontend/src/components/MainLayout.tsx

@@ -1,13 +1,11 @@
-import { Container, MantineProvider, Space } from '@mantine/core';
-import { NotificationsProvider } from '@mantine/notifications';
 import React from 'react';
+import { Container, Space } from '@mantine/core';
 import Footer from './Footer';
 import Header from './Header';
 
 function MainLayout({ children }:{ children:any }) {
   return <>
-      <MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
-        <NotificationsProvider>
+      
             <Header />
             <Space h="xl" />
             <Container size="xl" style={{minHeight:"57.5vh"}}>
@@ -15,8 +13,7 @@ function MainLayout({ children }:{ children:any }) {
             </Container>
             <Space h="xl" />
             <Footer />
-        </NotificationsProvider>
-      </MantineProvider>
+
   </>
 }