@asaleh37/ui-base 25.8.31 → 25.9.3-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.8.31",
+  "version": "25.9.3-1",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -113,7 +113,9 @@
     "stylis-plugin-rtl": "^2.1.1",
     "zod": "^3.24.2"
   },
-  "dependencies": {    
+  "dependencies": {
+    "@azure/msal-browser": "^4.21.1",
+    "@azure/msal-react": "^3.0.19",
     "@rollup/plugin-json": "^6.1.0",
     "rollup-plugin-terser": "^7.0.2"
   }

package/src/components/App.tsx

@@ -13,9 +13,18 @@ import {
 } from "../util";
 import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
 import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
+import { PublicClientApplication } from "@azure/msal-browser";
+import { MsalProvider } from "@azure/msal-react";
 
 const App: React.FC<AppInfo> = (props: AppInfo) => {
   const dispatch = useDispatch();
+  const msalInstance = new PublicClientApplication({
+    auth: {
+      clientId: props?.azureConfiguration?.frontEndClientId,
+      authority: `https://login.microsoftonline.com/${props?.azureConfiguration?.tenantId}`,
+      redirectUri: props?.azureConfiguration?.redirectURL,
+    },
+  });
   LicenseInfo.setLicenseKey(props.muiPremiumKey);
   const LightThemeOptions: ThemeOptions = {
     components: {
@@ -115,7 +124,13 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
   }, [props]);
   return (
     <ThemeProvider theme={theme}>
-      <Layout />
+      {props?.authenticationMethod === "AZURE" ? (
+        <MsalProvider instance={msalInstance}>
+          <Layout msalInstance={msalInstance} />
+        </MsalProvider>
+      ) : (
+        <Layout msalInstance={msalInstance} />
+      )}
     </ThemeProvider>
   );
 };

package/src/components/common/AzureLogin.tsx

@@ -0,0 +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('/bg.jpg')",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              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/Login.tsx

@@ -16,10 +16,13 @@ import { UserSessionActions } from "../../redux/features/common/UserSessionSlice
 import {
   DARK_THEME_INITIAL_MAIN_COLOR,
   DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
 } from "../../util";
+import { AppInfo } from "../../redux/features/common/AppInfoSlice";
 
 const Login: React.FC = () => {
-  const appInfo = useSelector((state: any) => state.AppInfo.value);
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoginInProcess, setIsLoginInProcess] = useState(false);
@@ -89,15 +92,22 @@ const Login: React.FC = () => {
       },
     },
     palette: {
-      mode: "dark",
+      mode: appInfo?.loginScreenStyle?.themeMode || "dark",
       primary: {
         main:
-          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
+          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.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.secondaryColor ||
+              LIGHT_THEME_INITIAL_SECANDARY_COLOR
+            : appInfo.appTheme?.dark?.secondaryColor ||
+              DARK_THEME_INITIAL_SECANDARY_COLOR,
       },
     },
   });
@@ -121,6 +131,7 @@ const Login: React.FC = () => {
             dispatch(UserSessionActions.setAuthenticated(UserSession));
           } else {
             dispatch(UserSessionActions.setUnAuthenticated());
+            localStorage.removeItem("TOKEN");
           }
         } catch (error) {
           dispatch(UserSessionActions.setUnAuthenticated());
@@ -129,92 +140,127 @@ const Login: React.FC = () => {
     }
   };
   useEffect(() => {
-    console.log("checking usersession on reload", userSession);
-    console.log("checking usersession app info", appInfo);
     checkUserSession();
   }, [appInfo, userSession.isAuthenticated]);
 
   return (
     <ThemeProvider theme={loginTheme}>
-      <Paper
-        sx={{
-          display: "flex",
-          height: "100vh",
-          width: "100%",
-          borderRadius: 0,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        {UserSessionState.isAuthenticated == false ? (
-          <Box
+      {UserSessionState.isAuthenticated == false ? (
+        <Box
+          sx={{
+            // position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "100vh",
+            width: "100%",
+            backgroundImage: "url('/bg.jpg')",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              zIndex: 0,
+            },
+          }}
+        >
+          <Paper
             sx={{
               display: "flex",
-              flexDirection: "column",
+              width: "fit-content",
+              padding: 2,
+              height: "fit-content",
+              borderRadius: 5,
               alignItems: "center",
               justifyContent: "center",
+              textAlign: "center",
+              zIndex: 1,
+              p: 4,
             }}
           >
-            <img src={appInfo?.appLogo} width={150} height={150} />
-            <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
-              {appInfo?.appName}
-            </Typography>
-            <Typography
+            <Box
               sx={{
-                paddingRight: 1,
-                width: "100%",
-                textAlign: "right",
-                fontSize: 10,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
               }}
-              variant="caption"
-              color="textSecondary"
             >
-              V.{appInfo.appVersion}
-            </Typography>
-            <TextField
-              label="username"
-              sx={{ width: 300, m: 1 }}
-              value={username}
-              onChange={(event) => {
-                setUsername(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
-              }}
-            />
-            <TextField
-              label="password"
-              sx={{ width: 300, m: 1 }}
-              value={password}
-              type="password"
-              onChange={(event) => {
-                setPassword(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
-              }}
-            />
-            <Button
-              loading={isLoginInProcess}
-              onClick={handleLogin}
-              variant="contained"
-              color="primary"
-              sx={{ m: 1 }}
-            >
-              login
-            </Button>
-          </Box>
-        ) : (
-          <>
-            <CircularProgress sx={{ marginRight: 1 }} />
-            <div>You will be redirected shortly ... please wait</div>
-          </>
-        )}
-      </Paper>
+              <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>
+              <TextField
+                label="username"
+                sx={{ width: 300, m: 1 }}
+                value={username}
+                onChange={(event) => {
+                  setUsername(event.target.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleLogin();
+                  }
+                }}
+              />
+              <TextField
+                label="password"
+                sx={{ width: 300, m: 1 }}
+                value={password}
+                type="password"
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleLogin();
+                  }
+                }}
+              />
+              <Button
+                loading={isLoginInProcess}
+                onClick={handleLogin}
+                variant="contained"
+                color="primary"
+                sx={{ m: 1 }}
+              >
+                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>
   );
 };

package/src/components/msalConfig.ts

@@ -0,0 +1,11 @@
+import { PublicClientApplication } from "@azure/msal-browser";
+
+export const msalConfig = {
+  auth: {
+    clientId: "your-frontend-client-id",
+    authority: "https://login.microsoftonline.com/<tenant-id>",
+    redirectUri: "http://localhost:3000"
+  }
+};
+
+export const msalInstance = new PublicClientApplication(msalConfig);

package/src/hooks/useAxios.tsx

@@ -64,6 +64,7 @@ const useAxios = () => {
           : false
       ) {
         dispatch(UserSessionActions.setUnAuthenticated());
+        localStorage.removeItem("TOKEN");
         toast.error("your session is now expired, you need to login again", {
           autoClose: false,
         });

package/src/layout/Layout.tsx

@@ -14,6 +14,9 @@ import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
 import LoadingMask from "../components/common/LoadingMask";
 import Login from "../components/common/Login";
 import NoLicenseComponent from "../components/common/NoLicenseComponent";
+import { msalInstance } from "../components/msalConfig";
+import { PublicClientApplication } from "@azure/msal-browser";
+import AzureLogin from "../components/common/AzureLogin";
 
 const Main = styled("main", {
   shouldForwardProp: (prop) => prop !== "open",
@@ -53,9 +56,13 @@ const Main = styled("main", {
   };
 });
 
-export default function Layout() {
-  const SideBarState = useSelector((state: any) => state.SideBar);
+interface LayoutProps {
+  msalInstance: PublicClientApplication;
+}
 
+const Layout: React.FC<LayoutProps> = ({ msalInstance }) => {
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const appInfo = useSelector((state: any) => state.AppInfo.value);
   const isMobile = useIsMobile();
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
@@ -80,9 +87,13 @@ export default function Layout() {
           <MainContent />
           <NoLicenseComponent />
         </Main>
+      ) : appInfo.authenticationMethod === "AZURE" ? (
+        <AzureLogin msalInstance={msalInstance} />
       ) : (
         <Login />
       )}
     </BrowserRouter>
   );
-}
+};
+
+export default Layout;

package/src/layout/MainContent.tsx

@@ -107,11 +107,6 @@ const MainContent: React.FC = () => {
           })}
         </Routes>
       </Box>
-      )
-      {/* : (
-        <></>
-      )
-      } */}
     </CacheProvider>
   );
 };

package/src/layout/TopBar.tsx

@@ -102,6 +102,7 @@ const TopBar: React.FC = () => {
       await handleGetRequest({ endPointURI: "api/auth/logout" });
     } catch (error) {}
     dispatch(UserSessionActions.setUnAuthenticated());
+    localStorage.removeItem("TOKEN");
   };
   const toggleSideBar = () => {
     dispatch(toggleSideBarState());
@@ -169,7 +170,7 @@ const TopBar: React.FC = () => {
           <AttachmentImageViewer
             showAsAvatar={true}
             attachmentCode="ORGANIZATION_LOGOS"
-            refKey={UserSession.value.currentOrganization.id + ""}
+            refKey={UserSession?.value?.currentOrganization?.id + ""}
             onErrorImage="/logo.png"
             style={{
               marginRight: 1,

package/src/main.tsx

@@ -7,7 +7,18 @@ createRoot(document.getElementById("root")!).render(
     enableUINotifications={false}
     appLogo={"/logo.png"}
     appName="UI Base Library"
+    loginScreenStyle={{
+      themeMode: "dark",
+      backgroundImageNameInPublicFolder: "bg.jpg",
+    }}
     appVersion="0.0"
+    authenticationMethod="AZURE"
+    azureConfiguration={{
+      frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",
+      tenantId: "9f136fef-4529-475f-98e6-d271eb04eb00",
+      redirectURL: "http://localhost:3000",
+      scopes: ["api://6008a934-2a32-4776-a3df-1842ac9371da/access_as_user"],
+    }}
     businessCommonStoresMetaData={{}}
     businessNavigationItems={[]}
     businessReduxReducers={{}}

package/src/navigationItems/index.tsx

@@ -31,12 +31,5 @@ export const findNavigationItemById = (
 };
 
 export const NavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
-  ...AdministrationItems,
-  {
-    icon: "user",
-    label: "Example Grid",
-    id: "example",
-    action: "NAVIGATION",
-    actionPayload: { path: "example" },
-  },
+  ...AdministrationItems
 ];

package/src/redux/features/common/AppInfoSlice.ts

@@ -19,6 +19,18 @@ export type AppInfo = {
     ar: { [key: string]: string };
     en: { [key: string]: string };
   };
+  loginScreenStyle?: {
+    themeMode: "dark" | "light";
+    backgroundImageNameInPublicFolder?: string;
+    backgroundColor?: string;
+  };
+  authenticationMethod: "AZURE" | "APP";
+  azureConfiguration?: {
+    frontEndClientId: string;
+    tenantId: string;
+    redirectURL: string;
+    scopes: Array<string>;
+  };
   businessRoutes?: Array<SystemRoute>;
   businessNavigationItems?: Array<ExtendedTreeItemProps>;
   businessReduxReducers?: { [key: string]: Reducer<any> };
@@ -41,6 +53,7 @@ const initialState: AppInfoProp = {
   value: {
     documentTitle: null,
     apiBaseUrl: null,
+    authenticationMethod: "APP",
     appName: null,
     appVersion: null,
     appLogo: null,