From 34e6a3245e101c536524e1ff1e34cfd04743b48f Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Sun, 13 Feb 2022 13:40:25 -0500
Subject: [PATCH] feat(ValidatedPasswordInput): Add ValidatedPasswordInput
 component (#87)

* feat(ValidatedPasswordInput): Add ValidatedPasswordInput component

* Fix deps

* Fix icon imports to make CI happy
---
 package.json                                  |  1 +
 src/components/StatusIcon/StatusIcon.tsx      |  2 +-
 .../ValidatedPasswordInput.tsx                | 61 +++++++++++++++++++
 .../ValidatedTextInput/ValidatedTextInput.tsx |  2 +-
 src/components/ValidatedTextInput/index.ts    |  1 +
 5 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ValidatedTextInput/ValidatedPasswordInput.tsx

diff --git a/package.json b/package.json
index cd24993..a936527 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx
index 0b87e2f..bf1badb 100644
--- a/src/components/StatusIcon/StatusIcon.tsx
+++ b/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,
diff --git a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx
new file mode 100644
index 0000000..5eae84f
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/ValidatedTextInput/ValidatedTextInput.tsx b/src/components/ValidatedTextInput/ValidatedTextInput.tsx
index b431933..fddbd13 100644
--- a/src/components/ValidatedTextInput/ValidatedTextInput.tsx
+++ b/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;
diff --git a/src/components/ValidatedTextInput/index.ts b/src/components/ValidatedTextInput/index.ts
index eafba7d..7fd8775 100644
--- a/src/components/ValidatedTextInput/index.ts
+++ b/src/components/ValidatedTextInput/index.ts
@@ -1 +1,2 @@
 export * from './ValidatedTextInput';
+export * from './ValidatedPasswordInput';