@asaleh37/ui-base 25.6.25 → 25.7.26-1

package/package.json

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

package/src/components/administration/admin/ChangePasswordPanel.tsx

@@ -0,0 +1,128 @@
+import { Box, Button, Divider, Paper } from "@mui/material";
+import { TemplateTextField } from "../../templates";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+interface ChangePasswordPanelProps {
+  selectedPerson: any;
+  isSelfService: boolean;
+  onSuccessCallBk: () => void;
+}
+
+const ChangePasswordPanel: React.FC<ChangePasswordPanelProps> = (props) => {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [password1, setPassword1] = useState("");
+  const [password2, setPassword2] = useState("");
+  const { handlePostRequest } = useAxios();
+  const handleChangePasswordRequest = async () => {
+    if (props.isSelfService) {
+      if (currentPassword === null || currentPassword.trim() === "") {
+        toast.error(
+          "You must enter your current password to process your request"
+        );
+        return;
+      }
+    }
+    if (
+      password1 === null ||
+      password1 === "" ||
+      password2 === null ||
+      password2 === "" ||
+      password1 != password2
+    ) {
+      toast.error(
+        "You must enter new password in required fields and must be identical"
+      );
+      return;
+    }
+    await handlePostRequest({
+      endPointURI: props.isSelfService
+        ? "api/v1/ss/changeMyPassword"
+        : "api/v1/admin/changeUserPassword",
+      data: {
+        personId: props?.selectedPerson?.id,
+        currentPassword,
+        newPassword: password1,
+      },
+      successCallBkFn: () => {
+        props.onSuccessCallBk();
+        toast.success("Your request has been processed successfully");
+      },
+      showMask: true,
+    });
+  };
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 400,
+        padding: 1,
+      }}
+    >
+      <Box
+        sx={{
+          m: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          width: "100%",
+          fontWeight: "bold",
+          fontSize: 16,
+        }}
+      >
+        Changing Password For : {props?.selectedPerson?.employeeEnName}
+      </Box>
+      <Divider variant="fullWidth" sx={{ width: "100%", marginBottom: 2 }} />
+      {props.isSelfService ? (
+        <TemplateTextField
+          label="Current Password"
+          value={currentPassword}
+          onChange={(e) => {
+            setCurrentPassword(e.target.value);
+          }}
+          sx={{ m: 1 }}
+          fullWidth
+          type="password"
+        />
+      ) : (
+        <></>
+      )}
+
+      <TemplateTextField
+        label="New Password"
+        value={password1}
+        onChange={(e) => {
+          setPassword1(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <TemplateTextField
+        label="Confirm New Password"
+        value={password2}
+        onChange={(e) => {
+          setPassword2(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <Button
+        sx={{ m: 1 }}
+        variant="contained"
+        onClick={() => {
+          handleChangePasswordRequest();
+        }}
+      >
+        Change Password
+      </Button>
+    </Paper>
+  );
+};
+
+export default ChangePasswordPanel;

package/src/components/administration/admin/PersonGrid.tsx

@@ -9,6 +9,7 @@ import { Box } from "@mui/material";
 import AttachmentImageViewer from "../../templates/attachment/AttachmentImageViewer";
 import { useSelector } from "react-redux";
 import OrgMemberRoleForm from "./OrgMemberRoleForm";
+import ChangePasswordPanel from "./ChangePasswordPanel";
 
 const PersonGrid: React.FC = () => {
   const { t } = useTranslation();
@@ -44,6 +45,15 @@ const PersonGrid: React.FC = () => {
     windowTitle: "Organization Member Roles",
     width: "50%",
   });
+  const {
+    Window: ChangePasswordWindow,
+    setWindowState: setChangePasswordWindow,
+  } = useWindow({
+    windowIcon: "key",
+    windowTitle: "Change Password",
+    width: "fit-content",
+    height: "fit-content",
+  });
 
   const formElements: Array<FormElementProps> = [
     {
@@ -251,6 +261,15 @@ const PersonGrid: React.FC = () => {
       <OrganizationMembersWindow>
         <OrganizationMemberGrid selectedPerson={selectedPerson} />
       </OrganizationMembersWindow>
+      <ChangePasswordWindow>
+        <ChangePasswordPanel
+          selectedPerson={selectedPerson}
+          isSelfService={false}
+          onSuccessCallBk={() => {
+            setChangePasswordWindow(false);
+          }}
+        />
+      </ChangePasswordWindow>
       <TemplateGrid
         attachment={{ attachmentCode: "EMPLOYEE_PHOTOS" }}
         apiActions={apiActions}
@@ -268,6 +287,14 @@ const PersonGrid: React.FC = () => {
         keyColumnName={"id"}
         gridTitle="PERSON_PLURAL"
         rowActions={[
+          {
+            icon: "key",
+            label: "Change User Password",
+            actionFn: async (data) => {
+              setSelectedPerson(data);
+              setChangePasswordWindow(true);
+            },
+          },
           {
             icon: "tags",
             label: "Current Organization User Roles",

package/src/layout/TopBar.tsx

@@ -2,6 +2,8 @@ import {
   Avatar,
   Box,
   IconButton,
+  Menu,
+  MenuItem,
   styled,
   Tooltip,
   Typography,
@@ -23,6 +25,8 @@ import ChangeOrgForm from "../components/common/ChangeOrgForm";
 import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
 import AttachmentImageViewer from "../components/templates/attachment/AttachmentImageViewer";
 import NotificationButton from "./NotificationButton";
+import { useState } from "react";
+import ChangePasswordPanel from "../components/administration/admin/ChangePasswordPanel";
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -70,10 +74,26 @@ const TopBar: React.FC = () => {
       height: "fit-content",
     });
   const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
   const AppLayout = useSelector((state: any) => state.AppLayout);
   const SideBarState = useSelector((state: any) => state.SideBar);
   const { UserSession } = useSession();
   const currentOrganization = UserSession.value.currentOrganization;
+  const {
+    Window: ChangePasswordWindow,
+    setWindowState: setChangePasswordWindow,
+  } = useWindow({
+    windowIcon: "key",
+    windowTitle: "Change Password",
+    width: "fit-content",
+    height: "fit-content",
+  });
   const { handleGetRequest } = useAxios();
   const isMobile = useIsMobile();
   const dispatch = useDispatch();
@@ -88,6 +108,40 @@ const TopBar: React.FC = () => {
   };
   return (
     <>
+      <ChangePasswordWindow>
+        <ChangePasswordPanel
+          selectedPerson={UserSession.value}
+          isSelfService={true}
+          onSuccessCallBk={() => {
+            setChangePasswordWindow(false);
+          }}
+        />
+      </ChangePasswordWindow>
+      <Menu
+        sx={{ mt: "45px" }}
+        id="menu-appbar"
+        anchorEl={anchorElUser}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={Boolean(anchorElUser)}
+        onClose={handleCloseUserMenu}
+      >
+        <MenuItem
+          onClick={() => {
+            setChangePasswordWindow(true);
+            handleCloseUserMenu();
+          }}
+        >
+          <Typography sx={{ textAlign: "center" }}>Change Password</Typography>
+        </MenuItem>
+      </Menu>
       <ChangeOrgWindow>
         <ChangeOrgForm
           successChangeCallBackFn={() => {
@@ -205,13 +259,19 @@ const TopBar: React.FC = () => {
           ) : (
             <></>
           )}
-          <AttachmentImageViewer
-            showAsAvatar={true}
-            onErrorImage="/no_user.png"
-            attachmentCode="EMPLOYEE_PHOTOS"
-            refKey={UserSession.value?.id + ""}
-          />
-          <div style={{ marginLeft: 5, marginRight: 5 }}>
+          <div onClick={handleOpenUserMenu} style={{ cursor: "pointer" }}>
+            <AttachmentImageViewer
+              showAsAvatar={true}
+              onErrorImage="/no_user.png"
+              attachmentCode="EMPLOYEE_PHOTOS"
+              refKey={UserSession.value?.id + ""}
+            />
+          </div>
+
+          <div
+            style={{ marginLeft: 5, marginRight: 5, cursor: "pointer" }}
+            onClick={handleOpenUserMenu}
+          >
             {isMobile ? "" : UserSession.value?.username}
           </div>
           <IconButton color="inherit" onClick={handleLogout}>