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 8 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
33 changes: 17 additions & 16 deletions login-workflow/docs/components/change-password-dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,20 @@ 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` |
| onSubmit | `() => 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. | |

Props from the underlying MUI [Dialog](https://mui.com/material-ui/react-dialog/) are also available.
| 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` |
| onSubmit | `() => 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/). | |

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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.
6 changes: 6 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 @@ -17,6 +17,10 @@ import { ChangePasswordDialogProps } from './types';
* @param currentPasswordChange called when the current password field changes
* @param enableButton boolean to enable and disable the button
* @param onSubmit Callback function to call when the form is submitted
* @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.
*
* @category Component
*/
Expand All @@ -43,6 +47,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
onSubmit,
PasswordProps,
ErrorDialogProps,
currentPasswordTextFieldProps,
} = props;

const passwordRequirements = defaultPasswordRequirements(t);
Expand Down Expand Up @@ -115,6 +120,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
9 changes: 8 additions & 1 deletion login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { Spinner } from '../../components';
* @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.
*
* @category Component
*/
Expand All @@ -52,6 +53,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,7 +104,12 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
id="current-password"
label={currentPasswordLabel}
value={currentPassword}
onChange={handleChange}
{...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={(e): void => {
// eslint-disable-next-line no-unused-expressions
currentPasswordTextFieldProps?.onChange && currentPasswordTextFieldProps.onChange(e);
handleChange(e.target.value);
manojleaton marked this conversation as resolved.
Show resolved Hide resolved
}}
onKeyUp={(e): void => {
const { current } = PasswordProps.passwordRef;
if (e.key === 'Enter' && current) {
Expand Down
11 changes: 10 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 @@ -54,5 +54,14 @@ export type ChangePasswordDialogProps = DialogProps & { PasswordProps?: SetPassw
*/
onPrevious?: () => void;

/**
* If true, a blocking progress spinner will be displayed over the card
*/
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;
};
Loading