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/sessionExpired/sessionExpired.Style.js

@@ -0,0 +1,64 @@
+export const sessionExpiredStyle = theme => ({
+ card: {
+ width: 500,
+ borderRadius: 12,
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ boxShadow: theme.shadows[5],
+ overflow: 'hidden',
+ },
+ cardHeader: {
+ backgroundColor: '#f44336',
+ color: '#fff',
+ padding: theme.spacing(1, 2),
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ cardContent: {
+ padding: theme.spacing(2),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ closeButton: {
+ cursor: 'pointer',
+ color: '#fff',
+ },
+ 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: 'rgba(255, 233, 154, 0.5)',
+ backdropFilter: 'blur(25px)',
+ },
+ textDecorationNone: {
+ width: '100%',
+ marginTop: theme.spacing(2),
+ },
+ customButtonStyle: {
+ backgroundColor: '#4CAF50',
+ color: '#fff',
+ '&:hover': {
+ backgroundColor: '#388E3C',
+ },
+ },
+ buttonContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ marginTop: theme.spacing(2),
+ },
+});

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Card, CardContent, Typography } 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 ExpiredSessionIcon from '../../assets/images/session_expired.svg';
+import CloseIcon from '@material-ui/icons/Close';
+
+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} className={classes.modal}>
+ <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}>
+ <img src={ExpiredSessionIcon} alt="expired session icon" className={classes.icon} />
+ </div>
+ <Typography variant="body1" className={classes.centerText}>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

@@ -1,5 +1,6 @@
 import ZubhubAPI from '../../api';
 import { toast } from 'react-toastify';
+import sessionExpiredModal from '../../components/sessionExpired/sessionExpired';
 
 const API = new ZubhubAPI();
 
@@ -80,7 +81,8 @@ export const logout = args => {
  */
 export const getAuthUser = props => {
  return dispatch => {
- return API.getAuthUser(props.auth.token)
+ return API.getAuthUser('props.auth.token')
+ // return API.getAuthUser(props.auth.token)
  .then(res => {
  if (!res.id) {
  dispatch(
@@ -90,7 +92,7 @@ export const getAuthUser = props => {
  t: props.t,
  }),
  ).then(() => {
- props.history.push('/account-status');
+ props.history.push('/session-expired');
  });
  throw new Error(props.t('pageWrapper.errors.unexpected'));
  } else {
@@ -113,6 +115,7 @@ export const getAuthUser = props => {
  };
 };
 
+
 export const AccountStatus = args => {
  return () => {
  return API.getAccountStatus(args.token).catch(() => {

zubhub_frontend/zubhub/src/views/PageWrapper.jsx

@@ -253,7 +253,8 @@ function PageWrapper(props) {
  '/challenge',
  '/password-reset',
  '/email-confirm',
- '/password-reset-confirm'
+ '/password-reset-confirm',
+ '/session-expired'
  ].includes(props.match?.path) && (
  <div style={{ minHeight: '80vh' }}>
  <NotFoundPage />
@@ -274,7 +275,8 @@ function PageWrapper(props) {
  '/about',
  '/challenge',
  '/email-confirm',
- '/password-reset-confirm'
+ '/password-reset-confirm',
+ '/session-expired'
  ].includes(props.match?.path) && <div style={{ minHeight: '90vh' }}>{props.children}</div>}
 
  <footer className={clsx('footer-distributed', classes.footerStyle)}>