Masking password input in ReactJS

Question

I am building a login page using ReactJS. I am using a custom text component built in-house, but unfortunately, it does not have a password masking option. Using the <input> tag with type=password is not an option. How can I make my password field appear masked (Dots instead of text) using Javascript/JQuery?

Is it a viable option to read each keydown event and replace the text with a dot while storing the char in a list or something on those lines?

Answer 1

Well, the way to achieve this is either in your JSX/HTML or by CSS for the most part.

To achieve this with JSX or HTML, you can use:

<input type="password" name="password">

To achieve this with CSS, you can use:

-webkit-text-security: disc;
text-security: disc;

Answer 2

I would simply condition the input type.

<input type={show_input?'text':'password'} 
       name='password' 
       id='password'
       value={user.password}
       onChange={handleChange}
 />

Change the value of show_input in your onChange function or add a button that changes shouw_input to true or false.

When type is password it will be masked, when it is text it will be unmasked.