@asaleh37/ui-base 25.8.31 → 25.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.8.31",
+  "version": "25.9.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,70 @@
+import { PublicClientApplication } from "@azure/msal-browser";
+import { Box, Button } 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 } from "react";
+
+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 { handleGetRequest } = useAxios();
+  const dispatch = useDispatch();
+  const checkUserSession = async () => {
+    if (appInfo?.apiBaseUrl) {
+      if (userSession.isAuthenticated == null) {
+        const token = localStorage.getItem("TOKEN");
+        handleGetRequest({
+          endPointURI: "api/auth/userInfo",
+          showMask: true,
+          successCallBkFn: (response) => {
+            if (response != null && response.data != null) {
+              const UserSession = {
+                ...response.data,
+                isAuthenticated: true,
+              };
+              dispatch(UserSessionActions.setAuthenticated(UserSession));
+            } else {
+              dispatch(UserSessionActions.setUnAuthenticated());
+              localStorage.removeItem("TOKEN");
+            }
+          },
+        });
+      }
+    }
+  };
+  const handleLogin = async () => {
+    const response = await msalInstance.acquireTokenPopup({
+      scopes: appInfo?.azureConfiguration?.scopes,
+    });
+    if (response?.accessToken) {
+      localStorage.setItem("TOKEN", response.accessToken);
+      checkUserSession();
+    }
+  };
+  const getUserInfo = async () => {
+    const response = await handleGetRequest({
+      endPointURI: "api/auth/userInfo",
+      showMask: true,
+      successCallBkFn: (response) => {
+        console.log(response);
+      },
+    });
+  };
+
+  // useEffect(()=>{
+  //   handleLogin()
+  // },[])
+  return (
+    <Box>
+      <Button onClick={handleLogin}>Azure Login </Button>
+    </Box>
+  );
+};
+
+export default AzureLogin;

package/src/components/common/Login.tsx

@@ -121,6 +121,7 @@ const Login: React.FC = () => {
             dispatch(UserSessionActions.setAuthenticated(UserSession));
           } else {
             dispatch(UserSessionActions.setUnAuthenticated());
+            localStorage.removeItem("TOKEN");
           }
         } catch (error) {
           dispatch(UserSessionActions.setUnAuthenticated());

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

@@ -8,6 +8,13 @@ createRoot(document.getElementById("root")!).render(
     appLogo={"/logo.png"}
     appName="UI Base Library"
     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,13 @@ export type AppInfo = {
     ar: { [key: string]: string };
     en: { [key: string]: 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> };

package/src/routes/index.ts

@@ -1,9 +1,5 @@
-import Home from "../components/common/Home";
-import ExampleGrid from "../examples/ExampleGrid";
+
 import { ADMINISTRATION_ROUTES } from "./administration";
 import { SystemRoute } from "./types";
 
-export const SYSTEM_ROUTES: Array<SystemRoute> = [
-  ...ADMINISTRATION_ROUTES,
-  { path: "example", component: ExampleGrid },
-];
+export const SYSTEM_ROUTES: Array<SystemRoute> = [...ADMINISTRATION_ROUTES];

package/src/util/AppUtils.ts

@@ -1,4 +1,6 @@
+import moment from "moment";
 import { FormElementProps } from "../components";
+import { DATE_FORMAT } from "./constants";
 
 export function hasDigitsOnly(str: string) {
   return /^\d+$/.test(str);
@@ -53,3 +55,19 @@ export function timeAgo(dateInput, appDirection: "ltr" | "rtl") {
 
   return locale === "ar" ? "الآن" : "just now";
 }
+
+export const formatDate = (date, format) => {
+  if (format) {
+    return moment(date).format(format);
+  } else {
+    return moment(date).format(DATE_FORMAT);
+  }
+};
+
+export const parseStringToDate = (dateString, format) => {
+  if (format) {
+    return moment(dateString, format).toDate();
+  } else {
+    return moment(dateString, DATE_FORMAT).toDate();
+  }
+};