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}
/>