Login page design fixes

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 (
-      <div 
-      className={classes.root}
-      >
-        <Suspense fallback={<div>Loading....</div>}>
-          <Header
-            type={type}
-            index={index}
-            className={classes.headerContainer}
-
+    <div className={classes.root}>
+      <Suspense fallback={<div>Loading....</div>}>
+        <Header type={type} index={index} className={classes.headerContainer} />
+      </Suspense>
+      <div className={classes.container} style={{ marginTop: "88px" }}>
+        {Backbutton && (
+          <BackButton
+            startIcon={<ArrowBackIcon />}
+            sx={{ color: "white", mb: 4, mt: 2 }}
+            backPressNavigationPath={
+              backPressNavigationPath ? backPressNavigationPath : ""
+            }
+            label={translate("label.backToPreviousPage")}
           />
+        )}
+        <Suspense fallback={<div>Loading....</div>}>
+          <ErrorBoundary>{component}</ErrorBoundary>
         </Suspense>
-        <div
-        className={classes.container}
-        style={{marginTop:"88px"}}
-        >
-          { Backbutton  && 
-           < BackButton startIcon={<  ArrowBackIcon />} sx={{ color:"white" ,   mb:4
-            ,mt:2}} backPressNavigationPath={backPressNavigationPath ? backPressNavigationPath : ""} label={translate("label.backToPreviousPage")}/>
-           }
-          <Suspense fallback={<div>Loading....</div>}>
-          <ErrorBoundary>
-            {component}
-            </ErrorBoundary>
-          </Suspense>
-        </div>
       </div>
+    </div>
   );
-}
+};
 export default Layout;

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 = () => {
           />
         </Grid>
         <Grid item xs={12} sm={12} md={12} lg={12} xl={12} textAlign={"right"}>
-          <Typography>
-            <Link href="/" style={{ fontSize: "14px" }}>
+          <Typography onClick={() => navigate("/login")}>
+            <Link style={{ fontSize: "14px", cursor: "pointer" }}>
               {" "}
               Back to Login
             </Link>
@@ -167,4 +167,4 @@ const ForgotPassword = () => {
   );
 };
 
-export default ForgotPassword;
+export default ForgotPassword;