feat(ValidatedPasswordInput): Add ValidatedPasswordInput component (#87)

* feat(ValidatedPasswordInput): Add ValidatedPasswordInput component

* Fix deps

* Fix icon imports to make CI happy

package.json

@@ -39,6 +39,7 @@
     "@patternfly/react-core": "^4.157.3",
     "@patternfly/react-table": "^4.26.6",
     "@patternfly/react-tokens": "^4.11.2",
+    "@patternfly/react-icons": "^4.11.17",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",

src/components/StatusIcon/StatusIcon.tsx

@@ -8,7 +8,7 @@ import {
   QuestionCircleIcon,
   PauseCircleIcon,
 } from '@patternfly/react-icons';
-import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
+import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import {
   global_disabled_color_200 as disabledColor,
   global_success_color_100 as successColor,

src/components/ValidatedTextInput/ValidatedPasswordInput.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {
+  Button,
+  FormGroup,
+  FormGroupProps,
+  InputGroup,
+  TextInput,
+  TextInputProps,
+} from '@patternfly/react-core';
+import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
+import { IValidatedFormField, getFormGroupProps, getTextInputProps } from '../..';
+
+interface IValidatedPasswordInputProps
+  extends Pick<FormGroupProps, 'label' | 'fieldId' | 'isRequired'> {
+  /** A field returned from useFormField() or useFormState().fields. */
+  field: IValidatedFormField<string> | IValidatedFormField<string | undefined>;
+  /** Any extra props for the PatternFly FormGroup */
+  formGroupProps?: Partial<FormGroupProps>;
+  /** Any extra props for the PatternFly TextInput */
+  inputProps?: Partial<TextInputProps>;
+  showPasswordAriaLabel?: string;
+  hidePasswordAriaLabel?: string;
+}
+
+export const ValidatedPasswordInput: React.FunctionComponent<IValidatedPasswordInputProps> = ({
+  field,
+  label,
+  fieldId,
+  isRequired,
+  formGroupProps = {},
+  inputProps = {},
+  showPasswordAriaLabel = `Show ${label}`,
+  hidePasswordAriaLabel = `Hide ${label}`,
+}: IValidatedPasswordInputProps) => {
+  const [isValueVisible, toggleValueVisible] = React.useReducer((isVisible) => !isVisible, false);
+  return (
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={fieldId}
+      {...getFormGroupProps(field as IValidatedFormField<string | undefined>)}
+      {...formGroupProps}
+    >
+      <InputGroup>
+        <TextInput
+          id={fieldId}
+          type={isValueVisible ? 'text' : 'password'}
+          {...getTextInputProps(field)}
+          {...(inputProps as Partial<TextInputProps>)}
+        />
+        <Button
+          variant="control"
+          onClick={toggleValueVisible}
+          aria-label={isValueVisible ? hidePasswordAriaLabel : showPasswordAriaLabel}
+        >
+          {!isValueVisible ? <EyeIcon /> : <EyeSlashIcon />}
+        </Button>
+      </InputGroup>
+    </FormGroup>
+  );
+};

src/components/ValidatedTextInput/ValidatedTextInput.tsx

@@ -17,7 +17,7 @@ import {
 interface IValidatedTextInputProps
   extends Pick<FormGroupProps, 'label' | 'fieldId' | 'isRequired'>,
     Pick<TextInputProps, 'type'> {
-  /** A field returned from useFormField() or useFormState().fields.* */
+  /** A field returned from useFormField() or useFormState().fields. */
   field: IValidatedFormField<string> | IValidatedFormField<string | undefined>;
   /** Either a TextInput or TextArea from @patternfly/react-core. Defaults to TextInput */
   component?: typeof TextInput | typeof TextArea;

src/components/ValidatedTextInput/index.ts

@@ -1 +1,2 @@
 export * from './ValidatedTextInput';
+export * from './ValidatedPasswordInput';