Example of wrapping the TextValidator with masking state handler:

Uses IconButton rather than CSS for cursor styling.

Author: rjwats

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>
+        }}
+      />
+    );
+  }
+
+}

interface/src/forms/WiFiSettingsForm.js

@@ -25,6 +25,7 @@ import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityMod
 import isIP from '../validators/isIP';
 import isHostname from '../validators/isHostname';
 import optional from '../validators/optional';
+import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
@@ -110,7 +111,7 @@ class WiFiSettingsForm extends React.Component {
             }
               {
                 !isNetworkOpen(selectedNetwork) &&
-         		<TextValidator
+         		<PasswordValidator
                   validators={['matchRegexp:^.{0,64}$']}
                   errorMessages={['Password must be 64 characters or less']}
                   name="password"