215 notification about auth transitioning (#216)

* add warning mechanism

* changelog; add message to config

* too much blank spaces

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 
 ### Added
+- Warning on landing page notifying user to reset your password. [#215](https://github.com/IN-CORE/incore-ui/issues/215)
 - Incore-theme for emails sent through KeyCloak. [#212](https://github.com/IN-CORE/incore-ui/issues/212)
 
 ### Changed

src/actions/index.js

@@ -731,3 +731,15 @@ export async function getRepoVersion() {
 		return githubVersionResponseFallback;
 	}
 }
+
+export const OPEN_WARNING_MESSAGE = "OPEN_WARNING_MESSAGE";
+export const CLOSE_WARNING_MESSAGE = "CLOSE_WARNING_MESSAGE";
+
+export const openWarningMessage = (message) => ({
+	type: OPEN_WARNING_MESSAGE,
+	message: message,
+});
+
+export const closeWarningMessage = () => ({
+	type: CLOSE_WARNING_MESSAGE,
+});

src/app.config.js

@@ -51,4 +51,8 @@ config["keycloakConfig"] = {
 	clientId: config["client_id"]
 };
 
-export default config;
+config["resetPwWarningMessage"] = "NOTE: Changes were recently made to IN-CORE's user management system. If you were " +
+	"registered as an IN-CORE user before 08/21/2024 and are experiencing login issues, you need to reset your " +
+	"password.";
+
+export default config;

src/components/HomePage.jsx

@@ -15,6 +15,9 @@ import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
 import { trackPageview, trackEvent } from "./analytics";
+import { openWarningMessage } from "../actions/index";
+import { WarningMessage } from "./children/WarningMessage";
+import { useDispatch } from "react-redux";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -348,17 +351,21 @@ const HomePage = () => {
 	};
 
 	const classes = useStyles();
+	const dispatch = useDispatch();
 
 	React.useEffect(() => {
 		getRepoVersion().then((data) => {
 			setGithubVersions(data);
 		});
 		// Call trackPageview to track page view
 		trackPageview(window.location.pathname);
+
+		dispatch(openWarningMessage(config.resetPwWarningMessage));
 	}, []);
 
 	return (
 		<div>
+			<WarningMessage />
 			{/*header*/}
 			<section className={classes.root}>
 				<Container className={classes.container}>

src/components/children/WarningMessage.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Alert } from "@material-ui/lab";
+import { Collapse, IconButton } from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+import { useDispatch, useSelector } from "react-redux";
+import { closeWarningMessage} from "../../actions";
+
+export const WarningMessage = () => {
+
+	const dispatch = useDispatch();
+	const { messageOpen, error, message } = useSelector(
+		(state) => state.warning
+	);
+
+	const handleClose = () => {
+		dispatch(closeWarningMessage());
+	};
+
+	return (
+		<Collapse in={messageOpen}>
+			<Alert
+				severity="warning"
+				action={
+					<>
+						<IconButton
+							aria-label="close"
+							color="inherit"
+							size="small"
+							onClick={handleClose}
+						>
+							<CloseIcon fontSize="inherit" />
+						</IconButton>
+					</>
+				}
+			>
+				{message}
+			</Alert>
+		</Collapse>
+	);
+};

src/reducers/index.js

@@ -9,6 +9,7 @@ import datatypes from "./datatypes";
 import semantics from "./semantics";
 import usage from "./usage";
 import user from "./user.ts";
+import warning from "./warning";
 
 const rootReducer = combineReducers({
 	routing: routerReducer,
@@ -20,7 +21,8 @@ const rootReducer = combineReducers({
 	space: spaces,
 	user: user,
 	datatype: datatypes,
-	semantics: semantics
+	semantics: semantics,
+	warning: warning
 });
 
 export default rootReducer;

src/reducers/warning.js

@@ -0,0 +1,27 @@
+import { OPEN_WARNING_MESSAGE, CLOSE_WARNING_MESSAGE } from "../actions/index";
+
+const initialState = {
+	messageOpen: false,
+	message: "",
+};
+
+const warning = (state = initialState, action) => {
+	switch (action.type) {
+		case OPEN_WARNING_MESSAGE:
+			return {
+				...state,
+				messageOpen: true,
+				message: action.message,
+			};
+		case CLOSE_WARNING_MESSAGE:
+			return {
+				...state,
+				messageOpen: false,
+				message: "",
+			};
+		default:
+			return state;
+	}
+};
+
+export default warning;