From ac4737739609c2bc552f432b7966d6d55d64c97e Mon Sep 17 00:00:00 2001 From: Rick Watson Date: Wed, 17 Apr 2019 00:01:08 +0100 Subject: [PATCH] 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 ( + + + {this.state.showPassword ? : } + + + }} + /> + ); + } + +} 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) && -