Merge pull request #67 from Fgerthoffert/develop

Updated login flow and getting data from cache
Fgerthoffert · Nov 8, 2019 · 49b0ffc · 49b0ffc
2 parents 1cad9eb + 6d5da6e
commit 49b0ffc
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 126 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -44,7 +44,7 @@
     "loglevel": "^1.6.3",
     "material-color-hash": "^0.1.6",
     "material-table": "^1.50.0",
-    "npm": "^6.11.3",
+    "npm": "^6.13.0",
     "randomcolor": "^0.5.4",
     "react": "^16.9.0",
     "react-bootstrap": "^1.0.0-beta.12",
@@ -55,6 +55,7 @@
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.2",
+    "reactjs-localstorage": "0.0.8",
     "socket.io-client": "^2.2.0",
     "styled-components": "^4.4.0",
     "tippy": "0.0.0",

diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
@@ -17,41 +17,41 @@ const drawerWidth = 240;
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      flexGrow: 1
+      flexGrow: 1,
     },
     appBar: {
       transition: theme.transitions.create(['margin', 'width'], {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
+        duration: theme.transitions.duration.leavingScreen,
+      }),
     },
     appBarShift: {
       width: `calc(100% - ${drawerWidth}px)`,
       marginLeft: drawerWidth,
       transition: theme.transitions.create(['margin', 'width'], {
         easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen
-      })
+        duration: theme.transitions.duration.enteringScreen,
+      }),
     },
     menuButton: {
-      marginRight: theme.spacing(2)
+      marginRight: theme.spacing(2),
     },
     hide: {
-      display: 'none'
+      display: 'none',
     },
     title: {
-      flexGrow: 1
-    }
-  })
+      flexGrow: 1,
+    },
+  }),
 );
 
 const mapState = (state: iRootState) => ({
   showMenu: state.global.showMenu,
-  pageTitle: state.global.pageTitle
+  pageTitle: state.global.pageTitle,
 });
 
 const mapDispatch = (dispatch: any) => ({
-  setShowMenu: dispatch.global.setShowMenu
+  setShowMenu: dispatch.global.setShowMenu,
 });
 
 type connectedProps = ReturnType<typeof mapState> &
@@ -66,22 +66,22 @@ const Header: FC<connectedProps> = ({ setShowMenu, showMenu, pageTitle }) => {
 
   return (
     <AppBar
-      position='fixed'
+      position="fixed"
       className={clsx(classes.appBar, {
-        [classes.appBarShift]: showMenu
+        [classes.appBarShift]: showMenu,
       })}
     >
       <Toolbar>
         <IconButton
-          color='inherit'
-          aria-label='open drawer'
+          color="inherit"
+          aria-label="open drawer"
           onClick={handleDrawerOpen}
-          edge='start'
+          edge="start"
           className={clsx(classes.menuButton, showMenu && classes.hide)}
         >
           <MenuIcon />
         </IconButton>
-        <Typography variant='h6' noWrap className={classes.title}>
+        <Typography variant="h6" noWrap className={classes.title}>
           {pageTitle}
         </Typography>
         <SwitchPoints />
@@ -93,5 +93,5 @@ const Header: FC<connectedProps> = ({ setShowMenu, showMenu, pageTitle }) => {
 
 export default connect(
   mapState,
-  mapDispatch
+  mapDispatch,
 )(Header);
diff --git a/ui/src/components/LoginDialog/index.tsx b/ui/src/components/LoginDialog/index.tsx
@@ -15,15 +15,16 @@ const mapState = (state: iRootState) => ({
   authMessage: state.global.authMessage,
   username: state.global.username,
   password: state.global.password,
-  auth0Initialized: state.global.auth0Initialized
+  loading: state.global.loading,
+  auth0Initialized: state.global.auth0Initialized,
 });
 
 const mapDispatch = (dispatch: any) => ({
   setUsername: dispatch.global.setUsername,
   setPassword: dispatch.global.setPassword,
   initAuth: dispatch.global.initAuth,
   setAuthMessage: dispatch.global.setAuthMessage,
-  loginCallback: dispatch.global.loginCallback
+  loginCallback: dispatch.global.loginCallback,
 });
 
 type connectedProps = ReturnType<typeof mapState> &
@@ -35,15 +36,21 @@ const LoginDialog: FC<connectedProps> = ({
   authMessage,
   initAuth,
   setAuthMessage,
-  loginCallback
+  loginCallback,
+  loading,
 }) => {
-  if (loggedIn === false) {
+  if (loading) {
+    return null;
+  }
+  if (!auth0Initialized && !loading) {
     initAuth();
+    return null;
   }
+
   const query = window.location.search;
   if (query.includes('error_description=')) {
     const errorMsg = new URLSearchParams(window.location.search).get(
-      'error_description'
+      'error_description',
     );
     if (errorMsg !== authMessage) {
       setAuthMessage(errorMsg);
@@ -60,24 +67,24 @@ const LoginDialog: FC<connectedProps> = ({
 
   const openLogin = async () => {
     await window.Auth0.loginWithRedirect({
-      redirect_uri: window.location.origin
+      redirect_uri: window.location.origin,
     });
   };
 
-  if (auth0Initialized === false) {
+  if (!auth0Initialized) {
     return null;
   }
 
   return (
-    <Dialog open={!loggedIn} aria-labelledby='form-dialog-title'>
-      <DialogTitle id='form-dialog-title'>Please Log-in</DialogTitle>
+    <Dialog open={!loggedIn} aria-labelledby="form-dialog-title">
+      <DialogTitle id="form-dialog-title">Please Log-in</DialogTitle>
       <DialogContent>
         <DialogContentText>
           You will be redirected to{' '}
           <a
-            href='https://auth0.com/'
-            rel='noopener noreferrer'
-            target='_blank'
+            href="https://auth0.com/"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             Auth0
           </a>
@@ -87,7 +94,7 @@ const LoginDialog: FC<connectedProps> = ({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={openLogin} color='primary'>
+        <Button onClick={openLogin} color="primary">
           Log-in
         </Button>
       </DialogActions>
@@ -97,5 +104,5 @@ const LoginDialog: FC<connectedProps> = ({
 
 export default connect(
   mapState,
-  mapDispatch
+  mapDispatch,
 )(LoginDialog);
diff --git a/ui/src/layout/LoadingBar.tsx b/ui/src/layout/LoadingBar.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+import { connect } from 'react-redux';
+
+import { iRootState } from '../store';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      width: '100%',
+    },
+  }),
+);
+
+const mapState = (state: iRootState) => ({
+  globalLoading: state.global.loading,
+  velocityLoading: state.velocity.loading,
+  roadmapLoading: state.roadmap.loading,
+});
+
+type connectedProps = ReturnType<typeof mapState>;
+const LoadingBar: FC<connectedProps> = ({
+  globalLoading,
+  velocityLoading,
+  roadmapLoading,
+}) => {
+  const classes = useStyles();
+  if (globalLoading || velocityLoading || roadmapLoading) {
+    return (
+      <React.Fragment>
+        <LinearProgress color="secondary" className={classes.root} />
+      </React.Fragment>
+    );
+  }
+  return null;
+};
+
+export default connect(
+  mapState,
+  null,
+)(LoadingBar);
diff --git a/ui/src/layout/index.tsx b/ui/src/layout/index.tsx
@@ -6,35 +6,36 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Header from '../components/Header';
 import Menu from '../components/Menu';
 import LoginDialog from '../components/LoginDialog';
+import LoadingBar from './LoadingBar';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      display: 'flex'
+      display: 'flex',
     },
     drawerHeader: {
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0, 1),
       ...theme.mixins.toolbar,
-      justifyContent: 'flex-end'
+      justifyContent: 'flex-end',
     },
     content: {
       flexGrow: 1,
       padding: theme.spacing(3),
       transition: theme.transitions.create('margin', {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
+        duration: theme.transitions.duration.leavingScreen,
+      }),
     },
     contentShift: {
       transition: theme.transitions.create('margin', {
         easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen
+        duration: theme.transitions.duration.enteringScreen,
       }),
-      marginLeft: 0
-    }
-  })
+      marginLeft: 0,
+    },
+  }),
 );
 
 export interface LayoutProps {
@@ -54,10 +55,12 @@ export default function Layout(props: LayoutProps) {
       <Menu />
       <main
         className={clsx(classes.content, {
-          [classes.contentShift]: open
+          [classes.contentShift]: open,
         })}
       >
         <div className={classes.drawerHeader} />
+        <LoadingBar />
+
         {children}
       </main>
     </div>

diff --git a/ui/src/models/global.ts b/ui/src/models/global.ts
@@ -29,6 +29,7 @@ const setAuth0Config = async () => {
 export const global = createModel({
   state: {
     log: {},
+    loading: false,
     showMenu: false,
     pageTitle: null,
     defaultPoints: true,
@@ -48,6 +49,9 @@ export const global = createModel({
     setLog(state: any, payload: any) {
       return { ...state, log: payload };
     },
+    setLoading(state: any, payload: any) {
+      return { ...state, loading: payload };
+    },
     setAuth0Initialized(state: any, payload: any) {
       return { ...state, auth0Initialized: payload };
     },
@@ -122,40 +126,18 @@ export const global = createModel({
         if (window.Auth0 !== undefined) {
           this.setAuth0Initialized(true);
         } else {
+          this.setLoading(true);
           await setAuth0Config();
-          /*
-          try {
-            const response = await window.Auth0.getTokenSilently();
-            console.log(response);
-          } catch (error) {
-            console.error(error);
-          }
-          console.log(window.Auth0);
-          */
-          /*
-          const test = window.Auth0.checkSession(
-            {
-              scope: 'openid profile email'
-            },
-            function(err: any, authResult: any) {
-              // err if automatic parseHash fails
-              if (err !== undefined && err) {
-                console.error(err);
-                return;
-              }
-              console.log(authResult);
-            }
-          );
-          */
-
           this.setAuth0Initialized(true);
+          this.setLoading(false);
         }
       }
     },
 
     async loginCallback(payload, rootState) {
       // tslint:disable-next-line:no-shadowed-variable
       const log = rootState.global.log;
+      this.setLoading(true);
       log.info('Received callback, finalizing logging');
       const auth0 =
         window.Auth0 === undefined ? await setAuth0Config() : window.Auth0;
@@ -179,6 +161,7 @@ export const global = createModel({
           });
         }
       }
+      this.setLoading(false);
     },
   },
 });