Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +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 PropTypes from 'prop-types';
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 { modalStyles } from './util';
import Dialogue from '../../common/Dialogue/Dialogue';
@ -20,8 +27,17 @@ function ChangePassword({
const [data, setData] = useState({});
const [error, setError] = useState({});
const [validPassword, setValidPassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const commonStyles = useCommonStyles();
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const updateField = e => {
setError({});
setData({
@ -112,23 +128,63 @@ function ChangePassword({
<TextField
label="New password"
name="password"
type="password"
type={showPassword ? 'text' : 'password'}
value={data.password}
helperText={error.password}
onChange={updateField}
variant="outlined"
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
label="Confirm password"
name="confirm"
type="password"
type={showPassword ? 'text' : 'password'}
value={data.confirm}
error={error.confirm !== undefined}
helperText={error.confirm}
onChange={updateField}
variant="outlined"
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
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 classnames from 'classnames';
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 { useCommonStyles } from '../../../common.styles';
import { useStyles } from './HostedAuth.styles';
@ -19,11 +27,20 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
const params = useQueryParams();
const [username, setUsername] = useState(params.get('email') || '');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState({
usernameError: '',
passwordError: '',
});
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const handleSubmit = async evt => {
evt.preventDefault();
@ -113,12 +130,36 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
label="Password"
onChange={evt => setPassword(evt.target.value)}
name="password"
type="password"
type={showPassword ? 'text' : 'password'}
value={password}
error={!!passwordError}
helperText={passwordError}
variant="outlined"
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>
<Button

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

@ -1,7 +1,13 @@
import { useState } from 'react';
import classnames from 'classnames';
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 { useHistory } from 'react-router';
import { useCommonStyles } from '../../../common.styles';
@ -25,11 +31,20 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
const params = useQueryParams();
const [username, setUsername] = useState(params.get('email') || '');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState({
usernameError: '',
passwordError: '',
});
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = e => {
e.preventDefault();
};
const handleSubmit = async evt => {
evt.preventDefault();
@ -120,8 +135,30 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
label="Password"
onChange={evt => setPassword(evt.target.value)}
name="password"
type="password"
type={showPassword ? 'text' : '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}
helperText={passwordError}
variant="outlined"

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

@ -1,5 +1,6 @@
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 { useStyles } from './EditProfile.styles';
import { useCommonStyles } from '../../../../common.styles';
@ -33,8 +34,17 @@ const EditProfile = ({
const [error, setError] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const ref = useLoading(loading);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
const submit = async (e: SyntheticEvent) => {
e.preventDefault();
@ -54,7 +64,7 @@ const EditProfile = ({
credentials: 'include',
});
handleResponse(res);
} catch (e) {
} catch (e: any) {
setError(e);
}
}
@ -117,7 +127,27 @@ const EditProfile = ({
variant="outlined"
size="small"
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"
value={password}
autoComplete="on"
@ -128,7 +158,24 @@ const EditProfile = ({
variant="outlined"
size="small"
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"
value={confirmPassword}
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 {
SyntheticEvent,
@ -32,6 +38,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
const [confirmPassword, setConfirmPassword] = useState('');
const [matchingPasswords, setMatchingPasswords] = useState(false);
const [validOwaspPassword, setValidOwaspPassword] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const history = useHistory();
const submittable = matchingPasswords && validOwaspPassword;
@ -40,6 +47,14 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
setValidOwaspPassword,
]);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
useEffect(() => {
if (!password) {
setValidOwaspPassword(false);
@ -110,7 +125,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
<TextField
variant="outlined"
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"
value={password || ''}
onChange={e => setPassword(e.target.value)}
@ -121,7 +156,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
<TextField
variant="outlined"
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 || ''}
placeholder="Confirm password"
onChange={e => setConfirmPassword(e.target.value)}