@asaleh37/ui-base 1.2.29 → 25.1.9

package/src/components/common/Login.tsx

@@ -1,214 +1,268 @@
-import {
-  Box,
-  Button,
-  CircularProgress,
-  createTheme,
-  Paper,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { ThemeProvider } from "@emotion/react";
-import { useEffect, useState } from "react";
-import axios from "axios";
-import { toast } from "react-toastify";
-import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import {
-  DARK_THEME_INITIAL_MAIN_COLOR,
-  DARK_THEME_INITIAL_SECANDARY_COLOR,
-} from "../../util";
-
-const Login: React.FC = () => {
-  const appInfo = useSelector((state: any) => state.AppInfo.value);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
-  const UserSessionState = useSelector((state: any) => state.UserSession.value);
-  const dispatch = useDispatch();
-  const handleLogin = async () => {
-    if (username == null || username == "") {
-      toast.error("username is required to proceed");
-      return;
-    }
-    if (password == null || password == "") {
-      toast.error("password is required to proceed");
-      return;
-    }
-    setIsLoginInProcess(true);
-    let response: any = null;
-    try {
-      response = await axios.post(
-        `${appInfo.apiBaseUrl}/api/auth/login`,
-        {
-          username,
-          password,
-        },
-        {
-          withCredentials: true,
-        }
-      );
-      if (response.data != null && response.data !== "") {
-        setIsLoginInProcess(false);
-        const UserSession = {
-          ...response.data,
-          isAuthenticated: true,
-        };
-        dispatch(UserSessionActions.setAuthenticated(UserSession));
-      }
-    } catch (e: any) {
-      setIsLoginInProcess(false);
-      toast.error(
-        e?.response?.data ||
-          "failed to authenticate, contact your administrator"
-      );
-    }
-  };
-  const userSession = useSelector((state: any) => state.UserSession.value);
-  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: "dark",
-      primary: {
-        main:
-          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          appInfo.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
-      },
-    },
-  });
-  const checkUserSession = async () => {
-    if (appInfo?.apiBaseUrl) {
-      if (userSession.isAuthenticated == null) {
-        try {
-          let response = await axios.get(
-            `${appInfo.apiBaseUrl}/api/auth/userInfo`,
-            {
-              withCredentials: true,
-            }
-          );
-          if (response != null && response.data != null) {
-            const UserSession = {
-              ...response.data,
-              isAuthenticated: true,
-            };
-            dispatch(UserSessionActions.setAuthenticated(UserSession));
-          } else {
-            dispatch(UserSessionActions.setUnAuthenticated());
-          }
-        } catch (error) {
-          dispatch(UserSessionActions.setUnAuthenticated());
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    checkUserSession();
-  }, [appInfo]);
-  return (
-    <ThemeProvider theme={loginTheme}>
-      <Paper
-        sx={{
-          display: "flex",
-          height: "100vh",
-          width: "100%",
-          borderRadius: 0,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        {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
-              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>
-    </ThemeProvider>
-  );
-};
-
-export default Login;
+import {
+  Box,
+  Button,
+  CircularProgress,
+  createTheme,
+  Paper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { ThemeProvider } from "@emotion/react";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+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: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
+  const dispatch = useDispatch();
+  const handleLogin = async () => {
+    if (username == null || username == "") {
+      toast.error("username is required to proceed");
+      return;
+    }
+    if (password == null || password == "") {
+      toast.error("password is required to proceed");
+      return;
+    }
+    setIsLoginInProcess(true);
+    let response: any = null;
+    try {
+      response = await axios.post(
+        `${appInfo.apiBaseUrl}/api/auth/login`,
+        {
+          username,
+          password,
+        },
+        {
+          withCredentials: true,
+        }
+      );
+      if (response.data != null && response.data !== "") {
+        setIsLoginInProcess(false);
+        const UserSession = {
+          ...response.data,
+          isAuthenticated: true,
+        };
+        if (response?.data?.token) {
+          localStorage.setItem("TOKEN", response.data.token);
+        }
+        dispatch(UserSessionActions.setAuthenticated(UserSession));
+      }
+    } catch (e: any) {
+      setIsLoginInProcess(false);
+      toast.error(
+        e?.response?.data ||
+          "failed to authenticate, contact your administrator"
+      );
+    }
+  };
+  const userSession = useSelector((state: any) => state.UserSession.value);
+  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,
+      },
+    },
+  });
+  const checkUserSession = async () => {
+    if (appInfo?.apiBaseUrl) {
+      if (userSession.isAuthenticated == null) {
+        const token = localStorage.getItem("TOKEN");
+        try {
+          let response = await axios.get(
+            `${appInfo.apiBaseUrl}/api/auth/userInfo`,
+            {
+              withCredentials: true,
+              headers: { Authorization: `Bearer ${token}` },
+            }
+          );
+          if (response != null && response.data != null) {
+            const UserSession = {
+              ...response.data,
+              isAuthenticated: true,
+            };
+            dispatch(UserSessionActions.setAuthenticated(UserSession));
+          } else {
+            dispatch(UserSessionActions.setUnAuthenticated());
+            localStorage.removeItem("TOKEN");
+          }
+        } catch (error) {
+          dispatch(UserSessionActions.setUnAuthenticated());
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    checkUserSession();
+  }, [appInfo, userSession.isAuthenticated]);
+
+  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>
+              <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>
+  );
+};
+
+export default Login;