fix(authGuard)

6 months ago · 4f66694332
--- a/src/app/(auth)/log-in/page.tsx
+++ b/src/app/(auth)/log-in/page.tsx
@ -28,6 +28,7 @@ const loginSchema = z.object({
 type LoginFormValues = z.infer<typeof loginSchema>;

 export default function LoginPage() {
  const [loader, setLoader] = useState(false);
  const router = useRouter()
  const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
@ -36,14 +37,16 @@ export default function LoginPage() {
  const dispatch = useDispatch();
  const onSubmit = async (data: LoginFormValues) => {
    try {
      setLoader(true)
      const response = await loginApi(data);
      localStorage.setItem('token', response.token);
      localStorage.setItem('refreshToken', response.refreshToken);
      dispatch(setAuthTokens({ token: response.token, refreshToken: response.refreshToken }));
      dispatch(setUserDetails(response));

      setLoader(false)
      router.push('/home');
    } catch (err) {
      setLoader(false)
      setError('Invalid credentials');
    }
  };
@ -107,7 +110,7 @@ export default function LoginPage() {
                />
              </Box>
              <Box width={"100%"} marginBlockStart={"20px"}>
                <CustomizedButtons btnType="submit" label={"Sign In"} />
                <CustomizedButtons btnType="submit" label={!loader ? "Login" : "Login..."} />
              </Box>
            </form>
            <Box
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@ -1,7 +1,5 @@
 "use client"
 import DashboardWrapper from "@/components/wrapper/dashboardWrapper";
 import AuthGuard from "@/hoc/authGuard/authGuard";

 interface RootLayoutProps {
  children: React.ReactNode;
 }
@ -11,4 +9,4 @@ function RootLayout(props: RootLayoutProps): JSX.Element {
  return <DashboardWrapper>{children}</DashboardWrapper>;
 }

 export default AuthGuard(RootLayout);
 export default RootLayout;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -5,13 +5,27 @@ import theme from "../theme";
 import "./globals.scss";
 import { Provider } from 'react-redux';
 import store from "@/services/store";
 import AuthGuard from "@/hoc/authGuard/authGuard";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";

 interface RootLayoutProps {
  children: React.ReactNode;
 }

 export default function RootLayout(props: RootLayoutProps): JSX.Element {
 function RootLayout(props: RootLayoutProps): JSX.Element {
  const router = useRouter();
  const { children } = props;

  useEffect(() => {

    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/log-in');
    } else {
      router.replace('/home');
    }
  }, [router])
  return (
    <html lang="en">
      <body>
@ -24,3 +38,4 @@ export default function RootLayout(props: RootLayoutProps): JSX.Element {
    </html>
  );
 }
 export default AuthGuard(RootLayout);
--- a/src/theme.ts
+++ b/src/theme.ts
@ -1,15 +1,20 @@
 "use client";
 import { Roboto } from "next/font/google";
 import { createTheme } from "@mui/material/styles";
 'use client';
 import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';

 const roboto = Roboto({
  weight: ["300", "400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
 });

 const getCssVariableValue = (variable: string): string => {
  return getComputedStyle(document.documentElement).getPropertyValue(variable);
  if (typeof window !== 'undefined') {
    return getComputedStyle(document.documentElement).getPropertyValue(
      variable
    );
  }
  return '';
 };

 const theme = createTheme({
@ -18,16 +23,16 @@ const theme = createTheme({
  },
  palette: {
    primary: {
      main: getCssVariableValue("--primary").trim() || "#6290cb", // Fallback to default color
      light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color
      main: getCssVariableValue('--primary').trim() || '#6290cb', // Fallback to default color
      light: getCssVariableValue('--primary_light').trim() || '#dae7f9', // Fallback to default color
    },
  },
  components: {
    MuiCardContent: {
      styleOverrides: {
        root: {
          "&:last-child": {
            paddingBottom: "16px", // Override the padding for the last child
          '&:last-child': {
            paddingBottom: '16px', // Override the padding for the last child
          },
        },
      },
--- a/src/ui/CustomTextField.tsx
+++ b/src/ui/CustomTextField.tsx
@ -38,10 +38,12 @@ const CssTextField = styled(TextField)({
 const CustomTextField: React.FC<CustomTextFieldProps> = ({ name, control, label, type = 'text', error, helperText }) => {
  return (
    <Controller

      name={name}
      control={control}
      render={({ field }) => (
        <CssTextField
          autoComplete='off'
          {...field}
          label={label}
          type={type}