diff --git a/src/Components/CreateImageWizard/ValidatedTextInput.tsx b/src/Components/CreateImageWizard/ValidatedTextInput.tsx index 607450349..9a30ffcff 100644 --- a/src/Components/CreateImageWizard/ValidatedTextInput.tsx +++ b/src/Components/CreateImageWizard/ValidatedTextInput.tsx @@ -5,7 +5,11 @@ import { HelperTextItem, TextInput, TextInputProps, + Button, + InputGroup, + InputGroupItem, } from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; import type { StepValidation } from './utilities/useValidation'; @@ -30,6 +34,65 @@ interface HookValidatedTextInputPropTypes extends TextInputProps { warning?: string; } +interface HookPasswordValidatedTextInputPropTypes + extends HookValidatedTextInputPropTypes { + isPasswordVisible?: boolean; + togglePasswordVisibility?: () => void; +} + +export const HookPasswordValidatedInput = ({ + ariaLabel, + placeholder, + dataTestId, + value, + ouiaId, + stepValidation, + fieldName, + onChange, + type = 'text', + isPasswordVisible, + togglePasswordVisibility, + warning = undefined, +}: HookPasswordValidatedTextInputPropTypes) => { + return ( + <> + + + + + + + + + {warning !== undefined && ( + + + {warning} + + + )} + + ); +}; + export const HookValidatedInput = ({ dataTestId, ouiaId, diff --git a/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx index 48b433cdc..42efc9d0f 100644 --- a/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx +++ b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Button, FormGroup } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; @@ -13,7 +13,10 @@ import { setUserPasswordByIndex, setUserSshKeyByIndex, } from '../../../../../store/wizardSlice'; -import { HookValidatedInput } from '../../../ValidatedTextInput'; +import { + HookPasswordValidatedInput, + HookValidatedInput, +} from '../../../ValidatedTextInput'; const UserInfo = () => { const dispatch = useAppDispatch(); const index = 0; @@ -23,6 +26,7 @@ const UserInfo = () => { const userPassword = useAppSelector(userPasswordSelector); const userSshKeySelector = selectUserSshKeyByIndex(index); const userSshKey = useAppSelector(userSshKeySelector); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); const handleNameChange = ( _e: React.FormEvent, @@ -45,6 +49,10 @@ const UserInfo = () => { dispatch(setUserSshKeyByIndex({ index: index, sshKey: value })); }; + const togglePasswordVisibility = () => { + setIsPasswordVisible(!isPasswordVisible); + }; + const stepValidation = { errors: {}, disabledNext: false, @@ -63,13 +71,16 @@ const UserInfo = () => { /> - handlePasswordChange(_e, value)} placeholder="Enter password" stepValidation={stepValidation} fieldName="userPassword" + togglePasswordVisibility={togglePasswordVisibility} + isPasswordVisible={isPasswordVisible} />