Merge pull request #1537 from clpetersonucf/issue/improved-invalid-lo…

…gin-states-updated

Improved invalid login states

src/components/invalid-login-modal.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Modal from './modal'
+
+const InvalidLoginModal = ({onClose}) => (
+	<Modal onClose={onClose} ignoreClose={true} smaller={true} alert={true}>
+		<div>
+			<span className='alert-title'>
+				Your Session is No Longer Valid
+			</span>
+			<p className='alert-description'>Your session with Materia is considered invalid and you have been logged out. You'll have to log back in to see this content.</p>
+			<span className='buttons'>
+				<a className='action_button'
+					onClick={onClose}>
+					Okay
+				</a>
+			</span>
+		</div>
+	</Modal>
+)
+
+export default InvalidLoginModal

src/components/modal.jsx

@@ -1,60 +1,45 @@
-import React from 'react'
-import { createPortal } from 'react-dom';
+import React, { useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+
 import './modal.scss'
 
-class Modal extends React.Component {
-	constructor( props ) {
-		super( props )
-		// create an element div for this modal
-		this.modalRef = React.createRef()
-		this.element = document.createElement( 'div' )
-		this.clickOutsideListener = this.clickOutsideListener.bind(this)
+const Modal = (props) => {
 
-		// We get hold of the div with the id modal that we have created in index.html
-		this.modalRoot = document.getElementById( 'modal' )
-	}
+	const innerModalRef = useRef(null)
 
-	clickOutsideListener(event){
+	const clickOutsideListener = (event) => {
 		// Do nothing if clicking ref's element or descendent elements
-		if (!this.modalRef.current || this.modalRef.current.contains(event.target)) {
-			return
-		}
+		if (!innerModalRef.current || innerModalRef.current.contains(event.target)) return
+		if (props.ignoreClose != true) props.onClose()
+	}
 
-		if (this.props.ignoreClose !== true) {
-			this.props.onClose()
-		}
-	};
+	useEffect(() => {
 
-	componentDidMount() {
-		this.modalRoot.appendChild( this.element )
-		document.addEventListener('mousedown', this.clickOutsideListener)
-		document.addEventListener('touchstart', this.clickOutsideListener)
-	}
+		document.addEventListener('mouseup', clickOutsideListener)
+		document.addEventListener('touchend', clickOutsideListener)
 
-	componentWillUnmount() {
-		this.modalRoot.removeChild( this.element )
-		document.removeEventListener('mousedown', this.clickOutsideListener)
-		document.removeEventListener('touchstart', this.clickOutsideListener)
-	}
+		return () => {
+			document.removeEventListener('mouseup', clickOutsideListener)
+			document.removeEventListener('touchend', clickOutsideListener)
+		}
 
-	render() {
-		const stuff = (
-			<>
-				<div className={`modal-overlay ${this.props.alert ? 'alert' : ''}`} id='modal-overlay'></div>
-
-				<div ref={this.modalRef} className={`modal ${this.props.smaller ? 'small' : ''} ${this.props.noGutter ? 'no-gutter' : ''}`} id='inner-modal'>
-					<span className='close-button'
-						id='close-button'
-						aria-label={`close${this.props.testId ? `-${this.props.testId}-` : '-'}modal`}
-						onClick={this.props.onClose}>X</span>
-					<div className={`modal-guts ${this.props.noGutter ? 'no-gutter' : ''}`}>
-						{this.props.children}
-					</div>
+	},[])
+
+	const modal = 
+		(<>
+			<div className={`modal-overlay ${props.alert ? 'alert' : ''}`} id='modal-overlay'></div>
+			<div ref={innerModalRef} className={`modal ${props.smaller ? 'small' : ''} ${props.noGutter ? 'no-gutter' : ''}`} id='inner-modal'>
+				<span className='close-button'
+					id='close-button'
+					aria-label={`close${props.testId ? `-${props.testId}-` : '-'}modal`}
+					onClick={props.onClose}>X</span>
+				<div className={`modal-guts ${props.noGutter ? 'no-gutter' : ''}`}>
+					{props.children}
 				</div>
-			</>
-		)
-		return createPortal( stuff, this.element );
-	}
+			</div>
+		</>)
+
+	return createPortal(modal, document.getElementById('modal'))
 }
 
 export default Modal

src/components/modal.scss

@@ -34,6 +34,8 @@
 		z-index: 1003;
 		width: 540px;
 		min-height: 200px;
+
+		text-align: center;
 	}
 }
 .closed {
@@ -102,7 +104,7 @@
 
 .alert-title {
 	border-bottom: solid 1px #bebebe;
-	text-align: left;
+	text-align: center;
 	position: static;
 	display: block;
 	font-weight: bold;

src/components/my-widgets-collaborate-dialog.jsx

@@ -295,9 +295,11 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set
 	if (state.shareNotAllowed === true) {
 		noShareWarningRender = (
 			<Modal onClose={disableShareNotAllowed} smaller={true} alert={true}>
-				<span className='alert-title'>Share Not Allowed</span>
-				<p className='alert-description'>Access must be set to "Guest Mode" to collaborate with students.</p>
-				<button className='alert-btn' onClick={disableShareNotAllowed}>Okay</button>
+				<div>
+					<span className='alert-title'>Share Not Allowed</span>
+					<p className='alert-description'>Access must be set to "Guest Mode" to collaborate with students.</p>
+					<button className='action_button' onClick={disableShareNotAllowed}>Okay</button>
+				</div>
 			</Modal>
 		)
 	}

src/components/my-widgets-page.jsx

@@ -5,6 +5,7 @@ import rawPermsToObj from '../util/raw-perms-to-object'
 import Header from './header'
 import MyWidgetsSideBar from './my-widgets-side-bar'
 import MyWidgetSelectedInstance from './my-widgets-selected-instance'
+import InvalidLoginModal from './invalid-login-modal'
 import LoadingIcon from './loading-icon'
 import useInstanceList from './hooks/useInstanceList'
 import useCopyWidget from './hooks/useCopyWidget'
@@ -68,11 +69,6 @@ const MyWidgetsPage = () => {
 		}
 	}, [validCode])
 
-	// hook associated with the invalidLogin error
-	useEffect(() => {
-		if (invalidLogin) window.location.reload();
-	}, [invalidLogin])
-
 	// hook to attach the hashchange event listener to the window
 	useEffect(() => {
 		window.addEventListener('hashchange', listenToHashChange)
@@ -300,6 +296,13 @@ const MyWidgetsPage = () => {
 		)
 	}
 
+	let invalidLoginRender = null
+	if (invalidLogin) {
+		invalidLoginRender = (
+			<InvalidLoginModal onClose={() => { window.location.href = 'users/logout' }}></InvalidLoginModal>
+		)
+	}
+
 	/**
 	 * If the user is loading, show a loading screen. If the user is fetching, show a loading screen. If
 	 * the user has no widgets, show a message. If the user has no selected widget, show a message. If the
@@ -383,6 +386,7 @@ const MyWidgetsPage = () => {
 			<div className='my_widgets'>
 
 				{widgetCatalogCalloutRender}
+				{invalidLoginRender}
 
 				<div className='container'>
 					<div className="container_main-content">