121 lines
2.5 KiB
TypeScript
121 lines
2.5 KiB
TypeScript
import { Box, Button, Modal, Typography } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import { CustomIconButton } from "../../AddUserModal/styled.css";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
setLogoutModal: Function;
|
|
handlelogout: any;
|
|
};
|
|
|
|
const style = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 330,
|
|
bgcolor: "#272727",
|
|
borderRadius: 1.5,
|
|
boxShadow: 24,
|
|
p: 3,
|
|
};
|
|
|
|
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
|
|
|
export default function LogoutModal({
|
|
open,
|
|
setLogoutModal,
|
|
handlelogout,
|
|
}: Props) {
|
|
// Function to prevent closing the modal when clicking outside
|
|
const handleClose = (event: React.SyntheticEvent) => {
|
|
// Close only when clicking the close button, not the backdrop
|
|
setLogoutModal(false);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={(event, reason) => {
|
|
if (reason !== "backdropClick") {
|
|
setLogoutModal(false);
|
|
}
|
|
}}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
disableEscapeKeyDown // Prevent closing with the ESC key
|
|
BackdropProps={{
|
|
invisible: true, // Use to control backdrop visibility
|
|
}}
|
|
>
|
|
<Box sx={style}>
|
|
<Typography
|
|
id="modal-title"
|
|
variant="h5"
|
|
fontWeight="bold"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box sx={{ flex: 1, textAlign: "center" }}>Logout</Box>
|
|
<Box
|
|
sx={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<CustomIconButton
|
|
onClick={() => setLogoutModal(false)}
|
|
aria-label="Close"
|
|
>
|
|
<CloseIcon />
|
|
</CustomIconButton>
|
|
</Box>
|
|
</Box>
|
|
</Typography>
|
|
<Typography
|
|
id="modal-modal-description"
|
|
sx={{ mt: 2 }}
|
|
align="center"
|
|
>
|
|
Are you sure you want to Logout?
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
mt: 4,
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
type="button"
|
|
sx={btnStyle}
|
|
onClick={() => setLogoutModal(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
type="button"
|
|
color="primary"
|
|
sx={btnStyle}
|
|
onClick={() => handlelogout()}
|
|
>
|
|
Logout
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|