diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx index 6db2e0c..acf9ebd 100644 --- a/src/AppRouter.jsx +++ b/src/AppRouter.jsx @@ -6,7 +6,11 @@ import { Routes, Navigate, } from 'react-router-dom'; +import { useContext } from 'react'; +import { myContext } from './App.jsx'; import { NavBar } from './components/Nav/NavBar'; +import { Login } from './components/Auth/Login.jsx'; +import { LoginPage } from './components/Auth/LoginPage.jsx'; import { Breadcrumbs } from './components/Nav/Breadcrumbs.jsx'; import { Footer } from './components/Nav/Footer'; import { SearchResults } from './components/Search/SearchResults'; @@ -15,7 +19,6 @@ import { TableDetails } from './components/Projects/Tables/TableDetails'; import { DDDetails } from './components/Projects/DataDictionaries/DDDetails'; import { StudyDetails } from './components/Projects/Studies/StudyDetails'; import { StudyList } from './components/Projects/Studies/StudyList'; - import './App.scss'; import { PageLayout } from './components/Styling/PageLayout.jsx'; import { MappingContextRoot } from './Contexts/MappingContext.jsx'; @@ -26,6 +29,17 @@ import { SearchContextRoot } from './Contexts/SearchContext.jsx'; import { About } from './components/About/About.jsx'; export const AppRouter = () => { + const {user} = useContext(myContext); + + const isLoggedIn = () => { + const storedUser = localStorage.getItem('user'); + + if (storedUser) { + return true; + } else { + return false; + } + } return ( @@ -48,45 +62,47 @@ export const AppRouter = () => { }> } /> } /> + } /> } /> - } /> + : } /> + }/> } /> }> }> - } /> + : } /> } /> - } /> + : } /> - } /> + : } /> } + element={isLoggedIn() ? : } /> - } /> + : } /> } + element={isLoggedIn() ? : } /> } + element={isLoggedIn() ? : } /> } + element={isLoggedIn() ? : } /> } + element={isLoggedIn() ? : } /> diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx index 9534a4a..99e230a 100644 --- a/src/components/Auth/Login.jsx +++ b/src/components/Auth/Login.jsx @@ -37,4 +37,4 @@ export const Login = () => { /> ); -}; +}; \ No newline at end of file diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx new file mode 100644 index 0000000..9df1e10 --- /dev/null +++ b/src/components/Auth/LoginPage.jsx @@ -0,0 +1,14 @@ +import { Login } from "./Login" +import { useContext } from 'react'; +import { myContext } from '../../App'; +export const LoginPage = () => { + const {user} = useContext(myContext); + return
+ {user && +

You are logged in and can navigate to the rest of the site

} +
+ +
+ +
+} \ No newline at end of file diff --git a/src/components/Auth/Logout.jsx b/src/components/Auth/Logout.jsx index 6ff80c0..3aa8d16 100644 --- a/src/components/Auth/Logout.jsx +++ b/src/components/Auth/Logout.jsx @@ -26,4 +26,4 @@ export const Logout = ({ user, setUser }) => { ); -}; +}; \ No newline at end of file diff --git a/src/components/Nav/NavBar.jsx b/src/components/Nav/NavBar.jsx index 155727e..2aa7411 100644 --- a/src/components/Nav/NavBar.jsx +++ b/src/components/Nav/NavBar.jsx @@ -1,9 +1,23 @@ -import { NavLink } from 'react-router-dom'; +import { NavLink, useNavigate } from 'react-router-dom'; import './NavBar.scss'; import { Login } from '../Auth/Login'; -import { GoogleOAuthProvider } from '@react-oauth/google'; +import { useContext, useState } from 'react' +import { myContext } from '../../App'; +import { RequiredLogin } from '../Auth/RequiredLogin'; export const NavBar = () => { + const [routeTo, setRouteTo] = useState(null); + const { user } = useContext(myContext); + const navigate = useNavigate(); + const handleSuccess = () => { + navigate(routeTo); + }; + const login = RequiredLogin({ handleSuccess: handleSuccess }); + const handleLogin = (route) => { + setRouteTo(route); + login(); + } + return ( <> + ); }; diff --git a/src/components/Nav/NavBar.scss b/src/components/Nav/NavBar.scss index a48d239..b07deeb 100644 --- a/src/components/Nav/NavBar.scss +++ b/src/components/Nav/NavBar.scss @@ -70,6 +70,8 @@ nav.navbar { padding: 0 4px; width: $navHeight; border-radius: 10px; + font-weight: bold; + cursor: pointer; } .nav_link:hover {