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