@asaleh37/ui-base 25.9.1 → 25.9.3-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.9.1",
+  "version": "25.9.3-1",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

package/src/components/common/AzureLogin.tsx

@@ -1,11 +1,26 @@
 import { PublicClientApplication } from "@azure/msal-browser";
-import { Box, Button } from "@mui/material";
+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 } from "react";
+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;
 }
@@ -13,16 +28,17 @@ interface AzureLoginProps {
 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 (appInfo?.apiBaseUrl) {
-      if (userSession.isAuthenticated == null) {
-        const token = localStorage.getItem("TOKEN");
+    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,
@@ -34,36 +50,172 @@ const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
               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 getUserInfo = async () => {
-    const response = await handleGetRequest({
-      endPointURI: "api/auth/userInfo",
-      showMask: true,
-      successCallBkFn: (response) => {
-        console.log(response);
-      },
-    });
-  };
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
 
-  // useEffect(()=>{
-  //   handleLogin()
-  // },[])
+  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 (
-    <Box>
-      <Button onClick={handleLogin}>Azure Login </Button>
-    </Box>
+    <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>
   );
 };
 

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,
       },
     },
   });
@@ -130,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/main.tsx

@@ -7,6 +7,10 @@ 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={{

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

@@ -19,6 +19,11 @@ 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;
@@ -48,6 +53,7 @@ const initialState: AppInfoProp = {
   value: {
     documentTitle: null,
     apiBaseUrl: null,
+    authenticationMethod: "APP",
     appName: null,
     appVersion: null,
     appLogo: null,