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

Add visibility control for password fields
This commit is contained in:
rjwats 2019-04-17 20:20:31 +01:00 committed by GitHub
commit 49bf6fc2e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 3 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

@ -10,6 +10,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator'; import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
import {isAPEnabled} from '../constants/WiFiAPModes'; import {isAPEnabled} from '../constants/WiFiAPModes';
import PasswordValidator from '../components/PasswordValidator';
const styles = theme => ({ const styles = theme => ({
loadingSettings: { loadingSettings: {
@ -73,7 +74,7 @@ class APSettingsForm extends React.Component {
onChange={handleValueChange('ssid')} onChange={handleValueChange('ssid')}
margin="normal" margin="normal"
/> />
<TextValidator <PasswordValidator
validators={['required', 'matchRegexp:^.{0,64}$']} validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']} errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
name="password" name="password"

View File

@ -12,6 +12,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import isIP from '../validators/isIP'; import isIP from '../validators/isIP';
import isHostname from '../validators/isHostname'; import isHostname from '../validators/isHostname';
import or from '../validators/or'; import or from '../validators/or';
import PasswordValidator from '../components/PasswordValidator';
const styles = theme => ({ const styles = theme => ({
loadingSettings: { loadingSettings: {
@ -83,7 +84,7 @@ class OTASettingsForm extends React.Component {
margin="normal" margin="normal"
/> />
<TextValidator <PasswordValidator
validators={['required', 'matchRegexp:^.{0,64}$']} validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']} errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
name="password" name="password"

View File

@ -25,6 +25,7 @@ import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityMod
import isIP from '../validators/isIP'; import isIP from '../validators/isIP';
import isHostname from '../validators/isHostname'; import isHostname from '../validators/isHostname';
import optional from '../validators/optional'; import optional from '../validators/optional';
import PasswordValidator from '../components/PasswordValidator';
const styles = theme => ({ const styles = theme => ({
loadingSettings: { loadingSettings: {
@ -110,7 +111,7 @@ class WiFiSettingsForm extends React.Component {
} }
{ {
!isNetworkOpen(selectedNetwork) && !isNetworkOpen(selectedNetwork) &&
<TextValidator <PasswordValidator
validators={['matchRegexp:^.{0,64}$']} validators={['matchRegexp:^.{0,64}$']}
errorMessages={['Password must be 64 characters or less']} errorMessages={['Password must be 64 characters or less']}
name="password" name="password"