diff --git a/client/src/Components/v1/TextLink/index.jsx b/client/src/Components/v1/TextLink/index.jsx index 83ae251a5..e226250a6 100644 --- a/client/src/Components/v1/TextLink/index.jsx +++ b/client/src/Components/v1/TextLink/index.jsx @@ -5,7 +5,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Link as RouterLink } from "react-router-dom"; -const TextLink = ({ text, linkText, href, target = "_self" }) => { +const TextLink = ({ text, linkText, href, state, target = "_self" }) => { const theme = useTheme(); return ( @@ -19,6 +19,7 @@ const TextLink = ({ text, linkText, href, target = "_self" }) => { to={href} component={RouterLink} target={target} + state={state} > {linkText} @@ -30,6 +31,7 @@ TextLink.propTypes = { text: PropTypes.string, linkText: PropTypes.string, href: PropTypes.string, + state: PropTypes.object, target: PropTypes.string, }; diff --git a/client/src/Pages/Account/components/PasswordPanel.jsx b/client/src/Pages/Account/components/PasswordPanel.jsx index e889db96c..b2a7d8ee0 100644 --- a/client/src/Pages/Account/components/PasswordPanel.jsx +++ b/client/src/Pages/Account/components/PasswordPanel.jsx @@ -11,6 +11,9 @@ import { useDispatch, useSelector } from "react-redux"; import { createToast } from "../../../Utils/toastUtils.jsx"; import { getTouchedFieldErrors } from "../../../Validation/error.js"; import { useTranslation } from "react-i18next"; +import { useNavigate, useLocation } from "react-router-dom"; +import { clearAuthState } from "../../../Features/Auth/authSlice.js"; +import TextLink from "@/Components/v1/TextLink/index.jsx"; const defaultPasswordsState = { password: "", @@ -28,11 +31,13 @@ const PasswordPanel = () => { const theme = useTheme(); const dispatch = useDispatch(); const { t } = useTranslation(); + const navigate = useNavigate(); + const location = useLocation(); const SPACING_GAP = theme.spacing(12); //redux state - const { isLoading } = useSelector((state) => state.auth); + const { isLoading, authToken } = useSelector((state) => state.auth); const idToName = { "edit-current-password": "password", @@ -79,6 +84,16 @@ const PasswordPanel = () => { const handleSubmit = async (event) => { event.preventDefault(); + // Check for expired/invalid token before submitting + if (!authToken) { + createToast({ + body: "Your session has expired. Please log in again.", + }); + dispatch(clearAuthState()); + navigate("/login"); + return; + } + const { error } = newOrChangedCredentials.validate(localData, { abortEarly: false, context: { password: localData.newPassword }, @@ -249,8 +264,15 @@ const PasswordPanel = () => { )} +