MINOR: Re-supported password input for service forms (#15964)

* re-supported password input and value hidden on asterisks basis

* supported test

* check the entire string value for showing it in the input

* added test
This commit is contained in:
Ashish Gupta 2024-04-27 14:10:51 +05:30 committed by GitHub
parent 09d8894576
commit 26db024379
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 34 additions and 5 deletions

View File

@ -90,7 +90,25 @@ describe('Test PasswordWidget Component', () => {
fireEvent.change(passwordInput, { target: { value: 'password' } });
expect(mockOnChange).toHaveBeenCalled();
expect(mockOnChange).toHaveBeenCalledWith('password');
});
it('Should call onChange with asterisk', async () => {
render(<PasswordWidget {...mockProps} />);
const passwordInput = screen.getByTestId('password-input-widget');
fireEvent.change(passwordInput, { target: { value: '*******' } });
expect(mockOnChange).toHaveBeenCalledWith('*******');
});
it('Should not show password if the value is masked', async () => {
render(<PasswordWidget {...mockProps} />);
const passwordInput = screen.getByTestId('password-input-widget');
expect(passwordInput).toHaveValue('');
});
it('Should render FileWidget component if uiFieldType is file', async () => {

View File

@ -12,10 +12,19 @@
*/
import { WidgetProps } from '@rjsf/utils';
import { Input } from 'antd';
import React, { FC } from 'react';
import React, { FC, useMemo } from 'react';
import { ALL_ASTERISKS_REGEX } from '../../../../../constants/regex.constants';
import FileUploadWidget from './FileUploadWidget';
const PasswordWidget: FC<WidgetProps> = (props) => {
const passwordWidgetValue = useMemo(() => {
if (ALL_ASTERISKS_REGEX.test(props.value)) {
return undefined; // Do not show the password if it is masked
} else {
return props.value;
}
}, [props.value]);
if (props.schema.uiFieldType === 'file') {
return <FileUploadWidget {...props} />;
}
@ -23,7 +32,7 @@ const PasswordWidget: FC<WidgetProps> = (props) => {
const { onFocus, onBlur, onChange, ...rest } = props;
return (
<Input
<Input.Password
autoComplete="off"
autoFocus={rest.autofocus}
data-testid="password-input-widget"
@ -33,7 +42,7 @@ const PasswordWidget: FC<WidgetProps> = (props) => {
placeholder={rest.placeholder}
readOnly={rest.readonly}
required={rest.required}
value={rest.value}
value={passwordWidgetValue}
onBlur={() => onBlur(rest.id, rest.value)}
onChange={(e) => onChange(e.target.value)}
onFocus={() => onFocus(rest.id, rest.value)}

View File

@ -52,3 +52,5 @@ export const HEX_COLOR_CODE_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
export const TASK_SANITIZE_VALUE_REGEX = /^"|"$/g;
export const TIMESTAMP_UNIX_IN_MILLISECONDS_REGEX = /^\d{13}$/;
export const ALL_ASTERISKS_REGEX = /^\*+$/;

View File

@ -32,7 +32,7 @@ export const MOCK_PASSWORD_WIDGET = {
formate: 'password',
},
uiSchema: {},
value: 'testing',
value: '******',
};
export const MOCK_SSL_FILE_CONTENT = `-----BEGIN CERTIFICATE-----MIIDrzCCApegAwIBAgIQCDvgVpBCRrGhdWrJWZHHSjANBgkqhkiG9w04=-----END CERTIFICATE-----`;