93 lines
3.4 KiB
JavaScript
93 lines
3.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { CssVarsProvider } from '@mui/joy/styles';
|
|
import {Modal, Button, DialogTitle, DialogContent, ModalDialog, Stack } from '@mui/joy';
|
|
import theme from '/src/theme';
|
|
|
|
const ProfileModal = ({ isHidden, getUser, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
|
|
const handleDelete = () => {
|
|
handleDeleteUser({
|
|
onSuccess: () => {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
handleLogoutUser({
|
|
onSuccess: () => {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
const getUserName = () => {
|
|
const user = getUser();
|
|
return user ? user.username : '';
|
|
}
|
|
|
|
return (
|
|
<CssVarsProvider theme={theme}>
|
|
<Modal open={!isHidden} onClose={() => setIsProfileHidden(true)}>
|
|
<ModalDialog
|
|
layout="center"
|
|
sx={{
|
|
backgroundColor: theme.palette.general.tertiary,
|
|
borderColor: theme.palette.general.secondary,
|
|
color: theme.palette.text.primary,
|
|
padding: 3,
|
|
borderRadius: 10,
|
|
width: "auto",
|
|
maxWidth: "90vw",
|
|
minWidth: "fit-content",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<DialogTitle sx={{ marginBottom: 1.5 }}>
|
|
{getUserName()}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden", mt: 1.5 }}>
|
|
<Button
|
|
onClick={handleDelete}
|
|
sx={{
|
|
backgroundColor: theme.palette.general.primary,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.general.disabled,
|
|
},
|
|
}}
|
|
>
|
|
Delete User
|
|
</Button>
|
|
<Button
|
|
onClick={handleLogout}
|
|
sx={{
|
|
backgroundColor: theme.palette.general.primary,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.general.disabled,
|
|
},
|
|
}}
|
|
>
|
|
Logout
|
|
</Button>
|
|
</Stack>
|
|
</DialogContent>
|
|
</ModalDialog>
|
|
</Modal>
|
|
</CssVarsProvider>
|
|
);
|
|
};
|
|
|
|
ProfileModal.propTypes = {
|
|
isHidden: PropTypes.bool.isRequired,
|
|
getUser: PropTypes.func.isRequired,
|
|
handleDeleteUser: PropTypes.func.isRequired,
|
|
handleLogoutUser: PropTypes.func.isRequired,
|
|
setIsProfileHidden: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default ProfileModal; |