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 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"
|
||||||
|
Loading…
Reference in New Issue
Block a user