diff --git a/login-workflow/example/src/actions/AuthUIActions.tsx b/login-workflow/example/src/actions/AuthUIActions.tsx index f55036d9..5bb1a892 100644 --- a/login-workflow/example/src/actions/AuthUIActions.tsx +++ b/login-workflow/example/src/actions/AuthUIActions.tsx @@ -11,7 +11,7 @@ function getRandomInt(max: number): number { function isRandomFailure(): boolean { const randomResponseNumber = getRandomInt(100); - return false; // randomResponseNumber < 10; + return true; // randomResponseNumber < 10; } type AuthUIActionsWithApp = (appHelper: AppContextType) => AuthUIActions; diff --git a/login-workflow/example/src/screens/Login.tsx b/login-workflow/example/src/screens/Login.tsx index 9f3b31fe..8b4364fa 100644 --- a/login-workflow/example/src/screens/Login.tsx +++ b/login-workflow/example/src/screens/Login.tsx @@ -9,7 +9,7 @@ export const Login = (): JSX.Element => ( projectImage={logo} header={} errorDisplayConfig={{ - mode: 'message-box', + mode: 'dialog', messageBoxConfig: { dismissible: true, position: 'top', diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx index 7272c2b8..e43ee0f7 100644 --- a/login-workflow/src/components/Error/ErrorManager.tsx +++ b/login-workflow/src/components/Error/ErrorManager.tsx @@ -2,7 +2,6 @@ import React, { useCallback } from 'react'; import { BasicDialog } from '../Dialog/BasicDialog'; import ErrorMessageBox from './ErrorMessageBox'; import { SxProps, Theme } from '@mui/material/styles'; -import { useTranslation } from 'react-i18next'; export type AuthError = { cause: { title: string; errorMessage: string } }; @@ -17,11 +16,6 @@ export type ErrorManagerProps = { */ title?: string; - /** - * The label on the dismiss button in dialog mode - */ - dismissLabel?: string; - /** * The function to call when the close/dismiss button is clicked * @returns void @@ -75,13 +69,11 @@ export type ErrorManagerProps = { */ const ErrorManager: React.FC = (props): JSX.Element => { - const { t } = useTranslation(); const { children, mode = 'dialog', title, error = '', - dismissLabel, onClose = (): void => {}, dialogConfig, messageBoxConfig = { @@ -93,14 +85,14 @@ const ErrorManager: React.FC = (props): JSX.Element => { (): JSX.Element => ( 0} - title={dialogConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')} - body={t(error)} + title={dialogConfig?.title ?? title ?? 'Error' } + body={(error)} onClose={onClose} - dismissButtonText={dialogConfig?.dismissLabel ?? dismissLabel ?? t('bluiCommon:ACTIONS.OKAY')} + dismissButtonText={dialogConfig?.dismissLabel ?? 'Okay'} sx={dialogConfig?.sx} /> ), - [dialogConfig, dismissLabel, title, error, onClose, t] + [dialogConfig, title, error, onClose] ); const ErrorMessageBoxWithProps = useCallback((): JSX.Element => { @@ -108,8 +100,8 @@ const ErrorManager: React.FC = (props): JSX.Element => { return ( = (props): JSX.Element => { onClose={onClose} /> ); - }, [error, title, t, messageBoxConfig, onClose]); + }, [error, title, messageBoxConfig, onClose]); return mode === 'dialog' && error.length > 0 ? ( <> diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx index 35a28821..ae27179d 100644 --- a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx +++ b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx @@ -54,17 +54,24 @@ export type RegistrationWorkflowProps = { }; export const RegistrationWorkflow: React.FC> = (props) => { + const { errorDisplayConfig: registrationWorkflowErrorConfig } = props; const [isAccountExist, setIsAccountExist] = useState(false); - const { triggerError, errorManagerConfig } = useErrorManager(); + const { triggerError, errorManagerConfig: globalErrorManagerConfig } = useErrorManager(); const { actions, navigate } = useRegistrationContext(); + const { messageBoxConfig: workflowMessageBoxConfig, dialogConfig: workflowDialogConfig, onClose:workflowOnClose, ...otherWorkflowErrorConfig } = registrationWorkflowErrorConfig ?? {}; + const { messageBoxConfig: globalMessageBoxConfig, dialogConfig: globalDialogConfig, onClose:globalOnClose, ...otherGlobalErrorConfig } = globalErrorManagerConfig; - const errorDisplayConfig = { - ...errorManagerConfig, - ...props.errorDisplayConfig, + + const errorDisplayConfig: ErrorManagerProps = { + messageBoxConfig: { ...globalMessageBoxConfig, ...workflowMessageBoxConfig }, + dialogConfig: { ...globalDialogConfig, ...workflowDialogConfig }, onClose: (): void => { - if (props.errorDisplayConfig && props.errorDisplayConfig.onClose) props.errorDisplayConfig.onClose(); - if (errorManagerConfig.onClose) errorManagerConfig?.onClose(); + workflowOnClose?.(); + globalOnClose?.(); }, + + ...otherGlobalErrorConfig, + ...otherWorkflowErrorConfig, }; const { initialScreenIndex = 0, @@ -73,17 +80,17 @@ export const RegistrationWorkflow: React.FC, - , - , - ] + , + , + , + ] : [ - , - , - , - , - , - ], + , + , + , + , + , + ], } = props; const screens = [...(Array.isArray(children) ? children : [children])]; diff --git a/login-workflow/src/contexts/AuthContext/provider.tsx b/login-workflow/src/contexts/AuthContext/provider.tsx index 296a5383..9b8ad5a8 100644 --- a/login-workflow/src/contexts/AuthContext/provider.tsx +++ b/login-workflow/src/contexts/AuthContext/provider.tsx @@ -6,20 +6,18 @@ import React, { useEffect } from 'react'; import { AuthContextProviderProps } from './types'; import { AuthContext } from './context'; -import { I18nextProvider } from 'react-i18next'; +import { I18nextProvider, useTranslation } from 'react-i18next'; import { i18nAuthInstance } from './i18nAuthInstance'; import { ErrorContext } from '../ErrorContext'; import { AuthDictionaries } from './AuthDictionaries'; import { SharedDictionaries } from '../SharedDictionaries'; +import { ErrorManagerProps } from '../../components/Error'; export const AuthContextProvider: React.FC< React.PropsWithChildren > = (props) => { const i18nInstance = props.i18n ?? i18nAuthInstance; - - const { children, ...authContextProps } = props; - - const { language, i18n = i18nInstance, errorConfig } = props; + const { language, i18n = i18nInstance, children, ...other } = props; if (props.i18n) { i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, false); @@ -40,9 +38,36 @@ export const AuthContextProvider: React.FC< return ( - - {children} - + {children} ); }; + +const AuthContextProviderContent: React.FC< + React.PropsWithChildren & { PasswordDialog?: JSX.Element }> +> = (props) => { + const { children, errorConfig, ...authContextProps } = props; + const { t } = useTranslation(); + const mergedErrorConfig: ErrorManagerProps = { + title: t('bluiCommon:MESSAGES.ERROR'), + error: t('bluiAuth:LOGIN.INVALID_CREDENTIALS'), + ...errorConfig, + dialogConfig: { + dismissLabel:t('bluiCommon:ACTIONS.OKAY'), + ...errorConfig?.dialogConfig ?? {}, + } + } + + return ( + + {children} + + ); +}; + + diff --git a/login-workflow/src/contexts/RegistrationContext/provider.tsx b/login-workflow/src/contexts/RegistrationContext/provider.tsx index d8be7ed9..ed50a6f2 100644 --- a/login-workflow/src/contexts/RegistrationContext/provider.tsx +++ b/login-workflow/src/contexts/RegistrationContext/provider.tsx @@ -6,18 +6,18 @@ import React, { useEffect } from 'react'; import { RegistrationContextProviderProps } from './types'; import { RegistrationContext } from './context'; -import { I18nextProvider } from 'react-i18next'; +import { I18nextProvider, useTranslation } from 'react-i18next'; import { i18nRegistrationInstance } from './i18nRegistrationInstance'; import { ErrorContext } from '../ErrorContext'; import { SharedDictionaries } from '../SharedDictionaries'; import { RegistrationDictionaries } from './RegistrationDictionaries'; +import { ErrorManagerProps } from '../../components/Error'; export const RegistrationContextProvider: React.FC> = ( props ) => { const i18nInstance = props.i18n ?? i18nRegistrationInstance; - const { children, ...registrationContextProps } = props; - const { language, i18n = i18nInstance, errorConfig } = props; + const { language, i18n = i18nInstance, children, ...other } = props; if (props.i18n) { i18n.addResourceBundle('zh', 'bluiRegistration', RegistrationDictionaries.chinese.translation, true, false); @@ -38,9 +38,33 @@ export const RegistrationContextProvider: React.FC - - {children} - + {children} ); }; + +const RegistrationContextProviderContent: React.FC< + React.PropsWithChildren & { PasswordDialog?: JSX.Element }> +> = (props) => { + const { children, errorConfig, ...registrationContextProps } = props; + const { t } = useTranslation(); + const mergedErrorConfig: ErrorManagerProps = { + title: t('bluiCommon:MESSAGES.ERROR'), + ...errorConfig, + dialogConfig: { + dismissLabel: t('bluiCommon:ACTIONS.OKAY'), + ...errorConfig?.dialogConfig ?? {}, + } + } + + + return ( + + {children} + + ); +};