mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-09 10:48:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add profile route and add on save and on close methods for popup

Browse source
This commit is contained in:
luisa.bellitto 2025-06-21 11:42:01 +02:00 • committed by Rudi Regentonne
parent ea15d01238
commit 69d866e2b6
4 changed files with 28 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

123
code/frontend/src/components/ChagneAvatarDialog.tsx
View file

@ -1,123 +0,0 @@
import * as React from "react";
import { useRef, useState } from "react";
import {
Button,
styled,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
IconButton,
Avatar,
Box,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import EditSquareIcon from "@mui/icons-material/EditSquare";
import "../styles/colors.css";
import "../styles/fonts.css";
import "./changeAvatarDialog.css";
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
padding: theme.spacing(2),
},
"& .MuiDialogActions-root": {
padding: theme.spacing(1),
},
}));
export default function CustomizedDialogs() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
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}>
<Avatar
alt="Username"
src={selectedImage ? URL.createObjectURL(selectedImage) : undefined}
className="profile-avatar"
>
U
</Avatar>
</Button>
<BootstrapDialog
onClose={handleClose}
aria-labelledby="change-profile-picture-dialog"
open={open}
>
<DialogTitle sx={{ m: 0, p: 2 }} id="change-profile-picture-dialog">
Change Profile Picture
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
<DialogContent dividers>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
objectFit: "cover",
maxWidth: "30rem",
maxHeight: "30rem",
}}
>
{selectedImage && (
<img
src={URL.createObjectURL(selectedImage)}
alt="Profile Picture"
style={{maxWidth: "30rem", maxHeight: "30rem" , width: "100%", height: "100%", objectFit: "cover"}}
/>
)}
</Box>
<IconButton aria-label="upload picture" onClick={openFileExplorer}>
<EditSquareIcon />
<input
type="file"
id="file"
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}>
Save changes
</Button>
</DialogActions>
</BootstrapDialog>
</React.Fragment>
);
}