diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx new file mode 100644 index 0000000..f1e834b --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { PasswordHiddenText } from "@patternfly/ai-infra-ui-components"; + + +export const PasswordHiddenTextExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md new file mode 100644 index 0000000..179639c --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md @@ -0,0 +1,29 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: AI-infra-ui-components +# Sidenav secondary level section +# should be the same for all markdown files +id: PasswordInput +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['PasswordInput, PasswordHiddenText'] +--- + +import { PasswordInput, PasswordHiddenText } from "@patternfly/ai-infra-ui-components"; + +Note: these component document the API and enhance the [existing PasswordInput](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordInput.tsx) component and [existing PasswordHiddenText](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordHiddenText.tsx) components from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, they can be used within the odh-dashboard via the `~/components/PasswordInput` and `~/components/PasswordHiddenText` imports. + +### Password input example + +```js file="./PasswordInputExample.tsx" + +``` + +### Password hidden text example + +```js file="./PasswordHiddenTextExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx new file mode 100644 index 0000000..8815a53 --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { PasswordInput } from "@patternfly/ai-infra-ui-components"; + + +export const PasswordInputExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/src/PasswordInput/PasswordHiddenText.tsx b/packages/module/src/PasswordInput/PasswordHiddenText.tsx new file mode 100644 index 0000000..876dc1e --- /dev/null +++ b/packages/module/src/PasswordInput/PasswordHiddenText.tsx @@ -0,0 +1,43 @@ +import { Button, Flex, FlexItem, Content } from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; +import React from 'react'; + +export type PasswordHiddenTextProps = { + /** Read only password text to display */ + password: string; + /** Test id to pass to the view password toggle button */ + testId: string; +}; + +export const PasswordHiddenText: React.FunctionComponent = ({ + password, + testId +}: PasswordHiddenTextProps) => { + const [isHidden, setIsHidden] = React.useState(true); + + const passwordText = isHidden ? Array(password.length).fill('\u25CF').join('') : password; + + return ( + + + {passwordText} + + + + + + ); +}; + +export default PasswordHiddenText; \ No newline at end of file diff --git a/packages/module/src/PasswordInput/PasswordInput.tsx b/packages/module/src/PasswordInput/PasswordInput.tsx new file mode 100644 index 0000000..c9ff6ea --- /dev/null +++ b/packages/module/src/PasswordInput/PasswordInput.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { Button, InputGroup, TextInput, TextInputProps, InputGroupItem } from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; + +export type PasswordInputProps = TextInputProps & { + /** Aria label to display on the view password toggle while the password is hidden */ + ariaLabelShow?: string; + /** Aria label to display on the view password toggle while the password is visible */ + ariaLabelHide?: string; +}; + +export const PasswordInput: React.FunctionComponent = ({ + ariaLabelShow = 'Show password', + ariaLabelHide = 'Hide password', + ...props +}: PasswordInputProps) => { + const [isPasswordHidden, setPasswordHidden] = React.useState(true); + + return ( + + + + + + + + + ); +}; + +export default PasswordInput; \ No newline at end of file diff --git a/packages/module/src/PasswordInput/index.ts b/packages/module/src/PasswordInput/index.ts new file mode 100644 index 0000000..86cfa07 --- /dev/null +++ b/packages/module/src/PasswordInput/index.ts @@ -0,0 +1,2 @@ +export * from './PasswordInput'; +export * from './PasswordHiddenText'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index cd4a036..d7d3536 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -5,3 +5,4 @@ export * from './IndentSection'; export * from './K8sNameDescriptionField'; export * from './TruncatedText'; export * from './EmptyStateErrorMessage'; +export * from './PasswordInput' \ No newline at end of file