diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index d2558fe2..261bcb81 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -180,7 +180,7 @@ export const ForgotPasswordScreen: React.FC = (props) onNext: (): void => { navigate(routeConfig.LOGIN); if (slotProps.SuccessScreen.WorkflowCardActionsProps) - slotProps.SuccessScreen.WorkflowCardActionsProps.onNext(); + slotProps.SuccessScreen.WorkflowCardActionsProps?.onNext?.(); }, }} /> diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx index cfdaa846..651631ad 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx @@ -7,6 +7,7 @@ import { defaultPasswordRequirements } from '../../constants'; import { parseQueryString } from '../../utils'; import { ResetPasswordScreenProps } from './types'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; +import { SuccessScreenBase } from '../SuccessScreen'; /** * Component that renders a ResetPassword screen that allows a user to reset their password and shows a success message upon a successful password reset.. @@ -35,7 +36,7 @@ export const ResetPasswordScreen: React.FC = (props) = const [confirmInput, setConfirmInput] = useState(''); const [hasVerifyCodeError, setHasVerifyCodeError] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [showSuccessScreen, setShowSuccessScreen] = useState(props.showSuccessScreen); + const [showSuccessScreen, setShowSuccessScreen] = useState(false); const { triggerError, errorManagerConfig } = useErrorManager(); const { code, email } = parseQueryString(window.location.search); @@ -60,13 +61,17 @@ export const ResetPasswordScreen: React.FC = (props) = try { setIsLoading(true); await actions.setPassword(code, passwordInput, email); - setShowSuccessScreen(true); + if (props.showSuccessScreen === false) { + navigate(routeConfig.LOGIN); + } else { + setShowSuccessScreen(true); + } } catch (_error) { triggerError(_error as Error); } finally { setIsLoading(false); } - }, [actions, code, passwordInput, email, triggerError]); + }, [actions, code, passwordInput, email, triggerError, props.showSuccessScreen, navigate, routeConfig]); const areValidMatchingPasswords = useCallback((): boolean => { for (let i = 0; i < passwordRequirements.length; i++) { @@ -96,6 +101,8 @@ export const ResetPasswordScreen: React.FC = (props) = WorkflowCardActionsProps, PasswordProps, errorDisplayConfig = errorManagerConfig, + slotProps = { SuccessScreen: {} }, + slots, } = props; const workflowCardBaseProps = { @@ -158,26 +165,31 @@ export const ResetPasswordScreen: React.FC = (props) = WorkflowCardInstructionProps={workflowCardInstructionProps} WorkflowCardActionsProps={workflowCardActionsProps} PasswordProps={passwordProps} - slotProps={{ - SuccessScreen: { - icon: , - messageTitle: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'), - message: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'), - onDismiss: (): void => { - navigate(routeConfig.LOGIN); - }, - WorkflowCardActionsProps: { - showPrevious: false, - fullWidthButton: true, - showNext: true, - nextLabel: t('bluiCommon:ACTIONS.DONE'), - onNext: (): void => { - navigate(routeConfig.LOGIN); - }, - }, - }, - }} showSuccessScreen={showSuccessScreen} + slots={{ + SuccessScreen: + slots?.SuccessScreen ?? + ((): JSX.Element => ( + } + messageTitle={t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE')} + message={t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE')} + {...slotProps.SuccessScreen} + WorkflowCardActionsProps={{ + showNext: true, + nextLabel: t('bluiCommon:ACTIONS.DONE'), + canGoNext: true, + fullWidthButton: true, + ...slotProps.SuccessScreen.WorkflowCardActionsProps, + onNext: (): void => { + navigate(routeConfig.LOGIN); + if (slotProps.SuccessScreen.WorkflowCardActionsProps) + slotProps.SuccessScreen.WorkflowCardActionsProps?.onNext?.(); + }, + }} + /> + )), + }} errorDisplayConfig={{ ...errorDisplayConfig, onClose: hasVerifyCodeError diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx index cfd37620..57db22ba 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx @@ -8,8 +8,6 @@ import { SetPassword, WorkflowCardActions, } from '../../components'; -import { SuccessScreenBase } from '../SuccessScreen/SuccessScreenBase'; -import { SuccessScreenProps } from '../SuccessScreen'; import ErrorManager from '../../components/Error/ErrorManager'; /** @@ -37,25 +35,24 @@ export const ResetPasswordScreenBase: React.FC ({}) }; - const { showSuccessScreen, slots, slotProps, errorDisplayConfig } = props; + const { showSuccessScreen, slots, slotProps = {}, errorDisplayConfig } = props; - const getSuccessScreen = ( - _props: SuccessScreenProps, - SuccessScreen?: (props: SuccessScreenProps) => JSX.Element - ): JSX.Element => (SuccessScreen ? SuccessScreen(_props) : ); - - return showSuccessScreen ? ( - getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen) - ) : ( - - - - - - - - - - + return ( + <> + {showSuccessScreen ? ( + + ) : ( + + + + + + + + + + + )} + ); };