Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +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 { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { import { Typography, Avatar } from '@material-ui/core';
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';
@ -17,6 +10,7 @@ import { useCommonStyles } from '../../../common.styles';
import PasswordMatcher from '../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher'; import PasswordMatcher from '../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
import ConditionallyRender from '../../common/ConditionallyRender'; import ConditionallyRender from '../../common/ConditionallyRender';
import { Alert } from '@material-ui/lab'; import { Alert } from '@material-ui/lab';
import PasswordField from '../../common/PasswordField/PasswordField';
function ChangePassword({ function ChangePassword({
showDialog, showDialog,
@ -27,17 +21,8 @@ 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({
@ -125,66 +110,20 @@ function ChangePassword({
/> />
<p style={{ color: 'red' }}>{error.general}</p> <p style={{ color: 'red' }}>{error.general}</p>
<TextField <PasswordField
label="New password" label="New password"
name="password" name="password"
type={showPassword ? 'text' : 'password'}
value={data.password} value={data.password}
helperText={error.password} helperText={error.password}
onChange={updateField} 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" label="Confirm password"
name="confirm" name="confirm"
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"
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}

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 classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import { Button, Grid, TextField, Typography } from '@material-ui/core';
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';
@ -18,6 +10,7 @@ import AuthOptions from '../common/AuthOptions/AuthOptions';
import DividerText from '../../common/DividerText/DividerText'; import DividerText from '../../common/DividerText/DividerText';
import ConditionallyRender from '../../common/ConditionallyRender'; import ConditionallyRender from '../../common/ConditionallyRender';
import useUser from '../../../hooks/api/getters/useUser/useUser'; import useUser from '../../../hooks/api/getters/useUser/useUser';
import PasswordField from '../../common/PasswordField/PasswordField';
const HostedAuth = ({ authDetails, passwordLogin }) => { const HostedAuth = ({ authDetails, passwordLogin }) => {
const commonStyles = useCommonStyles(); const commonStyles = useCommonStyles();
@ -27,20 +20,11 @@ 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();
@ -126,40 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
variant="outlined" variant="outlined"
size="small" size="small"
/> />
<TextField <PasswordField
label="Password" label="Password"
onChange={evt => setPassword(evt.target.value)} onChange={evt => setPassword(evt.target.value)}
name="password" name="password"
type={showPassword ? 'text' : 'password'}
value={password} value={password}
error={!!passwordError} error={!!passwordError}
helperText={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> <Grid container>
<Button <Button

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

@ -1,13 +1,7 @@
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 { import { Button, TextField } from '@material-ui/core';
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';
@ -22,6 +16,7 @@ import {
LOGIN_EMAIL_ID, LOGIN_EMAIL_ID,
} from '../../../testIds'; } from '../../../testIds';
import useUser from '../../../hooks/api/getters/useUser/useUser'; import useUser from '../../../hooks/api/getters/useUser/useUser';
import PasswordField from '../../common/PasswordField/PasswordField';
const PasswordAuth = ({ authDetails, passwordLogin }) => { const PasswordAuth = ({ authDetails, passwordLogin }) => {
const commonStyles = useCommonStyles(); const commonStyles = useCommonStyles();
@ -31,20 +26,11 @@ 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();
@ -126,44 +112,17 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
value={username} value={username}
error={!!usernameError} error={!!usernameError}
helperText={usernameError} helperText={usernameError}
variant="outlined"
autoComplete="true" autoComplete="true"
size="small"
data-test={LOGIN_EMAIL_ID} data-test={LOGIN_EMAIL_ID}
/> />
<TextField <PasswordField
label="Password" label="Password"
onChange={evt => setPassword(evt.target.value)} onChange={evt => setPassword(evt.target.value)}
name="password" name="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"
autoComplete="true" autoComplete="true"
size="small"
data-test={LOGIN_PASSWORD_ID} data-test={LOGIN_PASSWORD_ID}
/> />
<Button <Button

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

@ -1,6 +1,5 @@
import { SyntheticEvent, useState } from 'react'; import { SyntheticEvent, useState } from 'react';
import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core'; import { Button, Typography } 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';
@ -17,6 +16,7 @@ import {
UNAUTHORIZED, UNAUTHORIZED,
} from '../../../../constants/statusCodes'; } from '../../../../constants/statusCodes';
import { formatApiPath } from '../../../../utils/format-path'; import { formatApiPath } from '../../../../utils/format-path';
import PasswordField from '../../../common/PasswordField/PasswordField';
interface IEditProfileProps { interface IEditProfileProps {
setEditingProfile: React.Dispatch<React.SetStateAction<boolean>>; setEditingProfile: React.Dispatch<React.SetStateAction<boolean>>;
@ -34,17 +34,8 @@ 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();
@ -122,64 +113,25 @@ const EditProfile = ({
callback={setValidPassword} callback={setValidPassword}
data-loading data-loading
/> />
<TextField <PasswordField
data-loading data-loading
variant="outlined"
size="small"
label="Password" 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" name="password"
value={password} value={password}
autoComplete="on" autoComplete="on"
onChange={e => setPassword(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setPassword(e.target.value)
}
/> />
<TextField <PasswordField
data-loading data-loading
variant="outlined"
size="small"
label="Confirm password" 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" name="confirmPassword"
value={confirmPassword} value={confirmPassword}
autoComplete="on" autoComplete="on"
onChange={e => setConfirmPassword(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
/> />
<PasswordMatcher <PasswordMatcher
data-loading data-loading

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

@ -1,10 +1,4 @@
import { import { Button } from '@material-ui/core';
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,
@ -23,6 +17,7 @@ import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
import { useStyles } from './ResetPasswordForm.styles'; import { useStyles } from './ResetPasswordForm.styles';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { formatApiPath } from '../../../../utils/format-path'; import { formatApiPath } from '../../../../utils/format-path';
import PasswordField from '../../../common/PasswordField/PasswordField';
interface IResetPasswordProps { interface IResetPasswordProps {
token: string; token: string;
@ -38,7 +33,6 @@ 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;
@ -47,14 +41,6 @@ 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);
@ -122,64 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
styles.container styles.container
)} )}
> >
<TextField <PasswordField
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>
),
}}
placeholder="Password" placeholder="Password"
value={password || ''} value={password || ''}
onChange={e => setPassword(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setPassword(e.target.value)
}
onFocus={() => setShowPasswordChecker(true)} onFocus={() => setShowPasswordChecker(true)}
autoComplete="password" autoComplete="password"
data-loading data-loading
/> />
<TextField <PasswordField
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>
),
}}
value={confirmPassword || ''} value={confirmPassword || ''}
placeholder="Confirm password" placeholder="Confirm password"
onChange={e => setConfirmPassword(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
autoComplete="confirm-password" autoComplete="confirm-password"
data-loading data-loading
/> />