Merge pull request #488 from etn-ccis/forgot-password-success-screen

Forgot password success screen
etn-ccis · Sep 27, 2023 · 45d0d7e · 45d0d7e
2 parents 30b0ede + 0053708
commit 45d0d7e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 55 deletions.
diff --git 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<ForgotPasswordScreenProps> = (props)
         WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         showSuccessScreen: enableSuccessScreen = true,
-        slotProps = { SuccessScreen: {} },
-        slots,
+        slots = {},
+        slotProps = {},
         emailTextFieldProps,
     } = props;
 
@@ -142,49 +141,39 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
             emailValidator={emailValidator}
             emailTextFieldProps={emailTextFieldProps}
             showSuccessScreen={enableSuccessScreen && showSuccessScreen}
-            slots={{
-                SuccessScreen:
-                    slots?.SuccessScreen ??
-                    ((): JSX.Element => (
-                        <SuccessScreenBase
-                            icon={<CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 5 }} />}
-                            messageTitle={t('bluiCommon:MESSAGES.EMAIL_SENT')}
-                            message={
-                                <Box
-                                    sx={{
-                                        overflow: 'hidden',
-                                        whiteSpace: 'normal',
-                                        wordBreak: 'break-word',
-                                    }}
-                                    component={'span'}
-                                >
-                                    <Trans
-                                        i18nKey={'bluiAuth:FORGOT_PASSWORD.LINK_SENT_ALT'}
-                                        values={{ email: emailInput }}
-                                    >
-                                        Link has been sent to <b>{emailInput}</b>.
-                                    </Trans>
-                                </Box>
-                            }
-                            {...slotProps.SuccessScreen}
-                            WorkflowCardHeaderProps={{
-                                title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
-                                ...slotProps.SuccessScreen.WorkflowCardHeaderProps,
+            slots={slots}
+            slotProps={{
+                SuccessScreen: {
+                    icon: <CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 5 }} />,
+                    messageTitle: t('bluiCommon:MESSAGES.EMAIL_SENT'),
+                    message: (
+                        <Box
+                            sx={{
+                                overflow: 'hidden',
+                                whiteSpace: 'normal',
+                                wordBreak: 'break-word',
                             }}
-                            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?.();
-                                },
-                            }}
-                        />
-                    )),
+                            component={'span'}
+                        >
+                            <Trans i18nKey={'bluiAuth:FORGOT_PASSWORD.LINK_SENT_ALT'} values={{ email: emailInput }}>
+                                Link has been sent to <b>{emailInput}</b>.
+                            </Trans>
+                        </Box>
+                    ),
+                    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
@@ -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<ForgotPasswordScreenProps, 'slots'> & {
-    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<ForgotPasswordScreenProps, 'slots'> &
  * @category Component
  */
 
-export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPasswordScreenBaseProps>> = (props) => {
+export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPasswordScreenProps>> = (props) => {
     const [emailInput, setEmailInput] = useState(props.initialEmailValue ?? '');
 
     const {
@@ -79,10 +75,15 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
         }
     };
 
+    const getSuccessScreen = (
+        _props: SuccessScreenProps,
+        SuccessScreen?: (props: SuccessScreenProps) => JSX.Element
+    ): JSX.Element => (SuccessScreen ? SuccessScreen(_props) : <SuccessScreenBase {..._props} />);
+
     return (
         <>
             {showSuccessScreen ? (
-                <slots.SuccessScreen {...slotProps.SuccessScreen} />
+                getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen)
             ) : (
                 <WorkflowCard {...cardBaseProps}>
                     <WorkflowCardHeader {...headerProps} />

diff --git 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<ResetPasswordScreenProps> = (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<ResetPasswordScreenProps> = (props) =
                             navigate(routeConfig.LOGIN);
                         },
                     },
+                    ...slotProps.SuccessScreen,
                 },
-                ...slotProps,
             }}
             errorDisplayConfig={{
                 ...errorDisplayConfig,