Example of wrapping the TextValidator with masking state handler:
Uses IconButton rather than CSS for cursor styling.
This commit is contained in:
		
							
								
								
									
										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" | ||||
|   | ||||
		Reference in New Issue
	
	Block a user