Merge pull request #11 from rjwats/component-wrapper-example

Add visibility control for password fields

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/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"

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"

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"