diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index 385f913b..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 = Omit & { 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 /**