Skip to content

Commit

Permalink
feat: Add show, hide button for password type text fields (#84)
Browse files Browse the repository at this point in the history 
Jira: EPMDPEDP-12814
Related: #84
Change-Id: I8637d15b4c1587a54113d4e5f5f36544f50521ae
  • Loading branch information
@callmevladik
callmevladik committed Oct 30, 2023
1 parent eabebb6 commit 365446a
Show file tree
Hide file tree
Showing 17 changed files with 325 additions and 52 deletions.
2 changes: 2 additions & 0 deletions src/icons/iconify-icons-mapping.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,6 @@ export enum ICONS {
FIT_TO_SCREEN = 'material-symbols:pan-zoom-rounded',
ZOOM_OUT_MAP = 'material-symbols:zoom-out-map',
CALENDAR = 'mdi:calendar',
EYE = 'mdi:eye-outline',
CROSSED_EYE = 'mdi:eye-off-outline',
}
65 changes: 42 additions & 23 deletions src/providers/Form/components/FormTextField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,49 @@ export const FormTextField = React.forwardRef(
}: FormTextFieldProps,
ref: React.RefObject<HTMLInputElement>
) => {
const { type } = TextFieldProps || { type: 'text' };
const [_partiallyDisabled, setPartiallyDisabled] = React.useState(partiallyDisabled);
const hasError = !!errors[name];
const [_type, setType] = React.useState(type);

const handleToggleType = () => {
setType(prev => (prev === 'text' ? 'password' : 'text'));
};

const _InputProps = React.useMemo(
() => ({
...InputProps,
...(_partiallyDisabled
? {
endAdornment: (
<InputAdornment position="end">
<IconButton
size={'small'}
onClick={() => setPartiallyDisabled(false)}
>
<Icon icon={ICONS.PENCIL} />
</IconButton>
</InputAdornment>
),
}
: {}),
...(type === 'password'
? {
endAdornment: (
<InputAdornment position="end">
<IconButton size={'small'} onClick={handleToggleType}>
<Icon
icon={_type === 'text' ? ICONS.EYE : ICONS.CROSSED_EYE}
/>
</IconButton>
</InputAdornment>
),
}
: {}),
type: _type,
}),
[InputProps, _partiallyDisabled, _type, type]
);

return (
<Grid container spacing={1}>
Expand All @@ -56,29 +97,7 @@ export const FormTextField = React.forwardRef(
placeholder={placeholder}
inputRef={ref}
disabled={disabled || _partiallyDisabled}
InputProps={{
...InputProps,
...(_partiallyDisabled
? {
endAdornment: (
<InputAdornment position="end">
<IconButton
size={'small'}
onClick={() =>
setPartiallyDisabled(
false
)
}
>
<Icon
icon={ICONS.PENCIL}
/>
</IconButton>
</InputAdornment>
),
}
: {}),
}}
InputProps={_InputProps}
{...TextFieldProps}
{...field}
/>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageClusterSecret/__snapshots__/index.create.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,16 +181,34 @@ exports[`renders ManageClusterSecret Create component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="clusterToken"
placeholder="Enter cluster token"
type="password"
value=""
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageClusterSecret/__snapshots__/index.edit.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,16 +181,34 @@ exports[`renders ManageClusterSecret Edit component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="clusterToken"
placeholder="Enter cluster token"
type="password"
value="test-cluster-token"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/ManageClusterSecret/components/fields/ClusterToken/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const ClusterToken = () => {
placeholder={'Enter cluster token'}
control={control}
errors={errors}
InputProps={{
TextFieldProps={{
type: 'password',
}}
/>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageDefectDojoIntegrationSecret/__snapshots__/index.create.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageDefectDojoIntegrationSecret Create component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="token"
placeholder="Enter token"
type="password"
value=""
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageDefectDojoIntegrationSecret/__snapshots__/index.edit.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageDefectDojoIntegrationSecret Edit component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="token"
placeholder="Enter token"
type="password"
value="test-token"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageDependencyTrackIntegrationSecret/__snapshots__/index.create.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageDependencyTrackIntegrationSecret Create component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="token"
placeholder="Enter token"
type="password"
value=""
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageDependencyTrackIntegrationSecret/__snapshots__/index.edit.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageDependencyTrackIntegrationSecret Edit component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="token"
placeholder="Enter token"
type="password"
value="test-token"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageJiraIntegrationSecret/__snapshots__/index.create.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageJiraIntegrationSecret Create component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="password"
placeholder="Enter password"
type="password"
value=""
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/widgets/ManageJiraIntegrationSecret/__snapshots__/index.edit.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,34 @@ exports[`renders ManageJiraIntegrationSecret Edit component 1`] = `
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
name="password"
placeholder="Enter password"
type="password"
value="test-password"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<span />
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 365446a

Please sign in to comment.