IO-1274 Change Password on profilel

client/src/components/profile-my/profile-my.component.jsx

@@ -1,11 +1,16 @@
-import { Button, Form, Input } from "antd";
+import { Button, Form, Input, notification } from "antd";
+import { LockOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { updateUserDetails } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
-import { logImEXEvent } from "../../firebase/firebase.utils";
+import {
+  logImEXEvent,
+  updateCurrentPassword,
+} from "../../firebase/firebase.utils";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -28,33 +33,96 @@ export default connect(
     });
   };
 
+  const handleChangePassword = async ({ password }) => {
+    logImEXEvent("password_update");
+    try {
+      await updateCurrentPassword(password);
+      notification.success({
+        message: t("user.successess.passwordchanged"),
+      });
+    } catch (error) {
+      notification.error({
+        message: error.message,
+      });
+    }
+  };
+
   return (
     <div>
       <Form
         onFinish={handleFinish}
         autoComplete={"no"}
         initialValues={currentUser}
+        layout="vertical"
       >
-        <Form.Item
-          label={t("user.fields.displayname")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name="displayName"
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item label={t("user.fields.photourl")} name="photoURL">
-          <Input />
-        </Form.Item>
+        <LayoutFormRow>
+          <Form.Item
+            label={t("user.fields.displayname")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+            name="displayName"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item label={t("user.fields.photourl")} name="photoURL">
+            <Input />
+          </Form.Item>
+        </LayoutFormRow>
 
         <Button type="primary" key="submit" htmlType="submit">
           {t("user.actions.updateprofile")}
         </Button>
       </Form>
+      <Form
+        onFinish={handleChangePassword}
+        autoComplete={"no"}
+        initialValues={currentUser}
+        layout="vertical"
+      >
+        <LayoutFormRow>
+          <Form.Item label={t("general.labels.newpassword")} name="password">
+            <Input
+              prefix={<LockOutlined />}
+              type="password"
+              placeholder={t("general.labels.password")}
+            />
+          </Form.Item>
+          <Form.Item
+            label={t("general.labels.confirmpassword")}
+            name="password-confirm"
+            dependencies={["password"]}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (!value || getFieldValue("password") === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(
+                    t("general.labels.passwordsdonotmatch")
+                  );
+                },
+              }),
+            ]}
+          >
+            <Input
+              prefix={<LockOutlined />}
+              type="password"
+              placeholder={t("general.labels.password")}
+            />
+          </Form.Item>
+        </LayoutFormRow>
+        <Button type="primary" key="submit" htmlType="submit">
+          {t("user.actions.changepassword")}
+        </Button>
+      </Form>
     </div>
   );
 });