@asaleh37/ui-base 25.9.1 → 25.9.3

package/package.json

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

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,
       },
     },
   });
@@ -137,85 +147,101 @@ const Login: React.FC = () => {
 
   return (
     <ThemeProvider theme={loginTheme}>
-      <Paper
+      <Box
         sx={{
-          display: "flex",
-          height: "100vh",
+          minHeight: "100vh", // full page height
           width: "100%",
-          borderRadius: 0,
+          display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          background: appInfo?.loginScreenStyle?.backgroundColor,
+          backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover", // 🔥 makes it responsive
+          backgroundPosition: "center", // keeps it centered
         }}
       >
-        {UserSessionState.isAuthenticated == false ? (
-          <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
+        <Paper
+          sx={{
+            display: "flex",
+            width: "fit-content",
+            padding: 2,
+            height: "fit-content",
+            borderRadius: 5,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {UserSessionState.isAuthenticated == false ? (
+            <Box
               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();
-                }
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
               }}
-            />
-            <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>
+          ) : (
+            <>
+              <CircularProgress sx={{ marginRight: 1 }} />
+              <div>You will be redirected shortly ... please wait</div>
+            </>
+          )}
+        </Paper>
+      </Box>
     </ThemeProvider>
   );
 };

package/src/main.tsx

@@ -7,8 +7,12 @@ createRoot(document.getElementById("root")!).render(
     enableUINotifications={false}
     appLogo={"/logo.png"}
     appName="UI Base Library"
+    loginScreenStyle={{
+      themeMode: "light",
+      backgroundImageNameInPublicFolder: "bg.jpg",
+    }}
     appVersion="0.0"
-    authenticationMethod="AZURE"
+    authenticationMethod="APP"
     azureConfiguration={{
       frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",
       tenantId: "9f136fef-4529-475f-98e6-d271eb04eb00",

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,