session expired modal

zubhub_frontend/zubhub/src/App.js

@@ -10,9 +10,9 @@ import ProtectedRoute from './components/protected_route/ProtectedRoute';
 import ZubhubAPI from '../src/api/api';
 import { updateTheme } from './theme';
 import ScrollToTop from './ScrollToTop';
+import SessionExpiredModal from './components/sessionExpired/sessionExpired';
 
 const SearchResults = React.lazy(() => import('./views/search_results/SearchResults'));
-
 const Signup = React.lazy(() => import('./views/signup/Signup'));
 const Login = React.lazy(() => import('./views/login/Login'));
 const PasswordReset = React.lazy(() => import('./views/password_reset/PasswordReset'));
@@ -492,7 +492,14 @@ function App(props) {
  </PageWrapper>
  )}
  />
-
+ <Route
+ path="/session-expired"
+ render={routeProps => (
+ <PageWrapper {...routeProps} {...props}>
+ <LazyImport LazyComponent={SessionExpiredModal} {...routeProps} {...props} />
+ </PageWrapper>
+ )}
+ />
  <Route
  path="*"
  render={routeProps => (

zubhub_frontend/zubhub/src/components/modals/modal.styles.js

@@ -22,7 +22,8 @@ export const modalStyles = theme => ({
  dialogContainer: {
  '& .MuiDialog-paper': {
  overflow: 'visible !important'
- }
+ },
+ backdropFilter: 'blur(15px)',
  },
  dialogPaper: {
  borderRadius: 8,

zubhub_frontend/zubhub/src/components/sessionExpired/sessionExpired.Style.js

@@ -0,0 +1,85 @@
+export const sessionExpiredStyle = theme => ({
+ card: {
+ borderRadius: 12,
+ position: 'fixed',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ boxShadow: theme.shadows[5],
+ overflow: 'hidden',
+ width: '90%',
+ zIndex: 1300,
+ [theme.breakpoints.up('sm')]: {
+ width: 500,
+ },
+ },
+ cardHeader: {
+ backgroundColor: '#f44336',
+ color: theme.palette.common.white,
+ padding: theme.spacing(1),
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(1, 2),
+ },
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ cardContent: {
+ padding: theme.spacing(1),
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(2),
+ },
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ closeButton: {
+ cursor: 'pointer',
+ color: theme.palette.common.white,
+ },
+ iconWrapper: {
+ marginBottom: theme.spacing(2),
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ centerText: {
+ textAlign: 'center',
+ marginBottom: theme.spacing(1),
+ },
+ modal: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100vw',
+ height: '100vh',
+ backgroundColor: theme.palette.background.paper,
+ backdropFilter: 'blur(5px)',
+ },
+ textDecorationNone: {
+ width: '100%',
+ marginTop: theme.spacing(2),
+ },
+ customButtonStyle: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.common.white,
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ },
+ },
+ buttonContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ marginTop: theme.spacing(2),
+ },
+ errorIcon: {
+ fontSize: 60,
+ color: 'var(--primary-color1)',
+ },
+ titleStyle: {
+ fontSize: '1.2rem',
+ [theme.breakpoints.up('sm')]: {
+ fontSize: '1.5rem',
+ },
+ fontWeight: 600,
+ },
+});

zubhub_frontend/zubhub/src/components/sessionExpired/sessionExpired.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Card, CardContent, Typography, ErrorOutline } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useHistory, Link } from 'react-router-dom';
+import { sessionExpiredStyle } from './sessionExpired.Style';
+import Modal from '../modals/Modal';
+import CustomButton from '../button/Button';
+import CloseIcon from '@material-ui/icons/Close';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+const useStyles = makeStyles(sessionExpiredStyle);
+
+const SessionExpiredModal = () => {
+ const classes = useStyles();
+ const [modalOpen, setModalOpen] = useState(true);
+ const history = useHistory();
+
+ const handleClose = () => {
+ setModalOpen(false);
+ history.push('/login');
+ };
+
+ return (
+ <Modal open={modalOpen}>
+ <Card className={classes.card}>
+ <div className={classes.cardHeader}>
+ <Typography variant="h6">Session Expired</Typography>
+ <Typography variant="button" className={classes.closeButton} onClick={handleClose}>
+ <CloseIcon />
+ </Typography>
+ </div>
+ <CardContent className={classes.cardContent}>
+ <div className={classes.iconWrapper}>
+ <ErrorOutlineIcon className={clsx(classes.icon, classes.errorIcon)} />
+ </div>
+ <Typography
+ variant="body1"
+ color="textPrimary"
+ className={clsx(classes.centerText, classes.titleStyle)}
+ >
+ Your session has expired
+ </Typography>
+ <Typography
+ variant="body2"
+ className={classes.centerText}
+ >
+ You will be redirected to the login page
+ </Typography>
+ <div className={classes.buttonContainer}>
+ <Link to="/login" className={classes.textDecorationNone}>
+ <CustomButton
+ variant="outlined"
+ size="small"
+ primaryButtonStyle
+ customButtonStyle
+ >
+ OK
+ </CustomButton>
+ </Link>
+ </div>
+ </CardContent>
+ </Card>
+ </Modal>
+ );
+};
+
+export default SessionExpiredModal;

zubhub_frontend/zubhub/src/store/actions/authActions.js

@@ -88,7 +88,7 @@ export const logout = args => {
  */
 export const getAuthUser = props => {
  return dispatch => {
- return API.getAuthUser(props.auth.token)
+  return API.getAuthUser(props.auth.token)
  .then(res => {
  if (!res.id) {
  dispatch(
@@ -121,6 +121,7 @@ export const getAuthUser = props => {
  };
 };
 
+
 export const AccountStatus = args => {
  return () => {
  return API.getAccountStatus(args.token).catch(() => {

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

@@ -111,13 +111,36 @@ function PageWrapper(props) {
  setPrevScrollPos(currentScrollPos);
  }, [prevScrollPos]);
 
+ useEffect(() => {
+ if (!props.auth.token) {
+ props.history.push('/session-expired')
+ }
+ }, [props.auth.token])
+
  useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
  window.removeEventListener('scroll', handleScroll);
  };
  }, [handleScroll]);
 
+ const unprotectedRoutes = [
+ '/',
+ '/signup',
+ '/login',
+ '/password-reset',
+ '/projects/:id',
+ '/ambassadors',
+ '/creators/:username',
+ '/privacy_policy',
+ '/terms_of_use',
+ '/about',
+ '/challenge',
+ '/email-confirm',
+ '/password-reset-confirm',
+ '/session-expired'
+ ];
+
  const throttledFetchOptions = useMemo(
  () =>
  throttle(async (query, searchType) => {
@@ -165,19 +188,6 @@ function PageWrapper(props) {
  throttledFetchOptions.cancel();
  }, []);
 
- useEffect(() => {
- handleSetState({ loading: true });
- fetchHero(props)
- .then(() => {
- if (props.auth.token) {
- return props.getAuthUser(props);
- }
- })
- .finally(() => {
- handleSetState({ loading: false });
- });
- }, [props.auth.token]);
-
  useEffect(() => {
  handleSetState(handleProfileMenuClose());
  }, [trigger]);
@@ -240,42 +250,14 @@ function PageWrapper(props) {
  <Container className={classes.childrenContainer} maxWidth="lg">
  {props.auth?.token ? <DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout> : null}
  {!props.auth?.token &&
- ![
- '/',
- '/signup',
- '/login',
- '/projects/:id',
- '/ambassadors',
- '/creators/:username',
- '/privacy_policy',
- '/terms_of_use',
- '/about',
- '/challenge',
- '/password-reset',
- '/email-confirm',
- '/password-reset-confirm'
- ].includes(props.match?.path) && (
+ !unprotectedRoutes.includes(props.match?.path) && (
  <div style={{ minHeight: '80vh' }}>
  <NotFoundPage />
  </div>
  )}
  </Container>
  {!props.auth?.token &&
- [
- '/',
- '/signup',
- '/login',
- '/password-reset',
- '/projects/:id',
- '/ambassadors',
- '/creators/:username',
- '/privacy_policy',
- '/terms_of_use',
- '/about',
- '/challenge',
- '/email-confirm',
- '/password-reset-confirm'
- ].includes(props.match?.path) && <div style={{ minHeight: '90vh' }}>{props.children}</div>}
+ unprotectedRoutes.includes(props.match?.path) && <div style={{ minHeight: '90vh' }}>{props.children}</div>}
 
  <footer className={clsx('footer-distributed', classes.footerStyle)}>
  <Box>