login gateing studies teminologies and ontologies

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 (
     <BrowserRouter>
       <Routes>
@@ -48,45 +62,47 @@ export const AppRouter = () => {
           <Route element={<PageLayout />}>
             <Route path="/search/:query" element={<SearchResults />} />
             <Route path="/404" element={<Error404 />} />
+
             <Route path="/ontologies" element={<OntologyInfo />} />
             <Route path="/about" element={<About />} />
-            <Route path="/terminologies" element={<TerminologyList />} />
+            <Route path="/terminologies" element={ isLoggedIn() ? <TerminologyList />:<Navigate to="/login" /> } />
+            <Route path="/login" element={<LoginPage/>}/>
             <Route
               path="/terminology"
               element={<Navigate to="/terminologies" />}
             />
             <Route element={<MappingContextRoot />}>
               <Route element={<SearchContextRoot />}>
-                <Route path="/studies" element={<StudyList />} />
+                <Route path="/studies" element={isLoggedIn() ? <StudyList />: <Navigate to="/login" />} />
                 <Route path="/study" element={<Navigate to="/studies" />} />
                 <Route path="/Study/:studyId">
-                  <Route index element={<StudyDetails />} />
+                  <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
                   <Route path="DataDictionary">
-                    <Route index element={<StudyDetails />} />
+                    <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
                     <Route
                       path="/Study/:studyId/DataDictionary/:DDId/Table/"
-                      element={<DDDetails />}
+                      element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />}
                     />
                     <Route path="/Study/:studyId/DataDictionary/:DDId">
-                      <Route index element={<DDDetails />} />
+                      <Route index element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />} />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId"
-                        element={<TableDetails />}
+                        element={isLoggedIn() ? <TableDetails />: <Navigate to="/login" />}
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/:terminologyId"
-                        element={<Terminology />}
+                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/"
-                        element={<Terminology />}
+                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                       />
                     </Route>
                   </Route>
                 </Route>
                 <Route
                   path="/Terminology/:terminologyId"
-                  element={<Terminology />}
+                  element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
                 />
               </Route>
             </Route>

src/components/Auth/Login.jsx

@@ -37,4 +37,4 @@ export const Login = () => {
       />
     </div>
   );
-};
+};

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 <div style={{background:"rgba(0,0,0,.2"}}>
+        {user &&
+        <h2 style={{textAlign:"center",paddingTop:'5rem'}}>You are logged in and can navigate to the rest of the site</h2>}
+        <div style={{ height:"5rem",display:"flex",flexDirection:"column",justifyContent:"space-around",alignItems:"center"}}>
+            <Login />
+        </div>
+
+    </div>
+}

src/components/Auth/Logout.jsx

@@ -26,4 +26,4 @@ export const Logout = ({ user, setUser }) => {
       </div>
     </>
   );
-};
+};

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 (
     <>
       <nav className="navbar">
@@ -19,12 +33,24 @@ export const NavBar = () => {
             <NavLink to="/">
               <li className="nav_link">Search</li>
             </NavLink>
-            <NavLink to="/studies">
+            <div onClick={() => {
+              if (user) {
+                navigate('/studies')
+              } else {
+                handleLogin('/studies')
+              }
+            }}>
               <li className="nav_link">Studies</li>
-            </NavLink>
-            <NavLink to="/terminologies">
+            </div>
+            <div onClick={() => {
+              if (user) {
+                navigate('/terminologies')
+              } else {
+                handleLogin('/terminologies')
+              }
+            }}>
               <li className="nav_link">Terminologies</li>
-            </NavLink>
+            </div>
             {/* Placeholder elements below. No functionality at this time.*/}
             <NavLink to="/about">
               <li className="nav_link">About</li>
@@ -38,7 +64,7 @@ export const NavBar = () => {
             <Login />
           </div>
         </ul>
-      </nav>
+      </nav >
     </>
   );
 };

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 {