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>; type LoginFormValues = z.infer<typeof loginSchema>;
export default function LoginPage() { export default function LoginPage() {
const [loader, setLoader] = useState(false);
const router = useRouter() const router = useRouter()
const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({ const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
resolver: zodResolver(loginSchema), resolver: zodResolver(loginSchema),
@ -36,14 +37,16 @@ export default function LoginPage() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const onSubmit = async (data: LoginFormValues) => { const onSubmit = async (data: LoginFormValues) => {
try { try {
setLoader(true)
const response = await loginApi(data); const response = await loginApi(data);
localStorage.setItem('token', response.token); localStorage.setItem('token', response.token);
localStorage.setItem('refreshToken', response.refreshToken); localStorage.setItem('refreshToken', response.refreshToken);
dispatch(setAuthTokens({ token: response.token, refreshToken: response.refreshToken })); dispatch(setAuthTokens({ token: response.token, refreshToken: response.refreshToken }));
dispatch(setUserDetails(response)); dispatch(setUserDetails(response));
setLoader(false)
router.push('/home'); router.push('/home');
} catch (err) { } catch (err) {
setLoader(false)
setError('Invalid credentials'); setError('Invalid credentials');
} }
}; };
@ -107,7 +110,7 @@ export default function LoginPage() {
/> />
</Box> </Box>
<Box width={"100%"} marginBlockStart={"20px"}> <Box width={"100%"} marginBlockStart={"20px"}>
<CustomizedButtons btnType="submit" label={"Sign In"} /> <CustomizedButtons btnType="submit" label={!loader ? "Login" : "Login..."} />
</Box> </Box>
</form> </form>
<Box <Box

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

@ -1,7 +1,5 @@
"use client" "use client"
import DashboardWrapper from "@/components/wrapper/dashboardWrapper"; import DashboardWrapper from "@/components/wrapper/dashboardWrapper";
import AuthGuard from "@/hoc/authGuard/authGuard";
interface RootLayoutProps { interface RootLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
@ -11,4 +9,4 @@ function RootLayout(props: RootLayoutProps): JSX.Element {
return <DashboardWrapper>{children}</DashboardWrapper>; 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 "./globals.scss";
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from "@/services/store"; import store from "@/services/store";
import AuthGuard from "@/hoc/authGuard/authGuard";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
interface RootLayoutProps { interface RootLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default function RootLayout(props: RootLayoutProps): JSX.Element { function RootLayout(props: RootLayoutProps): JSX.Element {
const router = useRouter();
const { children } = props; const { children } = props;
useEffect(() => {
const token = localStorage.getItem('token');
if (!token) {
router.push('/log-in');
} else {
router.replace('/home');
}
}, [router])
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
@ -24,3 +38,4 @@ export default function RootLayout(props: RootLayoutProps): JSX.Element {
</html> </html>
); );
} }
export default AuthGuard(RootLayout);

27
src/theme.ts
View File

@ -1,15 +1,20 @@
"use client"; 'use client';
import { Roboto } from "next/font/google"; import { Roboto } from 'next/font/google';
import { createTheme } from "@mui/material/styles"; import { createTheme } from '@mui/material/styles';
const roboto = Roboto({ const roboto = Roboto({
weight: ["300", "400", "500", "700"], weight: ['300', '400', '500', '700'],
subsets: ["latin"], subsets: ['latin'],
display: "swap", display: 'swap',
}); });
const getCssVariableValue = (variable: string): string => { 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({ const theme = createTheme({
@ -18,16 +23,16 @@ const theme = createTheme({
}, },
palette: { palette: {
primary: { primary: {
main: getCssVariableValue("--primary").trim() || "#6290cb", // Fallback to default color main: getCssVariableValue('--primary').trim() || '#6290cb', // Fallback to default color
light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color light: getCssVariableValue('--primary_light').trim() || '#dae7f9', // Fallback to default color
}, },
}, },
components: { components: {
MuiCardContent: { MuiCardContent: {
styleOverrides: { styleOverrides: {
root: { root: {
"&:last-child": { '&:last-child': {
paddingBottom: "16px", // Override the padding for the 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 }) => { const CustomTextField: React.FC<CustomTextFieldProps> = ({ name, control, label, type = 'text', error, helperText }) => {
return ( return (
<Controller <Controller
name={name} name={name}
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<CssTextField <CssTextField
autoComplete='off'
{...field} {...field}
label={label} label={label}
type={type} type={type}