From 67f8b610fd4f05f1ff8ddf51b6e9e8b0b26ad4c0 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Mon, 11 Sep 2023 19:34:27 +0530 Subject: [PATCH 1/3] Update passwordValidator and passwordRequiredValidatorText prop --- login-workflow/docs/screens/login.md | 1 + login-workflow/example/src/screens/Login.tsx | 1 + login-workflow/src/screens/LoginScreen/LoginScreen.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/login-workflow/docs/screens/login.md b/login-workflow/docs/screens/login.md index 13ac4fdd..e29bd331 100644 --- a/login-workflow/docs/screens/login.md +++ b/login-workflow/docs/screens/login.md @@ -29,6 +29,7 @@ import { AuthContextProvider, LoginScreen } from '@brightlayer-ui/react-auth-wor | passwordLabel | `string` | Label for the password field. | `t('bluiCommon:LABELS.EMAIL')` | | passwordTextFieldProps | `TextFieldProps` | Props to pass to the MUI [TextField](https://mui.com/material-ui/api/text-field/) component. | | | passwordValidator | `(password: string) => boolean \| string` | A function that validates the password text field input. | checks against valid email regex | +| passwordRequiredValidatorText | `string` | Text for showing password is required. | `t('bluiCommon:MESSAGES.PASSWORD_REQUIRED_ERROR')` | | initialUsernameValue | `string` | Username used to pre-populate the field. | | | loginButtonLabel | `string` | Label for the login button. | `t('bluiCommon:ACTIONS.LOG_IN')` | | onLogin | `(username: string, password: string, rememberMe: boolean) => Promise` | Callback function that is called when the login button is clicked. | | diff --git a/login-workflow/example/src/screens/Login.tsx b/login-workflow/example/src/screens/Login.tsx index 9f3b31fe..63dca800 100644 --- a/login-workflow/example/src/screens/Login.tsx +++ b/login-workflow/example/src/screens/Login.tsx @@ -8,6 +8,7 @@ export const Login = (): JSX.Element => ( } header={} + passwordRequiredValidatorText={'ndnd'} errorDisplayConfig={{ mode: 'message-box', messageBoxConfig: { diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index 385f913b..ace0c72f 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -43,7 +43,7 @@ const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; * @category Component */ -type LoginScreenPropsPublic = Omit & { passwordRequiredValidatorText?: string }; +type LoginScreenPropsPublic = LoginScreenProps & { passwordRequiredValidatorText?: string }; export const LoginScreen: React.FC> = (props) => { const { t } = useLanguageLocale(); From 5277d7e9430c8e3c41e9fa698d206ba422253dd8 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Sat, 16 Sep 2023 10:48:14 +0530 Subject: [PATCH 2/3] Remove passwordRequiredValidatorText prop --- login-workflow/docs/screens/login.md | 1 - .../src/screens/LoginScreen/LoginScreen.tsx | 18 ++++++++---------- .../LoginScreen/LoginScreenBase.test.tsx | 12 ++++++++++++ .../src/screens/LoginScreen/types.ts | 4 ++-- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/login-workflow/docs/screens/login.md b/login-workflow/docs/screens/login.md index e29bd331..13ac4fdd 100644 --- a/login-workflow/docs/screens/login.md +++ b/login-workflow/docs/screens/login.md @@ -29,7 +29,6 @@ import { AuthContextProvider, LoginScreen } from '@brightlayer-ui/react-auth-wor | passwordLabel | `string` | Label for the password field. | `t('bluiCommon:LABELS.EMAIL')` | | passwordTextFieldProps | `TextFieldProps` | Props to pass to the MUI [TextField](https://mui.com/material-ui/api/text-field/) component. | | | passwordValidator | `(password: string) => boolean \| string` | A function that validates the password text field input. | checks against valid email regex | -| passwordRequiredValidatorText | `string` | Text for showing password is required. | `t('bluiCommon:MESSAGES.PASSWORD_REQUIRED_ERROR')` | | initialUsernameValue | `string` | Username used to pre-populate the field. | | | loginButtonLabel | `string` | Label for the login button. | `t('bluiCommon:ACTIONS.LOG_IN')` | | onLogin | `(username: string, password: string, rememberMe: boolean) => Promise` | Callback function that is called when the login button is clicked. | | diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index ace0c72f..65251ea9 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -43,9 +43,7 @@ const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; * @category Component */ -type LoginScreenPropsPublic = LoginScreenProps & { passwordRequiredValidatorText?: string }; - -export const LoginScreen: React.FC> = (props) => { +export const LoginScreen: React.FC> = (props) => { const { t } = useLanguageLocale(); const auth = useAuthContext(); const { actions, navigate, routeConfig, rememberMeDetails } = auth; @@ -76,7 +74,12 @@ export const LoginScreen: React.FC { + if (password.length < 1) { + return t('bluiCommon:MESSAGES.PASSWORD_REQUIRED_ERROR'); + } + return true; + }, showRememberMe = true, rememberMeLabel = t('bluiCommon:ACTIONS.REMEMBER'), rememberMeInitialValue = rememberMeDetails?.rememberMe || false, @@ -108,12 +111,7 @@ export const LoginScreen: React.FC { - if (password.length < 1) { - return passwordRequiredValidatorText; - } - return true; - }} + passwordValidator={passwordValidator} showRememberMe={showRememberMe} rememberMeLabel={rememberMeLabel} rememberMeInitialValue={rememberMeInitialValue} diff --git a/login-workflow/src/screens/LoginScreen/LoginScreenBase.test.tsx b/login-workflow/src/screens/LoginScreen/LoginScreenBase.test.tsx index 2afaa07e..626d6a3c 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreenBase.test.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreenBase.test.tsx @@ -64,6 +64,18 @@ describe('LoginScreenBase', () => { expect(screen.getByText('Password')).toBeInTheDocument(); }); + test('disables login button when username and password are invalid', () => { + const usernameInput = screen.getByLabelText('Email Address'); + const passwordInput = screen.getByLabelText('Password'); + const loginButton = screen.getByText('Log In'); + + fireEvent.change(usernameInput, { target: { value: 'us' } }); + fireEvent.change(passwordInput, { target: { value: 'p' } }); + fireEvent.blur(passwordInput); + + expect(loginButton).toBeDisabled(); + }); + test('disables login button when username and password are invalid', () => { const usernameInput = screen.getByLabelText('Email Address'); const passwordInput = screen.getByLabelText('Password'); diff --git a/login-workflow/src/screens/LoginScreen/types.ts b/login-workflow/src/screens/LoginScreen/types.ts index bcfcaee1..02f0fe48 100644 --- a/login-workflow/src/screens/LoginScreen/types.ts +++ b/login-workflow/src/screens/LoginScreen/types.ts @@ -40,10 +40,10 @@ export type LoginScreenProps = WorkflowCardBaseProps & { /** * The function used to validate the password - * @param {string} foo - validates username + * @param {string} password - validates password * @returns boolean | string */ - passwordValidator?: (foo: string) => boolean | string; + passwordValidator?: (password: string) => boolean | string; // configure Remember Me /** From f83db2373fc27d019a05f836c1e9727d3c0cf643 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Sat, 16 Sep 2023 10:48:53 +0530 Subject: [PATCH 3/3] Remove test code snippet --- login-workflow/example/src/screens/Login.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/login-workflow/example/src/screens/Login.tsx b/login-workflow/example/src/screens/Login.tsx index 63dca800..9f3b31fe 100644 --- a/login-workflow/example/src/screens/Login.tsx +++ b/login-workflow/example/src/screens/Login.tsx @@ -8,7 +8,6 @@ export const Login = (): JSX.Element => ( } header={} - passwordRequiredValidatorText={'ndnd'} errorDisplayConfig={{ mode: 'message-box', messageBoxConfig: {