Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Verify] Update new-architecture input fields on base screens to pass through all textfield props #461

Merged
merged 12 commits into from
Sep 13, 2023
Merged

[Verify] Update new-architecture input fields on base screens to pass through all textfield props #461

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7cbad8c
initial code changes
manojleaton Sep 4, 2023
5a0b293
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 6, 2023
2088ce7
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 7, 2023
7fb3409
docs changes
manojleaton Sep 7, 2023
466d99f
updating JS docs
manojleaton Sep 7, 2023
f10d723
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 7, 2023
b77ef4d
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 8, 2023
78327b5
merging events of text field
manojleaton Sep 8, 2023
bff6f1d
review comments incorporation
manojleaton Sep 11, 2023
3ee716b
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 12, 2023
2b7e035
Merge branch 'dev' into 4302---adding-textfield-props
manojleaton Sep 13, 2023
7501b30
Merge branch 'dev' into 4338---theme-object-style-changes
manojleaton Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
onSubmit,
PasswordProps,
ErrorDialogProps,
currentPasswordTextFieldProps,
} = props;

const passwordRequirements = defaultPasswordRequirements(t);
Expand Down Expand Up @@ -115,6 +116,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
onPrevious={onPrevious}
PasswordProps={passwordProps}
ErrorDialogProps={errorDialogProps}
currentPasswordTextFieldProps={currentPasswordTextFieldProps}
onSubmit={async (): Promise<void> => {
await changePasswordSubmit();
navigate(routeConfig.LOGIN);
Expand Down
2 changes: 2 additions & 0 deletions login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
ErrorDialogProps,
PasswordProps,
loading,
currentPasswordTextFieldProps,
} = props;
const theme = useTheme();
const matchesSM = useMediaQuery(theme.breakpoints.down('sm'));
Expand Down Expand Up @@ -102,6 +103,7 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
id="current-password"
label={currentPasswordLabel}
value={currentPassword}
{...currentPasswordTextFieldProps}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to merge OnPasswordChange here like https://github.com/etn-ccis/blui-react-workflows/blob/dev/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx#L142.

Same comment for other screens

onChange={handleChange}
onKeyUp={(e): void => {
const { current } = PasswordProps.passwordRef;
Expand Down
5 changes: 4 additions & 1 deletion login-workflow/src/components/ChangePasswordDialog/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DialogProps } from '@mui/material';
import { DialogProps, TextFieldProps } from '@mui/material';
import { BasicDialogProps } from '../Dialog';
import { SetPasswordProps } from '../SetPassword';

Expand Down Expand Up @@ -55,4 +55,7 @@ export type ChangePasswordDialogProps = DialogProps & { PasswordProps?: SetPassw
onPrevious?: () => void;

loading?: boolean;

// The props to pass to the current password text field.
currentPasswordTextFieldProps?: TextFieldProps;
};
15 changes: 10 additions & 5 deletions login-workflow/src/components/SetPassword/SetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
confirmRef,
passwordNotMatchError,
onSubmit,
passwordTextFieldProps,
confirmPasswordTextFieldProps,
} = props;
const theme = useTheme();

Expand Down Expand Up @@ -84,13 +86,15 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
inputRef={passwordRef}
label={newPasswordLabel}
value={passwordInput}
error={shouldValidatePassword && !isValidPassword()}
sx={TextFieldStyles(theme)}
{...passwordTextFieldProps}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any particular reason the passwordTextFieldProps is spreaded here as opposed to spreaded towards the end of this props list? I'd like to hear your reasoning.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for the other spreads you added in this pull request

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To override the defaults which we set in the base screen components, spreaded the TextFieldProps towards the end of the props list.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not understand. I see that you still have onChange, onKeyUp and onBlur under the {...passwordTextFieldProps}, so this is not the end of the props list of PasswordTextField?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just had a discussion with Joe in Office hours regarding this, so we need to merge events with TextFieldProps like we did for WorkFlowActions.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just so I know, why do we have both of these? just for theme aware items? plus additional sx styles?
sx={TextFieldStyles(theme)}
{...passwordTextFieldProps}

Copy link
Contributor Author

@manojleaton manojleaton Sep 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Raised a PR for removed passing theme object to functions to generate styles. sx prop is for adding styles.
Spreading passwordTextFieldProps to pass text field specific props. Like variant, onChange and etc.

onChange={(evt: ChangeEvent<HTMLInputElement>): void => onPassChange(evt.target.value)}
onKeyUp={(e): void => {
if (e.key === 'Enter' && confirmRef.current) {
confirmRef.current.focus();
}
}}
error={shouldValidatePassword && !isValidPassword()}
onBlur={(): void => setShouldValidatePassword(true)}
/>
{passwordRequirements && passwordRequirements.length > 0 && (
Expand All @@ -108,17 +112,18 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
label={confirmPasswordLabel}
sx={TextFieldStyles(theme)}
value={confirmInput}
onChange={(evt: ChangeEvent<HTMLInputElement>): void => onConfirmChange(evt.target.value)}
onKeyUp={(e): void => {
if (e.key === 'Enter' && onSubmit) onSubmit();
}}
error={hasConfirmPasswordError()}
helperText={hasConfirmPasswordError() ? passwordNotMatchError : ''}
icon={
confirmInput.length !== 0 && isValidPassword() && confirmInput === passwordInput ? (
<CheckCircleOutlinedIcon data-testid="check" color="success" />
) : undefined
}
{...confirmPasswordTextFieldProps}
onChange={(evt: ChangeEvent<HTMLInputElement>): void => onConfirmChange(evt.target.value)}
onKeyUp={(e): void => {
if (e.key === 'Enter' && onSubmit) onSubmit();
}}
onBlur={(): void => setShouldValidateConfirmPassword(true)}
/>
</>
Expand Down
7 changes: 7 additions & 0 deletions login-workflow/src/components/SetPassword/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { MutableRefObject } from 'react';
import { TextFieldProps } from '@mui/material';

/**
* Parameters for dynamic password strength requirements.
Expand Down Expand Up @@ -71,4 +72,10 @@ export type SetPasswordProps = {
* @returns void
*/
onSubmit?: () => void;

manojleaton marked this conversation as resolved.
Show resolved Hide resolved
// The props to pass to the password text field.
passwordTextFieldProps?: TextFieldProps;

// The props to pass to the confirm password text field.
confirmPasswordTextFieldProps?: TextFieldProps;
};
2 changes: 2 additions & 0 deletions login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
showSuccessScreen: enableSuccessScreen = true,
slotProps = { SuccessScreen: {} },
slots,
emailTextFieldProps,
} = props;

const workflowCardBaseProps = {
Expand Down Expand Up @@ -146,6 +147,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
emailLabel={emailLabel}
initialEmailValue={initialEmailValue}
emailValidator={emailValidator}
emailTextFieldProps={emailTextFieldProps}
showSuccessScreen={enableSuccessScreen && showSuccessScreen}
slots={{
SuccessScreen:
Expand Down
10 changes: 6 additions & 4 deletions login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
slotProps = {},
showSuccessScreen,
errorDisplayConfig,
emailTextFieldProps,
} = props;

const cardBaseProps = props.WorkflowCardBaseProps || {};
Expand Down Expand Up @@ -90,6 +91,11 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
label={emailLabel}
fullWidth
value={emailInput}
variant="filled"
error={shouldValidateEmail && !isEmailValid}
helperText={shouldValidateEmail && emailError}
{...emailTextFieldProps}
onBlur={(): void => setShouldValidateEmail(true)}
onChange={(evt): void => {
handleEmailInputChange(evt.target.value);
}}
Expand All @@ -100,10 +106,6 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
)
handleOnNext();
}}
variant="filled"
error={shouldValidateEmail && !isEmailValid}
helperText={shouldValidateEmail && emailError}
onBlur={(): void => setShouldValidateEmail(true)}
/>
</ErrorManager>
</WorkflowCardBody>
Expand Down
4 changes: 4 additions & 0 deletions login-workflow/src/screens/ForgotPasswordScreen/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TextFieldProps } from '@mui/material';
import { ErrorManagerProps } from '../../components/Error';
import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';
import { SuccessScreenProps } from '../SuccessScreen';
Expand Down Expand Up @@ -75,4 +76,7 @@ export type ForgotPasswordScreenProps = WorkflowCardProps & {
* The configuration for customizing how errors are displayed
*/
errorDisplayConfig?: ErrorManagerProps;

// The props to pass to the forgot password email text field.
emailTextFieldProps?: TextFieldProps;
};
2 changes: 2 additions & 0 deletions login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const VerifyCodeScreen: React.FC<VerifyCodeScreenProps> = (props) => {
resendLabel = t('bluiCommon:ACTIONS.RESEND'),
verifyCodeInputLabel = t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.VERIFICATION'),
initialValue = screenData.VerifyCode.code,
verifyCodeTextFieldProps,
} = props;

const handleOnNext = useCallback(
Expand Down Expand Up @@ -143,6 +144,7 @@ export const VerifyCodeScreen: React.FC<VerifyCodeScreenProps> = (props) => {
onResend={onResend}
codeValidator={codeValidator}
errorDisplayConfig={errorDisplayConfig}
verifyCodeTextFieldProps={verifyCodeTextFieldProps}
/>
);
};
10 changes: 6 additions & 4 deletions login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
verifyCodeInputLabel,
initialValue,
errorDisplayConfig,
verifyCodeTextFieldProps,
} = props;

const cardBaseProps = props.WorkflowCardBaseProps || {};
Expand Down Expand Up @@ -90,17 +91,18 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
label={verifyCodeInputLabel}
fullWidth
value={verifyCode}
variant="filled"
error={shouldValidateCode && !isCodeValid}
helperText={shouldValidateCode && codeError}
{...verifyCodeTextFieldProps}
onBlur={(): void => setShouldValidateCode(true)}
onChange={(evt): void => {
handleVerifyCodeInputChange(evt.target.value);
}}
onKeyUp={(e): void => {
if (e.key === 'Enter' && ((verifyCode.length > 0 && isCodeValid) || actionsProps.canGoNext))
handleOnNext();
}}
variant="filled"
error={shouldValidateCode && !isCodeValid}
helperText={shouldValidateCode && codeError}
onBlur={(): void => setShouldValidateCode(true)}
/>
<Box sx={{ mt: 2 }}>
<Typography>
Expand Down
4 changes: 4 additions & 0 deletions login-workflow/src/screens/VerifyCodeScreen/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TextFieldProps } from '@mui/material';
import { ErrorManagerProps } from '../../components/Error';
import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';

Expand Down Expand Up @@ -39,4 +40,7 @@ export type VerifyCodeScreenProps = WorkflowCardProps & {
* The configuration for customizing how errors are displayed
*/
errorDisplayConfig?: ErrorManagerProps;

// The props to pass to the verify code text field.
verifyCodeTextFieldProps?: TextFieldProps;
};