Merge pull request #43 from Beaver-Vault/ks/settings_menu

Ks/settings menu
Beaver-Vault · Mar 12, 2024 · a821908 · a821908
2 parents a6f7342 + e117795
commit a821908
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 112 deletions.
diff --git a/frontend/src/HomePage.jsx b/frontend/src/HomePage.jsx
@@ -22,7 +22,6 @@ import {
   useUpdateTrashMutation,
   useDeleteUserMutation,
 } from "./slices/apiSlice";
-import DeleteAccountConfirmationDialog from "./DeleteAccountConfirmation";
 
 export default function HomePage() {
   const nav = useNavigate();
@@ -31,8 +30,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);
 
@@ -334,51 +331,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"
-            onClick={() => nav("/cache-test")}
-            sx={{ marginLeft: "1rem" }}
-          >
-            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" }}
@@ -410,32 +362,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
@@ -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,151 @@ 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('/cache-test');
+                handleClose();
+              }} 
+              sx={{ minWidth: buttonRef.current ? buttonRef.current.offsetWidth : 0 }}
+            >
+              Cache Testing
+            </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 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>
   );
 }