Files
CMS-Client/pages/auth/logout.js
T

89 lines
2.3 KiB
JavaScript

import { useRouter } from "next/router";
import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import Button from "@mui/material/Button";
import LogoutIcon from "@mui/icons-material/Logout";
import { deleteCookie } from "cookies-next";
export default function Logout() {
const router = useRouter();
const handleLogout = () => {
// Remove the cookie
deleteCookie("cmc-token");
// Use replaceState to replace the current URL with the root URL
window.history.replaceState({}, document.title, window.location.href);
// Redirect to the login page
router.push("/auth/login");
};
return (
<>
<div className="authenticationBox">
<Box
component="main"
sx={{
padding: "70px 0 100px",
}}
>
<Box
sx={{
background: "#fff",
padding: "30px 20px",
borderRadius: "10px",
maxWidth: "510px",
ml: "auto",
mr: "auto",
textAlign: "center",
}}
className="bg-black"
>
<Box>
<img
src="/images/logos/wrenchboard-logo.png"
alt="Logo"
className="black-logo"
/>
<img
src="/images/logos/wrenchboard-logo.png"
alt="Logo"
className="white-logo"
/>
</Box>
<Box mt={4} mb={4}>
<LogoutIcon />
</Box>
<Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
Would you like to sign out?
</Typography>
<Button
onClick={handleLogout}
fullWidth
variant="contained"
sx={{
mt: 3,
backgroundColor: "#4687BA",
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "500",
fontSize: "16px",
padding: "12px 10px",
color: "#fff !important",
"&:hover": {
backgroundColor: "rgba(70, 135, 186, 0.8)",
},
}}
>
Sign Out
</Button>
</Box>
</Box>
</div>
</>
);
}