From 319880fc0ba452a15ca2fff91945a6e2b3652d27 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Thu, 10 Apr 2025 10:45:21 +0200
Subject: [PATCH] Wizard: Add password placeholder for edit mode

This uses the `hasPassword` value to render a password placeholder in edit mode.

The placeholder will indicate to the user that a password is present, but will not allow to show the password.
---
 .../CreateImageWizard/steps/Users/components/UserInfo.tsx    | 1 +
 .../CreateImageWizard/utilities/PasswordValidatedInput.tsx   | 5 ++++-
 src/Components/CreateImageWizard/utilities/requestMapper.ts  | 1 +
 src/store/wizardSlice.ts                                     | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx
index a3d50d45..2cc9b778 100644
--- a/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx
+++ b/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx
@@ -172,6 +172,7 @@ const UserInfo = () => {
               ariaLabel="blueprint user password"
               placeholder="Enter password"
               onChange={(_e, value) => handlePasswordChange(_e, value)}
+              hasPassword={user.hasPassword}
             />
             <FormGroup label="SSH key" className="pf-v5-u-pb-md">
               <ValidatedInputAndTextArea
diff --git a/src/Components/CreateImageWizard/utilities/PasswordValidatedInput.tsx b/src/Components/CreateImageWizard/utilities/PasswordValidatedInput.tsx
index 8926e4b5..8ce226f2 100644
--- a/src/Components/CreateImageWizard/utilities/PasswordValidatedInput.tsx
+++ b/src/Components/CreateImageWizard/utilities/PasswordValidatedInput.tsx
@@ -23,6 +23,7 @@ type ValidatedPasswordInput = TextInputProps & {
   placeholder: string;
   ariaLabel: string;
   onChange: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
+  hasPassword: boolean;
 };
 
 export const PasswordValidatedInput = ({
@@ -30,6 +31,7 @@ export const PasswordValidatedInput = ({
   placeholder,
   ariaLabel,
   onChange,
+  hasPassword,
 }: ValidatedPasswordInput) => {
   const environments = useAppSelector(selectImageTypes);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -52,7 +54,7 @@ export const PasswordValidatedInput = ({
             <TextInput
               isRequired
               type={isPasswordVisible ? 'text' : 'password'}
-              value={value}
+              value={hasPassword ? '•'.repeat(8) : value}
               onChange={onChange}
               aria-label={ariaLabel}
               placeholder={placeholder}
@@ -63,6 +65,7 @@ export const PasswordValidatedInput = ({
               variant="control"
               onClick={togglePasswordVisibility}
               aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+              isDisabled={hasPassword}
             >
               {isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
             </Button>
diff --git a/src/Components/CreateImageWizard/utilities/requestMapper.ts b/src/Components/CreateImageWizard/utilities/requestMapper.ts
index 0f0b0a1a..1ce8ab9b 100644
--- a/src/Components/CreateImageWizard/utilities/requestMapper.ts
+++ b/src/Components/CreateImageWizard/utilities/requestMapper.ts
@@ -235,6 +235,7 @@ function commonRequestToState(
         ssh_key: user.ssh_key || '',
         groups: user.groups || [],
         isAdministrator: user.groups?.includes('wheel') || false,
+        hasPassword: user.hasPassword || false,
       })) || [],
     compliance:
       compliancePolicyID !== undefined
diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts
index 98247923..f43704e7 100644
--- a/src/store/wizardSlice.ts
+++ b/src/store/wizardSlice.ts
@@ -1017,6 +1017,7 @@ export const wizardSlice = createSlice({
         ssh_key: '',
         groups: [],
         isAdministrator: false,
+        hasPassword: false,
       };
 
       state.users.push(newUser);