diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index ec2d207a..5b29f69e 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -6,7 +6,6 @@ import { useLanguageLocale } from '../../hooks'; import { ForgotPasswordScreenBase } from './ForgotPasswordScreenBase'; import { ForgotPasswordScreenProps } from './types'; import Typography from '@mui/material/Typography'; -import { SuccessScreenBase } from '../SuccessScreen'; import CheckCircle from '@mui/icons-material/CheckCircle'; import { LinkStyles } from '../../styles'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; @@ -77,8 +76,8 @@ export const ForgotPasswordScreen: React.FC = (props) WorkflowCardInstructionProps, WorkflowCardActionsProps, showSuccessScreen: enableSuccessScreen = true, - slotProps = { SuccessScreen: {} }, - slots, + slots = {}, + slotProps = {}, emailTextFieldProps, } = props; @@ -142,49 +141,39 @@ export const ForgotPasswordScreen: React.FC = (props) emailValidator={emailValidator} emailTextFieldProps={emailTextFieldProps} showSuccessScreen={enableSuccessScreen && showSuccessScreen} - slots={{ - SuccessScreen: - slots?.SuccessScreen ?? - ((): JSX.Element => ( - } - messageTitle={t('bluiCommon:MESSAGES.EMAIL_SENT')} - message={ - - - Link has been sent to {emailInput}. - - - } - {...slotProps.SuccessScreen} - WorkflowCardHeaderProps={{ - title: t('bluiAuth:HEADER.FORGOT_PASSWORD'), - ...slotProps.SuccessScreen.WorkflowCardHeaderProps, + slots={slots} + slotProps={{ + SuccessScreen: { + icon: , + messageTitle: t('bluiCommon:MESSAGES.EMAIL_SENT'), + message: ( + { - navigate(routeConfig.LOGIN); - if (slotProps.SuccessScreen.WorkflowCardActionsProps) - slotProps.SuccessScreen.WorkflowCardActionsProps?.onNext?.(); - }, - }} - /> - )), + component={'span'} + > + + Link has been sent to {emailInput}. + + + ), + WorkflowCardHeaderProps: { + title: t('bluiAuth:HEADER.FORGOT_PASSWORD'), + }, + WorkflowCardActionsProps: { + showNext: true, + nextLabel: t('bluiCommon:ACTIONS.DONE'), + canGoNext: true, + fullWidthButton: true, + onNext: (): void => { + navigate(routeConfig.LOGIN); + }, + }, + ...slotProps.SuccessScreen, + }, }} errorDisplayConfig={errorDisplayConfig} /> diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 975b6dbc..f705d538 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -8,13 +8,9 @@ import { WorkflowCardInstructions, } from '../../components'; import { ForgotPasswordScreenProps } from './types'; -import { SuccessScreenProps } from '../SuccessScreen'; +import { SuccessScreenBase, SuccessScreenProps } from '../SuccessScreen'; import ErrorManager from '../../components/Error/ErrorManager'; -type ForgotPasswordScreenBaseProps = Omit & { - slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element }; -}; - /** * Component renders a screen with forgot password for support with the application. * @@ -35,7 +31,7 @@ type ForgotPasswordScreenBaseProps = Omit & * @category Component */ -export const ForgotPasswordScreenBase: React.FC> = (props) => { +export const ForgotPasswordScreenBase: React.FC> = (props) => { const [emailInput, setEmailInput] = useState(props.initialEmailValue ?? ''); const { @@ -79,10 +75,15 @@ export const ForgotPasswordScreenBase: React.FC JSX.Element + ): JSX.Element => (SuccessScreen ? SuccessScreen(_props) : ); + return ( <> {showSuccessScreen ? ( - + getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen) ) : ( diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx index 7becc0b5..0e0c43d5 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx @@ -40,8 +40,8 @@ export const ResetPasswordScreen: React.FC = (props) = WorkflowCardActionsProps, PasswordProps, errorDisplayConfig = errorManagerConfig, - slots, - slotProps, + slots = {}, + slotProps = {}, } = props; const [passwordInput, setPasswordInput] = useState(PasswordProps?.initialNewPasswordValue ?? ''); @@ -184,8 +184,8 @@ export const ResetPasswordScreen: React.FC = (props) = navigate(routeConfig.LOGIN); }, }, + ...slotProps.SuccessScreen, }, - ...slotProps, }} errorDisplayConfig={{ ...errorDisplayConfig,