Merge pull request #470 from etn-ccis/fix/BLUI-4703-access-login-props

Update passwordValidator and passwordRequiredValidatorText prop
etn-ccis · Sep 18, 2023 · 40c45b6 · 40c45b6
2 parents 6738fcc + f83db23
commit 40c45b6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git 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<LoginScreenProps, 'passwordValidator'> & { passwordRequiredValidatorText?: string };
-
-export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenPropsPublic>> = (props) => {
+export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> = (props) => {
     const { t } = useLanguageLocale();
     const auth = useAuthContext();
     const { actions, navigate, routeConfig, rememberMeDetails } = auth;
@@ -76,7 +74,12 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenPropsPubli
         initialUsernameValue = rememberMeDetails?.email || '',
         passwordLabel = t('bluiCommon:LABELS.PASSWORD'),
         passwordTextFieldProps,
-        passwordRequiredValidatorText = t('bluiCommon:MESSAGES.PASSWORD_REQUIRED_ERROR'),
+        passwordValidator = (password: string): string | boolean => {
+            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<React.PropsWithChildren<LoginScreenPropsPubli
             initialUsernameValue={initialUsernameValue}
             passwordLabel={passwordLabel}
             passwordTextFieldProps={passwordTextFieldProps}
-            passwordValidator={(password: string): string | boolean => {
-                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
@@ -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
@@ -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
     /**