Merge pull request #1700 from nmro184/toggle-password-visibility

toggle password visibility
cboard-org · May 26, 2024 · aa67328 · aa67328
2 parents 612f116 + 1fc96f3
commit aa67328
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Account/Login/Login.component.js b/src/components/Account/Login/Login.component.js
@@ -16,6 +16,9 @@ import validationSchema from './validationSchema';
 import { login } from './Login.actions';
 import messages from './Login.messages';
 import './Login.css';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import IconButton from '@material-ui/core/IconButton';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 
 export class Login extends Component {
   static propTypes = {
@@ -32,7 +35,8 @@ export class Login extends Component {
 
   state = {
     isLogging: false,
-    loginStatus: {}
+    loginStatus: {},
+    isPasswordVisible: false
   };
 
   handleSubmit = values => {
@@ -47,9 +51,14 @@ export class Login extends Component {
       .catch(loginStatus => this.setState({ loginStatus }))
       .finally(() => this.setState({ isLogging: false }));
   };
+  togglePasswordVisibility = () => {
+    this.setState(prevState => ({
+      isPasswordVisible: !prevState.isPasswordVisible
+    }));
+  };
 
   render() {
-    const { isLogging, loginStatus } = this.state;
+    const { isLogging, loginStatus, isPasswordVisible } = this.state;
     const {
       intl,
       isDialogOpen,
@@ -95,8 +104,21 @@ export class Login extends Component {
                 <TextField
                   error={errors.password}
                   label={intl.formatMessage(messages.password)}
-                  type="password"
+                  type={isPasswordVisible ? 'text' : 'password'}
                   name="password"
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton onClick={this.togglePasswordVisibility}>
+                          {isPasswordVisible ? (
+                            <Visibility />
+                          ) : (
+                            <VisibilityOff />
+                          )}
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
                   onChange={handleChange}
                 />
                 <DialogActions>

diff --git a/src/components/UI/FormItems/TextField.js b/src/components/UI/FormItems/TextField.js
@@ -10,17 +10,19 @@ const propTypes = {
     PropTypes.bool,
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+  InputProps: PropTypes.object
 };
 
 const defaultProps = {
   className: '',
-  error: false
+  error: false,
+  InputProps: null
 };
 
-const TextField = ({ className, error, ...props }) => (
+const TextField = ({ className, error, InputProps, ...props }) => (
   <FormControl className={className} error={!!error}>
-    <MUITextField error={!!error} {...props} />
+    <MUITextField error={!!error} {...props} InputProps={InputProps} />
     {error && <FormHelperText>{error}</FormHelperText>}
   </FormControl>
 );