Merge pull request #141 from pravingv/develop

[WV-2476]In WeConnect, update all of the password fields to default to obscuring the password as you type it [TEAM REVIEW]

Author: DaleMcGrew

src/js/components/Login/ResetYourPassword.jsx

@@ -1,4 +1,5 @@
-import { Modal } from '@mui/material';
+import { Modal, InputAdornment, IconButton } from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
@@ -30,6 +31,8 @@ const ResetYourPassword = ({ openDialog, closeDialog }) => {
   const [warningLine, setWarningLine] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
   const [personId, setPersonId] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword1, setShowPassword1] = useState(false);
 
   const emailRef = useRef('');
   const emailPersonalRef = useRef('');
@@ -151,6 +154,13 @@ const ResetYourPassword = ({ openDialog, closeDialog }) => {
     );
   }
 
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleClickShowPassword1 = () => setShowPassword1((show) => !show);
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <>
       <Modal
@@ -190,24 +200,52 @@ const ResetYourPassword = ({ openDialog, closeDialog }) => {
                   id="field1"
                   inputRef={password1Ref}
                   label="Password"
-                  // type="password"
+                  type={showPassword ? 'text' : 'password'}
                   margin="dense"
                   name="password1"
                   required
                   variant="outlined"
                   // sx={{ '-webkit-text-security': 'disc' }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="toggle password visibility"
+                          onClick={handleClickShowPassword}
+                          onMouseDown={handleMouseDownPassword}
+                          edge="end"
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
                 />
                 <TextField
                   fullWidth
                   id="field2"
                   inputRef={password2Ref}
                   label="Verify Password"
-                  // type="password"
+                  type={showPassword1 ? 'text' : 'password'}
                   margin="dense"
                   name="password2"
                   required
                   variant="outlined"
                   // sx={{ '-webkit-text-security': 'disc' }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="toggle password visibility"
+                          onClick={handleClickShowPassword1}
+                          onMouseDown={handleMouseDownPassword}
+                          edge="end"
+                        >
+                          {showPassword1 ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
                 />
               </>
             )}

src/js/pages/Login.jsx

@@ -1,4 +1,5 @@
-import { Button, TextField } from '@mui/material';
+import { Button, TextField, InputAdornment, IconButton } from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { withStyles } from '@mui/styles';
 import { useQueryClient } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
@@ -47,6 +48,7 @@ const Login = ({ classes }) => {
   const [successLine, setSuccessLine] = useState('');
   const [warningLine, setWarningLine] = useState('');
   const [loginCount, setLoginCount] = useState(0);
+  const [showPassword, setShowPassword] = useState(false);
 
   const { data: dataAuth, isSuccess: isSuccessAuth, isFetching: isFetchingAuth } = useFetchData(['get-auth'], {}, METHOD.POST);
   useEffect(() => {
@@ -301,6 +303,12 @@ const Login = ({ classes }) => {
     setAppContextValue('openVerifySecretCodeModalDialog', true);
   };
 
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
   // console.log(getAppContextData());
   const isAdmin = viewerCanSeeOrDo(['canAddTeamMemberAnyTeam'], viewerAccessRights);
   const isAuthSafe = getAppContextValue('isAuthenticated') || false;
@@ -399,19 +407,47 @@ const Login = ({ classes }) => {
               <TextField id="password"
                          label="Password"
                          variant="outlined"
-                         // type="password"
+                         type={showPassword ? 'text' : 'password'}
                          autoComplete="current-password"
                          inputRef={passwordFldRef}
                          // defaultValue="12345678"
                          sx={{ display: 'block', paddingBottom: '15px' }}
+                         InputProps={{
+                           endAdornment: (
+                             <InputAdornment position="end">
+                               <IconButton
+                                 aria-label="toggle password visibility"
+                                 onClick={handleClickShowPassword}
+                                 onMouseDown={handleMouseDownPassword}
+                                 edge="end"
+                               >
+                                 {showPassword ? <VisibilityOff /> : <Visibility />}
+                               </IconButton>
+                             </InputAdornment>
+                           ),
+                         }}
               />
               <TextField id="confirmPassword"
                          label="Confirm Password"
                          variant="outlined"
-                         // type="password"
+                         type={showPassword ? 'text' : 'password'}
                          inputRef={confirmPasswordFldRef}
                          // defaultValue="12345678"
                          sx={{ padding: '0 0 15px 10px', display: showCreateStuff ? 'block' : 'none'  }}
+                         InputProps={{
+                           endAdornment: (
+                             <InputAdornment position="end">
+                               <IconButton
+                                 aria-label="toggle password visibility"
+                                 onClick={handleClickShowPassword}
+                                 onMouseDown={handleMouseDownPassword}
+                                 edge="end"
+                               >
+                                 {showPassword ? <VisibilityOff /> : <Visibility />}
+                               </IconButton>
+                             </InputAdornment>
+                           ),
+                         }}
               />
             </span>
             <span style={{ display: 'flex' }}>