From bedc2c0cfef6e0359f4c2975e0cbc56340535bc7 Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 12:31:26 -0700 Subject: [PATCH 01/10] create authContext file --- src/Components/context/AuthContext.js | 10 ++++++++++ src/index.js | 11 +++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/Components/context/AuthContext.js diff --git a/src/Components/context/AuthContext.js b/src/Components/context/AuthContext.js new file mode 100644 index 000000000..3c971d02f --- /dev/null +++ b/src/Components/context/AuthContext.js @@ -0,0 +1,10 @@ +import React, { createContext, useContext } from 'react'; + +export const AuthContext = createContext({ + authenticated: false, + setAuthenticated: () => {} +}); + +export function useAuth() { + return useContext(AuthContext); +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index eca9233b2..22b73d2a3 100755 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import Routing from './Routing'; import { checkIfUserIsSignedIn } from './APIFunctions/Auth'; import { UserContext } from './Components/context/UserContext'; import SearchModal from './Components/ShortcutKeyModal/SearchModal'; +import { AuthContext } from './Components/context/AuthContext'; function App(props) { const [authenticated, setAuthenticated] = useState(false); @@ -29,10 +30,12 @@ function App(props) { return ( !isAuthenticating && ( - - - - + + + + + + ) ); From f2030f0525911a4d708ab829e70c5770910912a1 Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 12:35:39 -0700 Subject: [PATCH 02/10] userNavbar --- src/Components/Navbar/UserNavbar.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Components/Navbar/UserNavbar.js b/src/Components/Navbar/UserNavbar.js index 5d241b7b3..da31a1289 100644 --- a/src/Components/Navbar/UserNavbar.js +++ b/src/Components/Navbar/UserNavbar.js @@ -1,9 +1,12 @@ import React from 'react'; import { membershipState } from '../../Enums'; import { useUser } from '../context/UserContext'; +import { useAuth } from '../context/AuthContext'; export default function UserNavbar(props) { const { user } = useUser(); + const { authenticated } = useAuth(); + console.log("authication status",authenticated); let initials = ''; if (user && user.firstName && user.lastName) { initials = user.firstName[0] + user.lastName[0]; @@ -76,7 +79,7 @@ export default function UserNavbar(props) {
- {props.authenticated && user ? ( + {authenticated && user ? ( <>
Services
From f57e7c36646bd351ffed23fc35f99cc85cff758a Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 12:38:21 -0700 Subject: [PATCH 03/10] lint --- src/Components/Navbar/UserNavbar.js | 1 - src/Components/context/AuthContext.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Components/Navbar/UserNavbar.js b/src/Components/Navbar/UserNavbar.js index da31a1289..1a6ff04d8 100644 --- a/src/Components/Navbar/UserNavbar.js +++ b/src/Components/Navbar/UserNavbar.js @@ -6,7 +6,6 @@ import { useAuth } from '../context/AuthContext'; export default function UserNavbar(props) { const { user } = useUser(); const { authenticated } = useAuth(); - console.log("authication status",authenticated); let initials = ''; if (user && user.firstName && user.lastName) { initials = user.firstName[0] + user.lastName[0]; diff --git a/src/Components/context/AuthContext.js b/src/Components/context/AuthContext.js index 3c971d02f..bd3f14220 100644 --- a/src/Components/context/AuthContext.js +++ b/src/Components/context/AuthContext.js @@ -7,4 +7,4 @@ export const AuthContext = createContext({ export function useAuth() { return useContext(AuthContext); -} \ No newline at end of file +} From 65ef22782956c42487a60b9d41a46e6c12b3c33b Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 13:12:53 -0700 Subject: [PATCH 04/10] other navbars --- src/Components/Navbar/AdminNavbar.js | 4 +++- src/Components/Navbar/NavBarWrapper.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Components/Navbar/AdminNavbar.js b/src/Components/Navbar/AdminNavbar.js index eb9494c5f..98c27ce7f 100644 --- a/src/Components/Navbar/AdminNavbar.js +++ b/src/Components/Navbar/AdminNavbar.js @@ -1,8 +1,10 @@ import React from 'react'; import { useUser } from '../context/UserContext'; +import { useAuth } from '../context/AuthContext'; export default function UserNavBar(props) { const { user } = useUser(); + const { setAuthenticated } = useAuth(); const getLinkClassName = (path) => { const weAreAtGivenPath = path === window.location.pathname; let className = 'flex items-center p-2 text-gray-900 rounded-lg dark:text-white'; @@ -15,7 +17,7 @@ export default function UserNavBar(props) { }; function handleLogout() { - props.setAuthenticated(false); + setAuthenticated(false); window.localStorage.removeItem('jwtToken'); window.location.reload(); } diff --git a/src/Components/Navbar/NavBarWrapper.js b/src/Components/Navbar/NavBarWrapper.js index 63701b934..487620ef6 100755 --- a/src/Components/Navbar/NavBarWrapper.js +++ b/src/Components/Navbar/NavBarWrapper.js @@ -2,6 +2,7 @@ import React from 'react'; import UserNavbar from './UserNavbar'; import AdminNavbar from './AdminNavbar'; import { useUser } from '../context/UserContext'; +import { useAuth } from '../context/AuthContext'; function NavBarWrapper({ enableAdminNavbar = false, @@ -9,9 +10,10 @@ function NavBarWrapper({ ...appProps }) { const { user, setUser } = useUser(); + const { setAuthenticated } = useAuth(); function handleLogout() { - appProps.setAuthenticated(false); + setAuthenticated(false); setUser(null); window.localStorage.removeItem('jwtToken'); window.location.reload(); From f4d1203280a59d7626b1f54f52b45c94f6e16224 Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 16:55:46 -0700 Subject: [PATCH 05/10] test --- src/Components/context/AuthContext.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/context/AuthContext.js b/src/Components/context/AuthContext.js index bd3f14220..b062801a8 100644 --- a/src/Components/context/AuthContext.js +++ b/src/Components/context/AuthContext.js @@ -7,4 +7,4 @@ export const AuthContext = createContext({ export function useAuth() { return useContext(AuthContext); -} +} \ No newline at end of file From 5b852a3b876ca62ddd73a48a4789706329f229ec Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 17:03:22 -0700 Subject: [PATCH 06/10] undo previous commit --- src/Components/context/AuthContext.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/context/AuthContext.js b/src/Components/context/AuthContext.js index b062801a8..bd3f14220 100644 --- a/src/Components/context/AuthContext.js +++ b/src/Components/context/AuthContext.js @@ -7,4 +7,4 @@ export const AuthContext = createContext({ export function useAuth() { return useContext(AuthContext); -} \ No newline at end of file +} From 387c42b9af1216c610992e48f8b7ef08c006707f Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 21:27:40 -0700 Subject: [PATCH 07/10] searchmodal --- src/Components/ShortcutKeyModal/SearchModal.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js index 3c26f7c91..9cbe23bbe 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.js +++ b/src/Components/ShortcutKeyModal/SearchModal.js @@ -3,6 +3,7 @@ import './SearchModal.css'; import { officerOrAdminRoutes, signedOutRoutes, memberRoutes, notAuthenticatedRoutes } from '../../Routes'; import { membershipState } from '../../Enums'; import { useUser } from '../context/UserContext'; +import { useAuth } from '../context/AuthContext'; export default function SearchModal({ appProps }) { const [open, setOpen] = useState(false); @@ -13,10 +14,11 @@ export default function SearchModal({ appProps }) { const [selectItem, setSelectItem] = useState(0); const { user } = useUser(); const [errorMsg, setErrorMsg] = useState(''); + const { authenticated } = useAuth(); /** * Returns the appropriate routes array based on the user's access level. - * @dependencies user.accessLevel, appProps.authenticated + * @dependencies user.accessLevel, authenticated */ const routes = useMemo(() => { if (user.accessLevel === membershipState.MEMBER) @@ -29,13 +31,13 @@ export default function SearchModal({ appProps }) { ...officerOrAdminRoutes.filter(r => r.pageName !== 'Edit User Info'), ...signedOutRoutes ]; - if (!appProps.authenticated) + if (!authenticated) return [ ...notAuthenticatedRoutes, ...signedOutRoutes ]; return [...signedOutRoutes]; - }, [user.accessLevel, appProps.authenticated]); + }, [user.accessLevel, authenticated]); /** * Helper function updates the keyword when the user types From da82d5e01006401326c00ae5bcef9963cae4466b Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 21:31:07 -0700 Subject: [PATCH 08/10] login --- src/Pages/Login/Login.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Pages/Login/Login.js b/src/Pages/Login/Login.js index 69be54319..f33e1252c 100644 --- a/src/Pages/Login/Login.js +++ b/src/Pages/Login/Login.js @@ -1,8 +1,10 @@ import React, { useState } from 'react'; import { loginUser } from '../../APIFunctions/Auth'; import Background from '../../Components/Background/background'; +import { useAuth } from '../../Components/context/AuthContext'; -export default function Login(props) { +export default function Login() { + const { setAuthenticated } = useAuth(); const queryParams = new URLSearchParams(window.location.search); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -24,7 +26,7 @@ export default function Login(props) { e.preventDefault(); const loginStatus = await loginUser(email, password); if (!loginStatus.error) { - props.setAuthenticated(true); + setAuthenticated(true); window.localStorage.setItem('jwtToken', loginStatus.token); if (queryParams.get('redirect')) { window.location.href = queryParams.get('redirect'); From 0cd80595872802eed3cd00cfc5df2a9e816b4098 Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 21:34:13 -0700 Subject: [PATCH 09/10] routing --- src/Components/Routing/PrivateRoute.js | 8 +++++--- src/Routing.js | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Components/Routing/PrivateRoute.js b/src/Components/Routing/PrivateRoute.js index 598944001..a2672ac1d 100644 --- a/src/Components/Routing/PrivateRoute.js +++ b/src/Components/Routing/PrivateRoute.js @@ -3,6 +3,7 @@ import { Route, Redirect } from 'react-router-dom'; import { membershipState } from '../../Enums'; import { allowedIf } from '../../Routes'; import { useUser } from '../../Components/context/UserContext'; +import { useAuth } from '../../Components/context/AuthContext'; export default function PrivateRoute({ component: Component, @@ -10,13 +11,14 @@ export default function PrivateRoute({ ...params }) { const { user } = useUser(); + const { authenticated } = useAuth(); // Check if the user's access level matches with route's access grant const PERMISSION_LOOKUP_TABLE = { [allowedIf.MEMBER]: user?.accessLevel >= membershipState.MEMBER, [allowedIf.OFFICER_OR_ADMIN]: user?.accessLevel >= membershipState.OFFICER, - [allowedIf.AUTHENTICATED]: !!appProps.authenticated, - [allowedIf.UNAUTHENTICATED]: !appProps.authenticated, + [allowedIf.AUTHENTICATED]: !!authenticated, + [allowedIf.UNAUTHENTICATED]: !authenticated, }; const isAllowed = PERMISSION_LOOKUP_TABLE[appProps.allowed] ?? false; @@ -27,7 +29,7 @@ export default function PrivateRoute({ render={(props) => { if (isAllowed) { return ; - } else if (appProps.authenticated) { + } else if (authenticated) { return ( getCorrectComponent(props)} From 4f9ec6e9b1e46f7488d04af9616e349e20864adb Mon Sep 17 00:00:00 2001 From: alvintran Date: Tue, 8 Jul 2025 21:39:27 -0700 Subject: [PATCH 10/10] update test and remove appProp from routing --- src/index.js | 4 ++-- test/frontend/Routing.test.js | 15 +++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 22b73d2a3..8938b32e7 100755 --- a/src/index.js +++ b/src/index.js @@ -32,8 +32,8 @@ function App(props) { - - + + diff --git a/test/frontend/Routing.test.js b/test/frontend/Routing.test.js index 9e9ee71ff..da7e5fbac 100644 --- a/test/frontend/Routing.test.js +++ b/test/frontend/Routing.test.js @@ -4,6 +4,7 @@ import Enzyme, { mount } from 'enzyme'; import { expect } from 'chai'; import Adapter from '@cfaester/enzyme-adapter-react-18'; import { UserContext } from '../../src/Components/context/UserContext'; +import { AuthContext } from '../../src/Components/context/AuthContext'; import Routing from '../../src/Routing'; import Home from '../../src/Pages/Home/Home'; @@ -29,7 +30,6 @@ Object.defineProperty(window, 'localStorage', { }); const adminAppProps = { - authenticated: true }; const mockUser = { accessLevel: membershipState.ADMIN }; @@ -46,11 +46,18 @@ function getComponentFromRoute(route, props = adminAppProps, user = mockUser) { setUser: () => {} }; + const mockAuthContext = { + authenticated: true, + setAuthenticated: () => {} + }; + return mount( - - - + + + + + ); }