wizard: create new component with add eyeIcon button inside textInput

this commit create new component with add eyeIcon button inside textInput, for password field
osbuild · Jan 9, 2025 · eb4f214 · eb4f214
1 parent b3a8597
commit eb4f214
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 3 deletions.
diff --git 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 (
+    <>
+      <InputGroup>
+        <InputGroupItem isFill>
+          <HookValidatedInput
+            isRequired
+            type={type}
+            ouiaId={ouiaId || ''}
+            data-testid={dataTestId}
+            aria-label={ariaLabel || ''}
+            value={value}
+            onChange={onChange!}
+            stepValidation={stepValidation}
+            ariaLabel={ariaLabel || ''}
+            fieldName={fieldName}
+            placeholder={placeholder || ''}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            onClick={togglePasswordVisibility}
+            aria-label={isPasswordVisible ? 'Show password' : 'Hide password'}
+          >
+            {isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
+          </Button>
+        </InputGroupItem>
+      </InputGroup>
+      {warning !== undefined && (
+        <HelperText>
+          <HelperTextItem variant="warning" hasIcon>
+            {warning}
+          </HelperTextItem>
+        </HelperText>
+      )}
+    </>
+  );
+};
+
 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
@@ -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<HTMLInputElement>,
@@ -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 = () => {
         />
       </FormGroup>
       <FormGroup isRequired label="Password">
-        <HookValidatedInput
+        <HookPasswordValidatedInput
+          type={isPasswordVisible ? 'text' : 'password'}
           ariaLabel="blueprint user password"
           value={userPassword || ''}
           onChange={(_e, value) => handlePasswordChange(_e, value)}
           placeholder="Enter password"
           stepValidation={stepValidation}
           fieldName="userPassword"
+          togglePasswordVisibility={togglePasswordVisibility}
+          isPasswordVisible={isPasswordVisible}
         />
       </FormGroup>
       <FormGroup isRequired label="SSH key">