select profile picture dialog

code/frontend/src/components/ChagneAvatarDialog.tsx

@@ -9,6 +9,8 @@ import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import Typography from "@mui/material/Typography";
 import Avatar from "@mui/material/Avatar";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import { useRef, useState } from "react";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
@@ -29,6 +31,17 @@ export default function CustomizedDialogs() {
     setOpen(false);
   };
 
+  const inputFile = useRef<HTMLInputElement | null>(null);
+
+  const openFileExplorer = () => {
+    // `current` points to the mounted file input element
+    if (inputFile.current) {
+      inputFile.current.click();
+    }
+  };
+  
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+
   return (
     <React.Fragment>
       <Button onClick={handleClickOpen}>
@@ -46,7 +59,7 @@ export default function CustomizedDialogs() {
         open={open}
       >
         <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
-          Modal title
+          Change Profile Picture
         </DialogTitle>
         <IconButton
           aria-label="close"
@@ -61,21 +74,22 @@ export default function CustomizedDialogs() {
           <CloseIcon />
         </IconButton>
         <DialogContent dividers>
-          <Typography gutterBottom>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros.
-          </Typography>
-          <Typography gutterBottom>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-            auctor.
-          </Typography>
-          <Typography gutterBottom>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
-            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
-            dui. Donec ullamcorper nulla non metus auctor fringilla.
-          </Typography>
+          {selectedImage && <img className="profile-image-large" src={URL.createObjectURL(selectedImage)} alt="Profile Picture" />}
+          <IconButton aria-label="upload picture" onClick={openFileExplorer}>
+            <EditSquareIcon />
+            <input
+              type="file"
+              id="file"
+              ref={inputFile}
+              style={{ display: "none" }}
+              onChange={(event) => {
+                console.log(event.target.files?[0]:undefined); // Log the selected file
+                if (event.target.files && event.target.files[0]) {
+                  setSelectedImage(event.target.files[0]); // Update the state with the selected file
+                }
+              }}
+            />
+          </IconButton>
         </DialogContent>
         <DialogActions>
           <Button autoFocus onClick={handleClose}>

code/frontend/src/components/changeAvatarDialog.css

@@ -0,0 +1,14 @@
+.dialog-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-image-large {
+  width: 5rem;
+  height: 5rem;
+}
+
+#file {
+    max-width: 50rem;
+    max-height: 50rem;
+}

code/frontend/src/pages/Profile.tsx

@@ -4,7 +4,7 @@ import "./loginAndSignUpPage.css";
 import "../styles/sizes.css";
 import "../styles/colors.css";
 import "../styles/fonts.css";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Avatar from "@mui/material/Avatar";
 import QuiltedImageList from "../components/QuiltedImageList";
 import TextField from "@mui/material/TextField";
@@ -17,6 +17,8 @@ import {
   Divider,
   Button,
   Tooltip,
+  Popover,
+  Typography,
 } from "@mui/material";
 import ProfilePictureDialog from "../components/ChagneAvatarDialog";
 
@@ -39,6 +41,21 @@ function Profile() {
   });
   const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
 
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  const username = "Username12345678"; /* Get username from database */
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
@@ -46,11 +63,26 @@ function Profile() {
           <div className="user-info">
             <div className="user">
               <ProfilePictureDialog />
-              <Tooltip title="Username12345678" placement="top" arrow>
-                <button className="profile-username body-l">
-                  Username12345678
-                </button>
-              </Tooltip>
+              <Popover
+                className="profile-popover"
+                onClose={handleClose}
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "left",
+                }}
+                transformOrigin={{
+                  vertical: "bottom",
+                  horizontal: "left",
+                }}
+              >
+                <Typography sx={{p: 1}}>{username}</Typography>
+              </Popover>
+              <span className="profile-username body-l" onClick={handleClick}>
+                {username}
+              </span>
             </div>
             <div>
               <Box

code/frontend/src/pages/profile.css

@@ -64,6 +64,10 @@
   text-overflow: ellipsis;
 }
 
+.profile-popover {
+  padding: 1rem;
+}
+
 .button {
   margin-bottom: 0.5rem;
 }