Example of wrapping the TextValidator with masking state handler:

Uses IconButton rather than CSS for cursor styling.

interface/src/components/PasswordValidator.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TextValidator } from 'react-material-ui-form-validator';
+import { InputAdornment } from '@material-ui/core';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@material-ui/core/IconButton';
+
+export default class PasswordValidator extends React.Component {
+
+  state = {
+    showPassword: false
+  };
+
+  toggleShowPassword = () => {
+    this.setState({
+      showPassword: !this.state.showPassword
+    });
+  }
+
+  render() {
+    return (
+      <TextValidator
+        {...this.props}
+        type={this.state.showPassword ? 'text' : 'password'}
+        InputProps={{
+          endAdornment:
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="Toggle password visibility"
+                onClick={this.toggleShowPassword}
+              >
+                {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </InputAdornment>
+        }}
+      />
+    );
+  }
+
+}