From 352ec3b96decda79338efd77a2bf3b552d42ce73 Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Tue, 20 Feb 2024 11:23:24 +0800
Subject: [PATCH] layout update

---
 src/components/AutoLogoutProvider.js          |  4 +-
 src/index.js                                  |  6 +-
 .../UserInformationCard_Organization_Pub.js   | 96 +++++++++----------
 .../User/DetailsPage_Organization/index.js    |  2 +-
 .../authentication/auth-forms/AuthLogin.js    |  8 +-
 .../auth-forms/AuthLoginCustom.js             | 40 ++++----
 src/utils/FieldUtils.js                       | 32 ++++---
 7 files changed, 99 insertions(+), 89 deletions(-)

diff --git a/src/components/AutoLogoutProvider.js b/src/components/AutoLogoutProvider.js
index 27ccd6b..817baf9 100644
--- a/src/components/AutoLogoutProvider.js
+++ b/src/components/AutoLogoutProvider.js
@@ -56,10 +56,10 @@ const AutoLogoutProvider = ({ children }) => {
             //TODO: get auto logout time here
             if(isGLDLoggedIn()){
                 setLogoutInterval(240);
-                console.log("Set Logout Interval: 240")
+                // console.log("Set Logout Interval: 240")
             }else{
                 setLogoutInterval(60);
-                console.log("Set Logout Interval: 60")
+                // console.log("Set Logout Interval: 60")
             }
             // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
             // )
diff --git a/src/index.js b/src/index.js
index c58b3ca..ee0bb28 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,9 +16,9 @@ import 'assets/third-party/apex-chart.css';
 import App from './App';
 import { store } from 'store';
 import reportWebVitals from './reportWebVitals';
-import {I18nProvider} from "./components/I18nProvider";
-import {AutoLogoutProvider} from "./components/AutoLogoutProvider";
-import {RefreshTokenProvider} from "./components/RefreshTokenProvider";
+import {I18nProvider} from "components/I18nProvider";
+import {AutoLogoutProvider} from "components/AutoLogoutProvider";
+import {RefreshTokenProvider} from "components/RefreshTokenProvider";
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 
diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
index ed94098..7b8b7a4 100644
--- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
+++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
@@ -43,7 +43,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
             setOnReady(true);
-            console.log(currentUserData)
+            // console.log(currentUserData)
         }
     }, [currentUserData]);
 
@@ -59,7 +59,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
         }),
         onSubmit: (values) => {
-            console.log(values);
+            // console.log(values);
             HttpUtils.post({
                 url: UrlUtils.POST_PUB_ORG_USER,
                 params: {
@@ -105,50 +105,48 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                 <form onSubmit={formik.handleSubmit}>
 
                     {/*top button*/}
-                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">
-                        <Grid container maxWidth justifyContent="flex-start">
-                            {editMode ?
-                                <>
-                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            onClick={loadDataFun}
-                                            color="cancel"
-                                        >
-                                            <FormattedMessage id="resetAndBack" />
-
-                                        </Button>
-                                    </Grid>
-                                    <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            type="submit"
-                                            color="success"
-                                        >
-                                            <FormattedMessage id="save" />
-
-                                        </Button>
-                                    </Grid>
-                                </ThemeProvider>
-                                </>
-                                :
-                                <>
-                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            onClick={onEditClick}
-                                        >
-                                            <FormattedMessage id="edit" />
-
-                                        </Button>
-                                    </Grid>
-                                </ThemeProvider>
-                                </>
-                            }
+                    <Grid container alignItems="center" justifyContent="flex-start">
+                        <Grid item s={12} md={12} lg={12} sx={{ lg:{mb: 3}, mt: 2 }}>
+                            <Grid container direction="row" justifyContent="flex-start">
+                                {editMode ?
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={loadDataFun}
+                                                color="cancel"
+                                            >
+                                                <FormattedMessage id="resetAndBack" />
+
+                                            </Button>
+                                        </Grid>
+                                        <Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                type="submit"
+                                                color="success"
+                                            >
+                                                <FormattedMessage id="save" />
+
+                                            </Button>
+                                        </Grid>
+                                    </ThemeProvider>
+                                    :
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Grid item sx={{ ml:3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={onEditClick}
+                                            >
+                                                <FormattedMessage id="edit" />
+
+                                            </Button>
+                                        </Grid>
+                                    </ThemeProvider>
+                                }
 
 
+                            </Grid>
                         </Grid>
                     </Grid>
                     {/*end top button*/}
@@ -157,7 +155,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                             <FormattedMessage id="userDetail" />
                         </Typography>
                         <Grid container spacing={1}>
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userLoginName'}) + ":",
                                     valueName: "username",
@@ -166,7 +164,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userContactName'}) + ":",
                                     valueName: "contactPerson",
@@ -175,7 +173,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userContactEmail'}) + ":",
                                     valueName: "emailBus",
@@ -184,7 +182,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getPhoneField({
                                     label: intl.formatMessage({id: 'userContactNumber'}) + ":",
                                     valueName: {
@@ -196,7 +194,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'primaryUser'}) + ":",
                                     valueName: "primaryUser",
diff --git a/src/pages/User/DetailsPage_Organization/index.js b/src/pages/User/DetailsPage_Organization/index.js
index a405f9f..4cc506b 100644
--- a/src/pages/User/DetailsPage_Organization/index.js
+++ b/src/pages/User/DetailsPage_Organization/index.js
@@ -166,7 +166,7 @@ const UserMaintainPage_Organization = () => {
                     //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
                     setUserData(response.data);
                     setOrgData(response.orgList);
-                    console.log(response.data)
+                    // console.log(response.data)
                 }
             });
         }
diff --git a/src/pages/authentication/auth-forms/AuthLogin.js b/src/pages/authentication/auth-forms/AuthLogin.js
index 4eb1de5..b231bf4 100644
--- a/src/pages/authentication/auth-forms/AuthLogin.js
+++ b/src/pages/authentication/auth-forms/AuthLogin.js
@@ -1,4 +1,6 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {
+  // useContext,
+  useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 // material-ui
@@ -34,9 +36,9 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import axios from "axios";
 import {useDispatch} from "react-redux";
 import {handleLogin} from "auth/index";
-import { notifyActionSuccess } from 'utils/CommonFunction';
+// import { notifyActionSuccess } from 'utils/CommonFunction';
 import {FormattedMessage} from "react-intl";
-import LocaleContext from "../../../components/I18nProvider";
+// import LocaleContext from "../../../components/I18nProvider";
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const AuthLogin = () => {
diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js
index c5c226e..3afe339 100644
--- a/src/pages/authentication/auth-forms/AuthLoginCustom.js
+++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js
@@ -47,6 +47,8 @@ import useJwt from "auth/jwt/useJwt";
 import { handleLogoutFunction } from 'auth/index';
 import {FormattedMessage, useIntl} from "react-intl";
 // import LocaleContext from "components/I18nProvider";
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const AuthLoginCustom = () => {
@@ -66,6 +68,7 @@ const AuthLoginCustom = () => {
   const [open, setOpen] = React.useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [errorMassage, setErrorMassage] = useState('');
+  const [onLogin, setOnLogin] = useState(false);
 
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
@@ -74,7 +77,7 @@ const AuthLoginCustom = () => {
   const tryLogin = () => {
     if (isValid) {
       dispatch(handleLogoutFunction());
-      // setSumitting(true)
+      setOnLogin(true)
       useJwt
         .login({ username: values.username, password: values.password })
         .then((response) => {
@@ -114,8 +117,7 @@ const AuthLoginCustom = () => {
         })
         .catch((error) => {
           // setSuccess(false)
-          console.error(error)
-          console.error(error.response.data.error)
+          setOnLogin(false)
           setErrorMassage(error.response.data.error)
           setOpen(true)
         });
@@ -323,20 +325,24 @@ const AuthLoginCustom = () => {
             <Grid container>
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isButtonDisabled}
-                    fullWidth size="large" type="submit" variant="contained" color="primary"
-                    sx={{
-                      "&.Mui-disabled": {
-                        background: "#bbdefb",
-                        color: "#fff",
-                        border: "2px solid",
-                        borderColor: "#e7e7e7"
-                      }
-                    }}>
-                    <Typography variant="h5">
-                      <FormattedMessage id="login"/>
-                    </Typography>
-                  </Button>
+                  {onLogin?
+                    <LoadingComponent disableText={true} alignItems="center"/>
+                  :
+                    <Button disableElevation disabled={isButtonDisabled}
+                      fullWidth size="large" type="submit" variant="contained" color="primary"
+                      sx={{
+                        "&.Mui-disabled": {
+                          background: "#bbdefb",
+                          color: "#fff",
+                          border: "2px solid",
+                          borderColor: "#e7e7e7"
+                        }
+                      }}>
+                      <Typography variant="h5">
+                        <FormattedMessage id="login"/>
+                      </Typography>
+                    </Button>
+                  }
                 </AnimateButton>
               </Grid>
               <Grid item xs={12}>
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index 5e08b63..d5dd1b4 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -27,25 +27,29 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
 }
 
 export const getTextField = ({ label, valueName, form, disabled }) => {
-    return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
-        <Grid item xs={12} sm={12} md={3} lg={3}
-            sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant="pnspsFormParagraphBold">{label}</Typography>
-        </Grid>
-        <Grid item xs={12} sm={12} md={6} lg={6}>
-            {initField({
-                type: "text",
-                valueName: valueName,
-                form: form,
-                disabled: disabled
-            })}
+    return <Grid container alignItems={"center"} sx={{mb:2}}>
+        <Grid item xs={12} sm={12} md={12} lg={12}>
+            <Grid container>
+                <Grid item xs={12} sm={12} md={3} lg={3}
+                    sx={{ display: 'flex', alignItems: 'center' }} mb={2} >
+                    <Typography variant="pnspsFormParagraphBold">{label}</Typography>
+                </Grid>
+                <Grid item xs={12} sm={12} md={6} lg={6}>
+                    {initField({
+                        type: "text",
+                        valueName: valueName,
+                        form: form,
+                        disabled: disabled
+                    })}
+                </Grid>
+            </Grid>
         </Grid>
     </Grid>;
 }
 
 export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => {
     return <Grid container alignItems={"center"}>
-        <Grid item xs={12} md={3} lg={3}
+        <Grid item xs={12} md={3} lg={3} mb={2}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
@@ -73,7 +77,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
 export const getPhoneField = ({ label, valueName, form, disabled }) => {
 
     return <Grid container alignItems={"center"} sx={{mb:2}}>
-        <Grid item xs={12} md={3} lg={3}
+        <Grid item xs={12} md={3} lg={3} mb={2}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>