From 8ca3741a521d5b9e0fa55b8b4f9316eaea70c19d Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 26 Jul 2021 16:54:31 -0700
Subject: [PATCH] IO-1274 Change Password on profilel

---
 bodyshop_translations.babel                   |  70 +++++++++++-
 .../profile-my/profile-my.component.jsx       | 102 +++++++++++++++---
 client/src/firebase/firebase.utils.js         |  18 ++++
 client/src/redux/user/user.sagas.js           |   8 +-
 client/src/translations/en_us/common.json     |   5 +
 client/src/translations/es/common.json        |   5 +
 client/src/translations/fr/common.json        |   5 +
 7 files changed, 193 insertions(+), 20 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index e9c1aa69d..29122f752 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -13570,6 +13570,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>newpassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>no</name>
                                         <definition_loaded>false</definition_loaded>
@@ -37182,6 +37203,27 @@
                             <folder_node>
                                 <name>actions</name>
                                 <children>
+                                    <concept_node>
+                                        <name>changepassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>signout</name>
                                         <definition_loaded>false</definition_loaded>
@@ -37367,6 +37409,32 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>successess</name>
+                                <children>
+                                    <concept_node>
+                                        <name>passwordchanged</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                         </children>
                     </folder_node>
                     <folder_node>
diff --git a/client/src/components/profile-my/profile-my.component.jsx b/client/src/components/profile-my/profile-my.component.jsx
index 5edbab480..552f7bc4c 100644
--- a/client/src/components/profile-my/profile-my.component.jsx
+++ b/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>
   );
 });
diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js
index 02e832909..9260d67f1 100644
--- a/client/src/firebase/firebase.utils.js
+++ b/client/src/firebase/firebase.utils.js
@@ -35,6 +35,24 @@ export const updateCurrentUser = (userDetails) => {
   });
 };
 
+export const updateCurrentPassword = async (password) => {
+  const currentUser = await getCurrentUser();
+
+  return currentUser.updatePassword(password);
+
+  // return new Promise((resolve, reject) => {
+  //   const unsubscribe = auth.onAuthStateChanged(
+  //     (userAuth) => {
+  //       userAuth.updatePassword(password).then((r) => {
+  //         unsubscribe();
+  //         resolve(userAuth);
+  //       });
+  //     },
+  //     (error) => reject(error)
+  //   );
+  // });
+};
+
 let messaging;
 try {
   messaging = firebase.messaging();
diff --git a/client/src/redux/user/user.sagas.js b/client/src/redux/user/user.sagas.js
index f5a6cc54c..de5d00c9b 100644
--- a/client/src/redux/user/user.sagas.js
+++ b/client/src/redux/user/user.sagas.js
@@ -100,8 +100,12 @@ export function* onUpdateUserDetails() {
 }
 export function* updateUserDetails(userDetails) {
   try {
-    yield updateCurrentUser(userDetails.payload);
-    yield put(updateUserDetailsSuccess(userDetails.payload));
+    const updatedDetails = yield updateCurrentUser(userDetails.payload);
+    console.log(
+      "🚀  ~ file: user.sagas.js  ~ line 104  ~ updatedDetails",
+      updatedDetails
+    );
+    yield put(updateUserDetailsSuccess(updatedDetails));
     notification.open({
       type: "success",
       message: i18next.t("profile.successes.updated"),
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 80d794b55..4d8a4a3d3 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -862,6 +862,7 @@
 				"message": "Message",
 				"monday": "Monday",
 				"na": "N/A",
+				"newpassword": "New Password",
 				"no": "No",
 				"nointernet": "It looks like you're not connected to the internet.",
 				"nointernet_sub": "Please check your connection and try again. ",
@@ -2226,6 +2227,7 @@
 		},
 		"user": {
 			"actions": {
+				"changepassword": "Change Password",
 				"signout": "Sign Out",
 				"updateprofile": "Update Profile"
 			},
@@ -2240,6 +2242,9 @@
 			},
 			"labels": {
 				"actions": "Actions"
+			},
+			"successess": {
+				"passwordchanged": "Password changed successfully. "
 			}
 		},
 		"vehicles": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 47976a4c2..124f9fc9d 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -862,6 +862,7 @@
 				"message": "",
 				"monday": "",
 				"na": "N / A",
+				"newpassword": "",
 				"no": "",
 				"nointernet": "",
 				"nointernet_sub": "",
@@ -2226,6 +2227,7 @@
 		},
 		"user": {
 			"actions": {
+				"changepassword": "",
 				"signout": "desconectar",
 				"updateprofile": "Actualización del perfil"
 			},
@@ -2240,6 +2242,9 @@
 			},
 			"labels": {
 				"actions": ""
+			},
+			"successess": {
+				"passwordchanged": ""
 			}
 		},
 		"vehicles": {
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 25cb6d91f..214fb6210 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -862,6 +862,7 @@
 				"message": "",
 				"monday": "",
 				"na": "N / A",
+				"newpassword": "",
 				"no": "",
 				"nointernet": "",
 				"nointernet_sub": "",
@@ -2226,6 +2227,7 @@
 		},
 		"user": {
 			"actions": {
+				"changepassword": "",
 				"signout": "Déconnexion",
 				"updateprofile": "Mettre à jour le profil"
 			},
@@ -2240,6 +2242,9 @@
 			},
 			"labels": {
 				"actions": ""
+			},
+			"successess": {
+				"passwordchanged": ""
 			}
 		},
 		"vehicles": {