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

design update login design fixed

Browse Source
This commit is contained in:
Amit Roy 2024-08-07 18:35:36 +05:30
parent 0811f3a797
commit a4e0b66d5f
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(auth)/log-in/loginPage.module.scss
View File

@ -4,8 +4,8 @@
background: var(--bg_white); background: var(--bg_white);
.images { .images {
width: 100%; width: 100%;
max-width: 500px; object-fit: cover;
object-fit: contain;
margin-inline: auto; margin-inline: auto;
opacity: 0.6;
} }
} }

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

@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/services/store"; import { RootState } from "@/services/store";
import { setAuthTokens, setUserDetails } from "@/services/store/authSlice"; import { setAuthTokens, setUserDetails } from "@/services/store/authSlice";
import { grey } from "@mui/material/colors";
const loginSchema = z.object({ const loginSchema = z.object({
username: z.string(), username: z.string(),
@ -29,15 +30,20 @@ type LoginFormValues = z.infer<typeof loginSchema>;
export default function LoginPage() { export default function LoginPage() {
const [loader, setLoader] = useState(false); 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),
}); });
const [error, setError] = useState(""); const [error, setError] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
const onSubmit = async (data: LoginFormValues) => { const onSubmit = async (data: LoginFormValues) => {
try { try {
setLoader(true) 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);
@ -48,11 +54,11 @@ export default function LoginPage() {
}) })
); );
dispatch(setUserDetails(response)); dispatch(setUserDetails(response));
setLoader(false) setLoader(false);
router.push('/home'); router.push("/home");
} catch (err) { } catch (err) {
setLoader(false) setLoader(false);
setError('Invalid credentials'); setError("Invalid credentials");
} }
}; };
@ -62,7 +68,11 @@ export default function LoginPage() {
<Grid item display={{ xs: "none", md: "block" }} md={7}> <Grid item display={{ xs: "none", md: "block" }} md={7}>
<Box <Box
height={"100%"} height={"100%"}
sx={{ background: "var(--primary)" }} sx={{
background: grey[900],
overflow: "hidden",
height: "100vh",
}}
display={"flex"} display={"flex"}
alignItems={"center"} alignItems={"center"}
justifyContent={"space-between"} justifyContent={"space-between"}
@ -87,7 +97,7 @@ export default function LoginPage() {
paddingBlock={5} paddingBlock={5}
> >
<img src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} alt="logo" /> <img src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} alt="logo" />
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
<Typography variant="h4">Welcome to Convexsol</Typography> <Typography variant="h4">Welcome to Convexsol</Typography>
<Typography variant="h4">Sign in to your account</Typography> <Typography variant="h4">Sign in to your account</Typography>
<Box <Box
@ -115,7 +125,10 @@ export default function LoginPage() {
/> />
</Box> </Box>
<Box width={"100%"} marginBlockStart={"20px"}> <Box width={"100%"} marginBlockStart={"20px"}>
<CustomizedButtons btnType="submit" label={!loader ? "Login" : "Login..."} /> <CustomizedButtons
btnType="submit"
label={!loader ? "Login" : "Login..."}
/>
</Box> </Box>
</form> </form>
<Box <Box