@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
128 lines (127 loc) • 6.38 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import { useAuthContext } from '../../contexts/index.js';
import { ForgotPasswordScreenBase } from './ForgotPasswordScreenBase.js';
import Typography from '@mui/material/Typography';
import { CheckCircle } from '@mui/icons-material';
import { LinkStyles } from '../../styles/index.js';
import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager.js';
/**
* Component renders a screen with forgot password for support with the application.
*
* @param {ForgotPasswordScreenProps} props - props of ForgotPasswordScreen
*
* @category Component
*/
export const ForgotPasswordScreen = (props) => {
const { t } = useTranslation();
const { actions, navigate, routeConfig } = useAuthContext();
const { triggerError, errorManagerConfig } = useErrorManager();
const errorDisplayConfig = {
...errorManagerConfig,
...props.errorDisplayConfig,
onClose: () => {
if (props.errorDisplayConfig?.onClose)
props.errorDisplayConfig.onClose();
if (errorManagerConfig.onClose)
errorManagerConfig?.onClose();
},
};
const [emailInput, setEmailInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [showSuccessScreen, setShowSuccessScreen] = useState(false);
const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const handleOnNext = useCallback(async (email) => {
try {
setIsLoading(true);
await actions.forgotPassword(email);
if (props.showSuccessScreen === false) {
navigate(routeConfig.LOGIN);
}
else {
setShowSuccessScreen(true);
}
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}, [actions, triggerError]);
const { emailLabel = t('bluiCommon:LABELS.EMAIL'), contactPhone = '1-800-123-4567', initialEmailValue, description, responseTime = t('bluiAuth:FORGOT_PASSWORD.RESPONSE_TIME'), emailValidator = (email) => new RegExp(EMAIL_REGEX).test(email) ? true : t('bluiCommon:MESSAGES.EMAIL_ENTRY_ERROR'), WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardActionsProps, showSuccessScreen: enableSuccessScreen = true, slots = {}, slotProps = {}, emailTextFieldProps, ...otherProps } = props;
const workflowCardBaseProps = {
loading: isLoading,
...WorkflowCardBaseProps,
};
const workflowCardInstructionProps = {
instructions: description ? (React.createElement(Box, { sx: { px: { md: 3, xs: 2 }, pt: 2 } },
" ",
description(responseTime),
" ")) : (React.createElement(Typography, { sx: { px: { md: 3, xs: 2 }, pt: 2 } },
React.createElement(Trans, { i18nKey: 'bluiAuth:FORGOT_PASSWORD.INSTRUCTIONS_ALT', values: { phone: contactPhone, time: responseTime } },
"Please enter your email, we will respond in ",
React.createElement("b", null, responseTime),
". For urgent issues please call",
' ',
React.createElement(Typography, { component: "a", href: `tel:${contactPhone}`, sx: LinkStyles }, contactPhone),
'.'))),
...WorkflowCardInstructionProps,
};
const workflowCardHeaderProps = {
title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
...WorkflowCardHeaderProps,
};
const workflowCardActionsProps = {
showNext: true,
showPrevious: true,
nextLabel: t('bluiCommon:ACTIONS.SUBMIT'),
previousLabel: t('bluiCommon:ACTIONS.BACK'),
canGoNext: true,
canGoPrevious: true,
...WorkflowCardActionsProps,
onNext: (data) => {
setEmailInput(data.email);
void handleOnNext(data.email);
WorkflowCardActionsProps?.onNext?.();
},
onPrevious: () => {
navigate(routeConfig.LOGIN);
WorkflowCardActionsProps?.onPrevious?.();
},
};
return (React.createElement(ForgotPasswordScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardInstructionProps: workflowCardInstructionProps, WorkflowCardActionsProps: workflowCardActionsProps, emailLabel: emailLabel, initialEmailValue: initialEmailValue, emailValidator: emailValidator, emailTextFieldProps: emailTextFieldProps, showSuccessScreen: enableSuccessScreen && showSuccessScreen, slots: slots, slotProps: {
SuccessScreen: {
...slotProps.SuccessScreen,
EmptyStateProps: {
icon: React.createElement(CheckCircle, { color: 'primary', sx: { fontSize: 100, mb: 5 } }),
title: t('bluiCommon:MESSAGES.EMAIL_SENT'),
description: (React.createElement(Box, { sx: {
overflow: 'hidden',
whiteSpace: 'normal',
wordBreak: 'break-word',
}, component: 'span' },
React.createElement(Trans, { i18nKey: 'bluiAuth:FORGOT_PASSWORD.LINK_SENT_ALT', values: { email: emailInput } },
"Link has been sent to ",
React.createElement("b", null, emailInput),
"."))),
...slotProps?.SuccessScreen?.EmptyStateProps,
},
WorkflowCardHeaderProps: {
title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
...slotProps?.SuccessScreen?.WorkflowCardHeaderProps,
},
WorkflowCardActionsProps: {
showNext: true,
nextLabel: t('bluiCommon:ACTIONS.DONE'),
canGoNext: true,
fullWidthButton: true,
onNext: () => {
navigate(routeConfig.LOGIN);
},
...slotProps?.SuccessScreen?.WorkflowCardActionsProps,
},
},
}, ...otherProps, errorDisplayConfig: errorDisplayConfig }));
};