Browse Source
Merge pull request #11 from rjwats/component-wrapper-example
Add visibility control for password fields
master
rjwats
5 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with
46 additions and
3 deletions
-
interface/src/components/PasswordValidator.js
-
interface/src/forms/APSettingsForm.js
-
interface/src/forms/OTASettingsForm.js
-
interface/src/forms/WiFiSettingsForm.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> |
|
|
|
}} |
|
|
|
/> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
@ -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" |
|
|
|
|
|
@ -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" |
|
|
|
|
|
@ -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" |
|
|
|