react-modify-password

This is a customizable popup interface designed for securely updating passwords in a React application.

Installation

npm install react-modify-password  # using npm
yarn add react-modify-password     # using yarn

Features

• ✅Configurable via props.
• ✅Stylable via css (or custom components).
• ✅Best Modify/Change Password Modal for JavaScript/React.
• ✅Error Validation for empty password(s) + new and confirm passowrd doesn't match.
• ✅Small bundle size.

Example Usage

import React, { useState } from "react";
import Modal from "react-modify-password";

function MyComponent() {
  const [changePasswordPopup, setChangePasswordPopup] = useState(false);
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handlePasswordChange = (currentPassword, newPassword, confirmPassword) => {
    console.log("Current Password:", currentPassword);
    console.log("New Password:", newPassword);
    console.log("Confirm Password:", confirmPassword);

    //Implement your logic here!
  };

  const handleOpenChangePasswordPopup = () => {
    setChangePasswordPopup(true);
  };

  const handleCloseChangePasswordPopup = () => {
    setChangePasswordPopup(false);
  };

  const handleCancel = () => {
    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    handleCloseChangePasswordPopup();
  };

  return (
    <div>
      <button onClick={handleOpenChangePasswordPopup}>Open Modal</button>
      <Modal
          changePasswordPopup={changePasswordPopup}
          onPasswordChange={handlePasswordChange}
          onCancel={handleCancel}
          setChangePasswordPopup={setChangePasswordPopup}
          newPassword={newPassword}
          setNewPassword={setNewPassword}
          confirmPassword={confirmPassword}
          setConfirmPassword={setConfirmPassword}
          currentPassword={currentPassword}
          setCurrentPassword={setCurrentPassword}
        />
    </div>
  );
}

export default MyComponent;

Props

| Prop | Type | Description | Default Value | |--------------------------|----------|----------------------------------------------------------------------------------------------|----------------------------------------| | changePasswordPopup | boolean | Controls the visibility of the change password popup. | false | | onPasswordChange | function | Callback function triggered when the user submits a password change request. | - | | onCancel | function | Callback function triggered when the user cancels the password change action. | - | | setChangePasswordPopup | function | Setter function to update the state controlling the visibility of the change password popup. | - | | newPassword | string | State variable for the new password input field. | "" | | setNewPassword | function | Setter function to update the new password state variable. | - | | confirmPassword | string | State variable for the confirm password input field. | "" | | setConfirmPassword | function | Setter function to update the confirm password state variable. | - | | currentPassword | string | State variable for the current password input field. | "" | | setCurrentPassword | function | Setter function to update the current password state variable. | - | | modalStyle | object | Custom styles for the modal container. | Refer to the styles object in the code | | changePasswordTextStyle | object | Custom styles for the change password text. | Refer to the styles object in the code | | currentPasswordTextStyle | object | Custom styles for the current password text. | Refer to the styles object in the code | | newPasswordTextStyle | object | Custom styles for the new password text. | Refer to the styles object in the code | | confirmPasswordTextStyle | object | Custom styles for the confirm password text. | Refer to the styles object in the code | | currentPasswordInputStyle | object | Custom styles for the current password input field. | Refer to the styles object in the code | | newPasswordInputStyle | object | Custom styles for the new password input field. | Refer to the styles object in the code | | confirmPasswordInputStyle | object | Custom styles for the confirm password input field. | Refer to the styles object in the code | | cancelButtonStyle | object | Custom styles for the cancel button. | Refer to the styles object in the code | | updateButtonStyle | object | Custom styles for the update button. | Refer to the styles object in the code | | errorMessageStyle | object | Custom styles for the error message displayed if password validation fails. | Refer to the styles object in the code |

Styles

| Style Name | Default Value | |-------------------------|-----------------------| | modalStyle | { backgroundColor: "#F0F0F0", borderRadius: "10px" } | | changePasswordTextStyle | { fontSize: "20px", fontWeight: "bold", color: "#333333" } | | currentPasswordTextStyle | { fontSize: "16px", fontWeight: "normal", color: "#555555" } | | newPasswordTextStyle | { fontSize: "16px", fontWeight: "normal", color: "#555555" } | | confirmPasswordTextStyle | { fontSize: "16px", fontWeight: "normal", color: "#555555" } | | currentPasswordInputStyle | { backgroundColor: "#FFFFFF", color: "#000000", borderRadius: "8px", border: "1px solid #CCCCCC" } | | newPasswordInputStyle | { backgroundColor: "#FFFFFF", color: "#000000", borderRadius: "8px", border: "1px solid #CCCCCC" } | | confirmPasswordInputStyle | { backgroundColor: "#FFFFFF", color: "#000000", borderRadius: "8px", border: "1px solid #CCCCCC" } | | cancelButtonStyle | { backgroundColor: "#DDDDDD", color: "#333333", borderRadius: "12px" } | | updateButtonStyle | { backgroundColor: "#007bff", color: "#FFFFFF", borderRadius: "12px" } | | errorMessageStyle | { color: "#DDDDDD", fontSize: "14px", fontWeight: "normal" } |

Customization

import React, { useState } from "react";
import Modal from "react-modify-password";

const styles = {
  modal: {
    backgroundColor: "#F0F0F0",
    borderRadius: "10px"
  },
  changePasswordText: {
    fontSize: "20px",
    fontWeight: "bold",
    color: "#333333"
  },
  currentPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#555555"
  },
  newPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#555555"
  },
  confirmPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#555555"
  },
  currentPasswordInput: {
    backgroundColor: "#FFFFFF",
    color: "#000000",
    borderRadius: "8px",
    border: "1px solid #CCCCCC"
  },
  newPasswordInput: {
    backgroundColor: "#FFFFFF",
    color: "#000000",
    borderRadius: "8px",
    border: "1px solid #CCCCCC"
  },
  confirmPasswordInput: {
    backgroundColor: "#FFFFFF",
    color: "#000000",
    borderRadius: "8px",
    border: "1px solid #CCCCCC"
  },
  cancelButton: {
    backgroundColor: "#DDDDDD",
    color: "#333333",
    borderRadius: "12px"
  },
  updateButton: {
    backgroundColor: "#007bff",
    color: "#FFFFFF",
    borderRadius: "12px"
  }
};

function MyComponent() {
  const [changePasswordPopup, setChangePasswordPopup] = useState(false);
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handlePasswordChange = (currentPassword, newPassword, confirmPassword) => {
    console.log("Current Password:", currentPassword);
    console.log("New Password:", newPassword);
    console.log("Confirm Password:", confirmPassword);

    //Implement your logic here!
  };

  const handleOpenChangePasswordPopup = () => {
    setChangePasswordPopup(true);
  };

  const handleCloseChangePasswordPopup = () => {
    setChangePasswordPopup(false);
  };

  const handleCancel = () => {
    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    handleCloseChangePasswordPopup();
  };

  return (
    <div>
      <button onClick={handleOpenChangePasswordPopup}>Open Modal</button>
      <Modal
          changePasswordPopup={changePasswordPopup}
          onPasswordChange={handlePasswordChange}
          onCancel={handleCancel}
          setChangePasswordPopup={setChangePasswordPopup}
          newPassword={newPassword}
          setNewPassword={setNewPassword}
          confirmPassword={confirmPassword}
          setConfirmPassword={setConfirmPassword}
          currentPassword={currentPassword}
          setCurrentPassword={setCurrentPassword}
          modalStyle={styles.modal}
          changePasswordTextStyle={styles.changePasswordText}
          currentPasswordTextStyle={styles.currentPasswordText}
          newPasswordTextStyle={styles.newPasswordText}
          confirmPasswordTextStyle={styles.confirmPasswordText}
          currentPasswordInputStyle={styles.currentPasswordInput}
          newPasswordInputStyle={styles.newPasswordInput}
          confirmPasswordInputStyle={styles.confirmPasswordInput}
          cancelButtonStyle={styles.cancelButton}
          updateButtonStyle={styles.updateButton}
          errorMessageStyle={styles.errorMessage}
        />
    </div>
  );
}

export default MyComponent;

Dark Mode

import React, { useState } from "react";
import Modal from "react-modify-password";

const styles = {
  modal: {
    backgroundColor: "#333333",
    borderRadius: "10px"
  },
  changePasswordText: {
    fontSize: "20px",
    fontWeight: "bold",
    color: "#CCCCCC"
  },
  currentPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#AAAAAA"
  },
  newPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#AAAAAA"
  },
  confirmPasswordText: {
    fontSize: "16px",
    fontWeight: "normal",
    color: "#AAAAAA"
  },
  currentPasswordInput: {
    backgroundColor: "#444444",
    color: "#DDDDDD",
    borderRadius: "8px",
    border: "1px solid #666666"
  },
  newPasswordInput: {
    backgroundColor: "#444444",
    color: "#DDDDDD",
    borderRadius: "8px",
    border: "1px solid #666666"
  },
  confirmPasswordInput: {
    backgroundColor: "#444444",
    color: "#DDDDDD",
    borderRadius: "8px",
    border: "1px solid #666666"
  },
  cancelButton: {
    backgroundColor: "#444444",
    color: "#CCCCCC",
    borderRadius: "12px",
    border: "1px solid #666666"
  },
  updateButton: {
    backgroundColor: "#444444",
    color: "#FFFFFF",
    borderRadius: "12px",
    border: "1px solid #666666"
  },
  errorMessage: {
    color: "#DDDDDD",
    fontSize: "14px", 
    fontWeight: "normal" 
  }
};

function MyComponent() {
  const [changePasswordPopup, setChangePasswordPopup] = useState(false);
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handlePasswordChange = (currentPassword, newPassword, confirmPassword) => {
    console.log("Current Password:", currentPassword);
    console.log("New Password:", newPassword);
    console.log("Confirm Password:", confirmPassword);

    //Implement your logic here!
  };

  const handleOpenChangePasswordPopup = () => {
    setChangePasswordPopup(true);
  };

  const handleCloseChangePasswordPopup = () => {
    setChangePasswordPopup(false);
  };

  const handleCancel = () => {
    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    handleCloseChangePasswordPopup();
  };

  return (
    <div>
      <button onClick={handleOpenChangePasswordPopup}>Open Modal</button>
      <Modal
          changePasswordPopup={changePasswordPopup}
          onPasswordChange={handlePasswordChange}
          onCancel={handleCancel}
          setChangePasswordPopup={setChangePasswordPopup}
          newPassword={newPassword}
          setNewPassword={setNewPassword}
          confirmPassword={confirmPassword}
          setConfirmPassword={setConfirmPassword}
          currentPassword={currentPassword}
          setCurrentPassword={setCurrentPassword}
          modalStyle={styles.modal}
          changePasswordTextStyle={styles.changePasswordText}
          currentPasswordTextStyle={styles.currentPasswordText}
          newPasswordTextStyle={styles.newPasswordText}
          confirmPasswordTextStyle={styles.confirmPasswordText}
          currentPasswordInputStyle={styles.currentPasswordInput}
          newPasswordInputStyle={styles.newPasswordInput}
          confirmPasswordInputStyle={styles.confirmPasswordInput}
          cancelButtonStyle={styles.cancelButton}
          updateButtonStyle={styles.updateButton}
          errorMessageStyle={styles.errorMessage}
        />
    </div>
  );
}

export default MyComponent;