merged master branch in

db_app/package-lock.json

@@ -10191,6 +10191,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-client-session": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/react-client-session/-/react-client-session-0.0.8.tgz",
+      "integrity": "sha512-wHCTD4lEE8mzl6kxL8viL4q5kGx2TJJNaWdvzmx3KeiMgP+Yv5/Bx476jCpPD0pKc5VvdVuhkH4EM20XqtT/sQ==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

db_app/package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-client-session": "^0.0.8",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

db_app/src/App.js

@@ -3,7 +3,7 @@ import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
 import Plan from "./components/Plan";
-
+import { ReactSession } from 'react-client-session';
 
 import {
   BrowserRouter as Router,
@@ -12,6 +12,7 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
+ReactSession.setStoreType("sessionStorage");
 function App() {
 
 

db_app/src/components/Login.css

@@ -18,3 +18,7 @@ position:fixed;
   margin:10px;
   padding:10px;
 }
+
+.bar{
+  margin-bottom: 15px;
+}

db_app/src/components/Login.js

@@ -15,6 +15,7 @@ import Container from "@mui/material/Container";
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import image from "./images/main_background.jpg"
+import { ReactSession } from 'react-client-session';
 
 const theme = createTheme({
     palette: {
@@ -24,13 +25,19 @@ const theme = createTheme({
     },
   });
 
-function Login() {
+
+
+export function Login() {
   const navigate = useNavigate();
 
 	const navigateCreateAccount = () => {
 		 navigate('/CreateAccount');
 	}
 
+  const navigateHome = () => {
+    navigate('/Plan');
+ }
+
 const [data,setData] = useState({
     net_id:"",
     password:""
@@ -47,9 +54,12 @@ function Login() {
     console.log(data);
     console.log(net_id[0])
     login();
+    
   }
 
-  
+const setSession = () => {
+  ReactSession.set("net_id", net_id[0]);
+}
 
 
 const getHello = () => {
@@ -61,23 +71,21 @@ const getHello = () => {
 const login = () => {
   Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
      console.log(response);
-     console.log(response.headers)
+     console.log(response.status);
+     if (response.status === 200){
+      setSession();
+      navigateHome();
+     }
+
   });
 };
 
 
-
-
-
-  
    return (
     
     
         <ThemeProvider theme={theme}>
       <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
-     
- 
-      
       <div className='logbox'>
        <Box
         sx={{  
@@ -142,3 +150,5 @@ const login = () => {
   }
   
   export default Login;
+
+

db_app/src/components/Menus.js

@@ -3,6 +3,7 @@ import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
+import { CardMedia, CardContent } from '@mui/material';
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
@@ -33,21 +34,34 @@ const theme = createTheme({
   });
 
 function Menus() {
+    const navigate = useNavigate();
 
+	const Home = () => {
+		 navigate('/Plan');
+	}
+    const Menus = () => {
+        navigate('/Menus');
+   }
+   const Past = () => {
+    navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
 
   return (
 
     <ThemeProvider theme={theme}>
-    <AppBar position="static">
+    <AppBar className='bar' position="static">
   <Toolbar variant="dense">
-  <Button  variant="h6" color="main" position="right">
+  <Button  variant="h6" color="main" position="right" onClick={Home}>
    Home</Button> 
-    <Button variant="h6" color="main" component="div">
+    <Button variant="h6" color="main" component="div" onClick={Menus}>
       Menus
     </Button>
-    <Button  variant="h6" >
+    <Button  variant="h6" onClick="Past">
     Past Plans</Button> 
-    <Button variant="h6" color="main" component="div" sx={{
+    <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
     ':hover': {
       bgcolor: '#ffc6c4', // theme.palette.primary.main
       color: 'red',
@@ -55,9 +69,151 @@ function Menus() {
   }}>
         Log out
     </Button>
-   
   </Toolbar>
 </AppBar>
+
+<Box sx={{  
+          margin: 8,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+        }}>
+<Box sx={{  
+        
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2 }}>
+      <CardMedia
+        image={ require("./images/south.jpg")}
+        title="South Dining Hall"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Dining Hall
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/starb.jpg")}
+        title="Starbucks"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Starbucks
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/abp.jpg")}
+        title="ABP"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          ABP
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/chick.jpg")}
+        title="Chick"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Chick-fil-a
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/flip.jpg")}
+        title="Flip"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Flip Kitchen
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/moma.jpg")}
+        title="Moma"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Modern Market
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/taco.jpg")}
+        title="Taco Bell"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Taco Bell
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/smash.jpg")}
+        title="smash"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Smashburger
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      </Box>
+
 </ThemeProvider>
   
   );

db_app/src/components/Plan.js

@@ -21,6 +21,9 @@ import MenuIcon from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+
+
 import { Axios } from 'axios';
 
 const theme = createTheme({
@@ -37,10 +40,24 @@ function MyPlan() {
 
     const navigate = useNavigate();
 
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
 const navigateLogin = () => {
     navigate('/');
 }
 
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
 //get the start of each week and reformat to Oracle date type
 function weekStart(){
   var date_str = new Date();
@@ -88,18 +105,21 @@ const handleSubmit = evt => {
 }
   
   return (
+
+    
+
         <ThemeProvider theme={theme}>  
       <div>
          <AppBar position="static">
   <Toolbar variant="dense">
-  <Button  variant="h6" color="main" position="right">
+  <Button  variant="h6" color="main" position="right" onClick={Home}>
    Home</Button> 
-    <Button variant="h6" color="main" component="div">
+    <Button variant="h6" color="main" component="div" onClick={Menus}>
       Menus
     </Button>
-    <Button  variant="h6" >
+    <Button  variant="h6"onClick={Past} >
     Past Plans</Button> 
-    <Button variant="h6" color="main" component="div" sx={{
+    <Button variant="h6" color="main" component="div" onClick={logout} sx={{
     ':hover': {
       bgcolor: '#ffc6c4', // theme.palette.primary.main
       color: 'red',