Amit/mui-demo-project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(authGuard)

Browse Source
This commit is contained in:
Prakash Maity 2024-08-07 18:22:05 +05:30
parent b8523bea88
commit 4f66694332
5 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/(auth)/log-in/page.tsx
View File

@ -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

4
src/app/(dashboard)/layout.tsx
View File

@ -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;

17
src/app/layout.tsx
View File

@ -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);

27
src/theme.ts
View File

@ -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
},
},
},

2
src/ui/CustomTextField.tsx
View File

@ -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}