Internal 184 log out redirect (#198)

* converted useInterval to timeMod, extracted dashboard styles, fixed useEffect bug of excessive calling * broke styles into modules, formatting and addition of card info when not logged in * removed logic to check if local for login, added else statement for rerender to display login message in uploadplugin and sidebar components * fixed duplicate use state bug * fixed grapl header styling for engagementview * refactoring, fixed key errors for tables * changed color of button * black formatting
grapl-security · Aug 5, 2020 · 355ef4f · 355ef4f
1 parent 4646e23
commit 355ef4f
Show file tree

Hide file tree

Showing 24 changed files with 16,725 additions and 339 deletions.
diff --git a/src/js/engagement_view/package-lock.json b/src/js/engagement_view/package-lock.json
diff --git a/src/js/engagement_view/src/App.tsx b/src/js/engagement_view/src/App.tsx
@@ -1,26 +1,27 @@
 import React from 'react';
 import './LogIn.css';
-import {LogIn} from './Login';
-import {EngagementUx} from "./components/SideBar";
+import { LogIn } from './Login';
+import { EngagementUx } from "./components/EngagementView";
 import Dashboard from "./components/Dashboard";
 import UploadPlugin from "./components/UploadPlugin";
-import {HashRouter, Route, Switch} from 'react-router-dom';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 
 // Updates our react state, as well as localStorage state, to reflect the page
 // we should render
 
 export default function App() {
-    console.log("App loaded");
+    console.log("Grapl loaded");
+
     return (
         <>
-        <HashRouter>
-            <Switch>
-                <Route exact path = "/login" component = {LogIn}/>
-                <Route exact path = "/" component = {Dashboard}/>
-                <Route exact path = "/plugins" component = {UploadPlugin}/>
-                <Route exact path = "/engagements" component = {EngagementUx}/>
-            </Switch>
-        </HashRouter>
+            <HashRouter>
+                <Switch>
+                    <Route exact path = "/login" component = {LogIn}/>
+                    <Route exact path = "/" component = {Dashboard}/>
+                    <Route exact path = "/plugins" component = {UploadPlugin}/>
+                    <Route exact path = "/engagements" component = {EngagementUx}/>
+                </Switch>
+            </HashRouter>
         </>
     )
 }

diff --git a/src/js/engagement_view/src/Login.tsx b/src/js/engagement_view/src/Login.tsx
@@ -20,16 +20,24 @@ const useStyles = makeStyles(
 
 const engagement_edge = getAuthEdge();
 
-export const checkLogin = async () => {
+export const checkLogin = async (): Promise<boolean | null> => {
+
+  try { 
+
     const res = await fetch(`${engagement_edge}checkLogin`, 
       {
-        method: 'get',
+        method: 'post',
         credentials: 'include',
       }
     );
 
     const body = await res.json();
-    return body['success'] === 'True';
+
+    return (body['success'] === 'True')
+  } catch (e) {
+    console.warn(e);
+    return null
+  }
 };
 
 const validationSchema = Yup.object().shape({

diff --git a/src/js/engagement_view/src/components/Dashboard.tsx b/src/js/engagement_view/src/components/Dashboard.tsx
@@ -1,66 +1,65 @@
-import React from 'react';
-import {createStyles, makeStyles, Theme} from "@material-ui/core/styles";
+import React, { useEffect, useState } from 'react';
+import { checkLogin } from '../Login';
 import GraplHeader from "./reusableComponents/GraplHeader";
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { dasboardStyles } from './makeStyles/DashboardStyles';
+import LoginNotification from "./reusableComponents/Notifications";
 
-const useStyles = makeStyles( (theme: Theme) =>
-    createStyles({
-        root: {
-            display: "flex",
-        },
-        button: {
-            backgroundColor: "#42C6FF",
-            margin: "0.25rem",
-            padding: "0.25rem",
-        }, 
-        welcome: {
-            width:"70%",
-            textAlign:"center",
-            backgroundColor: "#373740",
-            height: "100vh",
-            color: "white"
-        },
-        nav: {
-            margin: "2rem",
-            width: "30%",
-            display: "flex",
-            flexDirection: "column",
-        },
-        dashboard: {
-            display: "flex",
-            flexDirection: "row",
-        }, 
-        link: {
-            color: "white",
-            textDecoration: "none",
-            padding: ".75rem",
-            backgroundColor: "#42C6FF",
-            margin: "1rem",
-            textAlign: "center",
-            borderRadius: ".35rem",
-            textTransform: "uppercase",
-            fontWeight: "bolder"
-        },
-
-    })
-);
+const useStyles = dasboardStyles; 
 
 export default function Dashboard() {
-        const classes = useStyles();
-        return (
-            <> 
-                <GraplHeader displayBtn={false} />
+    const classes = useStyles();
+
+    const [state, setState] = useState({
+        loggedIn: true,
+        renderedOnce: false,
+    });
+
+    useEffect(
+        () => {
+            if(state.renderedOnce){
+                return;
+            }
+
+            const interval = setInterval(async () => {
+                await checkLogin()
+                .then((loggedIn) => {
+                    if(!loggedIn){
+                        console.warn("Logged out")
+                    }
+                    setState({
+                        loggedIn: loggedIn || false, 
+                        renderedOnce: true,
+                    });
+                });
+            }, 2000);
+
+            return () => { clearInterval(interval) }
+        }, 
+    [state, setState])
+
+    console.log("state - loggedin", state.loggedIn); 
+
+    const loggedIn = state.loggedIn;
+
+    return (
+        <> 
+            <GraplHeader displayBtn={false} />
 
-                <div className = { classes.dashboard}>
-                    <section className = { classes.nav }>
-                            <Link to = "/engagements" className = {classes.link}> Engagements </Link>
-                            <Link to = "/plugins" className = {classes.link}> Upload Plugin </Link>
-                    </section>
+            <div className = { classes.dashboard}>
+                <section className = { classes.nav }>
+                        <Link to = "/engagements" className = {classes.link}> Engagements </Link>
+                        <Link to = "/plugins" className = {classes.link}> Upload Plugin </Link>
+                </section>
+
+                <section className = { classes.welcome }>
+                    <div className = {classes.loggedIn}>
+                        {!loggedIn ? <LoginNotification /> : ""}
+                    </div>
 
-                    <section className = { classes.welcome }>
-                        <h1> Welcome! </h1>
-                    </section>
-                </div>
-            </>
-        )
-}
+                    <h1> Welcome! </h1>
+                </section>
+            </div>
+        </>
+    )
+}