@asaleh37/ui-base 26.2.131 → 27.5.26

package/src/components/common/MobileLogin.tsx

@@ -1,229 +1,229 @@
-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 MobileLogin: 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 ? (
-        <Paper
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100vh",
-            width: "100%",
-          }}
-        >
-          <img src={appInfo?.appLogo} width={70} height={70} />
-          <Typography sx={{ m: 1 }} variant="caption" color="textSecondary">
-            {appInfo?.appName}
-          </Typography>
-          <Typography
-            sx={{
-              paddingRight: 1,
-              width: 200,
-              textAlign: "right",
-              fontSize: 10,
-            }}
-            variant="caption"
-            color="textSecondary"
-          >
-            V.{appInfo.appVersion}
-          </Typography>
-          <TextField
-            label="username"
-            sx={{ width: 200, m: 1 }}
-            value={username}
-            onChange={(event) => {
-              setUsername(event.target.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                handleLogin();
-              }
-            }}
-          />
-          <TextField
-            label="password"
-            sx={{ width: 200, 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>
-        </Paper>
-      ) : (
-        <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 MobileLogin;
+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 MobileLogin: 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 ? (
+        <Paper
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100vh",
+            width: "100%",
+          }}
+        >
+          <img src={appInfo?.appLogo} width={70} height={70} />
+          <Typography sx={{ m: 1 }} variant="caption" color="textSecondary">
+            {appInfo?.appName}
+          </Typography>
+          <Typography
+            sx={{
+              paddingRight: 1,
+              width: 200,
+              textAlign: "right",
+              fontSize: 10,
+            }}
+            variant="caption"
+            color="textSecondary"
+          >
+            V.{appInfo.appVersion}
+          </Typography>
+          <TextField
+            label="username"
+            sx={{ width: 200, m: 1 }}
+            value={username}
+            onChange={(event) => {
+              setUsername(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                handleLogin();
+              }
+            }}
+          />
+          <TextField
+            label="password"
+            sx={{ width: 200, 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>
+        </Paper>
+      ) : (
+        <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 MobileLogin;

package/src/components/common/MyNotificationsPanel.tsx

@@ -1,109 +1,109 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Box, Button } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useAxios, useSession } from "../../hooks";
-import { useState } from "react";
-import useInterval from "../../hooks/useInterval";
-import { notificationsCheckIntervalSeconds } from "../../layout/NotificationButton";
-import NotificationItem from "./NotificationItem";
-
-const MyNotificationsPanel: React.FC = () => {
-  const { UserInfo } = useSession();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const { handleGetRequest, handlePostRequest } = useAxios();
-  const [notifications, setNotifications] = useState<Array<Notification>>([]);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const acknowledgeAllCurrentNotifications = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/public/notification/all/notified",
-      showMask: true,
-    });
-  };
-
-  const archiveAllCurrentNotifications = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/public/notification/all/archive",
-      showMask: true,
-    });
-  };
-
-  const loadUserNotifications = () => {
-    if (UserInfo.isAuthenticated === true) {
-      handleGetRequest({
-        endPointURI: "api/v1/public/notifications",
-        showMask: false,
-        successCallBkFn: (response: any) => {
-          setNotifications(response.data);
-        },
-      });
-    }
-  };
-  if (AppInfo?.enableUINotifications === true) {
-    useInterval(
-      loadUserNotifications,
-      notificationsCheckIntervalSeconds * 1000
-    );
-  }
-
-  return (
-    <>
-      <Box
-        sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-      >
-        <Box sx={{ flex: 1 }}></Box>
-        <h3>
-          <FontAwesomeIcon
-            icon="bell"
-            style={{ marginRight: 10, marginLeft: 10 }}
-          />
-          {AppLayout.appDirection === "ltr" ? "Notifications" : "الاشعارات"}
-        </h3>
-        <Box sx={{ flex: 1 }}></Box>
-        <Button
-          sx={{ textTransform: "none" }}
-          onClick={acknowledgeAllCurrentNotifications}
-        >
-          Mark All Read
-        </Button>
-        <Button
-          color="error"
-          sx={{ textTransform: "none" }}
-          onClick={archiveAllCurrentNotifications}
-        >
-          Delete All
-        </Button>
-      </Box>
-      <Box
-        sx={{
-          flex: 1,
-          width: "100%",
-          display: "flex",
-          overflowY: "auto",
-        }}
-      >
-        <Box
-          sx={{
-            flexGrow: 1,
-            width: "fit-content",
-            display: "flex",
-            flexDirection: "column",
-            overflowY: "auto",
-            alignItems: "center",
-            justifyContent: "flex-start",
-          }}
-        >
-          {notifications.map((notification: Notification, index) => {
-            return (
-              <NotificationItem
-                {...notification}
-                showDivider={index < notifications.length - 1}
-              />
-            );
-          })}
-        </Box>
-      </Box>
-    </>
-  );
-};
-
-export default MyNotificationsPanel;
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Box, Button } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useAxios, useSession } from "../../hooks";
+import { useState } from "react";
+import useInterval from "../../hooks/useInterval";
+import { notificationsCheckIntervalSeconds } from "../../layout/NotificationButton";
+import NotificationItem from "./NotificationItem";
+
+const MyNotificationsPanel: React.FC = () => {
+  const { UserInfo } = useSession();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const [notifications, setNotifications] = useState<Array<Notification>>([]);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const acknowledgeAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/notified",
+      showMask: true,
+    });
+  };
+
+  const archiveAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/archive",
+      showMask: true,
+    });
+  };
+
+  const loadUserNotifications = () => {
+    if (UserInfo.isAuthenticated === true) {
+      handleGetRequest({
+        endPointURI: "api/v1/public/notifications",
+        showMask: false,
+        successCallBkFn: (response: any) => {
+          setNotifications(response.data);
+        },
+      });
+    }
+  };
+  if (AppInfo?.enableUINotifications === true) {
+    useInterval(
+      loadUserNotifications,
+      notificationsCheckIntervalSeconds * 1000
+    );
+  }
+
+  return (
+    <>
+      <Box
+        sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+      >
+        <Box sx={{ flex: 1 }}></Box>
+        <h3>
+          <FontAwesomeIcon
+            icon="bell"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {AppLayout.appDirection === "ltr" ? "Notifications" : "الاشعارات"}
+        </h3>
+        <Box sx={{ flex: 1 }}></Box>
+        <Button
+          sx={{ textTransform: "none" }}
+          onClick={acknowledgeAllCurrentNotifications}
+        >
+          Mark All Read
+        </Button>
+        <Button
+          color="error"
+          sx={{ textTransform: "none" }}
+          onClick={archiveAllCurrentNotifications}
+        >
+          Delete All
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          overflowY: "auto",
+        }}
+      >
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: "fit-content",
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          {notifications.map((notification: Notification, index) => {
+            return (
+              <NotificationItem
+                {...notification}
+                showDivider={index < notifications.length - 1}
+              />
+            );
+          })}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyNotificationsPanel;