Merge pull request #576 from Unleash/feat/view-password

feat: add show password for all passwords input

frontend/src/component/admin/users/change-password-component.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { TextField, Typography, Avatar } from '@material-ui/core';
+import { Typography, Avatar } from '@material-ui/core';
 import { trim } from '../../common/util';
 import { modalStyles } from './util';
 import Dialogue from '../../common/Dialogue/Dialogue';
@@ -10,6 +10,7 @@ import { useCommonStyles } from '../../../common.styles';
 import PasswordMatcher from '../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { Alert } from '@material-ui/lab';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 function ChangePassword({
     showDialog,
@@ -109,26 +110,20 @@ function ChangePassword({
                 />
 
                 <p style={{ color: 'red' }}>{error.general}</p>
-                <TextField
+                <PasswordField
                     label="New password"
                     name="password"
-                    type="password"
                     value={data.password}
                     helperText={error.password}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
                 />
-                <TextField
+                <PasswordField
                     label="Confirm password"
                     name="confirm"
-                    type="password"
                     value={data.confirm}
                     error={error.confirm !== undefined}
                     helperText={error.confirm}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
                 />
                 <PasswordMatcher
                     started={data.password && data.confirm}

frontend/src/component/common/PasswordField/PasswordField.tsx

@@ -0,0 +1,44 @@
+import { IconButton, InputAdornment, TextField } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { useState } from 'react';
+
+const PasswordField = ({ ...rest }) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        e: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        e.preventDefault();
+    };
+
+    return (
+        <TextField
+            variant="outlined"
+            size="small"
+            type={showPassword ? 'text' : 'password'}
+            InputProps={{
+                style: {
+                    paddingRight: '0px !important',
+                },
+                endAdornment: (
+                    <InputAdornment position="end">
+                        <IconButton
+                            aria-label="toggle password visibility"
+                            onClick={handleClickShowPassword}
+                            onMouseDown={handleMouseDownPassword}
+                        >
+                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            }}
+            {...rest}
+        />
+    );
+};
+
+export default PasswordField;

frontend/src/component/user/HostedAuth/HostedAuth.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Grid, TextField, Typography } from '@material-ui/core';
@@ -10,6 +10,7 @@ import AuthOptions from '../common/AuthOptions/AuthOptions';
 import DividerText from '../../common/DividerText/DividerText';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const HostedAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -109,16 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
                                 variant="outlined"
                                 size="small"
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type="password"
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
-                                size="small"
                             />
                             <Grid container>
                                 <Button

frontend/src/component/user/PasswordAuth/PasswordAuth.jsx

@@ -16,6 +16,7 @@ import {
     LOGIN_EMAIL_ID,
 } from '../../../testIds';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const PasswordAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -111,22 +112,17 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
                                 value={username}
                                 error={!!usernameError}
                                 helperText={usernameError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_EMAIL_ID}
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type="password"
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_PASSWORD_ID}
                             />
                             <Button

frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx

@@ -1,5 +1,5 @@
 import { SyntheticEvent, useState } from 'react';
-import { Button, TextField, Typography } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';
 import { useCommonStyles } from '../../../../common.styles';
@@ -16,6 +16,7 @@ import {
     UNAUTHORIZED,
 } from '../../../../constants/statusCodes';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IEditProfileProps {
     setEditingProfile: React.Dispatch<React.SetStateAction<boolean>>;
@@ -54,7 +55,7 @@ const EditProfile = ({
                     credentials: 'include',
                 });
                 handleResponse(res);
-            } catch (e) {
+            } catch (e: any) {
                 setError(e);
             }
         }
@@ -112,27 +113,25 @@ const EditProfile = ({
                     callback={setValidPassword}
                     data-loading
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Password"
-                    type="password"
                     name="password"
                     value={password}
                     autoComplete="on"
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Confirm password"
-                    type="password"
                     name="confirmPassword"
                     value={confirmPassword}
                     autoComplete="on"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                 />
                 <PasswordMatcher
                     data-loading

frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,4 +1,4 @@
-import { Button, TextField } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import classnames from 'classnames';
 import {
     SyntheticEvent,
@@ -17,6 +17,7 @@ import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
 import { useStyles } from './ResetPasswordForm.styles';
 import { useCallback } from 'react';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IResetPasswordProps {
     token: string;
@@ -107,24 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                     styles.container
                 )}
             >
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type="password"
+                <PasswordField
                     placeholder="Password"
                     value={password || ''}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                     onFocus={() => setShowPasswordChecker(true)}
                     autoComplete="password"
                     data-loading
                 />
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type="password"
+                <PasswordField
                     value={confirmPassword || ''}
                     placeholder="Confirm password"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                     autoComplete="confirm-password"
                     data-loading
                 />