diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx
index 45d0508f..738089fd 100644
--- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx
+++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx
@@ -2,7 +2,7 @@
import React from 'react';
import { cleanup, fireEvent, render, RenderResult, screen } from '@testing-library/react';
import { ForgotPasswordScreenProps } from './types';
-import { AuthContextProvider, i18nAuthInstance } from '../../contexts';
+import { AuthContextProvider } from '../../contexts';
import { BrowserRouter } from 'react-router-dom';
import { ForgotPasswordScreen } from './ForgotPasswordScreen';
import '@testing-library/jest-dom';
@@ -170,4 +170,20 @@ describe('Forgot Password Screen tests', () => {
expect(screen.getByTestId('blui-spinner')).toBeInTheDocument();
});
+
+ it('should disable submit button when initialEmailValue prop is invalid', () => {
+ render(
+
+
+
+
+
+ );
+
+ const nextButton = screen.getByText('Submit');
+
+ expect(nextButton).toBeInTheDocument();
+ expect(screen.getByText(/Submit/i)).toBeDisabled();
+ expect(screen.getByText(/Please enter a valid email/i)).toBeInTheDocument();
+ });
});
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx
index fed9955a..fec1caac 100644
--- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx
+++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx
@@ -35,7 +35,7 @@ describe('Forgot Password Screen Base', () => {
currentStep: 2,
totalSteps: 6,
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
expect(screen.getByText('Forgot Password')).toBeInTheDocument();
@@ -57,7 +57,7 @@ describe('Forgot Password Screen Base', () => {
}
return 'Please enter a valid email';
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
@@ -75,12 +75,38 @@ describe('Forgot Password Screen Base', () => {
}
return 'Please enter a valid email';
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
expect(verifyEmailInput).toHaveAttribute('aria-invalid', 'true');
});
+ it('it disables next button when initialEmailValue prop is invalid', () => {
+ render(
+ {
+ if (email?.length > 5) {
+ return true;
+ }
+ return 'Please enter a valid email';
+ }}
+ WorkflowCardActionsProps={{
+ showNext: true,
+ nextLabel: 'Next',
+ showPrevious: true,
+ previousLabel: 'Back',
+ canGoNext: true,
+ }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
+ />
+ );
+ expect(screen.getByText('Forgot Password')).toBeInTheDocument();
+ expect(screen.getByText('Next')).toBeInTheDocument();
+ expect(screen.getByText(/Next/i)).toBeDisabled();
+ });
+
it('does not set error state when email is long enough', () => {
const { getByLabelText, rerender } = render(
{
}
return 'Please enter a valid email';
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
@@ -110,7 +136,7 @@ describe('Forgot Password Screen Base', () => {
}
return 'Please enter a valid email';
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
expect(verifyEmailInput).not.toHaveAttribute('aria-invalid', 'true');
@@ -127,7 +153,7 @@ describe('Forgot Password Screen Base', () => {
currentStep: 1,
totalSteps: 6,
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
@@ -148,7 +174,7 @@ describe('Forgot Password Screen Base', () => {
}
return 'Please enter a valid email';
}}
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
@@ -162,7 +188,7 @@ describe('Forgot Password Screen Base', () => {
WorkflowCardHeaderProps={{ title: 'Title' }}
WorkflowCardInstructionProps={{ instructions: 'Instructions' }}
emailLabel="Email Address"
- slots={{ SuccessScreen: Success }}
+ slots={{ SuccessScreen: (): JSX.Element => Success }}
/>
);
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
index d41b7037..0a0ba4a4 100644
--- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
+++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -55,9 +55,11 @@ export const ForgotPasswordScreenBase: React.FC typeof emailValidator(initialEmailValue) !== 'string';
+
+ const [isEmailValid, setIsEmailValid] = useState(validateEmail);
+ const [emailError, setEmailError] = useState(validateEmail ? emailValidator(initialEmailValue) : '');
+ const [shouldValidateEmail, setShouldValidateEmail] = useState(initialEmailValue !== '' ?? validateEmail);
const handleEmailInputChange = useCallback(
(email: string) => {