stitch-ui/src/core/components/MaskedInput.js

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react"; // eslint-disable-line no-unused-vars
import FontAwesome from "react-fontawesome";

export default class MaskedInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hidden: true };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({ hidden: !this.state.hidden });
  }
  render() {
    const inputProps = {
      ...this.props,
      type: this.state.hidden ? "password" : "text"
    };
    return (
      <div className="masked-input">
        <input {...inputProps} />
        <FontAwesome
          name={this.state.hidden ? "eye" : "eye-slash"}
          className="masked-input-toggle"
          onClick={this.toggle}
        />
      </div>
    );
  }
}