Merge pull request #51 from BUMETCS673/Hw-175-logout

Logout functionality
BUMETCS673 · Oct 5, 2024 · 4a61a23 · 4a61a23
2 parents c2c9eb8 + d829fff
commit 4a61a23
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/code/client/src/App.js b/code/client/src/App.js
@@ -6,7 +6,8 @@ import CreateUser from "./components/CreateUser.js";
 import ViewUsers from "./components/ViewUsers.js";
 import DailyData from "./components/DailyData.js";
 import CreateGoal from "./components/CreateGoal.js";
-
+import React, { useState, useEffect } from 'react';
+import LogoutIcon from '@mui/icons-material/Logout';
 // Styling
 import {
   createTheme,
@@ -48,7 +49,25 @@ const theme = createTheme({
   },
 });
 
+
+
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  // On component mount, check if user is already logged in
+  useEffect(() => {
+    const token = localStorage.getItem('authToken');
+    setIsAuthenticated(!!token);
+  }, []);
+
+  const handleLogout = () => {
+
+    localStorage.removeItem('authToken');
+
+    setIsAuthenticated(false);
+
+    // navigate('/login');
+  };
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -111,16 +130,26 @@ function App() {
                 </ListItemButton>
               </ListItem>
 
+              {!isAuthenticated ? (
               <ListItem disablePadding>
                 <ListItemButton component={Link} to="/login">
                   <ListItemIcon>
-                    {" "}
-                    <LoginIcon />{" "}
+                    <LoginIcon />
                   </ListItemIcon>
                   <ListItemText primary="Login" />
                 </ListItemButton>
               </ListItem>
-
+              ) : (
+              <ListItem disablePadding>
+                <ListItemButton onClick={handleLogout}>
+                  <ListItemIcon>
+                    <LogoutIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Logout" />
+                </ListItemButton>
+              </ListItem>
+              )}
+
               <ListItem disablePadding>
                 <ListItemButton component={Link} to="/enter-daily-data">
                   <ListItemIcon>
@@ -173,7 +202,7 @@ function App() {
                 <Route path="/" element={<Home />} />
                 <Route path="/create-user" element={<CreateUser />} />
                 <Route path="/view-users" element={<ViewUsers />} />
-                <Route path="/login" element={<Login />} />
+                <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
                 <Route path="/enter-daily-data" element={<DailyData />} />
                 <Route path="/create-goal" element={<CreateGoal />} />
               </Routes>

diff --git a/code/client/src/components/Login.js b/code/client/src/components/Login.js
@@ -21,7 +21,7 @@ import {
   link,
 } from "./style/styles.js";
 
-function Login() {
+function Login({ setIsAuthenticated }) {
   // status to store login status
   const [formData, setFormData] = useState({
     email: "",
@@ -56,6 +56,7 @@ function Login() {
       // store token
       localStorage.setItem("authToken", response.data.token);
       // redirect to home page
+      setIsAuthenticated(true);
       //console.log('login success:', response.data);
       navigate("/");
     } catch (error) {