From a8be4ecbdd0730facf9dff8b8ad9857584842ea3 Mon Sep 17 00:00:00 2001
From: Michal Gold <mgold@redhat.com>
Date: Sun, 10 Nov 2024 11:23:02 +0200
Subject: [PATCH] wizard: add user information step (HMS-4903)

This commit introduces the user information step with the following fields:
(*) `userName` field with validation according to Red Hat guidelines: https://access.redhat.com/solutions/30164
(*) `password` field with validation using the pam_pwquality module, which enforces strict password policies for Linux systems.
This module enhances security by enforcing minimum length, complexity, and avoiding weak passwords.
  More info: https://access.redhat.com/solutions/6979714
Validation is configured based on the requirements defined for our systems:
  https://github.com/osbuild/osbuild-composer/tree/main/test/data/manifests
  https://github.com/osbuild/images/pkg/distro/rhel/rhel10
(*) `confirm password` field that check if confirm password equal to password
(*) `ssh key` field - implement the same validation as we have in edge.
(*) <wip> unit tests- in progress because I want to make sure that all new fields are in a good shape.
(*) <wip> - user validation will be done in a following pr.
---
 .../CreateImageWizard/CreateImageWizard.tsx   |   1 -
 .../CreateImageWizard/ValidatedTextInput.tsx  | 200 +++++++++++++++---
 .../steps/Users/component/Empty.tsx           |   9 +-
 .../steps/Users/component/UserInfo.tsx        | 183 ++++++++++++++++
 .../CreateImageWizard/steps/Users/index.tsx   |   8 +-
 .../utilities/requestMapper.ts                |  37 +++-
 .../CreateImageWizard/validators.ts           |  32 +++
 src/store/wizardSlice.ts                      | 110 ++++++++++
 .../steps/Users/Users.test.tsx                | 107 ++++++++++
 9 files changed, 658 insertions(+), 29 deletions(-)
 create mode 100644 src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx
 create mode 100644 src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
index f1c5b38d5..5f2f6ec4c 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.tsx
+++ b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -225,7 +225,6 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const firstBootValidation = useFirstBootValidation();
   // Details
   const detailsValidation = useDetailsValidation();
-
   let startIndex = 1; // default index
   if (isEdit) {
     startIndex = 20;
diff --git a/src/Components/CreateImageWizard/ValidatedTextInput.tsx b/src/Components/CreateImageWizard/ValidatedTextInput.tsx
index 607450349..ea24d6035 100644
--- a/src/Components/CreateImageWizard/ValidatedTextInput.tsx
+++ b/src/Components/CreateImageWizard/ValidatedTextInput.tsx
@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 
 import {
   HelperText,
   HelperTextItem,
   TextInput,
   TextInputProps,
+  Button,
+  TextAreaProps,
+  TextArea,
 } from '@patternfly/react-core';
+import { EyeSlashIcon, EyeIcon } from '@patternfly/react-icons';
 
 import type { StepValidation } from './utilities/useValidation';
 
@@ -30,6 +34,62 @@ interface HookValidatedTextInputPropTypes extends TextInputProps {
   warning?: string;
 }
 
+interface HookValidatedTextAreaPropTypes extends TextAreaProps {
+  dataTestId?: string | undefined;
+  ariaLabel: string | undefined;
+  value: string;
+  placeholder?: string;
+  stepValidation: StepValidation;
+  fieldName: string;
+  isEmpty: boolean;
+}
+
+interface HookValidatedTextInputWithButtonPropTypes
+  extends HookValidatedTextInputPropTypes {
+  togglePasswordVisibility: () => void;
+  isPasswordVisible: boolean;
+  isEmpty: boolean;
+}
+
+const getValidationState = (
+  value: string,
+  stepValidation: StepValidation,
+  fieldName: string,
+  isPristine: boolean,
+  isEmpty?: boolean
+): 'default' | 'error' | 'success' => {
+  if (isEmpty) return 'default';
+  if (isPristine) return 'default';
+  if (stepValidation.errors[fieldName] === 'default') return 'default';
+  return stepValidation.errors[fieldName] ? 'error' : 'success';
+};
+
+const ErrorHelperText = ({
+  errorMessage,
+}: {
+  errorMessage?: string | undefined;
+}) => {
+  if (!errorMessage) return null;
+
+  return (
+    <HelperText>
+      <HelperTextItem variant="error" hasIcon>
+        {errorMessage}
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const usePristineState = (initialValue: string) => {
+  const [isPristine, setIsPristine] = useState(!initialValue);
+
+  const handleBlur = () => {
+    setIsPristine(false);
+  };
+
+  return { isPristine, handleBlur };
+};
+
 export const HookValidatedInput = ({
   dataTestId,
   ouiaId,
@@ -43,20 +103,21 @@ export const HookValidatedInput = ({
   type = 'text',
   warning = undefined,
 }: HookValidatedTextInputPropTypes) => {
-  const [isPristine, setIsPristine] = useState(!value ? true : false);
+  const { isPristine, handleBlur } = usePristineState(value);
   // Do not surface validation on pristine state components
   // Allow step validation to be set on pristine state, when needed
-  const validated = isPristine
-    ? 'default'
-    : stepValidation.errors[fieldName] === 'default'
-    ? 'default'
-    : stepValidation.errors[fieldName]
-    ? 'error'
-    : 'success';
 
-  const handleBlur = () => {
-    setIsPristine(false);
-  };
+  const errorMessage =
+    !isPristine && stepValidation.errors[fieldName]
+      ? stepValidation.errors[fieldName]
+      : undefined;
+
+  const validationState = getValidationState(
+    value,
+    stepValidation,
+    fieldName,
+    isPristine
+  );
 
   return (
     <>
@@ -66,19 +127,13 @@ export const HookValidatedInput = ({
         ouiaId={ouiaId || ''}
         type={type}
         onChange={onChange!}
-        validated={validated}
+        validated={validationState}
         aria-label={ariaLabel || ''}
         onBlur={handleBlur}
         placeholder={placeholder || ''}
         isDisabled={isDisabled || false}
       />
-      {validated === 'error' && (
-        <HelperText>
-          <HelperTextItem variant="error" hasIcon>
-            {stepValidation.errors[fieldName]}
-          </HelperTextItem>
-        </HelperText>
-      )}
+      <ErrorHelperText errorMessage={errorMessage} />
       {warning !== undefined && (
         <HelperText>
           <HelperTextItem variant="warning" hasIcon>
@@ -90,6 +145,57 @@ export const HookValidatedInput = ({
   );
 };
 
+export const HookValidatedInputWithPasswordVisibilityButton = (
+  props: HookValidatedTextInputWithButtonPropTypes
+) => {
+  const { togglePasswordVisibility, isPasswordVisible, ...restProps } = props;
+  const { isPristine, handleBlur } = usePristineState(restProps.value);
+
+  const errorMessage =
+    !isPristine && restProps.stepValidation.errors[restProps.fieldName]
+      ? restProps.stepValidation.errors[restProps.fieldName]
+      : undefined;
+
+  const validationState = getValidationState(
+    restProps.value,
+    restProps.stepValidation,
+    restProps.fieldName,
+    isPristine
+  );
+  return (
+    <>
+      <div
+        style={{ position: 'relative', display: 'flex', alignItems: 'center' }}
+      >
+        <TextInput
+          value={restProps.value}
+          data-testid={restProps.dataTestId}
+          onChange={restProps.onChange!}
+          ouiaId={restProps.ouiaId || ''}
+          aria-label={restProps.ariaLabel || ''}
+          validated={validationState}
+          type={restProps.type || 'text'}
+          placeholder={restProps.placeholder || ''}
+          onBlur={handleBlur}
+          style={{ paddingRight: '2rem' }}
+        />
+        <Button
+          variant="plain"
+          onClick={togglePasswordVisibility}
+          aria-label="Toggle password visibility"
+          style={{
+            position: 'absolute',
+            right: '0.5rem',
+          }}
+        >
+          {isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
+        </Button>
+      </div>
+      <ErrorHelperText errorMessage={errorMessage} />
+    </>
+  );
+};
+
 export const ValidatedTextInput = ({
   dataTestId,
   ouiaId,
@@ -100,11 +206,7 @@ export const ValidatedTextInput = ({
   placeholder,
   onChange,
 }: ValidatedTextInputPropTypes) => {
-  const [isPristine, setIsPristine] = useState(!value ? true : false);
-
-  const handleBlur = () => {
-    setIsPristine(false);
-  };
+  const { isPristine, handleBlur } = usePristineState(value);
 
   const handleValidation = () => {
     // Prevent premature validation during user's first entry
@@ -137,3 +239,51 @@ export const ValidatedTextInput = ({
     </>
   );
 };
+
+export const HookValidatedTextArea = ({
+  dataTestId,
+  ariaLabel,
+  value,
+  placeholder,
+  onChange,
+  stepValidation,
+  fieldName,
+  type = 'text',
+  isDisabled = false,
+  isEmpty,
+}: HookValidatedTextAreaPropTypes) => {
+  const { isPristine, handleBlur } = usePristineState(value);
+  const validationState = getValidationState(
+    value,
+    stepValidation,
+    fieldName,
+    isPristine,
+    isEmpty
+  );
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) {
+      onChange(event, event.target.value);
+    }
+  };
+  const errorMessage =
+    !isPristine && stepValidation.errors[fieldName]
+      ? stepValidation.errors[fieldName]
+      : undefined;
+
+  return (
+    <>
+      <TextArea
+        value={value}
+        data-testid={dataTestId}
+        type={type}
+        onChange={handleChange}
+        validated={validationState}
+        aria-label={ariaLabel || ''}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        isDisabled={isDisabled}
+      />
+      <ErrorHelperText errorMessage={errorMessage} />
+    </>
+  );
+};
diff --git a/src/Components/CreateImageWizard/steps/Users/component/Empty.tsx b/src/Components/CreateImageWizard/steps/Users/component/Empty.tsx
index cb50f2e99..d01766dbd 100644
--- a/src/Components/CreateImageWizard/steps/Users/component/Empty.tsx
+++ b/src/Components/CreateImageWizard/steps/Users/component/Empty.tsx
@@ -10,7 +10,14 @@ import {
 } from '@patternfly/react-core';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
+import { useAppDispatch } from '../../../../../store/hooks';
+import { addUser } from '../../../../../store/wizardSlice';
+
 const EmptyUserState = () => {
+  const dispatch = useAppDispatch();
+  const onAddUserClick = () => {
+    dispatch(addUser());
+  };
   return (
     <EmptyState variant={EmptyStateVariant.lg}>
       <EmptyStateHeader
@@ -18,7 +25,7 @@ const EmptyUserState = () => {
         headingLevel="h4"
       />
       <EmptyStateFooter>
-        <Button variant="secondary" onClick={() => {}}>
+        <Button variant="secondary" onClick={onAddUserClick}>
           Add a user
         </Button>
       </EmptyStateFooter>
diff --git a/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx
new file mode 100644
index 000000000..8e2a1a6cc
--- /dev/null
+++ b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx
@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  selectUserName,
+  selectUserPassword,
+  selectConfirmUserPassword,
+  selectUserSshKey,
+  selectUserAdministrator,
+  setUserNameByIndex,
+  setUserPasswordByIndex,
+  setUserConfirmPasswordByIndex,
+  setUserSshKedByIndex,
+  setUserAdministratorByIndex,
+} from '../../../../../store/wizardSlice';
+import {
+  HookValidatedInput,
+  HookValidatedInputWithPasswordVisibilityButton,
+  HookValidatedTextArea,
+} from '../../../ValidatedTextInput';
+const UserInfo = () => {
+  const dispatch = useAppDispatch();
+  // eslint-disable-next-line react-redux/useSelector-prefer-selectors
+  const userNameSelector = selectUserName(0);
+  const userName = useAppSelector(userNameSelector);
+  const userPasswordSelector = selectUserPassword(0);
+  const userPassword = useAppSelector(userPasswordSelector);
+  const userConfirmPasswordSelector = selectConfirmUserPassword(0);
+  const confirmUserPassword = useAppSelector(userConfirmPasswordSelector);
+  const userSshKeySelector = selectUserSshKey(0);
+  const userSshKey = useAppSelector(userSshKeySelector);
+  const userIsAdministratorSelector = selectUserAdministrator(0);
+  const userAdministrator = useAppSelector(userIsAdministratorSelector);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
+    useState(false);
+  const handleNameChange = (
+    _e: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    const index = 0;
+    dispatch(setUserNameByIndex({ index: index, name: value }));
+  };
+  const handlePasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    const index = 0;
+    dispatch(setUserPasswordByIndex({ index: index, password: value }));
+  };
+  const handleConfirmPasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    const index = 0;
+    dispatch(
+      setUserConfirmPasswordByIndex({ index: index, confirmPassword: value })
+    );
+  };
+  const handleSshKeyChange = (
+    _event: React.FormEvent<HTMLTextAreaElement>,
+    value: string
+  ) => {
+    const index = 0;
+    dispatch(setUserSshKedByIndex({ index: index, sshKey: value }));
+  };
+  const handleCheckboxChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: boolean
+  ) => {
+    const index = 0;
+    dispatch(
+      setUserAdministratorByIndex({ index: index, isAdministrator: value })
+    );
+  };
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const toggleConfirmPasswordVisibility = () =>
+    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
+  // TODO implement validation hooks
+  const stepValidation = {
+    errors: {},
+    disabledNext: false,
+  };
+
+  return (
+    <Form>
+      <FormGroup isRequired label="Username">
+        <HookValidatedInput
+          ariaLabel="blueprint user name"
+          value={userName || ''}
+          placeholder="Enter username"
+          onChange={(_e, value) => handleNameChange(_e, value)}
+          stepValidation={stepValidation}
+          fieldName="userName"
+        />
+      </FormGroup>
+      <FormGroup isRequired label="Password">
+        <HookValidatedInputWithPasswordVisibilityButton
+          ariaLabel="blueprint user password"
+          value={userPassword || ''}
+          type={isPasswordVisible ? 'text' : 'password'}
+          onChange={(_e, value) => handlePasswordChange(_e, value)}
+          placeholder="Enter password"
+          stepValidation={stepValidation}
+          fieldName="userPassword"
+          togglePasswordVisibility={togglePasswordVisibility}
+          isPasswordVisible={isPasswordVisible}
+          isEmpty={userPassword === ''}
+        />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              Special characters are not allowed and must contain at least 3
+              different character classes (uppercase letters, lowercase letters,
+              digits).
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+      <FormGroup isRequired label="Confirm password">
+        <HookValidatedInputWithPasswordVisibilityButton
+          ariaLabel="blueprint user confirm password"
+          value={confirmUserPassword || ''}
+          type={isConfirmPasswordVisible ? 'text' : 'password'}
+          onChange={(_e, value) => handleConfirmPasswordChange(_e, value)}
+          placeholder="Enter confirm password"
+          stepValidation={stepValidation}
+          fieldName="userConfirmPassword"
+          togglePasswordVisibility={toggleConfirmPasswordVisibility}
+          isPasswordVisible={isConfirmPasswordVisible}
+          isEmpty={confirmUserPassword === ''}
+        />
+      </FormGroup>
+      <FormGroup isRequired label="SSH key">
+        <HookValidatedTextArea
+          ariaLabel="public SSH key"
+          value={userSshKey || ''}
+          type={'text'}
+          onChange={(_e, value) => handleSshKeyChange(_e, value)}
+          placeholder="Paste your public SSH key"
+          stepValidation={stepValidation}
+          fieldName="userSshKey"
+          isEmpty={userSshKey === ''}
+        />
+        <Button
+          component="a"
+          target="_blank"
+          variant="link"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/configuring_basic_system_settings/assembly_using-secure-communications-between-two-systems-with-openssh_configuring-basic-system-settings#generating-ssh-key-pairs_assembly_using-secure-communications-between-two-systems-with-openssh"
+          className="pf-u-pl-0"
+        >
+          Learn more about SSH keys
+        </Button>
+      </FormGroup>
+      <FormGroup>
+        <Checkbox
+          label="Administrator"
+          isChecked={userAdministrator}
+          onChange={(_e, value) => handleCheckboxChange(_e, value)}
+          aria-label="Administrator"
+          id="user Administrator"
+          name="user Administrator"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+export default UserInfo;
diff --git a/src/Components/CreateImageWizard/steps/Users/index.tsx b/src/Components/CreateImageWizard/steps/Users/index.tsx
index c2a62a234..d193e7fe1 100644
--- a/src/Components/CreateImageWizard/steps/Users/index.tsx
+++ b/src/Components/CreateImageWizard/steps/Users/index.tsx
@@ -3,15 +3,21 @@ import React from 'react';
 import { Form, Text, Title } from '@patternfly/react-core';
 
 import EmptyUserState from './component/Empty';
+import UserInfo from './component/UserInfo';
+
+import { useAppSelector } from '../../../../store/hooks';
+import { selectUsers } from '../../../../store/wizardSlice';
 
 const UsersStep = () => {
+  const users = useAppSelector(selectUsers);
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
         Users
       </Title>
       <Text>Add a user to your image.</Text>
-      <EmptyUserState />
+      {users.length !== 0 ? <UserInfo /> : <EmptyUserState />}
     </Form>
   );
 };
diff --git a/src/Components/CreateImageWizard/utilities/requestMapper.ts b/src/Components/CreateImageWizard/utilities/requestMapper.ts
index adc4459a7..6239c5ecf 100644
--- a/src/Components/CreateImageWizard/utilities/requestMapper.ts
+++ b/src/Components/CreateImageWizard/utilities/requestMapper.ts
@@ -34,6 +34,7 @@ import {
   Services,
   Subscription,
   UploadTypes,
+  User,
 } from '../../../store/imageBuilderApi';
 import {
   selectActivationKey,
@@ -81,6 +82,7 @@ import {
   selectLanguages,
   selectKeyboard,
   selectHostname,
+  selectUsers,
 } from '../../../store/wizardSlice';
 import { FileSystemConfigurationType } from '../steps/FileSystem';
 import {
@@ -206,6 +208,15 @@ function commonRequestToState(
       blueprintName: request.name || '',
       blueprintDescription: request.description || '',
     },
+    users:
+      request.customizations.users?.map((user) => ({
+        name: user.name,
+        password: '', // The image-builder API does not return the password.
+        ssh_key: user.ssh_key || '',
+        confirmPassword: '',
+        groups: user.groups || [],
+        isAdministrator: user.groups?.includes('wheel') || false,
+      })) || [],
     compliance:
       compliancePolicyID !== undefined
         ? {
@@ -502,7 +513,7 @@ const getCustomizations = (state: RootState, orgID: string): Customizations => {
     custom_repositories: getCustomRepositories(state),
     openscap: getOpenscap(state),
     filesystem: getFileSystem(state),
-    users: undefined,
+    users: getUsers(state),
     services: getServices(state),
     hostname: selectHostname(state) || undefined,
     kernel: selectKernel(state).append
@@ -544,6 +555,30 @@ const getServices = (state: RootState): Services | undefined => {
   };
 };
 
+const getUsers = (state: RootState): User[] | undefined => {
+  const users = selectUsers(state);
+
+  if (!users || users.length === 0) {
+    return undefined;
+  }
+
+  return users.map((user) => {
+    const result: User = {
+      name: user.name,
+    };
+    if (user.password !== undefined) {
+      result.password = user.password;
+    }
+    if (user.ssh_key !== undefined) {
+      result.ssh_key = user.ssh_key;
+    }
+    if (user.groups !== undefined) {
+      result.groups = user.groups;
+    }
+    return result as User;
+  });
+};
+
 const getOpenscap = (state: RootState): OpenScap | undefined => {
   const complianceType = selectComplianceType(state);
   const profile = selectComplianceProfileID(state);
diff --git a/src/Components/CreateImageWizard/validators.ts b/src/Components/CreateImageWizard/validators.ts
index 9704b36e2..d6d7de2d3 100644
--- a/src/Components/CreateImageWizard/validators.ts
+++ b/src/Components/CreateImageWizard/validators.ts
@@ -58,6 +58,38 @@ export const isSnapshotValid = (dateString: string) => {
   return !isNaN(date.getTime()) && isSnapshotDateValid(date);
 };
 
+export const isUserNameValid = (userName: string) => {
+  const isLengthValid =
+    userName !== undefined && userName.length >= 1 && userName.length <= 32;
+
+  // Check if the username follows the pattern:
+  // Starts and ends with a valid character (not a dot).
+  // Can contain alphanumeric characters, underscores, hyphens, and periods in the middle.
+  const isPatternValid = /^[a-zA-Z0-9][a-zA-Z0-9_.-]*[a-zA-Z0-9_]$/.test(
+    userName
+  );
+  return isLengthValid && isPatternValid;
+};
+
+export const isPasswordValid = (password: string): boolean => {
+  const isLengthValid = password.length >= 2;
+  return isLengthValid;
+};
+export const isConfirmPasswordValid = (
+  password: string,
+  confirmPassword: string
+): boolean => {
+  const passwordsMatch = password === confirmPassword;
+  return passwordsMatch;
+};
+
+export const isSshKeyValid = (sshKey: string) => {
+  const isLengthValid = sshKey !== undefined && sshKey.length >= 2;
+  const isPatternValid =
+    /^(ssh-(rsa|dss|ed25519)|ecdsa-sha2-nistp(256|384|521)) \S+/.test(sshKey);
+  return isLengthValid && isPatternValid;
+};
+
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
   return blueprintDescription.length <= 250;
 };
diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts
index 73fcfa339..4108e881c 100644
--- a/src/store/wizardSlice.ts
+++ b/src/store/wizardSlice.ts
@@ -10,6 +10,7 @@ import type {
   Locale,
   Repository,
   Timezone,
+  User,
 } from './imageBuilderApi';
 import type { ActivationKeys } from './rhsmApi';
 
@@ -43,6 +44,35 @@ export type RegistrationType =
 
 export type ComplianceType = 'openscap' | 'compliance';
 
+export type UserWithAdditionalInfo = Required<User> & {
+  confirmPassword: string;
+  isAdministrator: boolean;
+};
+type UserPayload = {
+  index: number;
+  name: string;
+};
+
+type UserPasswordPayload = {
+  index: number;
+  password: string | undefined;
+};
+
+type UserConfirmPasswordPayload = {
+  index: number;
+  confirmPassword: string;
+};
+
+type UserSshKeyPayload = {
+  index: number;
+  sshKey: string;
+};
+
+type UserAdministratorPayload = {
+  index: number;
+  isAdministrator: boolean;
+};
+
 export type wizardState = {
   env: {
     serverUrl: string;
@@ -90,6 +120,7 @@ export type wizardState = {
     useLatest: boolean;
     snapshotDate: string;
   };
+  users: UserWithAdditionalInfo[];
   firstBoot: {
     script: string;
   };
@@ -196,6 +227,7 @@ export const initialState: wizardState = {
   },
   hostname: '',
   firstBoot: { script: '' },
+  users: [],
 };
 
 export const selectServerUrl = (state: RootState) => {
@@ -377,6 +409,31 @@ export const selectHostname = (state: RootState) => {
   return state.wizard.hostname;
 };
 
+export const selectUsers = (state: RootState) => {
+  return state.wizard.users;
+};
+
+export const selectUserName = (userIndex: number) => (state: RootState) => {
+  return state.wizard.users[userIndex]?.name;
+};
+
+export const selectUserPassword = (userIndex: number) => (state: RootState) => {
+  return state.wizard.users[userIndex]?.password;
+};
+
+export const selectConfirmUserPassword =
+  (userIndex: number) => (state: RootState) => {
+    return state.wizard.users[userIndex]?.confirmPassword;
+  };
+export const selectUserSshKey = (userIndex: number) => (state: RootState) => {
+  return state.wizard.users[userIndex]?.ssh_key;
+};
+
+export const selectUserAdministrator =
+  (userIndex: number) => (state: RootState) => {
+    return state.wizard.users[userIndex]?.isAdministrator;
+  };
+
 export const wizardSlice = createSlice({
   name: 'wizard',
   initialState,
@@ -725,6 +782,53 @@ export const wizardSlice = createSlice({
     setFirstBootScript: (state, action: PayloadAction<string>) => {
       state.firstBoot.script = action.payload;
     },
+
+    addUser: (state) => {
+      const newUser = {
+        name: '',
+        password: '',
+        confirmPassword: '',
+        ssh_key: '',
+        groups: [],
+        isAdministrator: false,
+      };
+
+      state.users.push(newUser);
+    },
+    setUserNameByIndex: (state, action: PayloadAction<UserPayload>) => {
+      state.users[action.payload.index].name = action.payload.name;
+    },
+    setUserPasswordByIndex: (
+      state,
+      action: PayloadAction<UserPasswordPayload>
+    ) => {
+      state.users[action.payload.index].password = action.payload.password;
+    },
+    setUserConfirmPasswordByIndex: (
+      state,
+      action: PayloadAction<UserConfirmPasswordPayload>
+    ) => {
+      state.users[action.payload.index].confirmPassword =
+        action.payload.confirmPassword;
+    },
+    setUserSshKedByIndex: (state, action: PayloadAction<UserSshKeyPayload>) => {
+      state.users[action.payload.index].ssh_key = action.payload.sshKey;
+    },
+
+    setUserAdministratorByIndex: (
+      state,
+      action: PayloadAction<UserAdministratorPayload>
+    ) => {
+      const { index, isAdministrator } = action.payload;
+      state.users[index].isAdministrator = isAdministrator;
+      if (isAdministrator) {
+        state.users[index].groups?.push('wheel');
+      } else {
+        state.users[index].groups = state.users[index].groups?.filter(
+          (group) => group !== 'wheel'
+        );
+      }
+    },
     changeEnabledServices: (state, action: PayloadAction<string[]>) => {
       state.services.enabled = action.payload;
     },
@@ -817,6 +921,12 @@ export const {
   changeBlueprintDescription,
   loadWizardState,
   setFirstBootScript,
+  addUser,
+  setUserNameByIndex,
+  setUserPasswordByIndex,
+  setUserConfirmPasswordByIndex,
+  setUserSshKedByIndex,
+  setUserAdministratorByIndex,
   changeEnabledServices,
   changeMaskedServices,
   changeDisabledServices,
diff --git a/src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx b/src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx
new file mode 100644
index 000000000..4aa4883c1
--- /dev/null
+++ b/src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx
@@ -0,0 +1,107 @@
+import type { Router as RemixRouter } from '@remix-run/router';
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import {
+  clickBack,
+  clickNext,
+  getNextButton,
+  verifyCancelButton,
+} from '../../wizardTestUtils';
+import {
+  clickRegisterLater,
+  goToRegistrationStep,
+  renderCreateMode,
+} from '../../wizardTestUtils';
+
+let router: RemixRouter | undefined = undefined;
+
+const goToUsersStep = async () => {
+  await clickNext();
+  await clickNext();
+  await clickNext();
+  await clickNext();
+  await clickNext();
+  await clickNext();
+};
+
+describe('Step Users', () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    router = undefined;
+  });
+
+  test('without adding user loads First Boot', async () => {
+    const user = userEvent.setup();
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    const addUser = await screen.findByRole('button', { name: /add a user/i });
+    expect(addUser).toBeEnabled();
+    const nextButton = await getNextButton();
+    expect(nextButton).toBeEnabled();
+    await waitFor(() => user.click(nextButton));
+    await screen.findByText('Select a timezone for your image.');
+  });
+
+  test('with invalid name Next button is disable', async () => {
+    const user = userEvent.setup();
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    const addUser = await screen.findByRole('button', { name: /add a user/i });
+    expect(addUser).toBeEnabled();
+    await waitFor(() => user.click(addUser));
+    const enterUserName = screen.getByRole('textbox', {
+      name: /blueprint user name/i,
+    });
+    await waitFor(() => user.type(enterUserName, 'b'));
+    await waitFor(() => expect(enterUserName).toHaveValue('b'));
+    const nextButton = await getNextButton();
+    await waitFor(() => expect(nextButton).toBeEnabled());
+  });
+
+  test('clicking Back loads Additional packages', async () => {
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    const addUser = await screen.findByRole('button', { name: /add a user/i });
+    expect(addUser).toBeEnabled();
+    await clickBack();
+    await screen.findByRole('heading', { name: 'Additional packages' });
+  });
+
+  test('clicking Cancel loads landing page', async () => {
+    await renderCreateMode();
+    await goToUsersStep();
+    await verifyCancelButton(router);
+  });
+
+  test('with valid name', async () => {
+    const user = userEvent.setup();
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    const addUser = await screen.findByRole('button', { name: /add a user/i });
+    expect(addUser).toBeEnabled();
+    await waitFor(() => user.click(addUser));
+    const enterUserName = screen.getByRole('textbox', {
+      name: /blueprint user name/i,
+    });
+    const nextButton = await getNextButton();
+    await waitFor(() => user.type(enterUserName, 'best'));
+    await waitFor(() => expect(enterUserName).toHaveValue('best'));
+    const enterUserPassword = screen.getByPlaceholderText(/enter password/i);
+    await waitFor(() => user.type(enterUserPassword, 'bestPASSWORD11'));
+    const enterUserConfirmPassword =
+      screen.getByPlaceholderText(/confirm password/i);
+    await waitFor(() => user.type(enterUserConfirmPassword, 'bestPASSWORD11'));
+    await waitFor(() => expect(nextButton).toBeEnabled());
+    await waitFor(() => user.click(nextButton));
+    await screen.findByText('Select a timezone for your image.');
+  });
+});