Skip to content

Commit

Permalink
Merge pull request #461 from etn-ccis/4302---adding-textfield-props
Browse files Browse the repository at this point in the history
[Verify] Update new-architecture input fields on base screens to pass through all textfield props
  • Loading branch information
manojleaton authored Sep 13, 2023
2 parents 0508022 + 7501b30 commit e57a6c5
Show file tree
Hide file tree
Showing 15 changed files with 165 additions and 69 deletions.
41 changes: 20 additions & 21 deletions login-workflow/docs/components/change-password-dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<void>` | 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<void>` | 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

Expand All @@ -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.
Props from the underlying MUI [Dialog](https://mui.com/material-ui/react-dialog/) are also available.
34 changes: 18 additions & 16 deletions login-workflow/docs/components/set-password.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>` | Optional ref to forward to the password input. | |
| confirmRef | `MutableRefObject<any>` | 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<any>` | Optional ref to forward to the password input. | |
| confirmRef | `MutableRefObject<any>` | 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. | |
| Prop Name | Type | Description | Default |
| ----------- | -------- | --------------------------------------------------------- | ------- |
| description | `string` | The text description / label of the password requirement. | |
| regex | `RegExp` | The regex to compare the password against. | |
1 change: 1 addition & 0 deletions login-workflow/docs/screens/forgot-password.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
23 changes: 12 additions & 11 deletions login-workflow/docs/screens/verify-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
| 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.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -50,6 +53,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
onFinish,
PasswordProps,
ErrorDialogProps,
currentPasswordTextFieldProps,
} = props;

const passwordRequirements = defaultPasswordRequirements(t);
Expand Down Expand Up @@ -132,11 +136,12 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
currentPasswordChange={(currentPwd): void => setCurrentInput(currentPwd)}
enableButton={checkPasswords}
onPrevious={onPrevious}
PasswordProps={passwordProps}
ErrorDialogProps={errorDialogProps}
currentPasswordTextFieldProps={currentPasswordTextFieldProps}
onSubmit={async (): Promise<void> => {
await changePasswordSubmit();
}}
PasswordProps={passwordProps}
ErrorDialogProps={errorDialogProps}
slotProps={{
SuccessScreen: {
icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
Expand Down
Loading

0 comments on commit e57a6c5

Please sign in to comment.