wizard: create new component with add eyeIcon button inside textInput

this commit create new component with add eyeIcon button inside textInput,
for password field

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,53 @@ interface HookValidatedTextInputPropTypes extends TextInputProps {
   warning?: string;
 }
 
+export const HookPasswordValidatedInput = ({
+  ariaLabel,
+  dataTestId,
+  value,
+  ouiaId,
+  stepValidation,
+  fieldName,
+  onChange,
+  warning = undefined,
+    ...rest
+}: HookValidatedTextInputPropTypes) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  return (
+    <>
+      <InputGroup>
+        <InputGroupItem isFill>
+          <HookValidatedInput
+            type={isPasswordVisible ? 'text' : 'password'}
+            ouiaId={ouiaId || ''}
+            data-testid={dataTestId}
+            value={value}
+            onChange={onChange!}
+            stepValidation={stepValidation}
+            ariaLabel={ariaLabel || ''}
+            fieldName={fieldName}
+            {...rest}
+
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            onClick={togglePasswordVisibility}
+            aria-label={isPasswordVisible ? 'Show password' : 'Hide password'}
+          >
+            {isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
+          </Button>
+        </InputGroupItem>
+      </InputGroup>
+    </>
+  );
+};
+
 export const HookValidatedInput = ({
   dataTestId,
   ouiaId,

src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx

@@ -16,7 +16,10 @@ import {
   setUserAdministratorByIndex,
 } from '../../../../../store/wizardSlice';
 import { useUsersValidation } from '../../../utilities/useValidation';
-import { HookValidatedInput } from '../../../ValidatedTextInput';
+import {
+  HookPasswordValidatedInput,
+  HookValidatedInput,
+} from '../../../ValidatedTextInput';
 const UserInfo = () => {
   const dispatch = useAppDispatch();
   const index = 0;
@@ -74,7 +77,7 @@ const UserInfo = () => {
         />
       </FormGroup>
       <FormGroup isRequired label="Password">
-        <HookValidatedInput
+        <HookPasswordValidatedInput
           ariaLabel="blueprint user password"
           value={userPassword || ''}
           onChange={(_e, value) => handlePasswordChange(_e, value)}