EMS-ESP32/interface/src/components/PasswordValidator.tsx

import React from 'react';
import {
  TextValidator,
  ValidatorComponentProps
} from 'react-material-ui-form-validator';

import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import { InputAdornment, IconButton } from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';

const styles = createStyles({
  input: {
    '&::-ms-reveal': {
      display: 'none'
    }
  }
});

type PasswordValidatorProps = WithStyles<typeof styles> &
  Exclude<ValidatorComponentProps, 'type' | 'InputProps'>;

interface PasswordValidatorState {
  showPassword: boolean;
}

class PasswordValidator extends React.Component<
  PasswordValidatorProps,
  PasswordValidatorState
> {
  state = {
    showPassword: false
  };

  toggleShowPassword = () => {
    this.setState({
      showPassword: !this.state.showPassword
    });
  };

  render() {
    const { classes, ...rest } = this.props;
    return (
      <TextValidator
        {...rest}
        type={this.state.showPassword ? 'text' : 'password'}
        InputProps={{
          classes,
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                aria-label="Toggle password visibility"
                onClick={this.toggleShowPassword}
              >
                {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    );
  }
}

export default withStyles(styles)(PasswordValidator);