feat(LoginPage): added isPasswordRequired prop (#11673)

* feat(LoginPage): added isPasswordRequired prop

* updated test names

* mades changes to test file

Author: Mash707

packages/react-core/src/components/LoginPage/LoginForm.tsx

@@ -28,6 +28,8 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
+  /** Flag indicating if password is required */
+  isPasswordRequired?: boolean;
   /** Label for the password input field */
   passwordLabel?: string;
   /** Value for the password */
@@ -66,6 +68,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
   usernameValue = '',
   onChangeUsername = () => undefined as any,
   isValidUsername = true,
+  isPasswordRequired = true,
   passwordLabel = 'Password',
   passwordValue = '',
   onChangePassword = () => undefined as any,
@@ -85,7 +88,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   const passwordInput = (
     <TextInput
-      isRequired
+      isRequired={isPasswordRequired}
       type={passwordHidden ? 'password' : 'text'}
       id="pf-login-password-id"
       name="pf-login-password-id"
@@ -118,7 +121,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
+      <FormGroup label={passwordLabel} isRequired={isPasswordRequired} fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             <InputGroupItem isFill>{passwordInput}</InputGroupItem>

packages/react-core/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -48,4 +48,16 @@ describe('LoginForm', () => {
     const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders LoginForm with password field required by default', () => {
+    render(<LoginForm />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).toBeRequired();
+  });
+
+  test('Renders LoginForm with password field not required when isPasswordRequired set to false', () => {
+    render(<LoginForm isPasswordRequired={false} />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).not.toBeRequired();
+  });
 });

packages/react-core/src/components/LoginPage/examples/LoginPage.md

@@ -31,6 +31,7 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ### Basic
 
+By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```