Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: create password field component

Browse Source
This commit is contained in:
Youssef 2022-01-04 13:30:25 +01:00
parent 4b703bb4cc
commit 3639b7f403
6 changed files with 75 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,7 @@
import { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
TextField,
Typography,
Avatar,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { Typography, Avatar } from '@material-ui/core';
import { trim } from '../../common/util';
import { modalStyles } from './util';
import Dialogue from '../../common/Dialogue/Dialogue';
@ -17,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,
@ -27,17 +21,8 @@ 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({
@ -125,66 +110,20 @@ function ChangePassword({
/>
<p style={{ color: 'red' }}>{error.general}</p>
<TextField
<PasswordField
label="New password"
name="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
<PasswordField
label="Confirm password"
name="confirm"
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}

44
frontend/src/component/common/PasswordField/PasswordField.tsx Normal file
View File

@ -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;

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

@ -1,15 +1,7 @@
import React, { useState } from 'react';
import { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import {
Button,
Grid,
TextField,
Typography,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { Button, Grid, TextField, Typography } from '@material-ui/core';
import { useHistory } from 'react-router';
import { useCommonStyles } from '../../../common.styles';
import { useStyles } from './HostedAuth.styles';
@ -18,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();
@ -27,20 +20,11 @@ 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();
@ -126,40 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
variant="outlined"
size="small"
/>
<TextField
<PasswordField
label="Password"
onChange={evt => setPassword(evt.target.value)}
name="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

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

@ -1,13 +1,7 @@
import { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import {
Button,
TextField,
InputAdornment,
IconButton,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { Button, TextField } from '@material-ui/core';
import ConditionallyRender from '../../common/ConditionallyRender';
import { useHistory } from 'react-router';
import { useCommonStyles } from '../../../common.styles';
@ -22,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();
@ -31,20 +26,11 @@ 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();
@ -126,44 +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={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"
autoComplete="true"
size="small"
data-test={LOGIN_PASSWORD_ID}
/>
<Button

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

@ -1,6 +1,5 @@
import { SyntheticEvent, useState } from 'react';
import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { Button, Typography } from '@material-ui/core';
import classnames from 'classnames';
import { useStyles } from './EditProfile.styles';
import { useCommonStyles } from '../../../../common.styles';
@ -17,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>>;
@ -34,17 +34,8 @@ 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();
@ -122,64 +113,25 @@ const EditProfile = ({
callback={setValidPassword}
data-loading
/>
<TextField
<PasswordField
data-loading
variant="outlined"
size="small"
label="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"
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={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"
onChange={e => setConfirmPassword(e.target.value)}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
/>
<PasswordMatcher
data-loading

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

@ -1,10 +1,4 @@
import {
Button,
TextField,
IconButton,
InputAdornment,
} from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
import { Button } from '@material-ui/core';
import classnames from 'classnames';
import {
SyntheticEvent,
@ -23,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;
@ -38,7 +33,6 @@ 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;
@ -47,14 +41,6 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
setValidOwaspPassword,
]);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
useEffect(() => {
if (!password) {
setValidOwaspPassword(false);
@ -122,64 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
styles.container
)}
>
<TextField
variant="outlined"
size="small"
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>
),
}}
<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={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>
),
}}
<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
/>