Made Changepassword funcnality dynamic by connecting it to database

src/components/Forms/UserPassword/index.jsx

@@ -1,13 +1,130 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import useStyles from "./styles";
 import { Box, Card, Typography, Button, Switch } from "@mui/material";
+// import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import { useFirebase } from "react-redux-firebase";
+import { useDispatch, useSelector } from "react-redux";
+import Alert from "@mui/lab/Alert";
 import { Input } from "../../ui-helpers/Inputs/SecondaryInput";
+import { changePassword } from "../../../store/actions/authActions";
+
+const AlertComp = ({ description, type }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <Collapse in={isOpen}>
+      <Alert
+        severity={type ? type : "error"}
+        action={
+          <IconButton
+            aria-label="close"
+            color="inherit"
+            size="small"
+            onClick={() => {
+              setIsOpen(false);
+            }}
+          >
+            <CloseIcon fontSize="inherit" />
+          </IconButton>
+        }
+        className="mb-16"
+      >
+        {description}
+      </Alert>
+    </Collapse>
+  );
+};
 
 const UserPassword = () => {
   const classes = useStyles();
+  const firebase = useFirebase();
+  const dispatch = useDispatch();
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [oldPassword, setOldPassword] = useState("");
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const errorProps = useSelector(({ auth }) => auth.changePassword.error);
+  const loadingProps = useSelector(({ auth }) => auth.changePassword.loading);
+
+  const handleOldPasswordChange = e => {
+    // console.log(e.target.value);
+    setOldPassword(e.target.value);
+  };
+  const handleNewPasswordChange = e => {
+    // console.log(e.target.value);
+    setNewPassword(e.target.value);
+  };
+  const handleConfirmNewPasswordChange = e => {
+    // console.log(e.target.value);
+    setConfirmNewPassword(e.target.value);
+  };
+
+  const validatePassword = () => {
+    if (
+      oldPassword.length > 0 &&
+      newPassword.length > 0 &&
+      newPassword === confirmNewPassword
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  const handleUpdatePassword = async e => {
+    // e.preventDefault()
+    setError("");
+
+    setSuccess(false);
+    if (validatePassword()) {
+      await changePassword(oldPassword, newPassword)(firebase, dispatch);
+      // console.log(errorProps);
+      // console.log(loadingProps);
+      if (errorProps) {
+        setError(errorProps);
+        // console.log(errorProps);
+      } else {
+        setSuccess(true);
+      }
+    } else {
+      setError("New Password may not match with Confirm New Password");
+    }
+  };
+
+  useEffect(() => {
+    if (errorProps) {
+      setError(errorProps);
+      setSuccess(false);
+      // console.log(errorProps);
+    } else {
+      setSuccess(true);
+      setError("");
+    }
+  }, [errorProps, loadingProps]);
+
+  useEffect(() => {
+    setError("");
+    setSuccess(false);
+  }, []);
+
+
 
   return (
     <Card className={classes.card} data-testId="passwordPage">
+      {/* {console.log(error)} */}
+      {error && <AlertComp description={error} />}
+
+      {success && (
+        <>
+          <AlertComp
+            description={"Password Succesfully Changed"}
+            type="success"
+          />
+        </>
+      )}
       <Box
         component="form"
         noValidate
@@ -22,6 +139,7 @@ const UserPassword = () => {
             type="password"
             className={classes.input}
             data-testId="oldPassword"
+            onChange={handleOldPasswordChange}
           />
         </Box>
         <Box style={{ margin: "5px 0" }}>
@@ -30,6 +148,7 @@ const UserPassword = () => {
             type="password"
             className={classes.input}
             data-testId="newPassword"
+            onChange={handleNewPasswordChange}
           />
         </Box>
         <Box style={{ margin: "5px 0" }}>
@@ -38,9 +157,14 @@ const UserPassword = () => {
             type="password"
             className={classes.input}
             data-testId="confirmPassword"
+            onChange={handleConfirmNewPasswordChange}
           />
         </Box>
-        <Button className={classes.button} data-testId="updatePassword">
+        <Button
+          className={classes.button}
+          data-testId="updatePassword"
+          onClick={handleUpdatePassword}
+        >
           Update Password
         </Button>
         <Box className={classes.row}>

src/store/actions/actionTypes.js

@@ -45,6 +45,10 @@ export const RESEND_VERIFY_EMAIL_START = "RESEND_VERIFY_EMAIL_START";
 export const RESEND_VERIFY_EMAIL_SUCCESS = "RESEND_VERIFY_EMAIL_SUCCESS";
 export const RESEND_VERIFY_EMAIL_FAIL = "RESEND_VERIFY_EMAIL_FAIL";
 
+export const CHANGE_PASSWORD_START="CHANGE_PASSWORD_START";
+export const CHANGE_PASSWORD_SUCCESS="CHANGE_PASSWORD_SUCCESS";
+export const CHANGE_PASSWORD_FAIL="CHANGE_PASSWORD_FAIL";
+
 export const PROFILE_EDIT_START = "PROFILE_EDIT_START";
 export const PROFILE_EDIT_SUCCESS = "PROFILE_EDIT_SUCCESS";
 export const PROFILE_EDIT_FAIL = "PROFILE_EDIT_FAIL";

src/store/actions/authActions.js

@@ -171,6 +171,42 @@ export const resendVerifyEmail = email => async dispatch => {
   }
 };
 
+/*
+-> Retrieve the currently logged-in user from Firebase.
+-> If no user is logged in, return a failure response.
+
+-> Use the provided old password to reauthenticate the user.
+
+-> If reauthentication fails, return a failure response.
+-> If reauthentication is successful, update the password with the new one.
+
+-> Return a success response.
+
+*/
+
+export const changePassword = (oldPassword, newPassword) => async (firebase, dispatch) => {
+  try {
+    dispatch({ type: actions.CHANGE_PASSWORD_START });
+
+    const user = firebase.auth().currentUser;
+
+    // Reauthenticate the user with their current password
+    const credential = firebase.auth.EmailAuthProvider.credential(
+      user.email,
+      oldPassword
+    );
+    await user.reauthenticateWithCredential(credential);
+
+    // Change the password
+    await user.updatePassword(newPassword);
+
+    dispatch({ type: actions.CHANGE_PASSWORD_SUCCESS });
+  } catch (e) {
+    // console.log(e.message);
+    dispatch({ type: actions.CHANGE_PASSWORD_FAIL, payload: e.message });
+  }
+};
+
 /**
  * Check user handle exists or not
  * @param userHandle

src/store/reducers/authReducer/changePasswordReducer.js

@@ -0,0 +1,42 @@
+import * as actions from "../../actions/actionTypes";
+import { modifyAuthErrorMsg } from "../../../helpers/errorMsgHandler";
+
+const initialState = {
+  loading: false,
+  error: null
+};
+
+const ChangePasswordReducer = (state = initialState, { type, payload }) => {
+  switch (type) {
+
+
+    case actions.CHANGE_PASSWORD_START:
+
+      return {
+        ...state,
+        loading: true,
+        error: null
+      };
+
+    case actions.CHANGE_PASSWORD_SUCCESS:
+
+      return {
+        ...state,
+        loading: false,
+        error: null
+      };
+
+    case actions.CHANGE_PASSWORD_FAIL:
+
+      return {
+        ...state,
+        loading: false,
+        error: payload
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default ChangePasswordReducer;

src/store/reducers/authReducer/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
 import profileReducer from "./profileReducer";
 import verifyEmailReducer from "./verifyEmailReducer";
 import recoverPasswordReducer from "./recoverPasswordReducer";
+import ChangePasswordReducer from "./changePasswordReducer";
 
 export default combineReducers({
   profile: profileReducer,
   verifyEmail: verifyEmailReducer,
-  recoverPassword: recoverPasswordReducer
+  recoverPassword: recoverPasswordReducer,
+  changePassword:ChangePasswordReducer
 });