From b77a6c95800530d3c18bbc6fba8bd0cae62724b5 Mon Sep 17 00:00:00 2001
From: "luisa.bellitto" <luisa.bellitto@bluehands.de>
Date: Fri, 20 Jun 2025 14:15:55 +0200
Subject: [PATCH] select  profile picture dialog

---
 code/frontend/package-lock.json               | 24 +++++-----
 code/frontend/package.json                    |  2 +-
 .../src/components/ChagneAvatarDialog.tsx     | 46 ++++++++++++-------
 .../src/components/changeAvatarDialog.css     | 14 ++++++
 code/frontend/src/pages/Profile.tsx           | 44 +++++++++++++++---
 code/frontend/src/pages/profile.css           |  4 ++
 code/frontend/yarn.lock                       | 26 +++++------
 7 files changed, 112 insertions(+), 48 deletions(-)
 create mode 100644 code/frontend/src/components/changeAvatarDialog.css

diff --git a/code/frontend/package-lock.json b/code/frontend/package-lock.json
index f1085d3..4ccd90b 100644
--- a/code/frontend/package-lock.json
+++ b/code/frontend/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@mui/icons-material": "^7.1.1",
+        "@mui/icons-material": "^7.1.2",
         "@mui/material": "^7.1.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
@@ -3115,9 +3115,9 @@
       "license": "MIT"
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz",
-      "integrity": "sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz",
+      "integrity": "sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3125,9 +3125,9 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.1.tgz",
-      "integrity": "sha512-X37+Yc8QpEnl0sYmz+WcLFy2dWgNRzbswDzLPXG7QU1XDVlP5TPp1HXjdmCupOWLL/I9m1fyhcyZl8/HPpp/Cg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.2.tgz",
+      "integrity": "sha512-slqJByDub7Y1UcokrM17BoMBMvn8n7daXFXVoTv0MEH5k3sHjmsH8ql/Mt3s9vQ20cORDr83UZ448TEGcbrXtw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.1"
@@ -3140,7 +3140,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^7.1.1",
+        "@mui/material": "^7.1.2",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3151,13 +3151,13 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.1.tgz",
-      "integrity": "sha512-mTpdmdZCaHCGOH3SrYM41+XKvNL0iQfM9KlYgpSjgadXx/fEKhhvOktxm8++Xw6FFeOHoOiV+lzOI8X1rsv71A==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.2.tgz",
+      "integrity": "sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.1",
-        "@mui/core-downloads-tracker": "^7.1.1",
+        "@mui/core-downloads-tracker": "^7.1.2",
         "@mui/system": "^7.1.1",
         "@mui/types": "^7.4.3",
         "@mui/utils": "^7.1.1",
diff --git a/code/frontend/package.json b/code/frontend/package.json
index a046c46..caf5bf2 100644
--- a/code/frontend/package.json
+++ b/code/frontend/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.1",
+    "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
diff --git a/code/frontend/src/components/ChagneAvatarDialog.tsx b/code/frontend/src/components/ChagneAvatarDialog.tsx
index 2d7b756..c2cf2b8 100644
--- a/code/frontend/src/components/ChagneAvatarDialog.tsx
+++ b/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}>
diff --git a/code/frontend/src/components/changeAvatarDialog.css b/code/frontend/src/components/changeAvatarDialog.css
new file mode 100644
index 0000000..dfabeaf
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/code/frontend/src/pages/Profile.tsx b/code/frontend/src/pages/Profile.tsx
index 4dc7d94..294d211 100644
--- a/code/frontend/src/pages/Profile.tsx
+++ b/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
diff --git a/code/frontend/src/pages/profile.css b/code/frontend/src/pages/profile.css
index 7067f12..25c90a3 100644
--- a/code/frontend/src/pages/profile.css
+++ b/code/frontend/src/pages/profile.css
@@ -64,6 +64,10 @@
   text-overflow: ellipsis;
 }
 
+.profile-popover {
+  padding: 1rem;
+}
+
 .button {
   margin-bottom: 0.5rem;
 }
diff --git a/code/frontend/yarn.lock b/code/frontend/yarn.lock
index 0b6ec73..823e0de 100644
--- a/code/frontend/yarn.lock
+++ b/code/frontend/yarn.lock
@@ -1646,25 +1646,25 @@
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
-"@mui/core-downloads-tracker@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz"
-  integrity sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==
+"@mui/core-downloads-tracker@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz"
+  integrity sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==
 
-"@mui/icons-material@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.1.tgz"
-  integrity sha512-X37+Yc8QpEnl0sYmz+WcLFy2dWgNRzbswDzLPXG7QU1XDVlP5TPp1HXjdmCupOWLL/I9m1fyhcyZl8/HPpp/Cg==
+"@mui/icons-material@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.2.tgz"
+  integrity sha512-slqJByDub7Y1UcokrM17BoMBMvn8n7daXFXVoTv0MEH5k3sHjmsH8ql/Mt3s9vQ20cORDr83UZ448TEGcbrXtw==
   dependencies:
     "@babel/runtime" "^7.27.1"
 
-"@mui/material@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/@mui/material/-/material-7.1.1.tgz"
-  integrity sha512-mTpdmdZCaHCGOH3SrYM41+XKvNL0iQfM9KlYgpSjgadXx/fEKhhvOktxm8++Xw6FFeOHoOiV+lzOI8X1rsv71A==
+"@mui/material@^7.1.1", "@mui/material@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-7.1.2.tgz"
+  integrity sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA==
   dependencies:
     "@babel/runtime" "^7.27.1"
-    "@mui/core-downloads-tracker" "^7.1.1"
+    "@mui/core-downloads-tracker" "^7.1.2"
     "@mui/system" "^7.1.1"
     "@mui/types" "^7.4.3"
     "@mui/utils" "^7.1.1"