feat(LoginPage): added isPasswordRequired prop

[Mash707]

Closes #11123

[patternfly-build]

Preview: https://patternfly-react-pr-11673.surge.sh

A11y report: https://patternfly-react-pr-11673-a11y.surge.sh

[thatblindgeye]

This looks good to me. Would you want to try writing a couple tests for this prop? One to check that the password field is required by default, and another to check that it is not required when isPasswordRequired is false.

[Mash707]

I'll work on writing the tests. Should I include the changes in this PR or open a followup? Also we don't have any examples showcasing the false state of the prop.

[thatblindgeye]

You can include it in this PR. @andrew-ronaldson would we want to include an example for such a simple difference?

[andrew-ronaldson]

Not sure if it needs an example. We can document the new prop with the existing example as a start

[Mash707]

@thatblindgeye I did some research and found out that passing the prop in FormGroup only changes the visual state of the field. This is not a solution we are looking for since it removes the ASTERISK symbol visually but the password field is still required.

patternfly-react/packages/react-core/src/components/Form/FormGroup.tsx

Lines 55 to 67 in 54e11ce

	<LabelComponent className={css(styles.formLabel)} {...(!isGroupOrRadioGroup && { htmlFor: fieldId })}>
	<span className={css(styles.formLabelText)}>{label}</span>
	{isRequired && (
	<span className={css(styles.formLabelRequired)} aria-hidden="true">
	{' '}
	{ASTERISK}
	</span>
	)}
	</LabelComponent>
	<>&nbsp;&nbsp;</>
	{isValidElement(labelHelp) && <span className={styles.formGroupLabelHelp}>{labelHelp}</span>}
	</>
	);

I am currently trying to find the component which handles the input state of password field.

[Mash707]

isPasswordRequired = true

isPasswordRequired = false

In both cases password is still required.

So the changes I have made in this PR are only visually updating the field

[Mash707]

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

Lines 86 to 96 in 54e11ce

	const passwordInput = (
	<TextInput
	isRequired
	type={passwordHidden ? 'password' : 'text'}
	id="pf-login-password-id"
	name="pf-login-password-id"
	validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
	value={passwordValue}
	onChange={onChangePassword}
	/>
	);

Needed to pass down the prop here too.

[Mash707]

I have added test case to ensure required field in password is present. Can't add test for not required since LoginPageDemo.tsx has isPasswordRequired=true by default.

[Mash707]

Currently I have not explicitly mentioned isPasswordRequired prop in any of the examples or demo(true by default). Should I include it?

[thatblindgeye]

@Mash707 thanks for catching and looking into that.

For the test, we'd actually want to add a unit test for LoginForm specifically (in the packages/react-core/src/components/LoginPage/__tests__ directory).

We could add some verbiage to the MD file for the examples before the actual code between lines 32 and 34 in the MD). @edonehoo wdyt of something like "While the username field will always be required, you can make the password field optional by passing the isPasswordRequired property. By default a password will also be required." as an example description?

[edonehoo]

@thatblindgeye how do you feel about swapping things around a little:

"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 can make the password optional by passing the isPasswordRequired property to the <LoginForm>."

[Mash707]

I have added the test cases and also the explanatory text for the isPasswordRequired field.
I have squashed the commits.

[thatblindgeye]

For the test descriptions, typically we try to keep a format of "Renders...."

So for these 2, maybe something like "Renders LoginForm with password field required by default" and "Renders LoginForm with password field not required when isPasswordRequired set to false"

[Mash707]

I have updated the test description.