Password change from dashboard api integration done

frontend/src/components/pages/dashboard/changePassword/index.tsx

@@ -1,13 +1,23 @@
 import { useState } from "react";
 import { IoMdEye, IoMdEyeOff } from "react-icons/io";
 import { SubmitHandler, useForm } from "react-hook-form";
+import {
+  useChangePasswordMutation,
+  useLoggedInUserQuery,
+} from "@/features/user";
+import { IUser } from "@/interfaces/user.interface";
+import Swal from "sweetalert2";
 
 type FormData = {
   newPassword: string;
   oldPassword: string;
 };
 
-const ChangePassword = () => {
+type Props = {
+  setActiveView: any;
+};
+
+const ChangePassword = ({ setActiveView }: Props) => {
   const [togglePassword, setTogglePassword] = useState<{
     newPassword: boolean;
     oldPassword: boolean;
@@ -22,9 +32,41 @@ const ChangePassword = () => {
     watch,
     formState: { errors },
   } = useForm<FormData>({ mode: "onChange" });
+  const [changePassword] = useChangePasswordMutation();
+  const { data: userData } = useLoggedInUserQuery({});
+  const user: IUser = userData?.data;
 
   const handleChangePassword: SubmitHandler<FormData> = async (data) => {
-    console.log(data);
+    const payload = { ...data, userId: user.id };
+    const result: any = await changePassword(payload);
+    if (result?.data?.success === false) {
+      Swal.fire({
+        position: "center",
+        icon: "error",
+        title: "Invalid credentials",
+        text: result?.data?.message,
+        showConfirmButton: true,
+        timer: 2500,
+      });
+    } else if (result?.data?.statusCode === 200) {
+      Swal.fire({
+        position: "center",
+        icon: "success",
+        title: result?.data?.message,
+        showConfirmButton: false,
+        timer: 2500,
+      });
+      setActiveView("profile");
+    } else {
+      Swal.fire({
+        position: "center",
+        icon: "error",
+        title: "There was a problem to change password",
+        text: result?.error?.data?.message,
+        showConfirmButton: true,
+        timer: 2500,
+      });
+    }
   };
 
   const handleTogglePassword = (type: string) => {

frontend/src/components/pages/dashboard/index.tsx

@@ -11,7 +11,7 @@ import TopBar from "./navigationBars/TopBar";
 import ChangePassword from "./changePassword";
 
 const Dashboard = () => {
-  const [activeView, setActiveView] = useState("");
+  const [activeView, setActiveView] = useState<any>("");
   const { query }: any = useRouter();
 
   useEffect(() => {
@@ -36,7 +36,9 @@ const Dashboard = () => {
           {activeView === "leave-requests" && <LeaveRequests />}
           {activeView === "profile" && <ProfilePage />}
           {activeView === "payments" && <PaymentPage />}
-          {activeView === "change-password" && <ChangePassword />}
+          {activeView === "change-password" && (
+            <ChangePassword setActiveView={setActiveView} />
+          )}
         </main>
       </div>
     </div>

frontend/src/components/pages/dashboard/team/TeamDetails.tsx

@@ -16,8 +16,8 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
   const [isRemove, setIsRemove] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const { data: userData } = useLoggedInUserQuery({});
-  const [leaveTeam] = useLeaveTeamRequestMutation();
   const user: IUser = userData?.data;
+  const [leaveTeam] = useLeaveTeamRequestMutation();
   const { data: teamLeaveRequests } = useGetMemberLeaveTeamRequestQuery(
     user?.id
   );

frontend/src/features/user/index.ts

@@ -65,6 +65,15 @@ const userApi = apiSlice.injectEndpoints({
       }),
       invalidatesTags: ["user"] as any,
     }),
+    changePassword: builder.mutation({
+      query: (data) => ({
+        method: "POST",
+        url: `/user/change-password`,
+        body: data,
+        credentials: "include",
+      }),
+      invalidatesTags: ["user"] as any,
+    }),
   }),
 });
 
@@ -77,4 +86,5 @@ export const {
   useLogoutUserMutation,
   useForgetPasswordMutation,
   useResetPasswordMutation,
+  useChangePasswordMutation,
 } = userApi;