diff --git a/interface/src/components/PasswordValidator.js b/interface/src/components/PasswordValidator.js new file mode 100644 index 0000000..43918c6 --- /dev/null +++ b/interface/src/components/PasswordValidator.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 ( + + + {this.state.showPassword ? : } + + + }} + /> + ); + } + +} diff --git a/interface/src/forms/APSettingsForm.js b/interface/src/forms/APSettingsForm.js index 1004a03..8035567 100644 --- a/interface/src/forms/APSettingsForm.js +++ b/interface/src/forms/APSettingsForm.js @@ -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" /> - ({ loadingSettings: { @@ -83,7 +84,7 @@ class OTASettingsForm extends React.Component { margin="normal" /> - ({ loadingSettings: { @@ -110,7 +111,7 @@ class WiFiSettingsForm extends React.Component { } { !isNetworkOpen(selectedNetwork) && -