Make password character visible when typing each character and hide after few time interval in React

by Abdul Rawoof A R Updated: Feb 6, 2023

To make password characters visible we have to create an input element with a password field that will take input in the password form and then add an icon within the input element on which the user can click to toggle the visibility of the password in React.

Hide/Show password input in ReactJS,

Declaring a state with a default icon and hiding/showing a password.
Rendering the icon with the state and text box in password mode on load.
Trigger the event to update the state of text and icon on icon tap.

In React, when we click on the close eye icon, then the password will be visible in the form of original text input to the user and the eye icon will be changed to open eye. We can toggle passwords by clicking the eye icon again and again. We declare a password input field with type="password" by default. We are using setTimeout in React components to make a password invisible at a certain interval of time. The familiar practice of hiding the password characters is known as Password Masking. It is entered by the user - behind bullets("•") and asterisks("*").

Here is an example of how you can make a password character visible when typing each character and hide it after a few interval time in React:

Fig : Preview of the output that you will get on running this code from your IDE.

Code

In this solution we are using React library.

React : How to make password characters visible when typing each character and hide(*) after few time interval in react?

JavaScriptLines of Code : 131License : CC BY-SA 4.0

const styles = {
  facebookBtn: {
    backgroundColor: "rgb(51, 89, 157)"
  },
  form: {
    textAlign: "center"
  }
};

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      password: "",
      passHidden: ""
    };
    this.clocks = {};
  }

  handleOnSubmit = e => {
    e.preventDefault();
    console.log("Submitted!");
  };

  getLastIndexChar = string => {
    return string.slice(string.length - 1);
  };

  hideAllChars = fieldName => {
    const value = this.state[fieldName];
    let password = "";
    if (value.length) {
      password = Array(value.length).join("•") + "•";
    }
    this.setState({ [fieldName]: password });
  };

  setFieldClock = fieldName => {
    clearTimeout(this.clocks[fieldName]);
    this.clocks[fieldName] = setTimeout(
      () => this.hideAllChars(fieldName),
      1000
    );
  };

  getTypingHiddenPassword = value => {
    return Array(value.length).join("•") + this.getLastIndexChar(value);
  };

  handlePasswordChanged = (fieldName, value) => {
    this.setFieldClock(fieldName);
    const password = this.getTypingHiddenPassword(value);
    this.setState({ [fieldName]: password });
  };

  inputChange = ({ target: { name, value } }) => {
    switch (name) {
      case "password":
      case "passHidden":
        this.handlePasswordChanged(name, value);
        break;
      default:
        this.setState({ [name]: value });
        break;
    }
  };

  render() {
    return (
      <form style={styles.form} onSubmit={this.handleOnSubmit}>
        <h4>Welcome Back!</h4>
        <div className="form-group row">
          <input
            className="input"
            name="userName"
            value={this.state.userName}
            onChange={this.inputChange}
            type="text"
            placeholder="Email"
          />
        </div>
        <div className="form-group row">
          <input
            className="input"
            name="password"
            value={this.state.password}
            onChange={this.inputChange}
            type="text"
            placeholder="Password"
          />
        </div>

        <div className="form-group row">
          <input
            className="input"
            name="passHidden"
            value={this.state.passHidden}
            onChange={this.inputChange}
            type="text"
            placeholder="Password"
          />
        </div>
        <div className="form-group row">
          <button className="btn" type="submit">
            Log In
          </button>
        </div>
      </form>
    );
  }
}

class Form extends React.Component {
  render() {
    const { children, title } = this.props;
    return (
      <div className="col-md-6 mx-auto">
        <header>
          <h1>{title}</h1>
        </header>
        {children}
      </div>
    );
  }
}

ReactDOM.render(<Form children={<Login />} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js) then paste the script tag in index.html file.
Import React and ReactDOM in index.js file.
Open the terminal from IDE.
npm start to run the file.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for 'how to make password character visible when typing each character and hide few time interval in react' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in Visual Studio Code 1.73.1.
The solution is tested on node v18.12.1 and npm v8.19.2.
React version-18.2.0.

Using this solution, we are able to make password character visible when typing each character and hide after few time interval in React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to make password character visible when typing each character and hide after few time interval in React.