Merge pull request 'Adding Change Password button on Employee Profile Page.' (#198) from Kartik_Task#491 into main

Reviewed-on: #198

src/pages/authentication/ChangePassword.jsx

@@ -212,15 +212,16 @@ const ChangePasswordPage = ({ onClose }) => {
               <p className="p-0 m-0">Password must be:</p>
               <p className="p-0 m-0">- at least 8 characters long</p>
               <p className="p-0 m-0">
-                - must contain at least one uppercase letter
+                - must contain one uppercase, one lowercase letter, at least one
+                number, at least one special character
               </p>
-              <p className="p-0 m-0">
+              {/* <p className="p-0 m-0">
                 - must contain at least one lowercase letter
               </p>
               <p className="p-0 m-0">- must contain at least one number</p>
               <p className="p-0 m-0">
                 - must contain at least one special character
-              </p>
+              </p> */}
             </div>
           </form>
         </div>

src/pages/employee/EmployeeProfile.jsx

@@ -10,6 +10,8 @@ import {
   useEmployees,
   useEmployeesByProject,
 } from "../../hooks/useEmployees";
+import { useProfile } from "../../hooks/useProfile";
+
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
@@ -17,7 +19,11 @@ import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
+import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+
 const EmployeeProfile = () => {
+  const { profile } = useProfile();
+
   const projectID = useSelector((store) => store.localVariables.projectId);
   const { employeeId } = useParams();
   // const {employee,loading} = useEmployeeProfile(employeeId)
@@ -95,9 +101,12 @@ const EmployeeProfile = () => {
   if (loading) {
     return <div>Loading...</div>;
   }
-
+  const { openChangePassword } = useChangePassword();
   return (
-    <>    {showModal && (<div
+    <>
+      {" "}
+      {showModal && (
+        <div
           className={`modal fade ${showModal ? "show" : ""} `}
           tabIndex="-1"
           role="dialog"
@@ -109,14 +118,11 @@ const EmployeeProfile = () => {
               className="modal-content overflow-y-auto overflow-x-hidden"
               style={{ maxHeight: "90vh" }}
             >
-            <ManageEmployee
-              employeeId={employeeId}
-              onClosed={closeModal}
-            />
+              <ManageEmployee employeeId={employeeId} onClosed={closeModal} />
             </div>
           </div>
-      </div>)}
-
+        </div>
+      )}
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -186,7 +192,9 @@ const EmployeeProfile = () => {
                               </tr>
 
                               <tr>
-                              <td className="fw-medium text-start">Gender:</td>
+                                <td className="fw-medium text-start">
+                                  Gender:
+                                </td>
                                 <td className="text-start">
                                   {currentEmployee?.gender || <em>NA</em>}
                                 </td>
@@ -229,9 +237,13 @@ const EmployeeProfile = () => {
                                 </td>
                               </tr>
                               <tr>
-                              <td className="fw-medium text-start">Address:</td>
+                                <td className="fw-medium text-start">
+                                  Address:
+                                </td>
                                 <td className="text-start">
-                                {currentEmployee?.currentAddress || <em>NA</em>}
+                                  {currentEmployee?.currentAddress || (
+                                    <em>NA</em>
+                                  )}
                                 </td>
                               </tr>
                             </tbody>
@@ -239,12 +251,18 @@ const EmployeeProfile = () => {
                         </div>
                         <button
                           className="btn btn-primary btn-block"
-                        onClick={() =>
-                          handleShow()
-                        }
+                          onClick={() => handleShow()}
                         >
                           Edit Profile
                         </button>
+                        {currentEmployee?.id == profile?.employeeInfo?.id && (
+                          <button
+                            className="btn btn-outline-primary btn-block mt-2"
+                            onClick={() => openChangePassword()}
+                          >
+                            Change Password
+                          </button>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -267,7 +285,6 @@ const EmployeeProfile = () => {
         </div>
       </div>
     </>
-
   );
 };