Skip to content

Commit

Permalink
forgot password success screen code changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@manojleaton
manojleaton committed Sep 27, 2023
1 parent 414c646 commit a029ac3
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 50 deletions.
121 changes: 77 additions & 44 deletions login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -77,7 +76,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
WorkflowCardInstructionProps,
WorkflowCardActionsProps,
showSuccessScreen: enableSuccessScreen = true,
slotProps = { SuccessScreen: {} },
slotProps,
slots,
emailTextFieldProps,
} = props;
Expand Down Expand Up @@ -142,49 +141,83 @@ 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={{
// 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,
// }}
// 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?.();
// },
// }}
// />
// )),
// }}
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,
}}
errorDisplayConfig={errorDisplayConfig}
/>
Expand Down
17 changes: 11 additions & 6 deletions login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ 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 };
};
// type ForgotPasswordScreenBaseProps = Omit<ForgotPasswordScreenProps, 'slots'> & {
// slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element };
// };

/**
* Component renders a screen with forgot password for support with the application.
Expand All @@ -35,7 +35,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 {
Expand Down Expand Up @@ -79,10 +79,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} />
Expand Down

0 comments on commit a029ac3

Please sign in to comment.