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

Merge branch 'master' of https://git.sentientgeeks.us/Amit/mui-demo-project

master
Amit Roy 6 months ago
parent
6107572be7 29070d2748
commit
0811f3a797
7 changed files with 1905 additions and 80 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +20
    -12
      src/app/(auth)/log-in/page.tsx
  2. +1
    -3
      src/app/(dashboard)/layout.tsx
  3. +16
    -1
      src/app/layout.tsx
  4. +40
    -18
      src/components/wrapper/dashboardWrapper.tsx
  5. +22
    -14
      src/services/store/authSlice.ts
  6. +2
    -0
      src/ui/CustomTextField.tsx
  7. +1804
    -32
      yarn.lock

+ 20
- 12
src/app/(auth)/log-in/page.tsx View File

@ -1,4 +1,4 @@
"use client"
"use client";
import React from "react";
import styles from "./loginPage.module.scss";
import Box from "@mui/material/Box";
@ -8,12 +8,12 @@ import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
import Link from "next/link";
import CustomizedInputsStyled from "@/ui/CustomizedInputsStyled";
import CustomizedButtons from "@/ui/customizedButtons";
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { loginApi } from "@/services/api/loginApi";
import { FormControl } from '@mui/material';
import { FormControl } from "@mui/material";
import CustomTextField from "@/ui/CustomTextField";
import { useRouter } from "next/navigation";
import { useDispatch, useSelector } from "react-redux";
@ -28,22 +28,30 @@ 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),
});
const [error, setError] = useState('');
const [error, setError] = useState("");
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 }));
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 +115,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


+ 1
- 3
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;

+ 16
- 1
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);

+ 40
- 18
src/components/wrapper/dashboardWrapper.tsx View File

@ -21,6 +21,7 @@ import styled from "@emotion/styled";
import { BUILDING, GEAR } from "@/utilities/svgConstant";
import LogoutIcon from "@mui/icons-material/Logout";
import { useRouter } from "next/navigation";
import { useSelector } from "react-redux";
const drawerWidth = 260;
@ -74,7 +75,8 @@ export default function DashboardWrapper(props: Props) {
const { children: Children } = props;
const [mobileOpen, setMobileOpen] = useState(false);
const [isClosing, setIsClosing] = useState(false);
const router = useRouter()
const userData = useSelector((state: any) => state?.auth);
const router = useRouter();
const handleDrawerClose = () => {
setIsClosing(true);
setMobileOpen(false);
@ -91,6 +93,10 @@ export default function DashboardWrapper(props: Props) {
};
const [activeIndex, setActiveIndex] = useState<number | null>(null);
React.useEffect(() => {
console.log("User Data", userData);
}, [userData]);
const drawer = (
<>
<Toolbar sx={{ minHeight: "72px !important" }}>
@ -106,7 +112,7 @@ export default function DashboardWrapper(props: Props) {
<ListItem
key={text}
disablePadding
selected={activeIndex === index} // Add this line to make the item "active"
selected={true} // Add this line to make the item "active"
onClick={() => setActiveIndex(index)} // Add this line to handle click events
>
<ListItemButton>
@ -125,10 +131,10 @@ export default function DashboardWrapper(props: Props) {
window !== undefined ? () => window().document.body : undefined;
const logoutHandler = () => {
localStorage.removeItem('token');
localStorage.removeItem('refreshToken');
router.push('/log-in');
}
localStorage.removeItem("token");
localStorage.removeItem("refreshToken");
router.push("/log-in");
};
return (
<Box
@ -169,18 +175,34 @@ export default function DashboardWrapper(props: Props) {
borderRadius: "30px",
}}
>
<Avatar
sx={{
width: 34,
height: 34,
cursor: "pointer",
background: "var(--primary_light)",
color: "var(--primary_Active_text)",
fontSize: "0.8rem",
}}
alt="Remy Sharp"
src="/static/images/avatar/1.jpg"
/>
{userData?.image && userData?.image?.length > 0 ? (
<Avatar
sx={{
width: 34,
height: 34,
cursor: "pointer",
background: "var(--primary_light)",
color: "var(--primary_Active_text)",
fontSize: "0.8rem",
}}
alt="Remy Sharp"
src={userData?.image}
/>
) : (
<Avatar
sx={{
width: 34,
height: 34,
cursor: "pointer",
background: "var(--primary_light)",
color: "var(--primary_Active_text)",
fontSize: "0.8rem",
}}
>
{userData?.firstName?.charAt(0)}
</Avatar>
)}
<IconButton aria-label="log out" size="medium" color="error">
<LogoutIcon fontSize="small" onClick={logoutHandler} />
</IconButton>


+ 22
- 14
src/services/store/authSlice.ts View File

@ -1,6 +1,6 @@
// store/slices/authSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { LoginResponse } from '../api/loginApi';
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { LoginResponse } from "../api/loginApi";
interface AuthState {
token: string | null;
@ -18,16 +18,16 @@ const initialState: AuthState = {
token: null,
refreshToken: null,
id: 0,
username: '',
email: '',
firstName: '',
lastName: '',
gender: '',
image: '',
username: "",
email: "",
firstName: "",
lastName: "",
gender: "",
image: "",
};
const authSlice = createSlice({
name: 'auth',
name: "auth",
initialState,
reducers: {
setAuthTokens: (
@ -36,17 +36,25 @@ const authSlice = createSlice({
) => {
state.token = action.payload.token;
state.refreshToken = action.payload.refreshToken;
localStorage.setItem('token', action.payload.token);
localStorage.setItem('refreshToken', action.payload.refreshToken);
localStorage.setItem("token", action.payload.token);
localStorage.setItem("refreshToken", action.payload.refreshToken);
},
clearAuthTokens: (state) => {
state.token = null;
state.refreshToken = null;
localStorage.removeItem('token');
localStorage.removeItem('refreshToken');
localStorage.removeItem("token");
localStorage.removeItem("refreshToken");
},
setUserDetails: (state, action: PayloadAction<LoginResponse>) => {
state = action.payload;
state.token = action.payload.token;
state.refreshToken = action.payload.refreshToken;
state.id = action.payload.id;
state.username = action.payload.username;
state.email = action.payload.email;
state.firstName = action.payload.firstName;
state.lastName = action.payload.lastName;
state.gender = action.payload.gender;
state.image = action.payload.image;
},
},
});


+ 2
- 0
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}


+ 1804
- 32
yarn.lock
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save