Example of wrapping the TextValidator with masking state handler:

Uses IconButton rather than CSS for cursor styling.
This commit is contained in:
Rick Watson 2019-04-17 00:01:08 +01:00
parent 22605bf1af
commit ac47377396
2 changed files with 42 additions and 1 deletions

View File

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

View File

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