From ac4737739609c2bc552f432b7966d6d55d64c97e Mon Sep 17 00:00:00 2001
From: Rick Watson <rjwats@gmail.com>
Date: Wed, 17 Apr 2019 00:01:08 +0100
Subject: [PATCH 1/2] Example of wrapping the TextValidator with masking state
 handler:

Uses IconButton rather than CSS for cursor styling.
---
 interface/src/components/PasswordValidator.js | 40 +++++++++++++++++++
 interface/src/forms/WiFiSettingsForm.js       |  3 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 interface/src/components/PasswordValidator.js

diff --git a/interface/src/components/PasswordValidator.js b/interface/src/components/PasswordValidator.js
new file mode 100644
index 0000000..43918c6
--- /dev/null
+++ b/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>
+        }}
+      />
+    );
+  }
+
+}
diff --git a/interface/src/forms/WiFiSettingsForm.js b/interface/src/forms/WiFiSettingsForm.js
index 3cddf63..7ea003e 100644
--- a/interface/src/forms/WiFiSettingsForm.js
+++ b/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"

From f2e46d55f363e7892a1ecef0e232a85674fed974 Mon Sep 17 00:00:00 2001
From: Rick Watson <rjwats@gmail.com>
Date: Wed, 17 Apr 2019 00:11:37 +0100
Subject: [PATCH 2/2] add additional password mask controls

---
 interface/src/forms/APSettingsForm.js  | 3 ++-
 interface/src/forms/OTASettingsForm.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/interface/src/forms/APSettingsForm.js b/interface/src/forms/APSettingsForm.js
index 1004a03..8035567 100644
--- a/interface/src/forms/APSettingsForm.js
+++ b/interface/src/forms/APSettingsForm.js
@@ -10,6 +10,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
 
 import {isAPEnabled} from '../constants/WiFiAPModes';
+import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
@@ -73,7 +74,7 @@ class APSettingsForm extends React.Component {
                 onChange={handleValueChange('ssid')}
                 margin="normal"
               />
-              <TextValidator
+              <PasswordValidator
                     validators={['required', 'matchRegexp:^.{0,64}$']}
                     errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
                     name="password"
diff --git a/interface/src/forms/OTASettingsForm.js b/interface/src/forms/OTASettingsForm.js
index 8d80385..7d58ea8 100644
--- a/interface/src/forms/OTASettingsForm.js
+++ b/interface/src/forms/OTASettingsForm.js
@@ -12,6 +12,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import isIP from '../validators/isIP';
 import isHostname from '../validators/isHostname';
 import or from '../validators/or';
+import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
   loadingSettings: {
@@ -83,7 +84,7 @@ class OTASettingsForm extends React.Component {
                margin="normal"
              />
 
-             <TextValidator
+             <PasswordValidator
                    validators={['required', 'matchRegexp:^.{0,64}$']}
                    errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
                    name="password"