Merge pull request #171 from hack4impact-utk/Manan-dev/135-AccountMenu

Added AccountMenu with login, settings, and logout options. Added frontend for settings page

src/app/settings/page.tsx

@@ -0,0 +1,9 @@
+import SettingsView from '@/views/settingsView';
+
+export default function SettingsPage() {
+  return (
+    <>
+      <SettingsView></SettingsView>
+    </>
+  );
+}

src/components/AccountMenu/index.tsx

@@ -0,0 +1,67 @@
+'use client';
+import { Button, Link, Menu, MenuItem } from '@mui/material';
+import { useState } from 'react';
+
+export default function AccountMenu() {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleNavigateToPages = () => {
+    // Navigate to the path
+    handleClose();
+  };
+
+  const handleLogout = () => {
+    // Handle logout logic here
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button
+        aria-controls="account-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <svg
+          width="56"
+          height="57"
+          viewBox="0 0 56 57"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M47.1841 45.8055C47.7698 45.6813 48.1181 45.0723 47.8818 44.5222C46.5492 41.42 44.084 38.6901 40.784 36.6855C37.1165 34.4576 32.6228 33.25 28 33.25C23.3772 33.25 18.8836 34.4576 15.216 36.6855C11.916 38.6901 9.45082 41.42 8.11826 44.5222C7.88197 45.0723 8.23024 45.6813 8.81589 45.8055L19.6996 48.1143C25.1723 49.2752 30.8277 49.2752 36.3004 48.1143L47.1841 45.8055Z"
+            fill="white"
+          />
+          <ellipse cx="27.9999" cy="19" rx="11.6667" ry="11.875" fill="white" />
+        </svg>
+      </Button>
+      <Menu
+        id="account-menu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleNavigateToPages}>
+          <Link href="/signin" underline="none" color="#000">
+            Login
+          </Link>
+        </MenuItem>
+        <MenuItem onClick={handleNavigateToPages}>
+          <Link href="/settings" underline="none" color="#000">
+            Settings
+          </Link>
+        </MenuItem>
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+    </>
+  );
+}

src/components/top-bar/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { AppBar, Link } from '@mui/material';
+import { AppBar } from '@mui/material';
+import AccountMenu from '../AccountMenu';
 
 const TopBar: React.FC = () => {
   return (
@@ -19,21 +20,7 @@ const TopBar: React.FC = () => {
         p: 2, // add some space between icon and bar
       }}
     >
-      <Link href="/signin">
-        <svg
-          width="56"
-          height="57"
-          viewBox="0 0 56 57"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M47.1841 45.8055C47.7698 45.6813 48.1181 45.0723 47.8818 44.5222C46.5492 41.42 44.084 38.6901 40.784 36.6855C37.1165 34.4576 32.6228 33.25 28 33.25C23.3772 33.25 18.8836 34.4576 15.216 36.6855C11.916 38.6901 9.45082 41.42 8.11826 44.5222C7.88197 45.0723 8.23024 45.6813 8.81589 45.8055L19.6996 48.1143C25.1723 49.2752 30.8277 49.2752 36.3004 48.1143L47.1841 45.8055Z"
-            fill="white"
-          />
-          <ellipse cx="27.9999" cy="19" rx="11.6667" ry="11.875" fill="white" />
-        </svg>
-      </Link>
+      <AccountMenu />
     </AppBar>
   );
 };

src/views/settingsView/index.tsx

@@ -0,0 +1,115 @@
+'use client';
+import useSnackbar from '@/hooks/useSnackbar';
+import { Box, Button, Grid, TextField, Typography } from '@mui/material';
+import React, { useState } from 'react';
+
+export default function SettingsView() {
+  const [userInfo, setUserInfo] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+  });
+
+  const { showSnackbar } = useSnackbar();
+
+  const handleFirstNameChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setUserInfo({ ...userInfo, firstName: event.target.value });
+  };
+
+  const handleLastNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInfo({ ...userInfo, lastName: event.target.value });
+  };
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInfo({ ...userInfo, email: event.target.value });
+  };
+
+  const handleSubmit = async () => {
+    try {
+      // Make an API call to update the user's information
+      const response = await fetch('/api/settings', {
+        method: 'PUT',
+        body: JSON.stringify({
+          firstName: userInfo.firstName,
+          lastName: userInfo.lastName,
+          email: userInfo.email,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (!response.ok) {
+        showSnackbar('Failed to update user information', 'error');
+        throw new Error("Failed to update user's information");
+      }
+
+      const data = await response.json();
+      console.log(data); // TODO: Logging response data for now
+      showSnackbar('User information updated successfully', 'success');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        padding: '20px',
+        margin: '20px',
+        border: '1px solid #00000030',
+        borderRadius: '10px',
+        width: '40%',
+        boxShadow: '0px 4px 4px 0px #00000040',
+      }}
+    >
+      <Typography variant="h4">Settings</Typography>
+      <Grid container spacing={1}>
+        <Grid item xs={6}>
+          <TextField
+            label="First Name"
+            variant="outlined"
+            value={userInfo.firstName}
+            onChange={handleFirstNameChange}
+            margin="normal"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            label="Last Name"
+            variant="outlined"
+            value={userInfo.lastName}
+            onChange={handleLastNameChange}
+            margin="normal"
+          />
+        </Grid>
+        <Grid item xs={11.2}>
+          <TextField
+            fullWidth
+            label="Email"
+            type="email"
+            variant="outlined"
+            value={userInfo.email}
+            onChange={handleEmailChange}
+            margin="normal"
+          />
+        </Grid>
+        {/* Admin boolean cannot be edited */}
+        <Button
+          type="submit"
+          variant="contained"
+          sx={{
+            backgroundColor: '#7ca86f',
+            color: 'white',
+            marginTop: '20px',
+            marginLeft: '10px',
+          }}
+          onClick={handleSubmit}
+        >
+          Save Changes
+        </Button>
+      </Grid>
+    </Box>
+  );
+}