From d94dbdd40238e54d35d9d8eb0bead3cfe0367d1f Mon Sep 17 00:00:00 2001 From: dhaval-codes Date: Tue, 31 Dec 2024 15:48:55 +0530 Subject: [PATCH 1/2] login page ui fixed --- src/app/ui/Layout.js | 79 +++--- src/app/ui/pages/login/login.js | 486 ++++++++++++++++++-------------- src/components/common/Card.jsx | 49 +++- 3 files changed, 354 insertions(+), 260 deletions(-) diff --git a/src/app/ui/Layout.js b/src/app/ui/Layout.js index 832a8100..e7bb536b 100644 --- a/src/app/ui/Layout.js +++ b/src/app/ui/Layout.js @@ -1,69 +1,62 @@ import React, { Suspense, useEffect, useState } from "react"; import GlobalStyles from "@/styles/LayoutStyles"; import BackButton from "@/components/common/BackButton"; -import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import { translate } from "@/config/localisation"; import ErrorBoundary from "../ErrorBoundary"; const Header = React.lazy(() => import("@/components/common/Header")); - -const Layout= (props) => { - /* eslint-disable react-hooks/exhaustive-deps */ - const { type, index, component,Backbutton, backPressNavigationPath } = props; +const Layout = (props) => { + /* eslint-disable react-hooks/exhaustive-deps */ + const { type, index, component, Backbutton, backPressNavigationPath } = props; const [show, setShow] = useState(false); const classes = GlobalStyles(); useEffect(() => { if (show) { - window.removeEventListener('scroll', (e) => { }); + window.removeEventListener("scroll", (e) => {}); } - }, [show]) + }, [show]); - if (typeof window !== 'undefined') { - window.addEventListener('scroll', e => { - if (window.pageYOffset > 100 && !show) { - setShow(true); - } - }) + if (typeof window !== "undefined") { + window.addEventListener("scroll", (e) => { + if (window.pageYOffset > 100 && !show) { + setShow(true); + } + }); } useEffect(() => { - if (typeof window !== 'undefined') { - if (localStorage.getItem('rtl') === "true") { - let style = document.createElement('style'); - style.innerHTML = 'input, textarea { direction: RTL; }' - document.head.appendChild(style); + if (typeof window !== "undefined") { + if (localStorage.getItem("rtl") === "true") { + let style = document.createElement("style"); + style.innerHTML = "input, textarea { direction: RTL; }"; + document.head.appendChild(style); + } } - } }, []); return ( -
- Loading....
}> -
+ Loading....}> +
+ +
+ {Backbutton && ( + } + sx={{ color: "white", mb: 4, mt: 2 }} + backPressNavigationPath={ + backPressNavigationPath ? backPressNavigationPath : "" + } + label={translate("label.backToPreviousPage")} /> + )} + Loading....
}> + {component} -
- { Backbutton && - < BackButton startIcon={< ArrowBackIcon />} sx={{ color:"white" , mb:4 - ,mt:2}} backPressNavigationPath={backPressNavigationPath ? backPressNavigationPath : ""} label={translate("label.backToPreviousPage")}/> - } - Loading....
}> - - {component} - - - + ); -} +}; export default Layout; diff --git a/src/app/ui/pages/login/login.js b/src/app/ui/pages/login/login.js index e665e6fb..4496937d 100644 --- a/src/app/ui/pages/login/login.js +++ b/src/app/ui/pages/login/login.js @@ -1,6 +1,6 @@ -'use client'; +"use client"; import "@/styles/Dataset.css"; -import { Grid, Link } from "@mui/material"; +import { Box, Grid, Link } from "@mui/material"; import LoginStyle from "../../../../styles/loginStyle"; import AppInfo from "../../../../components/user/AppInfo"; import CustomCard from "../../../../components/common/Card"; @@ -10,7 +10,7 @@ import InputAdornment from "@material-ui/core/InputAdornment"; import IconButton from "@material-ui/core/IconButton"; import { Visibility } from "@mui/icons-material"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import {useDispatch,useSelector} from "react-redux" +import { useDispatch, useSelector } from "react-redux"; import CustomButton from "../../../../components/common/Button"; import APITransport from "@/Lib/apiTransport/apitransport"; import { useNavigate } from "react-router-dom"; @@ -21,54 +21,55 @@ import LoginAPI from "../../../actions/api/user/Login"; import { auth, googleAuthProvider } from "@/firebase"; import { signInWithPopup } from "firebase/auth"; import GoogleLoginAPI from "../../../actions/api/user/GoogleLogin"; -import { authenticateUser,getLoggedInUserData } from "@/utils/utils"; +import { authenticateUser, getLoggedInUserData } from "@/utils/utils"; import { FetchLoggedInUserData } from "@/Lib/Features/getLoggedInData"; export default function Login() { - /* eslint-disable react-hooks/exhaustive-deps */ - /* eslint-disable-next-line react/jsx-key */ + /* eslint-disable react-hooks/exhaustive-deps */ + /* eslint-disable-next-line react/jsx-key */ - const navigate = useNavigate(); - const dispatch=useDispatch() - - useEffect(() => { - const isLoggedIn = localStorage.getItem("isLoggedIn"); - if (isLoggedIn === "true") { - navigate('/projects'); - } - }, []); - - const classes = LoginStyle(); - const [snackbar, setSnackbarInfo] = useState({ - open: false, - message: "", - variant: "success", - }); - const [credentials, setCredentials] = useState({ - email: "", - password: "", - }); - const [values, setValues] = useState({ - password: "", - showPassword: false, - }); + const navigate = useNavigate(); + const dispatch = useDispatch(); + + useEffect(() => { + const isLoggedIn = localStorage.getItem("isLoggedIn"); + if (isLoggedIn === "true") { + navigate("/projects"); + } + }, []); + + const classes = LoginStyle(); + const [snackbar, setSnackbarInfo] = useState({ + open: false, + message: "", + variant: "success", + }); + const [credentials, setCredentials] = useState({ + email: "", + password: "", + }); + const [values, setValues] = useState({ + password: "", + showPassword: false, + }); - const handleFieldChange = (event) => { - event.preventDefault(); - setCredentials((prev) => ({ - ...prev, - [event.target.name]: event.target.value, - })); - }; - const getLoggedInUserData = () => { - dispatch(FetchLoggedInUserData("me")); - }; + const handleFieldChange = (event) => { + event.preventDefault(); + setCredentials((prev) => ({ + ...prev, + [event.target.name]: event.target.value, + })); + }; + const getLoggedInUserData = () => { + dispatch(FetchLoggedInUserData("me")); + }; - - - const handleSubmit = async () => { + const handleSubmit = async () => { // setLoading(true); - const apiObj = new LoginAPI(credentials.email.toLowerCase(), credentials.password); + const apiObj = new LoginAPI( + credentials.email.toLowerCase(), + credentials.password, + ); const res = await fetch(apiObj.apiEndPoint(), { method: "POST", body: JSON.stringify(apiObj.getBody()), @@ -76,188 +77,261 @@ export default function Login() { }); const rsp_data = await res.json(); - if (res.ok && typeof window !== 'undefined') { + if (res.ok && typeof window !== "undefined") { localStorage.setItem("anudesh_access_token", rsp_data.access); localStorage.setItem("anudesh_refresh_token", rsp_data.refresh); localStorage.setItem("email_id", credentials.email.toLowerCase()); localStorage.setItem("isLoggedIn", "true"); navigate("/projects"); - } else{ + } else { setSnackbarInfo({ open: true, message: rsp_data?.message, variant: "error", - }) + }); } // setLoading(false); - }; + }; - const handleClickShowPassword = () => { - setValues({ ...values, showPassword: !values.showPassword }); - }; + const handleClickShowPassword = () => { + setValues({ ...values, showPassword: !values.showPassword }); + }; - const handleMouseDownPassword = (event) => { - event.preventDefault(); - }; + const handleMouseDownPassword = (event) => { + event.preventDefault(); + }; - const TextFields = () => { - return ( - - - - - - - - {values.showPassword ? : } - - - ), - }} - /> - - - ); - }; - - const renderCardContent = () => ( - - - - navigate("/forgot-password")}> - {translate("forgotPassword")} - - - - - - - + const TextFields = () => { + return ( + + + + + + + + {values.showPassword ? : } + + + ), + }} + /> + + ); + }; - const renderSnackBar = () => { - return ( - - setSnackbarInfo({ open: false, message: "", variant: "" }) - } - anchorOrigin={{ vertical: "bottom", horizontal: "right" }} - variant={snackbar.variant} - message={snackbar.message} - /> - ); - }; + const renderCardContent = () => ( +
+ + + + navigate("/forgot-password")} + style={{ cursor: "pointer" }} + > + {translate("forgotPassword")} + + + + + + + + } + /> +
+ ); - const googleLogin = () => { - if (typeof window !== 'undefined') { + const renderSnackBar = () => { + return ( + + setSnackbarInfo({ open: false, message: "", variant: "" }) + } + anchorOrigin={{ vertical: "bottom", horizontal: "right" }} + variant={snackbar.variant} + message={snackbar.message} + /> + ); + }; - signInWithPopup(auth, googleAuthProvider) - .then(async (result) => { - setSnackbarInfo({ - open: true, - message: "login successfull", - variant: "success", - }); - const { user } = result; - const fireResult = await user.getIdTokenResult(); - const apiObj = new GoogleLoginAPI(fireResult.token); - const res = await fetch(apiObj.apiEndPoint(), { - method: "POST", - body: JSON.stringify(apiObj.getBody()), - headers: apiObj.getHeaders().headers, - }); + const googleLogin = () => { + if (typeof window !== "undefined") { + signInWithPopup(auth, googleAuthProvider) + .then(async (result) => { + setSnackbarInfo({ + open: true, + message: "login successfull", + variant: "success", + }); + const { user } = result; + const fireResult = await user.getIdTokenResult(); + const apiObj = new GoogleLoginAPI(fireResult.token); + const res = await fetch(apiObj.apiEndPoint(), { + method: "POST", + body: JSON.stringify(apiObj.getBody()), + headers: apiObj.getHeaders().headers, + }); - const rsp_data = await res.json(); - if (res.ok && typeof window !== 'undefined') { - localStorage.setItem("anudesh_access_token", rsp_data.access); - localStorage.setItem("anudesh_refresh_token", rsp_data.refresh); - localStorage.setItem("email_id", fireResult.claims.email.toLowerCase()); - getLoggedInUserData(); - navigate("/projects"); - } else{ - setSnackbarInfo({ - open: true, - message: rsp_data?.message, - variant: "error", - }) - } - }) - .catch((err) => { - setSnackbarInfo({ - open: true, - message: err, - variant: "error", - }); + const rsp_data = await res.json(); + if (res.ok && typeof window !== "undefined") { + localStorage.setItem("anudesh_access_token", rsp_data.access); + localStorage.setItem("anudesh_refresh_token", rsp_data.refresh); + localStorage.setItem( + "email_id", + fireResult.claims.email.toLowerCase(), + ); + getLoggedInUserData(); + navigate("/projects"); + } else { + setSnackbarInfo({ + open: true, + message: rsp_data?.message, + variant: "error", }); - } - }; + } + }) + .catch((err) => { + setSnackbarInfo({ + open: true, + message: err, + variant: "error", + }); + }); + } + }; - - return ( - <> - {renderSnackBar()} - - - - - -
{renderCardContent()} -
- + return ( + <> + {renderSnackBar()} + + + + + +
{renderCardContent()}
+ - - - - - ) -} \ No newline at end of file + + + + + ); +} diff --git a/src/components/common/Card.jsx b/src/components/common/Card.jsx index 1ca9b74b..a2dcd236 100644 --- a/src/components/common/Card.jsx +++ b/src/components/common/Card.jsx @@ -7,11 +7,18 @@ import { Typography, } from "@mui/material"; -const CustomCard = ({ title, children, cardContent }) => { +const CustomCard = ({ title, children, cardContent, cardContentTwo }) => { return ( - - - + + { {/* */} - + {cardContent} - + {/* */} + + - {children} + + {cardContentTwo} + - - - - ); }; From 1fc7f7bea5e9452f95f49c725e30b8c9e5410df9 Mon Sep 17 00:00:00 2001 From: dhaval-codes Date: Fri, 3 Jan 2025 12:14:44 +0530 Subject: [PATCH 2/2] fixed the wrong url click issue --- .../pages/forgot-password/forgot-password.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/app/ui/pages/forgot-password/forgot-password.js b/src/app/ui/pages/forgot-password/forgot-password.js index c411ba44..5656445c 100644 --- a/src/app/ui/pages/forgot-password/forgot-password.js +++ b/src/app/ui/pages/forgot-password/forgot-password.js @@ -1,4 +1,4 @@ -'use client' +"use client"; import React, { useEffect, useState } from "react"; // import CustomCard from "@/component/common/Card"; import { Grid, Typography, Link, ThemeProvider } from "@mui/material"; @@ -15,7 +15,7 @@ import { useDispatch } from "react-redux"; import CustomizedSnackbars from "@/components/common/Snackbar"; const ForgotPassword = () => { - /* eslint-disable react-hooks/exhaustive-deps */ + /* eslint-disable react-hooks/exhaustive-deps */ const classes = LoginStyle(); const dispatch = useDispatch(); @@ -44,31 +44,31 @@ const ForgotPassword = () => { setLoading(true); let obj = new ForgotPasswordAPI(ForgotPassword); const res = await fetch(obj.apiEndPoint(), { - method: "POST", - body: JSON.stringify(obj.getBody()), - headers: obj.getHeaders().headers, + method: "POST", + body: JSON.stringify(obj.getBody()), + headers: obj.getHeaders().headers, }); const resp = await res.json(); setLoading(false); if (res.ok) { - setSnackbarInfo({ - open: true, - message: resp?.message, - variant: "success", - }) - navigate("/login"); + setSnackbarInfo({ + open: true, + message: resp?.message, + variant: "success", + }); + navigate("/login"); } else { - setSnackbarInfo({ - open: true, - message: resp?.message, - variant: "error", - }) + setSnackbarInfo({ + open: true, + message: resp?.message, + variant: "error", + }); } - } + }; const ValidateEmail = (mail) => { if ( /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test( - mail + mail, ) ) { return true; @@ -127,8 +127,8 @@ const ForgotPassword = () => { /> - - + navigate("/login")}> + {" "} Back to Login @@ -167,4 +167,4 @@ const ForgotPassword = () => { ); }; -export default ForgotPassword; \ No newline at end of file +export default ForgotPassword;