Changed admin

components/Authentication/Authentication.module.css

@@ -1,7 +1,10 @@
 .favicon {
   position: relative;
   top: 5px;
-  margin-left: 10px;
+  max-width: 250px;
+  max-height: 250px;
+  width: 100%;
+  height: 100%;
 }
 
 /* googleBtn */

components/Authentication/ForgotPasswordForm.js

@@ -104,7 +104,7 @@ const ForgotPasswordForm = () => {
 
               <Box as="div" textAlign="center" mt="20px">
                 <Link
-                  href="/authentication/sign-in/"
+                  href="/auth/sign-in/"
                   className="primaryColor text-decoration-none"
                 >
                   <i className="ri-arrow-left-s-line"></i> Back to Sign in

components/Authentication/SignInForm.js

@@ -1,13 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
 import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
 import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import styles from "@/components/Authentication/Authentication.module.css";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import styles from "./signinform.module.css";
+import WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";
 
 const SignInForm = () => {
   const handleSubmit = (event) => {
@@ -19,9 +22,15 @@ const SignInForm = () => {
     });
   };
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleTogglePassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <>
-      <div className="authenticationBox">
+      <div className={styles.authenticationBox}>
         <Box
           component="main"
           sx={{
@@ -29,51 +38,34 @@ const SignInForm = () => {
             ml: "auto",
             mr: "auto",
             padding: "50px 0 100px",
+            paddingInline: { sm: "10px", lg: "0" },
+            zIndex: "999",
+            position: "relative",
           }}
         >
           <Grid item xs={12} md={12} lg={12} xl={12}>
             <Box>
-              <Typography as="h1" fontSize="28px" fontWeight="700" mb="65px">
-                Sign In{" "}
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                mb="70px"
+              >
                 <img
-                  src="/images/favicon.png"
-                  alt="favicon"
+                  src="/images/logos/android-chrome-512x512.png"
+                  alt="logo"
                   className={styles.favicon}
                 />
-              </Typography>
-
-              {/* <Typography fontSize="15px" mb="30px">
-                Already have an account?{" "}
-                <Link
-                  href="/authentication/sign-up"
-                  className="primaryColor text-decoration-none"
-                >
-                  Sign up
-                </Link>
-              </Typography>
-
-              <Box
-                sx={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  mb: "30px",
-                }}
-              >
-                <Link href="#" className={styles.googleBtn}>
-                  <img src="/images/google-icon.png" />
-                  Sign in with Google
-                </Link>
-
-                <Link href="#" className={styles.fbBtn}>
-                  <img src="/images/fb-icon.png" />
-                  Sign in with Facebook
-                </Link>
               </Box>
-
-              <div className={styles.or}>
-                <span>or</span>
-              </div> */}
+              {/* <Typography
+                as="h1"
+                fontSize="28px"
+                fontWeight="700"
+                mb="5px"
+                color="#fff"
+              >
+                Sign In{" "}
+              </Typography> */}
 
               <Box component="form" noValidate onSubmit={handleSubmit}>
                 <Box
@@ -87,7 +79,7 @@ const SignInForm = () => {
                 >
                   <Grid container alignItems="center" spacing={2}>
                     <Grid item xs={12}>
-                      <Typography
+                      {/* <Typography
                         component="label"
                         sx={{
                           fontWeight: "500",
@@ -97,7 +89,7 @@ const SignInForm = () => {
                         }}
                       >
                         Email
-                      </Typography>
+                      </Typography> */}
 
                       <TextField
                         required
@@ -109,11 +101,12 @@ const SignInForm = () => {
                         InputProps={{
                           style: { borderRadius: 8 },
                         }}
+                        sx={textFieldStyles}
                       />
                     </Grid>
 
                     <Grid item xs={12}>
-                      <Typography
+                      {/* <Typography
                         component="label"
                         sx={{
                           fontWeight: "500",
@@ -123,56 +116,60 @@ const SignInForm = () => {
                         }}
                       >
                         Password
-                      </Typography>
+                      </Typography> */}
 
                       <TextField
                         required
                         fullWidth
                         name="password"
                         label="Password"
-                        type="password"
+                        type={showPassword ? "text" : "password"}
                         id="password"
                         autoComplete="new-password"
                         InputProps={{
                           style: { borderRadius: 8 },
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <IconButton
+                                onClick={handleTogglePassword}
+                                sx={{
+                                  color: "#4687BA",
+                                  "&:hover": {
+                                    color: "#4687BA",
+                                  },
+                                }}
+                              >
+                                {showPassword ? (
+                                  <VisibilityOff />
+                                ) : (
+                                  <Visibility />
+                                )}
+                              </IconButton>
+                            </InputAdornment>
+                          ),
                         }}
+                        sx={textFieldStyles}
                       />
                     </Grid>
                   </Grid>
                 </Box>
 
-                <Grid container alignItems="center" spacing={2}>
-                  <Grid item xs={6} sm={6}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox value="allowExtraEmails" color="primary" />
-                      }
-                      label="Remember me."
-                    />
-                  </Grid>
-
-                  <Grid item xs={6} sm={6} textAlign="end">
-                    <Link
-                      href="/authentication/forgot-password"
-                      className="primaryColor text-decoration-none"
-                    >
-                      Forgot your password?
-                    </Link>
-                  </Grid>
-                </Grid>
-
                 <Button
                   type="submit"
                   fullWidth
                   variant="contained"
                   sx={{
                     mt: 2,
+                    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 In
@@ -187,3 +184,39 @@ const SignInForm = () => {
 };
 
 export default SignInForm;
+
+// Custom styles for text fields in sign up
+const textFieldStyles = {
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: "#4687BA",
+      "&:hover": {
+        borderColor: "#4687BA",
+      },
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: "#4687BA",
+    },
+  },
+  "& .MuiInputAdornment-positionEnd": {
+    cursor: "pointer",
+  },
+  "& .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "&:hover .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "&.Mui-focused .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "& .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+  "&:hover .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+  "&.Mui-focused .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+};

components/Authentication/SignUpForm.js

@@ -45,7 +45,7 @@ const SignUpForm = () => {
               <Typography fontSize="15px" mb="30px">
                 Already have an account?{" "}
                 <Link
-                  href="/authentication/sign-in/"
+                  href="/auth/sign-in/"
                   className="primaryColor text-decoration-none"
                 >
                   Sign in
@@ -204,7 +204,7 @@ const SignUpForm = () => {
 
                   <Grid item xs={6} sm={6} textAlign="end">
                     <Link
-                      href="/authentication/forgot-password"
+                      href="/auth/forgot-password"
                       className="primaryColor text-decoration-none"
                     >
                       Forgot your password?
@@ -215,7 +215,7 @@ const SignUpForm = () => {
                 <Button
                   type="submit"
                   fullWidth
-                  variant="contained"
+                  // variant="contained"
                   sx={{
                     mt: 2,
                     textTransform: "capitalize",

components/Authentication/signinform.module.css

@@ -0,0 +1,38 @@
+.favicon {
+  position: relative;
+  top: 5px;
+  max-width: 250px;
+  max-height: 250px;
+  width: 100%;
+  height: 100%;
+}
+
+.authenticationBox {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  padding: 1rem;
+
+  /* Image */
+  background-image: url("../../public//images/auth/cms_home.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: fixed;
+}
+
+.authenticationBox::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 600px) {
+  .authenticationBox {
+    padding: 1rem;
+  }
+}

components/_App/Layout.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import LeftSidebar from "@/components/_App/LeftSidebar";
@@ -11,48 +11,64 @@ import AuthRoute from "middlewares/AuthRoute";
 const Layout = ({ children }) => {
   const router = useRouter();
   const [active, setActive] = useState(false);
-  const isAuthenticated = false; // Replace with your authentication logic
+
+  const [isAuthenticationPage, setIsAuthenticationPage] = useState(false);
 
   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);
+  useEffect(() => {
+    const authenticationPages = [
+      "/auth",
+      "/auth/sign-in",
+      "/auth/sign-up",
+      "/auth/forgot-password",
+      "/auth/lock-screen",
+      "/auth/confirm-mail",
+      "/auth/logout",
+    ];
+
+    setIsAuthenticationPage(authenticationPages.includes(router.pathname));
+  }, [router.pathname]);
+
+  // Debugging: Log the value of isAuthenticationPage
+  console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);
+
+  const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
 
   return (
     <>
       <Head>
-        <title>
-          {isAuthenticated ? "CMC - Client" : "CMC - Authentication"}
-        </title>
+        <title>{title}</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
 
-      <AuthRoute>
-        <div className={`main-wrapper-content ${active ? "active" : ""}`}>
-          {!isAuthenticationPage && (
-            <>
-              <TopNavbar toggleActive={toggleActive} />
-              <LeftSidebar toggleActive={toggleActive} />
-            </>
-          )}
+      <div
+        className={`main-wrapper-content ${active ? "active" : ""}`}
+        style={{
+          paddingLeft: isAuthenticationPage && "0",
+        }}
+      >
+        {!isAuthenticationPage && (
+          <>
+            <TopNavbar toggleActive={toggleActive} />
+            <LeftSidebar toggleActive={toggleActive} />
+          </>
+        )}
 
-          <div className="main-content">{children}</div>
-
-          {!isAuthenticationPage && <Footer />}
+        <div
+          className={`main-content ${isAuthenticationPage ? "authBox" : ""}`}
+        >
+          {children}
         </div>
 
-        <ScrollToTop />
+        {!isAuthenticationPage && <Footer />}
+      </div>
 
-        {!isAuthenticationPage && <ControlPanelModal />}
-      </AuthRoute>
+      <ScrollToTop />
+
+      {!isAuthenticationPage && <ControlPanelModal />}
     </>
   );
 };

components/_App/LeftSidebar/SidebarData.js

@@ -450,7 +450,7 @@ export const SidebarData = [
   },
   {
     title: "Authentication",
-    path: "/authentication/sign-in/",
+    path: "/auth/sign-in/",
     icon: <LockIcon />,
     iconClosed: <KeyboardArrowRightIcon />,
     iconOpened: <KeyboardArrowDownIcon />,
@@ -458,23 +458,23 @@ export const SidebarData = [
     subNav: [
       {
         title: "Sign Up",
-        path: "/authentication/sign-up/",
+        path: "/auth/sign-up/",
       },
       {
         title: "Forgot Password",
-        path: "/authentication/forgot-password/",
+        path: "/auth/forgot-password/",
       },
       {
         title: "Lock Screen",
-        path: "/authentication/lock-screen/",
+        path: "/auth/lock-screen/",
       },
       {
         title: "Confirm Mail",
-        path: "/authentication/confirm-mail/",
+        path: "/auth/confirm-mail/",
       },
       {
         title: "Logout",
-        path: "/authentication/logout/",
+        path: "/auth/logout/",
       },
     ],
   },

components/_App/LeftSidebar/index.js

@@ -29,7 +29,7 @@ const SidebarWrap = styled("div")(({ theme }) => ({
   width: '100%'
 }));
 
-const Sidebar = ({ toogleActive }) => {
+const Sidebar = ({ toggleActive }) => {
   return (
     <>
       <div className='leftSidebarDark'>
@@ -46,23 +46,24 @@ const Sidebar = ({ toogleActive }) => {
             >
               <Link href='/'>
                 <img 
-                  src="/images/logo.png" alt="Logo" 
+                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
                   className='black-logo' 
                 />
 
                 {/* For Dark Variation */}
                 <img 
-                  src="/images/logo-white.png" alt="Logo" 
+                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
                   className='white-logo' 
                 />
               </Link>
 
               <IconButton 
-                onClick={toogleActive} 
+                onClick={toggleActive} 
                 size="small"
                 sx={{
                   background: 'rgb(253, 237, 237)',
-                  display: { lg: 'none' }
+                  display: { lg: 'none' },
+                  marginLeft: "1rem"
                 }}
               >
                 <ClearIcon />

components/_App/TopNavbar/Profile.js

@@ -183,7 +183,7 @@ const Profile = () => {
           </ListItemIcon>
 
           <Link
-            href="/authentication/logout/"
+            href="/auth/logout/"
             fontSize="13px"
             color="inherit"
             underline="none"

components/_App/TopNavbar/index.js

@@ -7,7 +7,7 @@ import Profile from "./Profile";
 import Tooltip from "@mui/material/Tooltip";
 import CurrentDate from "./CurrentDate";
 
-const TopNavbar = ({ toogleActive }) => {
+const TopNavbar = ({ toggleActive }) => {
   return (
     <>
       <div className="topNavbarDark">
@@ -28,7 +28,7 @@ const TopNavbar = ({ toogleActive }) => {
                 size="sm"
                 edge="start"
                 color="inherit"
-                onClick={toogleActive}
+                onClick={toggleActive}
               >
                 <i className="ri-align-left"></i>
               </IconButton>

docker/Dockerfile

@@ -96,7 +96,7 @@ RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
   && yarn --version
 
 COPY docker-entrypoint.sh /usr/local/bin/
-ENTRYPOINT ["docker-entrypoint.sh"]
+# ENTRYPOINT ["docker-entrypoint.sh"]
 # COPY docker-entrypoint.sh /usr/local/bin/
 # ENTRYPOINT ["docker-entrypoint.sh"]
 

middlewares/AuthRoute.js

@@ -1,10 +1,11 @@
-"use client"
+"use client";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 /**
- * This is used to protect routes in a web application.
+ * This function 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();
@@ -13,8 +14,8 @@ const AuthRoute = ({ children }) => {
     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/");
-    }
+      router.push("/auth/sign-in");
+    } 
   }, [router]);
 
   return <>{children}</>;

pages/_app.js

@@ -1,34 +1,36 @@
-import React from 'react';
-import '../styles/remixicon.css'
-import 'react-tabs/style/react-tabs.css';
+import React from "react";
+import "../styles/remixicon.css";
+import "react-tabs/style/react-tabs.css";
 import "swiper/css";
 import "swiper/css/bundle";
-
 // Chat Styles
-import '../styles/chat.css'
+import "../styles/chat.css";
 // Globals Styles
-import '../styles/globals.css'
+import "../styles/globals.css";
 // Rtl Styles
-import '../styles/rtl.css'
+import "../styles/rtl.css";
 // Dark Mode Styles
-import '../styles/dark.css'
+import "../styles/dark.css";
 // Theme Styles
-import theme from '../styles/theme'
+import theme from "../styles/theme";
 
 import { ThemeProvider, CssBaseline } from "@mui/material";
 import Layout from "@/components/_App/Layout";
+import AuthRoute from "middlewares/AuthRoute";
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        <AuthRoute>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </AuthRoute>
       </ThemeProvider>
     </>
   );
 }
 
-export default MyApp
+export default MyApp;

pages/_document.js

@@ -7,11 +7,32 @@ class MyDocument extends Document {
     return (
       <Html dir={dir} lang={locale}>
         <Head>
-          <link rel="icon" href="/images/favicon.png" />
-          <link 
-            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" 
+          <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
             rel="stylesheet"
           />
+
+          {/* Icons */}
+          <link rel="icon" href="/images/icons/favicon.ico" />
+          <link
+            rel="icon"
+            href="/images/icons/favicon-16x16.png"
+            sizes="16x16"
+            type="image/png"
+          />
+          <link
+            rel="icon"
+            href="/images/icons/android-chrome-192x192.png"
+            sizes="192x192"
+            type="image/png"
+          />
+          <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+          <link
+            rel="icon"
+            href="/images/icons/android-chrome-512x512.png"
+            sizes="512x512"
+            type="image/png"
+          />
         </Head>
         <body>
           <Main />

pages/auth/index.js

@@ -0,0 +1,5 @@
+import SignInForm from "@/components/Authentication/SignInForm";
+
+export default function Index() {
+  return <SignInForm />;
+}

pages/auth/logout.js

@@ -51,7 +51,7 @@ export default function Logout() {
             </Typography>
 
             <Button
-              href="/authentication/sign-in/"
+              href="/auth/sign-in/"
               fullWidth
               variant="contained"
               sx={{

pages/index.js

@@ -15,7 +15,6 @@ 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";
 
 function MainPage() {
   return (

styles/globals.css

@@ -13,6 +13,7 @@
   --fontSize: 15px;
   --transition: all ease .5s;
   --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
+  --mobile-auth-padding: 0;
 }
 
 html, body {
@@ -817,12 +818,17 @@ img {
   padding-right: 30px;
 }
 
+.main-wrapper-content .main-content.authBox{
+  padding: 0px !important;
+}
+
 @media only screen and (max-width: 767px) {
   .main-wrapper-content .main-content {
     padding-left: 15px !important;
     padding-right: 15px !important;
   }
 }
+
 @media only screen and (max-width: 1199px) {
   .main-wrapper-content {
     padding: 0;