Change password is added to the profile and integrated with backend

app/frontend/src/Components/Profile/EditProfile.tsx

@@ -60,7 +60,12 @@ function EditProfile({ profile }: { profile: any }) {
 
   return (
     <>
-      <Button icon={<EditFilled />} type="primary" onClick={showModal}>
+      <Button
+        size="small"
+        icon={<EditFilled />}
+        type="primary"
+        onClick={showModal}
+      >
         Edit Profile
       </Button>
       <Modal

app/frontend/src/Pages/ChangePassword/ChangePassword.tsx

@@ -1,18 +1,25 @@
 import { Button, Form, Input, Card, message } from "antd";
 import styles from "./ChangePassword.module.scss";
+import { changePassword } from "../../Services/changepassword";
+import { useNavigate } from "react-router-dom";
 
 const ChangePassword = () => {
   const [form] = Form.useForm();
+  const navigate = useNavigate();
+
+  const handleChangePassword = async (event: any) => {
+    const { currentPassword, newPassword } = event;
+    try {
+      const response = await changePassword(currentPassword, newPassword);
+      if (response?.status == 200) {
+        message.success("Password is changed successfully!");
+        navigate("/profile");
+      }
+    } catch (error: any) {
+      message.error(error.message);
+      return;
+    }
 
-  const handleChangePassword = () => {
-    /*
-    const values = form.getFieldsValue();
-
-    const body = {
-      email: values.email,
-      new_password: values.new_password,
-    };
-    */
     message.success("Password is changed successfully!");
   };
 
@@ -29,23 +36,26 @@ const ChangePassword = () => {
         onFinishFailed={onFinishFailed}
         size="large"
       >
-        <Form.Item name="password" rules={[{ required: true, message: "" }]}>
+        <Form.Item
+          name="currentPassword"
+          rules={[{ required: true, message: "" }]}
+        >
           <Input placeholder="Password" />
         </Form.Item>
 
-        <Form.Item name="newpassword" rules={[{ required: true, message: "" }]}>
+        <Form.Item name="newPassword" rules={[{ required: true, message: "" }]}>
           <Input.Password placeholder="Enter a new password" />
         </Form.Item>
         <Form.Item
           name="conf-password"
-          dependencies={["newpassword"]}
+          dependencies={["newPassword"]}
           rules={[
             {
               required: true,
             },
             ({ getFieldValue }) => ({
               validator(_, value) {
-                if (!value || getFieldValue("newpassword") === value) {
+                if (!value || getFieldValue("newPassword") === value) {
                   return Promise.resolve();
                 }
                 return Promise.reject(

app/frontend/src/Pages/Profile/Profile.module.scss

@@ -26,10 +26,10 @@
     padding: 0.5em;
     position: relative;
 
-    .edit {
-      position: absolute;
-      top: 1em;
-      right: 1em;
+    .settings {
+      display: flex;
+      justify-content: flex-end;
+      gap: 5px;
     }
 
     .profilePicture {

app/frontend/src/Pages/Profile/Profile.tsx

@@ -1,17 +1,20 @@
 import { PacmanLoader } from "react-spinners";
 import { useAuth } from "../../Components/Hooks/useAuth";
 import styles from "./Profile.module.scss";
-import { useQueryClient } from "react-query";
-import { Popover } from "antd";
+import { Button, Popover } from "antd";
 import { useState } from "react";
 import EditProfile from "../../Components/Profile/EditProfile";
 import ProfileIcon from "../../Components/Icons/ProfileIcon";
 import ProfileAchievements from "../../Components/Profile/ProfileAchievements/ProfileAchievements";
 import LastActivities from "../../Components/LastActivities/LastActivities";
+import { SyncOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
 const subPages = ["Achievements", "Last Activities"];
 function Profile() {
   const { user, isLoading, profile } = useAuth();
   const [subPage, setSubPage] = useState(subPages[0]);
+
+  const navigate = useNavigate();
   return (
     <div className={styles.profilePage}>
       {isLoading ? (
@@ -21,9 +24,6 @@ function Profile() {
       ) : (
         <>
           <div className={styles.profileCard}>
-            <div className={styles.edit}>
-              <EditProfile profile={profile} key={profile?.id} />
-            </div>
             <div className={styles.profilePicture}>
               {profile.profilePhoto ? (
                 <img
@@ -36,6 +36,19 @@ function Profile() {
               )}
             </div>
             <div className={styles.profileDetails}>
+              <div className={styles.settings}>
+                <EditProfile profile={profile} key={profile?.id} />
+
+                <Button
+                  icon={<SyncOutlined />}
+                  type="primary"
+                  onClick={() => navigate("/change-password")}
+                  size="small"
+                >
+                  Change Password
+                </Button>
+              </div>
+
               <div className={styles.profileName}>
                 <h1>{user.username}</h1>
                 <span>{user.email}</span>

app/frontend/src/Services/changepassword.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export async function changePassword(
+  currentPassword: string,
+  newPassword: string
+) {
+  try {
+    const response = await axios.post(
+      `${import.meta.env.VITE_APP_API_URL}/auth/change-password`,
+      { currentPassword, newPassword }
+    );
+    return response;
+  } catch (error) {}
+}

app/frontend/src/router.tsx

@@ -156,7 +156,7 @@ const router = createBrowserRouter([
     element: <ForgotPassword />,
   },
   {
-    path: "change",
+    path: "change-password",
     element: <ChangePassword />,
   },
   {