Browse Source

Example of wrapping the TextValidator with masking state handler:

Uses IconButton rather than CSS for cursor styling.
master
Rick Watson 5 years ago
parent
commit
ac47377396
  1. 40
      interface/src/components/PasswordValidator.js
  2. 3
      interface/src/forms/WiFiSettingsForm.js

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

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

Loading…
Cancel
Save