diff --git a/src/app/(auth)/log-in/page.tsx b/src/app/(auth)/log-in/page.tsx index 01b1cbf..07d8915 100644 --- 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; export default function LoginPage() { + const [loader, setLoader] = useState(false); const router = useRouter() const { register, handleSubmit, formState: { errors }, control } = useForm({ 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() { /> - + {children}; } -export default AuthGuard(RootLayout); \ No newline at end of file +export default RootLayout; \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9c4b1a8..a2554b8 100644 --- 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 ( @@ -24,3 +38,4 @@ export default function RootLayout(props: RootLayoutProps): JSX.Element { ); } +export default AuthGuard(RootLayout); diff --git a/src/theme.ts b/src/theme.ts index 4a2659d..d3945fa 100644 --- 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 }, }, }, diff --git a/src/ui/CustomTextField.tsx b/src/ui/CustomTextField.tsx index ad201a3..a55d6c0 100644 --- a/src/ui/CustomTextField.tsx +++ b/src/ui/CustomTextField.tsx @@ -38,10 +38,12 @@ const CssTextField = styled(TextField)({ const CustomTextField: React.FC = ({ name, control, label, type = 'text', error, helperText }) => { return ( (