Example of wrapping the TextValidator with masking state handler:
Uses IconButton rather than CSS for cursor styling.
This commit is contained in:
parent
22605bf1af
commit
ac47377396
40
interface/src/components/PasswordValidator.js
Normal file
40
interface/src/components/PasswordValidator.js
Normal 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>
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
@ -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…
Reference in New Issue
Block a user