From 857ef15dd26ee9c36dd704874b0de00bd882846e Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 16 Oct 2023 21:11:18 +0100 Subject: [PATCH 1/3] Home Page Customization --- components/Authentication/SignInForm.js | 6 +-- components/_App/Layout.js | 71 ++++++++++--------------- middlewares/AuthRoute.js | 20 +++++++ pages/authentication/sign-in.js | 8 +-- pages/index.js | 32 ++++------- 5 files changed, 62 insertions(+), 75 deletions(-) create mode 100644 middlewares/AuthRoute.js diff --git a/components/Authentication/SignInForm.js b/components/Authentication/SignInForm.js index f5bd1fe..9fcb74b 100644 --- a/components/Authentication/SignInForm.js +++ b/components/Authentication/SignInForm.js @@ -33,7 +33,7 @@ const SignInForm = () => { > - + Sign In{" "} { /> - + {/* Already have an account?{" "} {
or -
+ */} { const router = useRouter(); - const [active, setActive] = useState(false); + const isAuthenticated = false; // Replace with your authentication logic - const toogleActive = () => { + const toggleActive = () => { setActive(!active); }; + const isAuthenticationPage = [ + "/authentication/sign-in", + "/authentication/sign-up", + "/authentication/forgot-password", + "/authentication/lock-screen", + "/authentication/confirm-mail", + "/authentication/logout", + ].includes(router.pathname); + return ( <> - CMC - Client + {isAuthenticated ? "CMC - Client" : "CMC - Authentication"} -
- {!( - router.pathname === "/authentication/sign-in" || - router.pathname === "/authentication/sign-up" || - router.pathname === "/authentication/forgot-password" || - router.pathname === "/authentication/lock-screen" || - router.pathname === "/authentication/confirm-mail" || - router.pathname === "/authentication/logout" - ) && ( - <> - + +
+ {!isAuthenticationPage && ( + <> + + + + )} - - - )} +
{children}
-
- {children} - - {!( - router.pathname === "/authentication/sign-in" || - router.pathname === "/authentication/sign-up" || - router.pathname === "/authentication/forgot-password" || - router.pathname === "/authentication/lock-screen" || - router.pathname === "/authentication/confirm-mail" || - router.pathname === "/authentication/logout" - ) &&
} + {!isAuthenticationPage &&
}
-
- - {/* ScrollToTop */} - - - {!( - router.pathname === "/authentication/sign-in" || - router.pathname === "/authentication/sign-up" || - router.pathname === "/authentication/forgot-password" || - router.pathname === "/authentication/lock-screen" || - router.pathname === "/authentication/confirm-mail" || - router.pathname === "/authentication/logout" - ) && - - } + + + + {!isAuthenticationPage && } + ); }; diff --git a/middlewares/AuthRoute.js b/middlewares/AuthRoute.js new file mode 100644 index 0000000..9a458f7 --- /dev/null +++ b/middlewares/AuthRoute.js @@ -0,0 +1,20 @@ +"use client" +import { useEffect } from "react"; +import { useRouter } from "next/router"; + +const AuthRoute = ({ children }) => { + const router = useRouter(); + + useEffect(() => { + const isAuthenticated = false; + + if (!isAuthenticated) { + router.push("/authentication/sign-in/"); + } + + }, [router]); + + return <>{children}; +}; + +export default AuthRoute; diff --git a/pages/authentication/sign-in.js b/pages/authentication/sign-in.js index 392f744..00c63b8 100644 --- a/pages/authentication/sign-in.js +++ b/pages/authentication/sign-in.js @@ -1,9 +1,5 @@ -import SignInForm from '@/components/Authentication/SignInForm'; +import SignInForm from "@/components/Authentication/SignInForm"; export default function SignIn() { - return ( - <> - - - ); + return ; } diff --git a/pages/index.js b/pages/index.js index 54720af..2883faf 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,7 @@ -import React from 'react'; +import React from "react"; import Grid from "@mui/material/Grid"; -import Link from 'next/link'; -import styles from '@/styles/PageTitle.module.css' +import Link from "next/link"; +import styles from "@/styles/PageTitle.module.css"; import Features from "@/components/Dashboard/eCommerce/Features"; import Ratings from "@/components/Dashboard/eCommerce/Ratings"; import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview"; @@ -15,8 +15,9 @@ import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders"; import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList"; import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts"; import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite"; +import AuthRoute from "middlewares/AuthRoute"; -export default function eCommerce() { +function MainPage() { return ( <> {/* Page title */} @@ -26,29 +27,20 @@ export default function eCommerce() {
  • Dashboard
    • -
  • - eCommerce -
    • +
  • eCommerce
    • - {/* Features */} - {/* AudienceOverview */} - - + {/* VisitsByDay */} - {/* Impressions */} @@ -56,32 +48,25 @@ export default function eCommerce() { {/* ActivityTimeline */} - {/* RevenuStatus */} - {/* Ratings */} - {/* LiveVisitsOnOurSite */} - {/* SalesByLocations */} - {/* NewCustomers */} - {/* Recent Orders */} - - {/* BestSellingProducts */} @@ -100,3 +84,5 @@ export default function eCommerce() { ); } + +export default MainPage \ No newline at end of file From 97cb3b2e70752bbdb5b2364b0fad9363ae1ff4f4 Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 17 Oct 2023 00:31:38 +0100 Subject: [PATCH 2/3] added comments for proper documentation --- middlewares/AuthRoute.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/middlewares/AuthRoute.js b/middlewares/AuthRoute.js index 9a458f7..5504723 100644 --- a/middlewares/AuthRoute.js +++ b/middlewares/AuthRoute.js @@ -2,16 +2,19 @@ import { useEffect } from "react"; import { useRouter } from "next/router"; +/** + * This is used to protect routes in a web application. + * It checks if the user is authenticated and redirects them to the sign-in page if they are not. + */ const AuthRoute = ({ children }) => { const router = useRouter(); useEffect(() => { - const isAuthenticated = false; + const isAuthenticated = true; // In a real application, this would be determined based on the user's authentication status. if (!isAuthenticated) { router.push("/authentication/sign-in/"); } - }, [router]); return <>{children}; From 122e2c59b881b690e54777225b22cf7ee9fcaab1 Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 17 Oct 2023 00:33:47 +0100 Subject: [PATCH 3/3] . --- middlewares/AuthRoute.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/middlewares/AuthRoute.js b/middlewares/AuthRoute.js index 5504723..c8e0748 100644 --- a/middlewares/AuthRoute.js +++ b/middlewares/AuthRoute.js @@ -10,7 +10,7 @@ const AuthRoute = ({ children }) => { const router = useRouter(); useEffect(() => { - const isAuthenticated = true; // In a real application, this would be determined based on the user's authentication status. + const isAuthenticated = false; // In a real application, this would be determined based on the user's authentication status. if (!isAuthenticated) { router.push("/authentication/sign-in/");