<WIP> User info (HMS-4903)

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -34,6 +34,7 @@ import {
   useFirstBootValidation,
   useDetailsValidation,
   useRegistrationValidation,
+  useUserValidation,
 } from './utilities/useValidation';
 import {
   isAwsAccountIdValid,
@@ -63,6 +64,7 @@ import {
   selectGcpShareMethod,
   selectImageTypes,
   addImageType,
+  selectUserName,
 } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { useFlag } from '../../Utilities/useGetEnvironment';
@@ -200,6 +202,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const azureSubscriptionId = useAppSelector(selectAzureSubscriptionId);
   const azureResourceGroup = useAppSelector(selectAzureResourceGroup);
   const azureSource = useAppSelector(selectAzureSource);
+  const user = useAppSelector(selectUserName);
   // Registration
   const registrationValidation = useRegistrationValidation();
   // Snapshots
@@ -211,6 +214,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const firstBootValidation = useFirstBootValidation();
   // Details
   const detailsValidation = useDetailsValidation();
+  // User
+  const userValidation = useUserValidation();
 
   let startIndex = 1; // default index
   if (isEdit) {
@@ -441,7 +446,10 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 key="wizard-users"
                 isHidden={!isUsersEnabled}
                 footer={
-                  <CustomWizardFooter disableNext={false} optional={true} />
+                  <CustomWizardFooter
+                    disableNext={user !== '' && userValidation.disabledNext}
+                    optional={true}
+                  />
                 }
               >
                 <UsersStep />

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

@@ -10,19 +10,23 @@ import {
 } from '@patternfly/react-core';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
-const EmptyUserState = () => {
+interface EmptyUserStateProps {
+  onAddUserClick: () => void;
+}
+const EmptyUserState = ({ onAddUserClick }: EmptyUserStateProps) => {
   return (
     <EmptyState variant={EmptyStateVariant.lg}>
       <EmptyStateHeader
         icon={<EmptyStateIcon icon={UserIcon} />}
         headingLevel="h4"
       />
       <EmptyStateFooter>
-        <Button variant="secondary" onClick={() => {}}>
+        <Button variant="secondary" onClick={onAddUserClick}>
           Add a user
         </Button>
       </EmptyStateFooter>
     </EmptyState>
   );
 };
+
 export default EmptyUserState;

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

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+
+import {
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  selectUserName,
+  selectUserPassword,
+  selectConfirmUserPassword,
+  selectUserAdministrator,
+  setUserName,
+  setUserPassword,
+  setConfirmUserPassword,
+  changeUserAdministrator,
+} from '../../../../../store/wizardSlice';
+import { useUserValidation } from '../../../utilities/useValidation';
+import { HookValidatedInput } from '../../../ValidatedTextInput';
+
+const UserInfo = () => {
+  const dispatch = useAppDispatch();
+  const userName = useAppSelector(selectUserName);
+  const userPassword = useAppSelector(selectUserPassword);
+  const confirmUserPassword = useAppSelector(selectConfirmUserPassword);
+  const userAdministrator = useAppSelector(selectUserAdministrator);
+
+  const handleNameChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    name: string
+  ) => {
+    dispatch(setUserName(name));
+  };
+  const handlePasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    password: string
+  ) => {
+    dispatch(setUserPassword(password));
+  };
+  const handleConfirmPasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    confirm: string
+  ) => {
+    dispatch(setConfirmUserPassword(confirm));
+  };
+  const handleCheckboxChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    userAdministrator: boolean
+  ) => {
+    dispatch(changeUserAdministrator(userAdministrator));
+  };
+
+  const stepValidation = useUserValidation();
+  return (
+    <Form>
+      <FormGroup isRequired label="Username" fieldId="blueprint-user-name">
+        <HookValidatedInput
+          ariaLabel="blueprint user name"
+          value={userName}
+          onChange={handleNameChange}
+          placeholder="Enter username"
+          stepValidation={stepValidation}
+          fieldName="user name"
+        />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              Can only contain letters, numbers, hyphens (-), and
+              underscores(_).
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+
+      <FormGroup isRequired label="password" fieldId="blueprint-user-name">
+        <HookValidatedInput
+          ariaLabel="blueprint user password"
+          value={userPassword}
+          onChange={handlePasswordChange}
+          placeholder="Enter password"
+          stepValidation={stepValidation}
+          fieldName="user name"
+        />
+      </FormGroup>
+      <FormGroup
+        isRequired
+        label="confirm password"
+        fieldId="blueprint-confirm-password"
+      >
+        <HookValidatedInput
+          ariaLabel="blueprint confirm password"
+          value={confirmUserPassword}
+          onChange={handleConfirmPasswordChange}
+          placeholder="confirm password"
+          stepValidation={stepValidation}
+          fieldName="confirm password"
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <Checkbox
+          label="Administrator"
+          isChecked={userAdministrator}
+          onChange={handleCheckboxChange}
+          aria-label="Administrator"
+          id="user Administrator"
+          name="user Administrator"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+export default UserInfo;

src/Components/CreateImageWizard/steps/Users/index.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useState } 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 { selectUserName } from '../../../../store/wizardSlice';
 
 const UsersStep = () => {
+  const userName = useAppSelector(selectUserName);
+  const [showUserInfo, setShowUserInfo] = useState(false);
+
+  const handleAddUserClick = () => {
+    setShowUserInfo(true);
+  };
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
         Users
       </Title>
       <Text>Add a user to your image.</Text>
-      <EmptyUserState />
+      {userName ? (
+        <UserInfo />
+      ) : !showUserInfo ? (
+        <EmptyUserState onAddUserClick={handleAddUserClick} />
+      ) : (
+        <UserInfo />
+      )}
     </Form>
   );
 };

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -18,13 +18,18 @@ import {
   selectUseLatest,
   selectActivationKey,
   selectRegistrationType,
+  selectUserName,
+  selectUserPassword,
+  selectConfirmUserPassword,
 } from '../../../store/wizardSlice';
 import {
   getDuplicateMountPoints,
   isBlueprintNameValid,
   isBlueprintDescriptionValid,
   isMountpointMinSizeValid,
   isSnapshotValid,
+  isPasswordValid,
+  isUserNameValid,
 } from '../validators';
 
 export type StepValidation = {
@@ -133,6 +138,24 @@ export function useFirstBootValidation(): StepValidation {
   };
 }
 
+export function useUserValidation(): StepValidation {
+  const userName = useAppSelector(selectUserName);
+  const password = useAppSelector(selectUserPassword);
+  const confirmPassword = useAppSelector(selectConfirmUserPassword);
+  const userNameValid = isUserNameValid(userName);
+  const passwordValid = isPasswordValid(password, confirmPassword);
+
+  if (!userNameValid || !passwordValid) {
+    return {
+      errors: {
+        userName: 'Invalid user name',
+        password: 'Invalid password name',
+      },
+      disabledNext: true,
+    };
+  }
+  return { errors: {}, disabledNext: false };
+}
 export function useDetailsValidation(): StepValidation {
   const name = useAppSelector(selectBlueprintName);
   const description = useAppSelector(selectBlueprintDescription);

src/Components/CreateImageWizard/validators.ts

@@ -58,6 +58,42 @@ export const isSnapshotValid = (dateString: string) => {
   return !isNaN(date.getTime()) && isSnapshotDateValid(date);
 };
 
+export const isUserNameValid = (userName: string) => {
+  const isLengthValid =
+    userName !== undefined && userName.length >= 2 && userName.length <= 32;
+  const isPatternValid = /^[a-zA-Z0-9_.][a-zA-Z0-9_.-]*[a-zA-Z0-9_.$-]?$/.test(
+    userName
+  );
+  //const isNonNumericValid =
+  //  version === '4.1.5.1-25.el7' ? !/^\d+$/.test(userName) : true;
+
+  return isLengthValid && isPatternValid;
+};
+
+export const isPasswordValid = (
+  password: string,
+  confirmPassword: string
+): boolean => {
+  const isLengthValid = password.length >= 6;
+  const containsUppercase = /[A-Z]/.test(password);
+  const containsLowercase = /[a-z]/.test(password);
+  const containsNumber = /\d/.test(password);
+
+  // Ensure no special characters for plaintext passwords
+  const isPlainText = /^[A-Za-z0-9]*$/.test(password);
+
+  const classCount = [
+    containsUppercase,
+    containsLowercase,
+    containsNumber,
+  ].filter(Boolean).length;
+
+  const isClassValid = classCount >= 3;
+  const passwordsMatch = password === confirmPassword;
+
+  return isLengthValid && isClassValid && passwordsMatch && isPlainText;
+};
+
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
   return blueprintDescription.length <= 250;
 };