From 51955744576e186da371a0b39c4312fca564fb4d Mon Sep 17 00:00:00 2001
From: KS <sevierk@oregonstate.edu>
Date: Tue, 5 Mar 2024 23:22:24 -0800
Subject: [PATCH 1/3] implement settings menu

still missing change password and change email
---
 frontend/src/HomePage.jsx |  66 --------------
 frontend/src/NavBar.jsx   | 182 ++++++++++++++++++++++++++++++--------
 2 files changed, 144 insertions(+), 104 deletions(-)

diff --git a/frontend/src/HomePage.jsx b/frontend/src/HomePage.jsx
index d828613..6237f9f 100644
--- a/frontend/src/HomePage.jsx
+++ b/frontend/src/HomePage.jsx
@@ -15,7 +15,6 @@ import {
 import { decryptText } from "./encryption";
 import { Edit, Delete } from "@mui/icons-material";
 import ConfirmationDialog from "./DeleteConfirmation";
-import DeleteAccountConfirmationDialog from "./DeleteAccountConfirmation";
 
 export default function HomePage() {
   const nav = useNavigate();
@@ -24,7 +23,6 @@ export default function HomePage() {
   const [currentTab, setCurrentTab] = useState("0");
   const [importedData, setImportedData] = useState([]);
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-  const [accountDeletionDialogOpen, setAccountDeletionDialogOpen] = useState(false);
   const [deletingData, setDeletingData] = useState(null);
   const [currentFolderId, setCurrentFolderId] = useState(null);
 
@@ -322,32 +320,6 @@ export default function HomePage() {
             marginBottom: "1rem",
           }}
         >
-          <Button
-            variant="contained"
-            onClick={() => nav("/dataimport")}
-            sx={{ marginLeft: "1rem" }}
-          >
-            Import
-          </Button>
-
-          <Button
-            variant="contained"
-            onClick={() => nav("/dataexport")}
-            sx={{ marginLeft: "1rem" }}
-          >
-            Export
-          </Button>
-
-          <label htmlFor="upload" style={{ marginRight: "1rem" }}></label>
-
-          <Button
-            variant="contained"
-            onClick={() => {
-              nav("/encryptiontest");
-            }}
-          >
-            Encryption Tester
-          </Button>
 
           <Button
             variant="contained"
@@ -357,18 +329,6 @@ export default function HomePage() {
             Cache Testing
           </Button>
 
-          <label htmlFor="upload" style={{ marginRight: "1rem" }}></label>
-          <label htmlFor="upload" style={{ marginRight: "1rem" }}></label>
-
-          <Button
-            variant="contained"
-            color="error"
-            onClick={() =>
-              nav("/passwordgen")
-            }
-          >
-            Generate Password
-          </Button>
           <Button
             variant="contained"
             sx={{ marginLeft: "1rem" }}
@@ -400,32 +360,6 @@ export default function HomePage() {
           </Button>
         </Box>
 
-        <Button
-          variant="contained"
-          sx={{ marginLeft: "1rem" }}
-          onClick={() => setAccountDeletionDialogOpen(true)}
-        >
-          Delete Account
-        </Button>
-
-        <Button
-          variant="contained"
-          sx={{ marginLeft: "1rem" }}
-          onClick={() => {
-            nav("/trashbin");
-          }}
-        >
-          Trash Bin
-        </Button>
-
-      <DeleteAccountConfirmationDialog
-        open={accountDeletionDialogOpen}
-        handleClose={() => setAccountDeletionDialogOpen(false)}
-        email={loggedInUser["email"]}
-        userID={loggedInUser["userID"]}
-        accessToken={accessToken}
-      />
-
         <TabContext value={currentTab}>
           <Box
             sx={{
diff --git a/frontend/src/NavBar.jsx b/frontend/src/NavBar.jsx
index 3046a57..d2e0ac4 100644
--- a/frontend/src/NavBar.jsx
+++ b/frontend/src/NavBar.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Typography, ButtonBase, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+import { Box, Typography, ButtonBase, Button, Menu, MenuItem } from "@mui/material";
+import DeleteAccountConfirmationDialog from './DeleteAccountConfirmation';
 import { useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { logout } from "./slices/authSlice";
@@ -11,15 +12,18 @@ export default function NavBar() {
   const dispatch = useDispatch();
 
   const loggedInUser = useSelector((state) => state.auth.user);
+  const accessToken = useSelector((state) => state.auth.accessToken);
+  
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const buttonRef = React.useRef(null);
 
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
   };
 
   const handleClose = () => {
-    setOpen(false);
+    setAnchorEl(null);
   };
 
   const handleSignOut = () => {
@@ -29,39 +33,141 @@ export default function NavBar() {
   };
 
   return (
-    <>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "1rem",
-          padding: "1rem",
-        }}
-      >
-        <ButtonBase onClick={() => navigate("/")}>
-          <img src={BeaverLogo} alt="Beaver Logo" width={100} />
-          <Typography variant="h6">Beaver Vault</Typography>
-        </ButtonBase>
-        {loggedInUser ? (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: "1rem",
-              padding: "1rem",
-            }}
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "1rem",
+        padding: "1rem",
+        position: 'relative',
+      }}
+    >
+      <ButtonBase onClick={() => navigate("/")}>
+        <img src={BeaverLogo} alt="Beaver Logo" width={100} />
+        <Typography variant="h5" sx={{ fontFamily: 'Roboto', fontWeight: 'bold' }}>Beaver Vault</Typography>     
+      </ButtonBase>
+      {accessToken && (
+        <Box
+          sx={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            padding: '1.0rem',
+          }}
+        >
+          <Typography variant="h6" sx={{ padding: '0.5rem' }}>{loggedInUser["email"]}</Typography>
+          <Button variant="contained" onClick={handleClick} ref={buttonRef}>
+            Settings
+          </Button>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+            sx={{ mt: 1 }}
           >
-            <Typography variant="h6">{loggedInUser["email"]}</Typography>
-            <Button variant="contained" onClick={handleSignOut}>
+            <MenuItem 
+              onClick={() => { 
+                navigate('/');
+                handleClose();
+              }}
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Homepage
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                navigate('/');
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Change Email
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                navigate('/');
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Change Master Password
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => {
+                navigate('/passwordgen');
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Generate Password
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                setDeleteDialogOpen(true);
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Delete User Account
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                navigate('/dataimport');
+                handleClose();
+              }}
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Import Vault
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                navigate('/dataexport');
+                handleClose();
+              }}
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Export Vault
+            </MenuItem>
+
+            <MenuItem 
+              onClick={() => { 
+                navigate('/trashbin');
+                handleClose();
+              }}
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Trash Bin
+            </MenuItem>
+                        
+            <MenuItem 
+              onClick={() => { 
+                handleSignOut();
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
               Sign Out
-            </Button>
-          </Box>
-        ) : (
-          <> </>
-        )}
-      </Box>
-    </>
+            </MenuItem>
+          </Menu>
+          <DeleteAccountConfirmationDialog
+            open={deleteDialogOpen}
+            handleClose={() => setDeleteDialogOpen(false)}
+            email={loggedInUser["email"]}
+            userID={loggedInUser["userID"]}
+            accessToken={accessToken}
+          />
+        </Box>
+      )}
+    </Box>
   );
 }
\ No newline at end of file

From 82291b140963563de91908c630d2000977742fcc Mon Sep 17 00:00:00 2001
From: KS <sevierk@oregonstate.edu>
Date: Tue, 5 Mar 2024 23:25:52 -0800
Subject: [PATCH 2/3] less wordy on one of the settings

---
 frontend/src/NavBar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/NavBar.jsx b/frontend/src/NavBar.jsx
index d2e0ac4..f409ea3 100644
--- a/frontend/src/NavBar.jsx
+++ b/frontend/src/NavBar.jsx
@@ -116,7 +116,7 @@ export default function NavBar() {
               }} 
               sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
             >
-              Delete User Account
+              Delete Account
             </MenuItem>
 
             <MenuItem 

From e117795a76125b9e9592bff13343064300e7ec48 Mon Sep 17 00:00:00 2001
From: KS <sevierk@oregonstate.edu>
Date: Mon, 11 Mar 2024 20:09:33 -0700
Subject: [PATCH 3/3] Add settings menu

---
 frontend/src/HomePage.jsx |  9 ---------
 frontend/src/NavBar.jsx   | 10 ++++++++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/HomePage.jsx b/frontend/src/HomePage.jsx
index 40ba9dd..fea54f6 100644
--- a/frontend/src/HomePage.jsx
+++ b/frontend/src/HomePage.jsx
@@ -331,15 +331,6 @@ export default function HomePage() {
             marginBottom: "1rem",
           }}
         >
-
-          <Button
-            variant="contained"
-            onClick={() => nav("/cache-test")}
-            sx={{ marginLeft: "1rem" }}
-          >
-            Cache Testing
-          </Button>
-
           <Button
             variant="contained"
             sx={{ marginLeft: "1rem" }}
diff --git a/frontend/src/NavBar.jsx b/frontend/src/NavBar.jsx
index f409ea3..dbdf583 100644
--- a/frontend/src/NavBar.jsx
+++ b/frontend/src/NavBar.jsx
@@ -99,6 +99,16 @@ export default function NavBar() {
               Change Master Password
             </MenuItem>
 
+            <MenuItem 
+              onClick={() => { 
+                navigate('/cache-test');
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Cache Testing
+            </MenuItem>
+
             <MenuItem 
               onClick={() => {
                 navigate('/passwordgen');