Password Input with MDL UI

InputPassword.js

/**
* Password Input text
* @author: Aderbal Nunes <[email protected]>
* @since: 08/05/2020
*
*/

import React from "react"
import {FormControl,InputLabel,InputAdornment,Input} from '@material-ui/core';
import {Visibility,VisibilityOff} from '@material-ui/icons';
import PropTypes from 'prop-types';

// end adorment for toggle password text
const EndAdornment = ({...props}) => {
  const {toggle,visibility} = props;
  return (
    <InputAdornment position="end">
      <span style={{cursor: 'pointer'}} onClick={toggle}>
        {visibility? <Visibility color="action" /> : <VisibilityOff color="action" />}
      </span>
    </InputAdornment>
  );
};

class InputPassword extends React.PureComponent {

  state = {
    visibility: false
  }

  _toggleVisibility = () => {
    this.setState(state => ({...state, visibility: !state.visibility}));
  };

  render(){
    const {label,fullWidth,id,value,onChange,name} = this.props;
    const {visibility} = this.state;
    
    return (
      <FormControl fullWidth={fullWidth||false}>
        <InputLabel htmlFor={id}>{label}</InputLabel>
        <Input 
          id={id}
          name={name}
          type={!visibility?'password':'text'}
          value={value}
          onChange={onChange}
          endAdornment={
            <EndAdornment 
              toggle={this._toggleVisibility}
              visibility={visibility}
            />
          }
        />
      </FormControl>
    );
  }
}

InputPassword.defaultProps = {
  label: 'Password',
  id: `${Math.ceil(Math.random()*10000)}-password`,
  name: 'password'
}

InputPassword.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  name: PropTypes.string,
  id: PropTypes.string,
}

export default InputPassword;