Added Logout Option and prefetch for the dashboard

components/Authentication/SignInForm.js

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { setCookie } from 'cookies-next';
+import { setCookie } from "cookies-next";
 import Link from "next/link";
 import Grid from "@mui/material/Grid";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -79,9 +79,17 @@ const SignInForm = () => {
       }
 
       // Store the token in cookies
-       await setCookie("cmc-token", res.token);
-       router.push("/");
+      // Calculate the expiration time in 24 hours
+      const expirationDate = new Date();
+      expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000); // 24 hours in milliseconds
 
+      const cookieOptions = {
+        expires: expirationDate,
+        httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
+      };
+      
+      await setCookie("cmc-token", res.token);
+      router.push("/");
 
       console.log(res);
     } catch (error) {
@@ -100,6 +108,11 @@ const SignInForm = () => {
     setShowPassword(!showPassword);
   };
 
+  useEffect(() => {
+    // Prefetch the dashboard
+    router.prefetch("/");
+  });
+
   return (
     <>
       <div className={styles.authenticationBox}>

components/_App/Layout.js

@@ -20,14 +20,11 @@ const Layout = ({ children }) => {
 
   useEffect(() => {
     const authenticationPages = [
-      // "/",
-      "/auth",
       "/auth/login",
       "/auth/sign-up",
       "/auth/forgot-password",
       "/auth/lock-screen",
       "/auth/confirm-mail",
-      "/auth/logout",
     ];
 
     setIsAuthenticationPage(authenticationPages.includes(router.pathname));
@@ -38,8 +35,8 @@ const Layout = ({ children }) => {
 
   const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
   const mainWrapper = {
-    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0"
-  }
+    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0",
+  };
 
   return (
     <>
@@ -65,7 +62,9 @@ const Layout = ({ children }) => {
           {children}
         </div>
 
-        {!isAuthenticationPage && <Footer />}
+        {!isAuthenticationPage && router.pathname !== "/auth/logout" && (
+          <Footer />
+        )}
       </div>
 
       <ScrollToTop />

components/_App/LeftSidebar/SidebarData.js

@@ -6,6 +6,7 @@ import LayersIcon from "@mui/icons-material/Layers";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LockIcon from "@mui/icons-material/Lock";
+import LogoutIcon from "@mui/icons-material/Logout";
 import SettingsIcon from "@mui/icons-material/Settings";
 import PostAddIcon from "@mui/icons-material/PostAdd";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
@@ -513,4 +514,9 @@ export const SidebarData = [
       },
     ],
   },
+  {
+    title: "Logout",
+    path: "/auth/logout",
+    icon: <LogoutIcon />,
+  },
 ];

components/_App/LeftSidebar/index.js

@@ -1,69 +1,69 @@
-import React from 'react';
-import {
-  Box
-} from "@mui/material";
+import React from "react";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { SidebarData } from './SidebarData';
-import SubMenu from './SubMenu';
-import Link from 'next/link';
-import ClearIcon from '@mui/icons-material/Clear';
-import IconButton from '@mui/material/IconButton';
+import { SidebarData } from "./SidebarData";
+import SubMenu from "./SubMenu";
+import Link from "next/link";
+import ClearIcon from "@mui/icons-material/Clear";
+import IconButton from "@mui/material/IconButton";
 
 const SidebarNav = styled("nav")(({ theme }) => ({
-  background: '#fff',
+  background: "#fff",
   boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
-  width: '300px',
-  padding: '30px 10px',
-  height: '100vh',
-  display: 'flex',
-  justifyContent: 'center',
-  position: 'fixed',
+  width: "300px",
+  padding: "30px 10px",
+  height: "100vh",
+  display: "flex",
+  justifyContent: "center",
+  position: "fixed",
   top: 0,
   left: 0,
-  transition: '350ms',
-  zIndex: '10',
-  overflowY: 'auto'
+  transition: "350ms",
+  zIndex: "10",
+  overflowY: "auto",
 }));
- 
+
 const SidebarWrap = styled("div")(({ theme }) => ({
-  width: '100%'
+  width: "100%",
 }));
 
 const Sidebar = ({ toggleActive }) => {
   return (
     <>
-      <div className='leftSidebarDark'>
+      <div className="leftSidebarDark">
         <SidebarNav className="LeftSidebarNav">
           <SidebarWrap>
-            <Box 
-              sx={{ 
-                mb: '20px',
-                px: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+            <Box
+              sx={{
+                mb: "20px",
+                px: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Link href='/'>
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='black-logo' 
+              <Link href="/">
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="black-logo"
                 />
 
                 {/* For Dark Variation */}
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='white-logo' 
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="white-logo"
                 />
               </Link>
 
-              <IconButton 
-                onClick={toggleActive} 
+              <IconButton
+                onClick={toggleActive}
                 size="small"
                 sx={{
-                  background: 'rgb(253, 237, 237)',
-                  display: { lg: 'none' },
-                  marginLeft: "1rem"
+                  background: "rgb(253, 237, 237)",
+                  display: { lg: "none" },
+                  marginLeft: "1rem",
                 }}
               >
                 <ClearIcon />

middleware.js

@@ -32,17 +32,6 @@ export async function middleware(req, next) {
       });
     }
 
-    // Add authentication logic here (verify the token, etc.)
-    // const isAuthenticated = verifyToken(token);
-    // const isAuthenticated = hasCookie("cmc-token", { req });
-
-    // if (!isAuthenticated) {
-    //   // Handle unauthenticated users
-    //  return NextResponse.error(new Error("Authentication failed"), {
-    //     status: 401,
-    //   });
-    // }
-
   } catch (error) {
     console.error("Error during authentication check:", error);
     return NextResponse.error();
@@ -54,12 +43,7 @@ export const config = {
 };
 
 const authenticationPages = [
-  // "/",
-  "/auth",
   "/auth/login",
   "/auth/sign-up",
-  "/auth/forgot-password",
-  "/auth/lock-screen",
-  "/auth/confirm-mail",
   "/auth/logout",
 ];

pages/auth/logout.js

@@ -1,8 +1,16 @@
+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 = () => {
+    deleteCookie("cmc-token");
+    router.push("/auth/login")
+  };
   return (
     <>
       <div className="authenticationBox">
@@ -20,51 +28,51 @@ export default function Logout() {
               maxWidth: "510px",
               ml: "auto",
               mr: "auto",
-              textAlign: "center"
+              textAlign: "center",
             }}
             className="bg-black"
           >
             <Box>
-              <img 
-                src="/images/logo.png" 
-                alt="Black logo" 
-                className="black-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="black-logo"
               />
 
-              <img 
-                src="/images/logo-white.png" 
-                alt="White logo" 
-                className="white-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="white-logo"
               />
             </Box>
 
             <Box mt={4} mb={4}>
-              <img src="/images/coffee.png" alt="Coffee" />
+              <LogoutIcon />
             </Box>
 
             <Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
-              You are Logged Out
-            </Typography>
-
-            <Typography>
-              Thank you for using Admash admin template
+              Would you like to sign out?
             </Typography>
 
             <Button
-              href="/auth/sign-in/"
+              onClick={handleLogout}
               fullWidth
               variant="contained"
               sx={{
                 mt: 3,
+                backgroundColor: "#4687BA",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontWeight: "500",
                 fontSize: "16px",
                 padding: "12px 10px",
-                color: "#fff !important"
+                color: "#fff !important",
+                "&:hover": {
+                  backgroundColor: "rgba(70, 135, 186, 0.8)",
+                },
               }}
             >
-              Sign In
+              Sign Out
             </Button>
           </Box>
         </Box>