diff --git a/login-workflow/docs/components/change-password-dialog.md b/login-workflow/docs/components/change-password-dialog.md index 04b68fcd..bfd2cb04 100644 --- a/login-workflow/docs/components/change-password-dialog.md +++ b/login-workflow/docs/components/change-password-dialog.md @@ -17,25 +17,25 @@ import { AuthContextProvider, ChangePasswordDialog } from '@brightlayer-ui/react ## API -| Prop Name | Type | Description | Default | -|---|---|---|---| -| PasswordProps | `SetPasswordProps` | See [Set Password](./set-password.md) | | -| ErrorDialogProps | `BasicDialogProps` | Props to configure a nested error dialog if there are errors changing the password. See [Basic Dialog](./basic-dialog.md). | | -| dialogTitle | `string` | The title to display in the dialog. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.TITLE')` | -| dialogDescription | `string` | The description to display in the dialog. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.DESCRIPTION')` | -| currentPasswordLabel | `string` | The label to display for the current password field. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.CURRENT_PASSWORD_LABEL')` | -| previousLabel | `string` | The label to display for the previous/cancel button. | `t('bluiCommon:ACTIONS.BACK')` | -| nextLabel | `string` | The label to display for the next button. | `t('bluiCommon:ACTIONS.OKAY')` | -| currentPasswordChange | `(currentPassword: string) => void` | Callback called when the current password field input changes. | | -| enableButton | `boolean \| (() => boolean)` | True if the next button should be enabled. | `false` | -| onFinish | `() => void` | Called when the button is clicked on success screen. | | -| onSubmit | `() => void \| Promise` | Called when the next button is clicked. | | -| onPrevious | `() => void` | Callback called when the previous/back/cancel button is clicked. | | -| loading | `boolean` | Whether or not the dialog is loading. | | -| showSuccessScreen | `boolean` | Used to determine whether to show a success screen after the form is submitted. | | -| slots | `ChangePasswordDialogSlots` | Components to use in place of the defaults. See [ChangePasswordDialogSlots](#changepassworddialogslots) | | -| slotProps | `ChangePasswordDialogSlotsProps` | Props to pass to the custom slot components. See [ChangePasswordDialogSlotsProps](#changepassworddialogslotsprops) | | - +| Prop Name | Type | Description | Default | +| ----------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | +| PasswordProps | `SetPasswordProps` | See [Set Password](./set-password.md) | | +| ErrorDialogProps | `BasicDialogProps` | Props to configure a nested error dialog if there are errors changing the password. See [Basic Dialog](./basic-dialog.md). | | +| dialogTitle | `string` | The title to display in the dialog. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.TITLE')` | +| dialogDescription | `string` | The description to display in the dialog. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.DESCRIPTION')` | +| currentPasswordLabel | `string` | The label to display for the current password field. | `t('bluiAuth:CHANGE_PASSWORD_DIALOG.CURRENT_PASSWORD_LABEL')` | +| previousLabel | `string` | The label to display for the previous/cancel button. | `t('bluiCommon:ACTIONS.BACK')` | +| nextLabel | `string` | The label to display for the next button. | `t('bluiCommon:ACTIONS.OKAY')` | +| currentPasswordChange | `(currentPassword: string) => void` | Callback called when the current password field input changes. | | +| enableButton | `boolean \| (() => boolean)` | True if the next button should be enabled. | `false` | +| onFinish | `() => void` | Called when the button is clicked on success screen. | | +| onSubmit | `() => void \| Promise` | Called when the next button is clicked. | | +| onPrevious | `() => void` | Callback called when the previous/back/cancel button is clicked. | | +| loading | `boolean` | Whether or not the dialog is loading. | | +| currentPasswordTextFieldProps | `TextFieldProps` | Props to pass to the current password input field. See MUI's [TextFieldProps API](https://mui.com/material-ui/api/text-field/). | | +| showSuccessScreen | `boolean` | Used to determine whether to show a success screen after the form is submitted. | | +| slots | `ChangePasswordDialogSlots` | Components to use in place of the defaults. See [ChangePasswordDialogSlots](#changepassworddialogslots) | | +| slotProps | `ChangePasswordDialogSlotsProps` | Props to pass to the custom slot components. See [ChangePasswordDialogSlotsProps](#changepassworddialogslotsprops) | | ### ChangePasswordDialogSlots @@ -49,5 +49,4 @@ import { AuthContextProvider, ChangePasswordDialog } from '@brightlayer-ui/react | ------------- | -------------------- | --------------------------------------------------------------------------------------- | | SuccessScreen | `SuccessScreenProps` | Props to pass to the custom success screen component. See [SuccessScreen](./success.md) | - -Props from the underlying MUI [Dialog](https://mui.com/material-ui/react-dialog/) are also available. \ No newline at end of file +Props from the underlying MUI [Dialog](https://mui.com/material-ui/react-dialog/) are also available. diff --git a/login-workflow/docs/components/set-password.md b/login-workflow/docs/components/set-password.md index 599ff6af..092ef873 100644 --- a/login-workflow/docs/components/set-password.md +++ b/login-workflow/docs/components/set-password.md @@ -16,22 +16,24 @@ import { SetPassword } from '@brightlayer-ui/react-auth-workflow'; ## API -| Prop Name | Type | Description | Default | -|---|---|---|---| -| onPasswordChange | `(passwords: { password: string; confirm: string }) => void` | Called when the new password or confirm new password fields value changes. | | -| newPasswordLabel | `string` | The label for the new password field. | | -| initialNewPasswordValue | `string` | The initial value for the new password field. | | -| confirmPasswordLabel | `string` | The label for the confirm password field. | | -| initialConfirmPasswordValue | `string` | The initial value for the confirm password field. | | -| passwordRequirements | `PasswordRequirement[]` | An array of password complexity requirements . See [PasswordRequirements](#PasswordRequirements) for more details. | | -| passwordRef | `MutableRefObject` | Optional ref to forward to the password input. | | -| confirmRef | `MutableRefObject` | Optional ref to forward to the confirm password input. | | -| passwordNotMatchError | `string` | Optional text for showing message when passwords not match. | | -| onSubmit | `() => void` | Callback function to fire when the Enter key is pressed in the confirm field. | | +| Prop Name | Type | Description | Default | +| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------- | +| onPasswordChange | `(passwords: { password: string; confirm: string }) => void` | Called when the new password or confirm new password fields value changes. | | +| newPasswordLabel | `string` | The label for the new password field. | | +| initialNewPasswordValue | `string` | The initial value for the new password field. | | +| confirmPasswordLabel | `string` | The label for the confirm password field. | | +| initialConfirmPasswordValue | `string` | The initial value for the confirm password field. | | +| passwordRequirements | `PasswordRequirement[]` | An array of password complexity requirements . See [PasswordRequirements](#PasswordRequirements) for more details. | | +| passwordRef | `MutableRefObject` | Optional ref to forward to the password input. | | +| confirmRef | `MutableRefObject` | Optional ref to forward to the confirm password input. | | +| passwordNotMatchError | `string` | Optional text for showing message when passwords not match. | | +| onSubmit | `() => void` | Callback function to fire when the Enter key is pressed in the confirm field. | | +| passwordTextFieldProps | `TextFieldProps` | Props to pass to the password input field. See MUI's [TextFieldProps API](https://mui.com/material-ui/api/text-field/). | | +| confirmPasswordTextFieldProps | `TextFieldProps` | Props to pass to the confirm password input field. See MUI's [TextFieldProps API](https://mui.com/material-ui/api/text-field/). | | ### PasswordRequirements -| Prop Name | Type | Description | Default | -|---|---|---|---| -| description | `string` | The text description / label of the password requirement. | | -| regex | `RegExp` | The regex to compare the password against. | | \ No newline at end of file +| Prop Name | Type | Description | Default | +| ----------- | -------- | --------------------------------------------------------- | ------- | +| description | `string` | The text description / label of the password requirement. | | +| regex | `RegExp` | The regex to compare the password against. | | diff --git a/login-workflow/docs/screens/forgot-password.md b/login-workflow/docs/screens/forgot-password.md index 97623c6e..96119302 100644 --- a/login-workflow/docs/screens/forgot-password.md +++ b/login-workflow/docs/screens/forgot-password.md @@ -29,6 +29,7 @@ import { AuthContextProvider, ForgotPasswordScreen } from '@brightlayer-ui/react | description | `(responseTime: string) => React.ReactNode;` | used to update the instruction | | showSuccessScreen | `boolean` | If true, a success screen will appear after submitting the form | `true` | | errorDisplayConfig | `ErrorManagerProps` | See [Error Management](../error-management.md) | | +| emailTextFieldProps| `TextFieldProps` | Props to pass to the email input field. See MUI's [TextFieldProps API](https://mui.com/material-ui/api/text-field/). | | This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](../components/workflow-card.md) for more details. diff --git a/login-workflow/docs/screens/verify-code.md b/login-workflow/docs/screens/verify-code.md index 1dacef3a..26b9c181 100644 --- a/login-workflow/docs/screens/verify-code.md +++ b/login-workflow/docs/screens/verify-code.md @@ -18,14 +18,15 @@ import { RegistrationContextProvider, VerifyCodeScreen } from '@brightlayer-ui/r ## API -| Prop Name | Type | Description | Default | -|---|---|---|---| -| codeValidator | `(code: string) => boolean \| string` | A function to validate the input value | required to be > 0 characters | -| onResend | `() => void` | A function that is called when the resend link/button is clicked. | | -| resendInstructions | `string` | Text to display ahead of the resend link/button. | `t('bluiAuth:VERIFY_CODE.RESEND_INSTRUCTIONS')` | -| resendLabel | `string` | Label/text for the resend link/button. | `t('bluiAuth:VERIFY_CODE.RESEND')` | -| initialValue | `string` | The initial value for the code input. | | -| verifyCodeInputLabel | `string` | The label for the code text field. | `t('bluiAuth:VERIFY_CODE.VERIFICATION_CODE')` | -| errorDisplayConfig | `ErrorManagerProps` | See [Error Management](../error-management.md) | | - -This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](../components/workflow-card.md) for more details. \ No newline at end of file +| Prop Name | Type | Description | Default | +| ------------------------ | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | +| codeValidator | `(code: string) => boolean \| string` | A function to validate the input value | required to be > 0 characters | +| onResend | `() => void` | A function that is called when the resend link/button is clicked. | | +| resendInstructions | `string` | Text to display ahead of the resend link/button. | `t('bluiAuth:VERIFY_CODE.RESEND_INSTRUCTIONS')` | +| resendLabel | `string` | Label/text for the resend link/button. | `t('bluiAuth:VERIFY_CODE.RESEND')` | +| initialValue | `string` | The initial value for the code input. | | +| verifyCodeInputLabel | `string` | The label for the code text field. | `t('bluiAuth:VERIFY_CODE.VERIFICATION_CODE')` | +| errorDisplayConfig | `ErrorManagerProps` | See [Error Management](../error-management.md) | | +| verifyCodeTextFieldProps | `TextFieldProps` | Props to pass to the verify code input field. See MUI's [TextFieldProps API](https://mui.com/material-ui/api/text-field/). | | + +This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](../components/workflow-card.md) for more details. diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index c3465c7c..cac0fed0 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -19,7 +19,10 @@ import CheckCircle from '@mui/icons-material/CheckCircle'; * @param enableButton boolean to enable and disable the button * @param onFinish function called when the button is clicked on success screen * @param onSubmit Callback function to call when the form is submitted - * @param onPrevious function called when the previous button is clicked + * @param onPrevious called when the previous button is clicked + * @param sx styles passed to the underlying root component + * @param loading boolean that indicates whether the loading spinner should be displayed + * @param currentPasswordTextFieldProps props to pass to the current password field. * @param showSuccessScreen boolean that determines whether to show the success screen or not * @param slots used for ChangePasswordDialog SuccessScreen props * @param slotProps props that will be passed to the SuccessScreen component @@ -50,6 +53,7 @@ export const ChangePasswordDialog: React.FC = (props) onFinish, PasswordProps, ErrorDialogProps, + currentPasswordTextFieldProps, } = props; const passwordRequirements = defaultPasswordRequirements(t); @@ -132,11 +136,12 @@ export const ChangePasswordDialog: React.FC = (props) currentPasswordChange={(currentPwd): void => setCurrentInput(currentPwd)} enableButton={checkPasswords} onPrevious={onPrevious} + PasswordProps={passwordProps} + ErrorDialogProps={errorDialogProps} + currentPasswordTextFieldProps={currentPasswordTextFieldProps} onSubmit={async (): Promise => { await changePasswordSubmit(); }} - PasswordProps={passwordProps} - ErrorDialogProps={errorDialogProps} slotProps={{ SuccessScreen: { icon: , diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 45374a27..d271a589 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -34,6 +34,7 @@ import { SuccessScreenBase, SuccessScreenProps } from '../../screens'; * @param onPrevious called when the previous button is clicked * @param sx styles passed to the underlying root component * @param loading boolean that indicates whether the loading spinner should be displayed + * @param currentPasswordTextFieldProps props to pass to the current password field. * @param showSuccessScreen boolean that determines whether to show the success screen or not * @param slots used for ChangePasswordDialog SuccessScreen props * @param slotProps props that will be passed to the SuccessScreen component @@ -57,6 +58,7 @@ export const ChangePasswordDialogBase: React.FC = (pr ErrorDialogProps, PasswordProps, loading, + currentPasswordTextFieldProps, showSuccessScreen, slots, slotProps, @@ -132,7 +134,13 @@ export const ChangePasswordDialogBase: React.FC = (pr id="current-password" label={currentPasswordLabel} value={currentPassword} - onChange={handleChange} + {...currentPasswordTextFieldProps} + onChange={(e): void => { + // eslint-disable-next-line no-unused-expressions + currentPasswordTextFieldProps?.onChange && + currentPasswordTextFieldProps.onChange(e); + handleChange(e); + }} onKeyUp={(e): void => { const { current } = PasswordProps.passwordRef; if (e.key === 'Enter' && current) { diff --git a/login-workflow/src/components/ChangePasswordDialog/types.ts b/login-workflow/src/components/ChangePasswordDialog/types.ts index 47294b4b..fb74d8a3 100644 --- a/login-workflow/src/components/ChangePasswordDialog/types.ts +++ b/login-workflow/src/components/ChangePasswordDialog/types.ts @@ -1,5 +1,5 @@ +import { DialogProps, TextFieldProps } from '@mui/material'; import { SuccessScreenProps } from '../../screens'; -import { DialogProps } from '@mui/material'; import { BasicDialogProps } from '../Dialog'; import { SetPasswordProps } from '../SetPassword'; @@ -74,6 +74,12 @@ export type ChangePasswordDialogProps = DialogProps & { PasswordProps?: SetPassw */ loading?: boolean; + /** + * The props to pass to the current password field. + * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details. + */ + currentPasswordTextFieldProps?: TextFieldProps; + /** * Used to determine whether to show a success screen after the form is submitted */ diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index eb726293..174cea84 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -20,6 +20,8 @@ import { PasswordRequirements } from '../PasswordRequirements'; * @param confirmRef ref to forward to the confirm password input. * @param passwordNotMatchError text for showing message when passwords do not match. * @param onSubmit function to call when the form is submitted + * @param passwordTextFieldProps props to pass to the password field. + * @param confirmPasswordTextFieldProps props to pass to the confirm password field. * * @category Component */ @@ -37,6 +39,8 @@ export const SetPassword: React.FC> = confirmRef, passwordNotMatchError, onSubmit, + passwordTextFieldProps, + confirmPasswordTextFieldProps, } = props; const theme = useTheme(); @@ -84,14 +88,24 @@ export const SetPassword: React.FC> = inputRef={passwordRef} label={newPasswordLabel} value={passwordInput} - onChange={(evt: ChangeEvent): void => onPassChange(evt.target.value)} + error={shouldValidatePassword && !isValidPassword()} + sx={TextFieldStyles(theme)} + {...passwordTextFieldProps} + onChange={(evt: ChangeEvent): void => { + // eslint-disable-next-line no-unused-expressions + passwordTextFieldProps?.onChange && passwordTextFieldProps.onChange(evt); + onPassChange(evt.target.value); + }} onKeyUp={(e): void => { if (e.key === 'Enter' && confirmRef.current) { confirmRef.current.focus(); } }} - error={shouldValidatePassword && !isValidPassword()} - onBlur={(): void => setShouldValidatePassword(true)} + onBlur={(e): void => { + // eslint-disable-next-line no-unused-expressions + passwordTextFieldProps?.onBlur && passwordTextFieldProps.onBlur(e); + setShouldValidatePassword(true); + }} /> {passwordRequirements && passwordRequirements.length > 0 && ( > = label={confirmPasswordLabel} sx={TextFieldStyles(theme)} value={confirmInput} - onChange={(evt: ChangeEvent): void => onConfirmChange(evt.target.value)} - onKeyUp={(e): void => { - if (e.key === 'Enter' && onSubmit) onSubmit(); - }} error={hasConfirmPasswordError()} helperText={hasConfirmPasswordError() ? passwordNotMatchError : ''} icon={ @@ -119,7 +129,20 @@ export const SetPassword: React.FC> = ) : undefined } - onBlur={(): void => setShouldValidateConfirmPassword(true)} + {...confirmPasswordTextFieldProps} + onChange={(evt: ChangeEvent): void => { + // eslint-disable-next-line no-unused-expressions + confirmPasswordTextFieldProps?.onChange && confirmPasswordTextFieldProps.onChange(evt); + onConfirmChange(evt.target.value); + }} + onKeyUp={(e): void => { + if (e.key === 'Enter' && onSubmit) onSubmit(); + }} + onBlur={(e): void => { + // eslint-disable-next-line no-unused-expressions + confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e); + setShouldValidateConfirmPassword(true); + }} /> ); diff --git a/login-workflow/src/components/SetPassword/types.ts b/login-workflow/src/components/SetPassword/types.ts index 8f630a66..fa0f77fd 100644 --- a/login-workflow/src/components/SetPassword/types.ts +++ b/login-workflow/src/components/SetPassword/types.ts @@ -1,4 +1,5 @@ import { MutableRefObject } from 'react'; +import { TextFieldProps } from '@mui/material'; /** * Parameters for dynamic password strength requirements. @@ -71,4 +72,16 @@ export type SetPasswordProps = { * @returns void */ onSubmit?: () => void; + + /** + * The props to pass to the password field. + * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details. + */ + passwordTextFieldProps?: TextFieldProps; + + /** + * The props to pass to the confirm password field. + * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details. + */ + confirmPasswordTextFieldProps?: TextFieldProps; }; diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index fadf9a63..d2558fe2 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -25,6 +25,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param emailTextFieldProps props to pass to the email field. * * @category Component */ @@ -78,6 +79,7 @@ export const ForgotPasswordScreen: React.FC = (props) showSuccessScreen: enableSuccessScreen = true, slotProps = { SuccessScreen: {} }, slots, + emailTextFieldProps, } = props; const workflowCardBaseProps = { @@ -138,6 +140,7 @@ export const ForgotPasswordScreen: React.FC = (props) emailLabel={emailLabel} initialEmailValue={initialEmailValue} emailValidator={emailValidator} + emailTextFieldProps={emailTextFieldProps} showSuccessScreen={enableSuccessScreen && showSuccessScreen} slots={{ SuccessScreen: diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 8b1cea9f..d41b7037 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -30,6 +30,7 @@ type ForgotPasswordScreenBaseProps = Omit & * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param emailTextFieldProps props to pass to the email field. * * @category Component */ @@ -46,6 +47,7 @@ export const ForgotPasswordScreenBase: React.FC { + // eslint-disable-next-line no-unused-expressions + emailTextFieldProps?.onBlur && emailTextFieldProps.onBlur(e); + setShouldValidateEmail(true); + }} onChange={(evt): void => { + // eslint-disable-next-line no-unused-expressions + emailTextFieldProps?.onChange && emailTextFieldProps.onChange(evt); handleEmailInputChange(evt.target.value); }} onKeyUp={(e): void => { @@ -100,10 +113,6 @@ export const ForgotPasswordScreenBase: React.FC setShouldValidateEmail(true)} /> diff --git a/login-workflow/src/screens/ForgotPasswordScreen/types.ts b/login-workflow/src/screens/ForgotPasswordScreen/types.ts index 61888a90..cf0274b6 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/types.ts +++ b/login-workflow/src/screens/ForgotPasswordScreen/types.ts @@ -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'; @@ -62,4 +63,10 @@ export type ForgotPasswordScreenProps = WorkflowCardProps & { * used to configure how errors are rendered */ errorDisplayConfig?: ErrorManagerProps; + + /** + * The props to pass to the email field. + * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details. + */ + emailTextFieldProps?: TextFieldProps; }; diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx index 7d381847..d3f70f14 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx @@ -20,6 +20,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param verifyCodeTextFieldProps props to pass to the verify code field. * * @category Component */ @@ -64,6 +65,7 @@ export const VerifyCodeScreen: React.FC = (props) => { resendLabel = t('bluiCommon:ACTIONS.RESEND'), verifyCodeInputLabel = t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.VERIFICATION'), initialValue = screenData.VerifyCode.code, + verifyCodeTextFieldProps, } = props; const handleOnNext = useCallback( @@ -143,6 +145,7 @@ export const VerifyCodeScreen: React.FC = (props) => { onResend={onResend} codeValidator={codeValidator} errorDisplayConfig={errorDisplayConfig} + verifyCodeTextFieldProps={verifyCodeTextFieldProps} /> ); }; diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx index 8bf08ecf..d95e6546 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx @@ -25,6 +25,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param verifyCodeTextFieldProps props to pass to the verify code field. * * @category Component */ @@ -38,6 +39,7 @@ export const VerifyCodeScreenBase: React.FC { + // eslint-disable-next-line no-unused-expressions + verifyCodeTextFieldProps?.onBlur && verifyCodeTextFieldProps.onBlur(e); + setShouldValidateCode(true); + }} onChange={(evt): void => { + // eslint-disable-next-line no-unused-expressions + verifyCodeTextFieldProps?.onChange && verifyCodeTextFieldProps.onChange(evt); 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)} /> diff --git a/login-workflow/src/screens/VerifyCodeScreen/types.ts b/login-workflow/src/screens/VerifyCodeScreen/types.ts index 0d6bccb1..c27f9154 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/types.ts +++ b/login-workflow/src/screens/VerifyCodeScreen/types.ts @@ -1,3 +1,4 @@ +import { TextFieldProps } from '@mui/material'; import { ErrorManagerProps } from '../../components/Error'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; @@ -39,4 +40,10 @@ export type VerifyCodeScreenProps = WorkflowCardProps & { * The configuration for customizing how errors are displayed */ errorDisplayConfig?: ErrorManagerProps; + + /** + * The props to pass to the verify code field. + * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details. + */ + verifyCodeTextFieldProps?: TextFieldProps; };