From 7cbad8cee892779fbb905a7824a6b6a92d6cba31 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Mon, 4 Sep 2023 15:07:35 +0530 Subject: [PATCH 1/5] initial code changes --- .../example/src/screens/ExampleHome.tsx | 1 + .../ChangePasswordDialog.tsx | 2 ++ .../ChangePasswordDialogBase.tsx | 2 ++ .../src/components/ChangePasswordDialog/types.ts | 6 +++++- .../src/components/SetPassword/SetPassword.tsx | 16 ++++++++++------ .../src/components/SetPassword/types.ts | 7 +++++++ .../ForgotPasswordScreen.tsx | 2 ++ .../ForgotPasswordScreenBase.tsx | 10 ++++++---- .../src/screens/ForgotPasswordScreen/types.ts | 4 ++++ .../VerifyCodeScreen/VerifyCodeScreen.tsx | 2 ++ .../VerifyCodeScreen/VerifyCodeScreenBase.tsx | 10 ++++++---- .../src/screens/VerifyCodeScreen/types.ts | 4 ++++ 12 files changed, 51 insertions(+), 15 deletions(-) diff --git a/login-workflow/example/src/screens/ExampleHome.tsx b/login-workflow/example/src/screens/ExampleHome.tsx index a79e58c5..0f9ea198 100644 --- a/login-workflow/example/src/screens/ExampleHome.tsx +++ b/login-workflow/example/src/screens/ExampleHome.tsx @@ -32,6 +32,7 @@ import FormControl from '@mui/material/FormControl'; import { MenuItem, Select, SelectChangeEvent } from '@mui/material'; import { useAuthContext } from '@brightlayer-ui/react-auth-workflow'; import i18n from '../translations/i18n'; + export const ExampleHome: React.FC = () => { const app = useApp(); const supportedLanguages = ['en', 'fr', 'es', 'zh', 'pt']; diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index 6389f959..6f61d2ba 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -43,6 +43,7 @@ export const ChangePasswordDialog: React.FC = (props) onSubmit, PasswordProps, ErrorDialogProps, + currentPasswordTextFieldProps, } = props; const passwordRequirements = defaultPasswordRequirements(t); @@ -119,6 +120,7 @@ export const ChangePasswordDialog: React.FC = (props) }} PasswordProps={passwordProps} ErrorDialogProps={errorDialogProps} + currentPasswordTextFieldProps={currentPasswordTextFieldProps} /> ); }; diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 560d58d1..5a53dfd8 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -52,6 +52,7 @@ export const ChangePasswordDialogBase: React.FC = (pr ErrorDialogProps, PasswordProps, loading, + currentPasswordTextFieldProps, } = props; const theme = useTheme(); const matchesSM = useMediaQuery(theme.breakpoints.down('sm')); @@ -99,6 +100,7 @@ export const ChangePasswordDialogBase: React.FC = (pr id="current-password" label={currentPasswordLabel} value={currentPassword} + {...currentPasswordTextFieldProps} onChange={handleChange} onKeyUp={(e): void => { const { current } = PasswordProps.passwordRef; diff --git a/login-workflow/src/components/ChangePasswordDialog/types.ts b/login-workflow/src/components/ChangePasswordDialog/types.ts index b3c740a1..6547c160 100644 --- a/login-workflow/src/components/ChangePasswordDialog/types.ts +++ b/login-workflow/src/components/ChangePasswordDialog/types.ts @@ -1,4 +1,4 @@ -import { DialogProps } from '@mui/material'; +import { DialogProps, TextFieldProps } from '@mui/material'; import { BasicDialogProps } from '../Dialog'; import { SetPasswordProps } from '../SetPassword'; @@ -53,5 +53,9 @@ export type ChangePasswordDialogProps = DialogProps & { PasswordProps?: SetPassw * @returns void */ onPrevious?: () => void; + loading?: boolean; + + // The props to pass to the current password text field. + currentPasswordTextFieldProps?: TextFieldProps; }; diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index 4af94842..abade8e4 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -37,6 +37,8 @@ export const SetPassword: React.FC> = confirmRef, passwordNotMatchError, onSubmit, + passwordTextFieldProps, + confirmPasswordTextFieldProps, } = props; const theme = useTheme(); @@ -84,14 +86,15 @@ 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 => 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 && ( @@ -109,10 +112,6 @@ export const SetPassword: React.FC> = 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={ @@ -120,6 +119,11 @@ export const SetPassword: React.FC> = ) : undefined } + {...confirmPasswordTextFieldProps} + onChange={(evt: ChangeEvent): void => onConfirmChange(evt.target.value)} + onKeyUp={(e): void => { + if (e.key === 'Enter' && onSubmit) onSubmit(); + }} onBlur={(): void => setShouldValidateConfirmPassword(true)} /> diff --git a/login-workflow/src/components/SetPassword/types.ts b/login-workflow/src/components/SetPassword/types.ts index 8f630a66..80b608f4 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,10 @@ export type SetPasswordProps = { * @returns void */ onSubmit?: () => void; + + // The props to pass to the password text field. + passwordTextFieldProps?: TextFieldProps; + + // The props to pass to the confirm password text field. + confirmPasswordTextFieldProps?: TextFieldProps; }; diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index 4a92b75a..db06aa74 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -85,6 +85,7 @@ export const ForgotPasswordScreen: React.FC = (props) showSuccessScreen: enableSuccessScreen = true, slotProps = { SuccessScreen: {} }, slots, + emailTextFieldProps, } = props; const workflowCardBaseProps = { @@ -145,6 +146,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 59b76c37..5096c86b 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -46,6 +46,7 @@ export const ForgotPasswordScreenBase: React.FC setShouldValidateEmail(true)} onChange={(evt): void => { handleEmailInputChange(evt.target.value); }} @@ -100,10 +106,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 2d908749..de176adf 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'; @@ -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; }; diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx index bb359342..38ff3879 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx @@ -64,6 +64,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 +144,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 eedbe530..cc93dd7a 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx @@ -38,6 +38,7 @@ export const VerifyCodeScreenBase: React.FC setShouldValidateCode(true)} onChange={(evt): void => { handleVerifyCodeInputChange(evt.target.value); }} @@ -97,10 +103,6 @@ export const VerifyCodeScreenBase: React.FC 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..5de4a4ea 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,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; }; From 7fb340972f4d87b45a9d6be8923c302339b13c64 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Thu, 7 Sep 2023 14:25:09 +0530 Subject: [PATCH 2/5] docs changes --- .../docs/components/change-password-dialog.md | 33 +++++----- .../docs/components/set-password.md | 34 +++++----- .../docs/screens/forgot-password.md | 63 +++++++++---------- login-workflow/docs/screens/verify-code.md | 23 +++---- .../components/ChangePasswordDialog/types.ts | 8 ++- .../src/components/SetPassword/types.ts | 10 ++- .../src/screens/ForgotPasswordScreen/types.ts | 5 +- .../src/screens/VerifyCodeScreen/types.ts | 5 +- 8 files changed, 101 insertions(+), 80 deletions(-) diff --git a/login-workflow/docs/components/change-password-dialog.md b/login-workflow/docs/components/change-password-dialog.md index b19f0870..7ed7cbc5 100644 --- a/login-workflow/docs/components/change-password-dialog.md +++ b/login-workflow/docs/components/change-password-dialog.md @@ -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. \ No newline at end of file +| 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. 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 4624d4df..36a6062d 100644 --- a/login-workflow/docs/screens/forgot-password.md +++ b/login-workflow/docs/screens/forgot-password.md @@ -17,48 +17,47 @@ import { AuthContextProvider, ForgotPasswordScreen } from '@brightlayer-ui/react ## API -| Prop Name | Type | Description | Default | -|---|---|---|---| -| emailLabel | `string` | Text to display as the label for the email text field. | `t('bluiAuth:FORGOT_PASSWORD.EMAIL_ADDRESS')` | -| initialEmailValue | `string` | The initial value for the email text field input. | | -| emailValidator | `(email: string) => boolean \| string` | A function that validates the email text field input. | checks against valid email regex | -| slots | `ForgotPasswordScreenSlots` | Components to use in place of the defaults. See [ForgotPasswordScreenSlots](#forgotpasswordscreenslots) | | -| slotProps | `ForgotPasswordScreenSlotProps` | Props to pass to the custom slot components. See [ForgotPasswordScreenSlotProps](#forgotpasswordscreenslotprops) | | -| contactPhone | `string` | The phone number to display in the contact section. | `1-800-123-4567` | -| responseTime | `string` | The response time to display in the contact section. | `24 hours` | -| showSuccessScreen | `boolean` | If true, a success screen will appear after submitting the form | `true` | -| errorDisplayConfig | `ErrorManagerProps` | See [Error Management](../error-management.md) | | +| Prop Name | Type | Description | Default | +| ------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | +| emailLabel | `string` | Text to display as the label for the email text field. | `t('bluiAuth:FORGOT_PASSWORD.EMAIL_ADDRESS')` | +| initialEmailValue | `string` | The initial value for the email text field input. | | +| emailValidator | `(email: string) => boolean \| string` | A function that validates the email text field input. | checks against valid email regex | +| slots | `ForgotPasswordScreenSlots` | Components to use in place of the defaults. See [ForgotPasswordScreenSlots](#forgotpasswordscreenslots) | | +| slotProps | `ForgotPasswordScreenSlotProps` | Props to pass to the custom slot components. See [ForgotPasswordScreenSlotProps](#forgotpasswordscreenslotprops) | | +| contactPhone | `string` | The phone number to display in the contact section. | `1-800-123-4567` | +| responseTime | `string` | The response time to display in the contact section. | `24 hours` | +| 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. - TODO: Should this be from WorkflowCardInstructionsProps? -- **description** (optional) - - A function that returns the description to display in the contact section. - - **Type:** `(responseTime: string) => React.ReactNode` - - **Default:** - ```tsx - (responseTime: string): React.ReactNode => { - return ( -

- {t('bluiAuth:FORGOT_PASSWORD.DESCRIPTION', { - responseTime, - })} -

- ); - } - ``` +- **description** (optional) + - A function that returns the description to display in the contact section. + - **Type:** `(responseTime: string) => React.ReactNode` + - **Default:** + ```tsx + (responseTime: string): React.ReactNode => { + return ( +

+ {t('bluiAuth:FORGOT_PASSWORD.DESCRIPTION', { + responseTime, + })} +

+ ); + }; + ``` ### ForgotPasswordScreenSlots -| Key | Type | Description | -|---|---|---| +| Key | Type | Description | +| ------------- | -------------------------------------------- | ------------------------------------------------------------------------------ | | SuccessScreen | `(props: SuccessScreenProps) => JSX.Element` | A custom success screen component to render. See [SuccessScreen](./success.md) | ### ForgotPasswordScreenSlotProps -| Key | Type | Description | -|---|---|---| +| Key | Type | Description | +| ------------- | -------------------- | --------------------------------------------------------------------------------------- | | SuccessScreen | `SuccessScreenProps` | Props to pass to the custom success screen component. See [SuccessScreen](./success.md) | - 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/types.ts b/login-workflow/src/components/ChangePasswordDialog/types.ts index b3f47233..e92dbbbd 100644 --- a/login-workflow/src/components/ChangePasswordDialog/types.ts +++ b/login-workflow/src/components/ChangePasswordDialog/types.ts @@ -54,8 +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 text field. + /** + * 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; }; diff --git a/login-workflow/src/components/SetPassword/types.ts b/login-workflow/src/components/SetPassword/types.ts index 80b608f4..fa0f77fd 100644 --- a/login-workflow/src/components/SetPassword/types.ts +++ b/login-workflow/src/components/SetPassword/types.ts @@ -73,9 +73,15 @@ export type SetPasswordProps = { */ onSubmit?: () => void; - // The props to pass to the password text field. + /** + * 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 text field. + /** + * 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/types.ts b/login-workflow/src/screens/ForgotPasswordScreen/types.ts index de176adf..aecc3182 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/types.ts +++ b/login-workflow/src/screens/ForgotPasswordScreen/types.ts @@ -77,6 +77,9 @@ export type ForgotPasswordScreenProps = WorkflowCardProps & { */ errorDisplayConfig?: ErrorManagerProps; - // The props to pass to the forgot password email text field. + /** + * 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/types.ts b/login-workflow/src/screens/VerifyCodeScreen/types.ts index 5de4a4ea..c27f9154 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/types.ts +++ b/login-workflow/src/screens/VerifyCodeScreen/types.ts @@ -41,6 +41,9 @@ export type VerifyCodeScreenProps = WorkflowCardProps & { */ errorDisplayConfig?: ErrorManagerProps; - // The props to pass to the verify code text field. + /** + * 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; }; From 466d99f6d7ac7aa238bc96fbd0918c6fb544fcd5 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Thu, 7 Sep 2023 17:50:55 +0530 Subject: [PATCH 3/5] updating JS docs --- .../components/ChangePasswordDialog/ChangePasswordDialog.tsx | 4 ++++ .../ChangePasswordDialog/ChangePasswordDialogBase.tsx | 1 + login-workflow/src/components/SetPassword/SetPassword.tsx | 2 ++ .../src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx | 1 + .../screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx | 1 + .../src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx | 1 + .../src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx | 1 + 7 files changed, 11 insertions(+) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index 791c68ba..27116eb2 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -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 */ diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index bc8d9180..8e64469f 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -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 */ diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index abade8e4..fb38e09d 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 */ diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index d24043c0..5d9a78ab 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -26,6 +26,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 */ diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index c8dc0910..53d1158d 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 */ diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx index 8277b6d8..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 */ diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx index 8721b39a..c0837b79 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 */ From 78327b53863ab2cfc3b12b643e8e98dd9a6c8418 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Fri, 8 Sep 2023 17:16:55 +0530 Subject: [PATCH 4/5] merging events of text field --- .../ChangePasswordDialogBase.tsx | 6 ++++- .../components/SetPassword/SetPassword.tsx | 24 +++++++++++++++---- .../ForgotPasswordScreenBase.tsx | 8 ++++++- .../VerifyCodeScreen/VerifyCodeScreenBase.tsx | 8 ++++++- 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 8e64469f..9d612bc3 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -105,7 +105,11 @@ export const ChangePasswordDialogBase: React.FC = (pr label={currentPasswordLabel} value={currentPassword} {...currentPasswordTextFieldProps} - onChange={handleChange} + onChange={(e): void => { + // eslint-disable-next-line no-unused-expressions + currentPasswordTextFieldProps?.onChange && currentPasswordTextFieldProps.onChange(e); + handleChange(e.target.value); + }} onKeyUp={(e): void => { const { current } = PasswordProps.passwordRef; if (e.key === 'Enter' && current) { diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index fb38e09d..174cea84 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -91,13 +91,21 @@ export const SetPassword: React.FC> = error={shouldValidatePassword && !isValidPassword()} sx={TextFieldStyles(theme)} {...passwordTextFieldProps} - onChange={(evt: ChangeEvent): void => onPassChange(evt.target.value)} + 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(); } }} - 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 && ( > = ) : undefined } {...confirmPasswordTextFieldProps} - onChange={(evt: ChangeEvent): void => onConfirmChange(evt.target.value)} + 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={(): void => setShouldValidateConfirmPassword(true)} + onBlur={(e): void => { + // eslint-disable-next-line no-unused-expressions + confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e); + setShouldValidateConfirmPassword(true); + }} /> ); diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 53d1158d..d41b7037 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -96,8 +96,14 @@ export const ForgotPasswordScreenBase: React.FC setShouldValidateEmail(true)} + onBlur={(e): void => { + // 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 => { diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx index c0837b79..d95e6546 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx @@ -96,8 +96,14 @@ export const VerifyCodeScreenBase: React.FC setShouldValidateCode(true)} + onBlur={(e): void => { + // 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 => { From bff6f1df8e1f6667004f759db074718600e2e89b Mon Sep 17 00:00:00 2001 From: manojleaton Date: Mon, 11 Sep 2023 16:52:49 +0530 Subject: [PATCH 5/5] review comments incorporation --- .../ChangePasswordDialog/ChangePasswordDialogBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 9d612bc3..70ac516e 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -108,7 +108,7 @@ export const ChangePasswordDialogBase: React.FC = (pr onChange={(e): void => { // eslint-disable-next-line no-unused-expressions currentPasswordTextFieldProps?.onChange && currentPasswordTextFieldProps.onChange(e); - handleChange(e.target.value); + handleChange(e); }} onKeyUp={(e): void => { const { current } = PasswordProps.passwordRef;