@asaleh37/ui-base 26.2.131 → 27.5.26

package/src/components/common/AzureLogin.tsx

@@ -1,222 +1,222 @@
-import { PublicClientApplication } from "@azure/msal-browser";
-import {
-  Box,
-  Button,
-  CircularProgress,
-  createTheme,
-  Paper,
-  Typography,
-} from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { AppInfo } from "../../redux/features/common/AppInfoSlice";
-import { useAxios } from "../../hooks";
-import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import { useEffect, useState } from "react";
-
-import { ThemeProvider } from "@emotion/react";
-import {
-  DARK_THEME_INITIAL_MAIN_COLOR,
-  DARK_THEME_INITIAL_SECANDARY_COLOR,
-  LIGHT_THEME_INITIAL_MAIN_COLOR,
-  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
-} from "../../util";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-interface AzureLoginProps {
-  msalInstance: PublicClientApplication;
-}
-
-const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
-  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const userSession = useSelector((state: any) => state.UserSession.value);
-  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
-  const { handleGetRequest } = useAxios();
-  const dispatch = useDispatch();
-  const checkUserSession = async () => {
-    if (localStorage.getItem("TOKEN")) {
-      if (appInfo?.apiBaseUrl) {
-        handleGetRequest({
-          endPointURI: "api/auth/userInfo",
-          showMask: true,
-          successCallBkFn: (response) => {
-            setIsLoginInProcess(false);
-            if (response != null && response.data != null) {
-              const UserSession = {
-                ...response.data,
-                isAuthenticated: true,
-              };
-              dispatch(UserSessionActions.setAuthenticated(UserSession));
-            } else {
-              dispatch(UserSessionActions.setUnAuthenticated());
-              localStorage.removeItem("TOKEN");
-            }
-          },
-          failureCallBkFn: () => {
-            setIsLoginInProcess(false);
-          },
-        });
-      }
-    } else {
-      dispatch(UserSessionActions.setUnAuthenticated());
-      setIsLoginInProcess(false);
-    }
-  };
-  const handleLogin = async () => {
-    setIsLoginInProcess(true);
-    const response = await msalInstance.acquireTokenPopup({
-      scopes: appInfo?.azureConfiguration?.scopes,
-    });
-    if (response?.accessToken) {
-      localStorage.setItem("TOKEN", response.accessToken);
-      checkUserSession();
-    } else {
-      setIsLoginInProcess(false);
-    }
-  };
-  const UserSessionState = useSelector((state: any) => state.UserSession.value);
-
-  useEffect(() => {
-    checkUserSession();
-  }, [appInfo]);
-
-  const loginTheme = createTheme({
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: `
-          /* Custom Scrollbar */
-          * {
-            scrollbar-width: thin;
-            scrollbar-color: ${
-              appInfo.appTheme?.dark?.primaryColor ||
-              DARK_THEME_INITIAL_MAIN_COLOR
-            } #121212;
-          }
-    
-          /* Webkit Browsers */
-          *::-webkit-scrollbar {
-            width: 12px;
-            height: 10px;
-          }   
-        `,
-      },
-    },
-    palette: {
-      mode: appInfo?.loginScreenStyle?.themeMode || "dark",
-      primary: {
-        main:
-          appInfo?.loginScreenStyle?.themeMode === "light"
-            ? appInfo.appTheme?.light?.primaryColor ||
-              LIGHT_THEME_INITIAL_MAIN_COLOR
-            : appInfo.appTheme?.dark?.primaryColor ||
-              DARK_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          appInfo?.loginScreenStyle?.themeMode === "light"
-            ? appInfo.appTheme?.light?.secondaryColor ||
-              LIGHT_THEME_INITIAL_SECANDARY_COLOR
-            : appInfo.appTheme?.dark?.secondaryColor ||
-              DARK_THEME_INITIAL_SECANDARY_COLOR,
-      },
-    },
-  });
-  return (
-    <ThemeProvider theme={loginTheme}>
-      {UserSessionState.isAuthenticated == false ? (
-        <Box
-          sx={{
-            // position: "relative",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: "100vh",
-            width: "100%",
-            backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
-            backgroundRepeat: "no-repeat",
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            "&::before": {
-              content: '""',
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: appInfo?.loginScreenStyle?.backgroundColor,
-              zIndex: 0,
-            },
-          }}
-        >
-          <Paper
-            sx={{
-              display: "flex",
-              width: "fit-content",
-              padding: 2,
-              height: "fit-content",
-              borderRadius: 5,
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              zIndex: 1,
-              p: 4,
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <img src={appInfo?.appLogo} width={150} height={150} />
-              <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
-                {appInfo?.appName}
-              </Typography>
-              <Typography
-                sx={{
-                  paddingRight: 1,
-                  width: "100%",
-                  textAlign: "right",
-                  fontSize: 10,
-                }}
-                variant="caption"
-                color="textSecondary"
-              >
-                V.{appInfo.appVersion}
-              </Typography>
-              <Button
-                loading={isLoginInProcess}
-                onClick={handleLogin}
-                variant="contained"
-                color="primary"
-                sx={{ m: 1 }}
-                startIcon={
-                  <FontAwesomeIcon
-                    icon={{ iconName: "microsoft", prefix: "fab" }}
-                  />
-                }
-              >
-                login
-              </Button>
-            </Box>
-          </Paper>
-        </Box>
-      ) : (
-        <Paper
-          sx={{
-            width: "100%",
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <CircularProgress sx={{ marginRight: 1 }} />
-          <div>You will be redirected shortly ... please wait</div>
-        </Paper>
-      )}
-    </ThemeProvider>
-  );
-};
-
-export default AzureLogin;
+import { PublicClientApplication } from "@azure/msal-browser";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  createTheme,
+  Paper,
+  Typography,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { AppInfo } from "../../redux/features/common/AppInfoSlice";
+import { useAxios } from "../../hooks";
+import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+import { useEffect, useState } from "react";
+
+import { ThemeProvider } from "@emotion/react";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+} from "../../util";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+interface AzureLoginProps {
+  msalInstance: PublicClientApplication;
+}
+
+const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const userSession = useSelector((state: any) => state.UserSession.value);
+  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
+  const { handleGetRequest } = useAxios();
+  const dispatch = useDispatch();
+  const checkUserSession = async () => {
+    if (localStorage.getItem("TOKEN")) {
+      if (appInfo?.apiBaseUrl) {
+        handleGetRequest({
+          endPointURI: "api/auth/userInfo",
+          showMask: true,
+          successCallBkFn: (response) => {
+            setIsLoginInProcess(false);
+            if (response != null && response.data != null) {
+              const UserSession = {
+                ...response.data,
+                isAuthenticated: true,
+              };
+              dispatch(UserSessionActions.setAuthenticated(UserSession));
+            } else {
+              dispatch(UserSessionActions.setUnAuthenticated());
+              localStorage.removeItem("TOKEN");
+            }
+          },
+          failureCallBkFn: () => {
+            setIsLoginInProcess(false);
+          },
+        });
+      }
+    } else {
+      dispatch(UserSessionActions.setUnAuthenticated());
+      setIsLoginInProcess(false);
+    }
+  };
+  const handleLogin = async () => {
+    setIsLoginInProcess(true);
+    const response = await msalInstance.acquireTokenPopup({
+      scopes: appInfo?.azureConfiguration?.scopes,
+    });
+    if (response?.accessToken) {
+      localStorage.setItem("TOKEN", response.accessToken);
+      checkUserSession();
+    } else {
+      setIsLoginInProcess(false);
+    }
+  };
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
+
+  useEffect(() => {
+    checkUserSession();
+  }, [appInfo]);
+
+  const loginTheme = createTheme({
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+          /* Custom Scrollbar */
+          * {
+            scrollbar-width: thin;
+            scrollbar-color: ${
+              appInfo.appTheme?.dark?.primaryColor ||
+              DARK_THEME_INITIAL_MAIN_COLOR
+            } #121212;
+          }
+    
+          /* Webkit Browsers */
+          *::-webkit-scrollbar {
+            width: 12px;
+            height: 10px;
+          }   
+        `,
+      },
+    },
+    palette: {
+      mode: appInfo?.loginScreenStyle?.themeMode || "dark",
+      primary: {
+        main:
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.primaryColor ||
+              LIGHT_THEME_INITIAL_MAIN_COLOR
+            : appInfo.appTheme?.dark?.primaryColor ||
+              DARK_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.secondaryColor ||
+              LIGHT_THEME_INITIAL_SECANDARY_COLOR
+            : appInfo.appTheme?.dark?.secondaryColor ||
+              DARK_THEME_INITIAL_SECANDARY_COLOR,
+      },
+    },
+  });
+  return (
+    <ThemeProvider theme={loginTheme}>
+      {UserSessionState.isAuthenticated == false ? (
+        <Box
+          sx={{
+            // position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "100vh",
+            width: "100%",
+            backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: appInfo?.loginScreenStyle?.backgroundColor,
+              zIndex: 0,
+            },
+          }}
+        >
+          <Paper
+            sx={{
+              display: "flex",
+              width: "fit-content",
+              padding: 2,
+              height: "fit-content",
+              borderRadius: 5,
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              zIndex: 1,
+              p: 4,
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <img src={appInfo?.appLogo} width={150} height={150} />
+              <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
+                {appInfo?.appName}
+              </Typography>
+              <Typography
+                sx={{
+                  paddingRight: 1,
+                  width: "100%",
+                  textAlign: "right",
+                  fontSize: 10,
+                }}
+                variant="caption"
+                color="textSecondary"
+              >
+                V.{appInfo.appVersion}
+              </Typography>
+              <Button
+                loading={isLoginInProcess}
+                onClick={handleLogin}
+                variant="contained"
+                color="primary"
+                sx={{ m: 1 }}
+                startIcon={
+                  <FontAwesomeIcon
+                    icon={{ iconName: "microsoft", prefix: "fab" }}
+                  />
+                }
+              >
+                login
+              </Button>
+            </Box>
+          </Paper>
+        </Box>
+      ) : (
+        <Paper
+          sx={{
+            width: "100%",
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <CircularProgress sx={{ marginRight: 1 }} />
+          <div>You will be redirected shortly ... please wait</div>
+        </Paper>
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default AzureLogin;

package/src/components/common/ChangeOrgForm.tsx

@@ -1,85 +1,85 @@
-import { useState } from "react";
-import { useAxios, useSession } from "../../hooks";
-import { ComboBox } from "../templates";
-import { Box, Button } from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-
-type ChangeOrgFormProps = {
-  successChangeCallBackFn: () => void;
-};
-
-const ChangeOrgForm: React.FC<ChangeOrgFormProps> = (props) => {
-  const { UserSession } = useSession();
-  const AppLayoutState = useSelector((state: any) => state.AppLayout);
-  const dispatch = useDispatch();
-  const { handlePostRequest } = useAxios();
-  const [newOrgId, setNewOrgId] = useState(
-    UserSession.value.currentOrganization.id
-  );
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 1,
-      }}
-    >
-      <ComboBox
-        sx={{ width: "100%" }}
-        displayField={
-          AppLayoutState.appDirection === "ltr"
-            ? "organizationEnName"
-            : "organizationArName"
-        }
-        valueField="id"
-        label=""
-        options={UserSession.value.userOrganizations}
-        value={newOrgId}
-        onChangeCallBack={(value) => {
-          setNewOrgId(value);
-        }}
-      />
-      <Button
-        sx={{ m: 1 }}
-        variant="contained"
-        disabled={
-          newOrgId == null ||
-          newOrgId === UserSession.value.currentOrganization.id
-        }
-        onClick={async () => {
-          await handlePostRequest({
-            endPointURI: "api/auth/changeCurrentOrg",
-            showMask: true,
-            parameters: {
-              username: UserSession.value.username,
-              orgId: newOrgId,
-            },
-            data: {},
-            successCallBkFn: (response) => {
-              const UserSession = {
-                ...response.data,
-                isAuthenticated: true,
-              };
-              if (response?.data?.token) {
-                localStorage.setItem("TOKEN", response.data.token);
-              }              
-              UserSession.token = null;
-              dispatch(UserSessionActions.setAuthenticated(UserSession));
-              if (props.successChangeCallBackFn) {
-                props.successChangeCallBackFn();
-              }
-            },
-          });
-        }}
-      >
-        Change Organization
-      </Button>
-    </Box>
-  );
-};
-
-export default ChangeOrgForm;
+import { useState } from "react";
+import { useAxios, useSession } from "../../hooks";
+import { ComboBox } from "../templates";
+import { Box, Button } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+
+type ChangeOrgFormProps = {
+  successChangeCallBackFn: () => void;
+};
+
+const ChangeOrgForm: React.FC<ChangeOrgFormProps> = (props) => {
+  const { UserSession } = useSession();
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const dispatch = useDispatch();
+  const { handlePostRequest } = useAxios();
+  const [newOrgId, setNewOrgId] = useState(
+    UserSession.value.currentOrganization.id
+  );
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 1,
+      }}
+    >
+      <ComboBox
+        sx={{ width: "100%" }}
+        displayField={
+          AppLayoutState.appDirection === "ltr"
+            ? "organizationEnName"
+            : "organizationArName"
+        }
+        valueField="id"
+        label=""
+        options={UserSession.value.userOrganizations}
+        value={newOrgId}
+        onChangeCallBack={(value) => {
+          setNewOrgId(value);
+        }}
+      />
+      <Button
+        sx={{ m: 1 }}
+        variant="contained"
+        disabled={
+          newOrgId == null ||
+          newOrgId === UserSession.value.currentOrganization.id
+        }
+        onClick={async () => {
+          await handlePostRequest({
+            endPointURI: "api/auth/changeCurrentOrg",
+            showMask: true,
+            parameters: {
+              username: UserSession.value.username,
+              orgId: newOrgId,
+            },
+            data: {},
+            successCallBkFn: (response) => {
+              const UserSession = {
+                ...response.data,
+                isAuthenticated: true,
+              };
+              if (response?.data?.token) {
+                localStorage.setItem("TOKEN", response.data.token);
+              }              
+              UserSession.token = null;
+              dispatch(UserSessionActions.setAuthenticated(UserSession));
+              if (props.successChangeCallBackFn) {
+                props.successChangeCallBackFn();
+              }
+            },
+          });
+        }}
+      >
+        Change Organization
+      </Button>
+    </Box>
+  );
+};
+
+export default ChangeOrgForm;