Adding Change Password button on Employee Profile Page. #198

Merged
vikas.nale merged 3 commits from Kartik_Task#491 into main 2025-06-10 14:40:22 +00:00
2 changed files with 181 additions and 163 deletions

View File

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

View File

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