Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01:00
Code Issues Projects Releases Wiki Activity

feat: add show password for all passwords input

Browse Source
This commit is contained in:
Youssef 2021-12-30 10:57:35 +01:00
parent dde140c0d1
commit 4b703bb4cc
5 changed files with 250 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/component/admin/users/change-password-component.jsx
View File

@ -1,7 +1,14 @@
import { useState } from 'react'; import { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { TextField, Typography, Avatar } from '@material-ui/core'; import {
TextField,
Typography,
Avatar,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { trim } from '../../common/util'; import { trim } from '../../common/util';
import { modalStyles } from './util'; import { modalStyles } from './util';
import Dialogue from '../../common/Dialogue/Dialogue'; import Dialogue from '../../common/Dialogue/Dialogue';
@ -20,8 +27,17 @@ function ChangePassword({
const [data, setData] = useState({}); const [data, setData] = useState({});
const [error, setError] = useState({}); const [error, setError] = useState({});
const [validPassword, setValidPassword] = useState(false); const [validPassword, setValidPassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const commonStyles = useCommonStyles(); const commonStyles = useCommonStyles();
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const updateField = e => { const updateField = e => {
setError({}); setError({});
setData({ setData({
@ -112,23 +128,63 @@ function ChangePassword({
<TextField <TextField
label="New password" label="New password"
name="password" name="password"
type="password" type={showPassword ? 'text' : 'password'}
value={data.password} value={data.password}
helperText={error.password} helperText={error.password}
onChange={updateField} onChange={updateField}
variant="outlined" variant="outlined"
size="small" size="small"
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
/> />
<TextField <TextField
label="Confirm password" label="Confirm password"
name="confirm" name="confirm"
type="password" type={showPassword ? 'text' : 'password'}
value={data.confirm} value={data.confirm}
error={error.confirm !== undefined} error={error.confirm !== undefined}
helperText={error.confirm} helperText={error.confirm}
onChange={updateField} onChange={updateField}
variant="outlined" variant="outlined"
size="small" size="small"
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
/> />
<PasswordMatcher <PasswordMatcher
started={data.password && data.confirm} started={data.password && data.confirm}

45
frontend/src/component/user/HostedAuth/HostedAuth.jsx
View File

@ -1,7 +1,15 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, Grid, TextField, Typography } from '@material-ui/core'; import {
Button,
Grid,
TextField,
Typography,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useCommonStyles } from '../../../common.styles'; import { useCommonStyles } from '../../../common.styles';
import { useStyles } from './HostedAuth.styles'; import { useStyles } from './HostedAuth.styles';
@ -19,11 +27,20 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
const params = useQueryParams(); const params = useQueryParams();
const [username, setUsername] = useState(params.get('email') || ''); const [username, setUsername] = useState(params.get('email') || '');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState({ const [errors, setErrors] = useState({
usernameError: '', usernameError: '',
passwordError: '', passwordError: '',
}); });
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const handleSubmit = async evt => { const handleSubmit = async evt => {
evt.preventDefault(); evt.preventDefault();
@ -113,12 +130,36 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
label="Password" label="Password"
onChange={evt => setPassword(evt.target.value)} onChange={evt => setPassword(evt.target.value)}
name="password" name="password"
type="password" type={showPassword ? 'text' : 'password'}
value={password} value={password}
error={!!passwordError} error={!!passwordError}
helperText={passwordError} helperText={passwordError}
variant="outlined" variant="outlined"
size="small" size="small"
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={
handleClickShowPassword
}
onMouseDown={
handleMouseDownPassword
}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
/> />
<Grid container> <Grid container>
<Button <Button

41
frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
View File

@ -1,7 +1,13 @@
import { useState } from 'react'; import { useState } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, TextField } from '@material-ui/core'; import {
Button,
TextField,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import ConditionallyRender from '../../common/ConditionallyRender'; import ConditionallyRender from '../../common/ConditionallyRender';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useCommonStyles } from '../../../common.styles'; import { useCommonStyles } from '../../../common.styles';
@ -25,11 +31,20 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
const params = useQueryParams(); const params = useQueryParams();
const [username, setUsername] = useState(params.get('email') || ''); const [username, setUsername] = useState(params.get('email') || '');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState({ const [errors, setErrors] = useState({
usernameError: '', usernameError: '',
passwordError: '', passwordError: '',
}); });
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const handleSubmit = async evt => { const handleSubmit = async evt => {
evt.preventDefault(); evt.preventDefault();
@ -120,8 +135,30 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
label="Password" label="Password"
onChange={evt => setPassword(evt.target.value)} onChange={evt => setPassword(evt.target.value)}
name="password" name="password"
type="password" type={showPassword ? 'text' : 'password'}
value={password} value={password}
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end" className={commonStyles.adornedEnd}>
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={
handleMouseDownPassword
}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
)
}}
error={!!passwordError} error={!!passwordError}
helperText={passwordError} helperText={passwordError}
variant="outlined" variant="outlined"

55
frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
View File

@ -1,5 +1,6 @@
import { SyntheticEvent, useState } from 'react'; import { SyntheticEvent, useState } from 'react';
import { Button, TextField, Typography } from '@material-ui/core'; import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import classnames from 'classnames'; import classnames from 'classnames';
import { useStyles } from './EditProfile.styles'; import { useStyles } from './EditProfile.styles';
import { useCommonStyles } from '../../../../common.styles'; import { useCommonStyles } from '../../../../common.styles';
@ -33,8 +34,17 @@ const EditProfile = ({
const [error, setError] = useState(''); const [error, setError] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const ref = useLoading(loading); const ref = useLoading(loading);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
const submit = async (e: SyntheticEvent) => { const submit = async (e: SyntheticEvent) => {
e.preventDefault(); e.preventDefault();
@ -54,7 +64,7 @@ const EditProfile = ({
credentials: 'include', credentials: 'include',
}); });
handleResponse(res); handleResponse(res);
} catch (e) { } catch (e: any) {
setError(e); setError(e);
} }
} }
@ -117,7 +127,27 @@ const EditProfile = ({
variant="outlined" variant="outlined"
size="small" size="small"
label="Password" label="Password"
type="password" type={showPassword ? 'text' : 'password'}
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
name="password" name="password"
value={password} value={password}
autoComplete="on" autoComplete="on"
@ -128,7 +158,24 @@ const EditProfile = ({
variant="outlined" variant="outlined"
size="small" size="small"
label="Confirm password" label="Confirm password"
type="password" type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
name="confirmPassword" name="confirmPassword"
value={confirmPassword} value={confirmPassword}
autoComplete="on" autoComplete="on"

61
frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
View File

@ -1,4 +1,10 @@
import { Button, TextField } from '@material-ui/core'; import {
Button,
TextField,
IconButton,
InputAdornment,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import classnames from 'classnames'; import classnames from 'classnames';
import { import {
SyntheticEvent, SyntheticEvent,
@ -32,6 +38,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [matchingPasswords, setMatchingPasswords] = useState(false); const [matchingPasswords, setMatchingPasswords] = useState(false);
const [validOwaspPassword, setValidOwaspPassword] = useState(false); const [validOwaspPassword, setValidOwaspPassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const history = useHistory(); const history = useHistory();
const submittable = matchingPasswords && validOwaspPassword; const submittable = matchingPasswords && validOwaspPassword;
@ -40,6 +47,14 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
setValidOwaspPassword, setValidOwaspPassword,
]); ]);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
useEffect(() => { useEffect(() => {
if (!password) { if (!password) {
setValidOwaspPassword(false); setValidOwaspPassword(false);
@ -110,7 +125,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
<TextField <TextField
variant="outlined" variant="outlined"
size="small" size="small"
type="password" type={showPassword ? 'text' : 'password'}
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
placeholder="Password" placeholder="Password"
value={password || ''} value={password || ''}
onChange={e => setPassword(e.target.value)} onChange={e => setPassword(e.target.value)}
@ -121,7 +156,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
<TextField <TextField
variant="outlined" variant="outlined"
size="small" size="small"
type="password" type={showPassword ? 'text' : 'password'}
InputProps={{
style:{
paddingRight: 0
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
),
}}
value={confirmPassword || ''} value={confirmPassword || ''}
placeholder="Confirm password" placeholder="Confirm password"
onChange={e => setConfirmPassword(e.target.value)} onChange={e => setConfirmPassword(e.target.value)}