From 91afd7c5e2a00809834b51f9a758d66ea98dbd92 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Mon, 25 Sep 2023 15:52:57 +0530 Subject: [PATCH 1/7] Fix Small screen device padding for change password --- .../ChangePasswordDialog/ChangePasswordDialogBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index d271a589..65f7b819 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -154,7 +154,7 @@ export const ChangePasswordDialogBase: React.FC = (pr Date: Mon, 25 Sep 2023 23:41:17 +0530 Subject: [PATCH 2/7] Update slots and slotprops in change password --- .../example/src/components/ChangePassword.tsx | 17 +++++++++++++++++ .../ChangePasswordDialog.tsx | 4 ++++ 2 files changed, 21 insertions(+) diff --git a/login-workflow/example/src/components/ChangePassword.tsx b/login-workflow/example/src/components/ChangePassword.tsx index ea145a38..c939af86 100644 --- a/login-workflow/example/src/components/ChangePassword.tsx +++ b/login-workflow/example/src/components/ChangePassword.tsx @@ -3,6 +3,8 @@ import { ChangePasswordDialog } from '@brightlayer-ui/react-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { LocalStorage } from '../store/local-storage'; import { useNavigate } from 'react-router-dom'; +import { Box } from '@mui/material'; +import { Alarm } from '@mui/icons-material'; export const ChangePassword = (): JSX.Element => { const app = useApp(); @@ -20,6 +22,21 @@ export const ChangePassword = (): JSX.Element => { onPrevious={(): void => app.setShowChangePasswordDialog(false)} onSubmit={(): void => app.setShowChangePasswordDialog(false)} onFinish={(): void => logOut()} + slots={{ + SuccessScreen: (props): JSX.Element => ( + + {props?.icon} + {props?.messageTitle} + + ), + }} + slotProps={{ + SuccessScreen: { + icon: , + messageTitle: 'Yeah', + message: 'ee', + }, + }} /> ); }; diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index c1e4926e..51aca671 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -48,6 +48,8 @@ export const ChangePasswordDialog: React.FC = (props) ErrorDialogProps, loading, currentPasswordTextFieldProps, + slots = {}, + slotProps = {}, } = props; const [currentInput, setCurrentInput] = useState(''); @@ -147,6 +149,7 @@ export const ChangePasswordDialog: React.FC = (props) onSubmit={async (): Promise => { await changePasswordSubmit(); }} + slots={slots} slotProps={{ SuccessScreen: { icon: , @@ -164,6 +167,7 @@ export const ChangePasswordDialog: React.FC = (props) onFinish(); }, }, + ...slotProps.SuccessScreen, }, }} showSuccessScreen={showSuccessScreen} From 3cfb1ec98b681911044ae0ee0eef59227cacd8af Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Wed, 27 Sep 2023 12:05:23 +0530 Subject: [PATCH 3/7] Remove Test code --- .../example/src/components/ChangePassword.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/login-workflow/example/src/components/ChangePassword.tsx b/login-workflow/example/src/components/ChangePassword.tsx index c939af86..1aa51d56 100644 --- a/login-workflow/example/src/components/ChangePassword.tsx +++ b/login-workflow/example/src/components/ChangePassword.tsx @@ -22,21 +22,6 @@ export const ChangePassword = (): JSX.Element => { onPrevious={(): void => app.setShowChangePasswordDialog(false)} onSubmit={(): void => app.setShowChangePasswordDialog(false)} onFinish={(): void => logOut()} - slots={{ - SuccessScreen: (props): JSX.Element => ( - - {props?.icon} - {props?.messageTitle} - - ), - }} - slotProps={{ - SuccessScreen: { - icon: , - messageTitle: 'Yeah', - message: 'ee', - }, - }} /> ); }; From b76f416d06f8fc12d47836f221010e5b57a0f97e Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Wed, 27 Sep 2023 13:17:53 +0530 Subject: [PATCH 4/7] Remove unused import --- login-workflow/example/src/components/ChangePassword.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/login-workflow/example/src/components/ChangePassword.tsx b/login-workflow/example/src/components/ChangePassword.tsx index 1aa51d56..ea145a38 100644 --- a/login-workflow/example/src/components/ChangePassword.tsx +++ b/login-workflow/example/src/components/ChangePassword.tsx @@ -3,8 +3,6 @@ import { ChangePasswordDialog } from '@brightlayer-ui/react-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { LocalStorage } from '../store/local-storage'; import { useNavigate } from 'react-router-dom'; -import { Box } from '@mui/material'; -import { Alarm } from '@mui/icons-material'; export const ChangePassword = (): JSX.Element => { const app = useApp(); From a029ac398c7f5983ef7b35354ab5d2835725c216 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Wed, 27 Sep 2023 14:56:52 +0530 Subject: [PATCH 5/7] forgot password success screen code changes --- .../ForgotPasswordScreen.tsx | 121 +++++++++++------- .../ForgotPasswordScreenBase.tsx | 17 ++- 2 files changed, 88 insertions(+), 50 deletions(-) diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index ec2d207a..fbea3440 100644 --- 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,7 +76,7 @@ export const ForgotPasswordScreen: React.FC = (props) WorkflowCardInstructionProps, WorkflowCardActionsProps, showSuccessScreen: enableSuccessScreen = true, - slotProps = { SuccessScreen: {} }, + slotProps, slots, emailTextFieldProps, } = props; @@ -142,49 +141,83 @@ export const ForgotPasswordScreen: React.FC = (props) emailValidator={emailValidator} emailTextFieldProps={emailTextFieldProps} showSuccessScreen={enableSuccessScreen && showSuccessScreen} - slots={{ - SuccessScreen: - slots?.SuccessScreen ?? - ((): JSX.Element => ( - } - messageTitle={t('bluiCommon:MESSAGES.EMAIL_SENT')} - message={ - - - Link has been sent to {emailInput}. - - - } - {...slotProps.SuccessScreen} - WorkflowCardHeaderProps={{ - title: t('bluiAuth:HEADER.FORGOT_PASSWORD'), - ...slotProps.SuccessScreen.WorkflowCardHeaderProps, + // slots={{ + // SuccessScreen: + // slots?.SuccessScreen ?? + // ((): JSX.Element => ( + // } + // messageTitle={t('bluiCommon:MESSAGES.EMAIL_SENT')} + // message={ + // + // + // Link has been sent to {emailInput}. + // + // + // } + // {...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: , + messageTitle: t('bluiCommon:MESSAGES.EMAIL_SENT'), + message: ( + { - navigate(routeConfig.LOGIN); - if (slotProps.SuccessScreen.WorkflowCardActionsProps) - slotProps.SuccessScreen.WorkflowCardActionsProps?.onNext?.(); - }, - }} - /> - )), + component={'span'} + > + + Link has been sent to {emailInput}. + + + ), + 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} /> diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 975b6dbc..07d2f4ad 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -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 & { - slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element }; -}; +// type ForgotPasswordScreenBaseProps = Omit & { +// slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element }; +// }; /** * Component renders a screen with forgot password for support with the application. @@ -35,7 +35,7 @@ type ForgotPasswordScreenBaseProps = Omit & * @category Component */ -export const ForgotPasswordScreenBase: React.FC> = (props) => { +export const ForgotPasswordScreenBase: React.FC> = (props) => { const [emailInput, setEmailInput] = useState(props.initialEmailValue ?? ''); const { @@ -79,10 +79,15 @@ export const ForgotPasswordScreenBase: React.FC JSX.Element + ): JSX.Element => (SuccessScreen ? SuccessScreen(_props) : ); + return ( <> {showSuccessScreen ? ( - + getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen) ) : ( From d62b65555ae1c1080c6d47de5e51f5f4ce0b02c9 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Wed, 27 Sep 2023 15:08:30 +0530 Subject: [PATCH 6/7] removed commented code --- .../ForgotPasswordScreen.tsx | 44 ------------------- .../ForgotPasswordScreenBase.tsx | 4 -- 2 files changed, 48 deletions(-) diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index fbea3440..cad3d1d2 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -141,50 +141,6 @@ export const ForgotPasswordScreen: React.FC = (props) emailValidator={emailValidator} emailTextFieldProps={emailTextFieldProps} showSuccessScreen={enableSuccessScreen && showSuccessScreen} - // slots={{ - // SuccessScreen: - // slots?.SuccessScreen ?? - // ((): JSX.Element => ( - // } - // messageTitle={t('bluiCommon:MESSAGES.EMAIL_SENT')} - // message={ - // - // - // Link has been sent to {emailInput}. - // - // - // } - // {...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: { diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 07d2f4ad..f705d538 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -11,10 +11,6 @@ import { ForgotPasswordScreenProps } from './types'; import { SuccessScreenBase, SuccessScreenProps } from '../SuccessScreen'; import ErrorManager from '../../components/Error/ErrorManager'; -// type ForgotPasswordScreenBaseProps = Omit & { -// slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element }; -// }; - /** * Component renders a screen with forgot password for support with the application. * From 0053708978f88c843c3e079d44cf0f14181a79f2 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Wed, 27 Sep 2023 15:21:00 +0530 Subject: [PATCH 7/7] Merge branch 'dev' into forgot-password-success-screen --- .../screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx | 6 +++--- .../src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index cad3d1d2..5b29f69e 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -76,8 +76,8 @@ export const ForgotPasswordScreen: React.FC = (props) WorkflowCardInstructionProps, WorkflowCardActionsProps, showSuccessScreen: enableSuccessScreen = true, - slotProps, - slots, + slots = {}, + slotProps = {}, emailTextFieldProps, } = props; @@ -172,8 +172,8 @@ export const ForgotPasswordScreen: React.FC = (props) navigate(routeConfig.LOGIN); }, }, + ...slotProps.SuccessScreen, }, - ...slotProps, }} errorDisplayConfig={errorDisplayConfig} /> diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx index 7becc0b5..0e0c43d5 100644 --- 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 = (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 = (props) = navigate(routeConfig.LOGIN); }, }, + ...slotProps.SuccessScreen, }, - ...slotProps, }} errorDisplayConfig={{ ...errorDisplayConfig,