From 90780cd77132a26edb47e3bbbce238472801cf45 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Wed, 20 Sep 2023 13:42:34 +0530 Subject: [PATCH 1/5] Fix CreatePasswordScreen prop --- .../example/src/navigation/AppRouter.tsx | 27 ++++- .../components/SetPassword/SetPassword.tsx | 58 +++++----- .../CreatePasswordScreen.tsx | 109 ++++++++++-------- 3 files changed, 118 insertions(+), 76 deletions(-) diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx index 3d384b4b..d07d41eb 100644 --- a/login-workflow/example/src/navigation/AppRouter.tsx +++ b/login-workflow/example/src/navigation/AppRouter.tsx @@ -8,6 +8,8 @@ import { RegistrationContextProvider, ResetPasswordScreen, RegistrationWorkflow, + EulaScreen, + CreatePasswordScreen, } from '@brightlayer-ui/react-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { useNavigate } from 'react-router'; @@ -116,7 +118,30 @@ export const AppRouter: React.FC = () => { } > - } /> + + + { console.log('passwordData', passwordData); } + + , + onSubmit() { console.log('submit') } + + , + initialNewPasswordValue: 'Test@12', + initialConfirmPasswordValue: 'Test@123', + passwordNotMatchError: 'not matched', + passwordRequirements: [], + } + } + /> + } /> } /> diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index fa696cfe..822cc9c8 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -5,24 +5,24 @@ import { PasswordTextField } from '../PasswordTextField'; import { PasswordRequirements } from '../PasswordRequirements'; /** - * Component that renders a change password form with a new password and confirm password inputs. - * It includes callbacks so you can respond to changes in the inputs. - * - * @param onPasswordChange called when the new password or confirm new password fields value changes - * @param initialNewPasswordValue initial value for the new password field - * @param initialConfirmPasswordValue initial value for the confirm password field - * @param passwordRequirements requirements to set password - * @param newPasswordLabel label for the new password field (default = 'Password') - * @param confirmPasswordLabel label for the confirm password field (default = 'Confirm') - * @param passwordRef ref to forward to the password input. - * @param confirmRef ref to forward to the confirm password input. - * @param passwordNotMatchError text for showing message when passwords do not match. - * @param onSubmit function to call when the form is submitted - * @param passwordTextFieldProps props to pass to the password field. - * @param confirmPasswordTextFieldProps props to pass to the confirm password field. - * - * @category Component - */ +* Component that renders a change password form with a new password and confirm password inputs. +* It includes callbacks so you can respond to changes in the inputs. +* +* @param onPasswordChange called when the new password or confirm new password fields value changes +* @param initialNewPasswordValue initial value for the new password field +* @param initialConfirmPasswordValue initial value for the confirm password field +* @param passwordRequirements requirements to set password +* @param newPasswordLabel label for the new password field (default = 'Password') +* @param confirmPasswordLabel label for the confirm password field (default = 'Confirm') +* @param passwordRef ref to forward to the password input. +* @param confirmRef ref to forward to the confirm password input. +* @param passwordNotMatchError text for showing message when passwords do not match. +* @param onSubmit function to call when the form is submitted +* @param passwordTextFieldProps props to pass to the password field. +* @param confirmPasswordTextFieldProps props to pass to the confirm password field. +* +* @category Component +*/ export const SetPassword: React.FC> = (props) => { const { @@ -42,10 +42,13 @@ export const SetPassword: React.FC> = } = props; // Local State + console.log(initialNewPasswordValue, 'initialNewPasswordValue'); + console.log(initialConfirmPasswordValue, 'initialConfirmPasswordValue'); const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue); const [confirmInput, setConfirmInput] = useState(initialConfirmPasswordValue); - const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState(false); - const [shouldValidatePassword, setShouldValidatePassword] = useState(false); + console.log('initialNewPasswordValue === initialConfirmPasswordValue', initialNewPasswordValue === initialConfirmPasswordValue) + // const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState(initialNewPasswordValue === initialConfirmPasswordValue); + // const [shouldValidatePassword, setShouldValidatePassword] = useState(initialNewPasswordValue === initialConfirmPasswordValue); const onPassChange = useCallback( (newPassword: any) => { @@ -63,10 +66,11 @@ export const SetPassword: React.FC> = [setConfirmInput, onPasswordChange, passwordInput] ); - const hasConfirmPasswordError = useCallback( - (): boolean => shouldValidateConfirmPassword && confirmInput.length !== 0 && confirmInput !== passwordInput, - [shouldValidateConfirmPassword, confirmInput, passwordInput] - ); + const hasConfirmPasswordError = useCallback((): boolean => { + console.log('confirm error' && confirmInput.length !== 0 && confirmInput !== passwordInput ) + return confirmInput.length !== 0 && confirmInput !== passwordInput; + }, [confirmInput, passwordInput]); + const isValidPassword = useCallback((): boolean => { for (let i = 0; i < passwordRequirements.length; i++) { @@ -85,7 +89,7 @@ export const SetPassword: React.FC> = inputRef={passwordRef} label={newPasswordLabel} value={passwordInput} - error={shouldValidatePassword && !isValidPassword()} + error={!isValidPassword()} sx={{ mt: { md: 4, sm: 3 }, }} @@ -103,7 +107,7 @@ export const SetPassword: React.FC> = onBlur={(e): void => { // eslint-disable-next-line no-unused-expressions passwordTextFieldProps?.onBlur && passwordTextFieldProps.onBlur(e); - setShouldValidatePassword(true); + // setShouldValidatePassword(true); }} /> {passwordRequirements && passwordRequirements.length > 0 && ( @@ -142,7 +146,7 @@ export const SetPassword: React.FC> = onBlur={(e): void => { // eslint-disable-next-line no-unused-expressions confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e); - setShouldValidateConfirmPassword(true); + // setShouldValidateConfirmPassword(true); }} /> diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 203dbad0..27bb359e 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -5,20 +5,21 @@ import { defaultPasswordRequirements } from '../../constants'; import { CreatePasswordScreenProps } from './types'; import { useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; +import { PasswordRequirement } from '../../components/SetPassword/types'; /** - * Component renders a screen with account details information for support with the application. - * Contact information is pulled from the context passed into the workflow. - * - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param PasswordProps props passed from SetPassword component - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * - * @category Component - */ +* Component renders a screen with account details information for support with the application. +* Contact information is pulled from the context passed into the workflow. +* +* @param errorDisplayConfig configuration for customizing how errors are displayed +* @param PasswordProps props passed from SetPassword component +* @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component +* @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component +* @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component +* @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component +* +* @category Component +*/ export const CreatePasswordScreen: React.FC = (props) => { const { t } = useLanguageLocale(); @@ -33,10 +34,19 @@ export const CreatePasswordScreen: React.FC = (props) currentScreen, totalScreens, } = regWorkflow; + + const { + WorkflowCardBaseProps, + WorkflowCardHeaderProps, + WorkflowCardInstructionProps, + WorkflowCardActionsProps, + PasswordProps, + } = props; + const passwordRef = useRef(null); const confirmRef = useRef(null); - const [passwordInput, setPasswordInput] = useState(password ?? ''); - const [confirmInput, setConfirmInput] = useState(confirmPassword ?? ''); + const [passwordInput, setPasswordInput] = useState(password !=='' ? password : (PasswordProps?.initialNewPasswordValue ?? '')); + const [confirmInput, setConfirmInput] = useState(confirmPassword !=='' ? confirmPassword : (PasswordProps?.initialConfirmPasswordValue ?? '')); const [isLoading, setIsLoading] = useState(false); const passwordRequirements = defaultPasswordRequirements(t); const { triggerError, errorManagerConfig } = useErrorManager(); @@ -79,20 +89,42 @@ export const CreatePasswordScreen: React.FC = (props) [setPasswordInput, setConfirmInput] ); - const areValidMatchingPasswords = useCallback((): boolean => { - for (let i = 0; i < passwordRequirements.length; i++) { + + + const passwordProps = { + newPasswordLabel: t('bluiCommon:FORMS.PASSWORD'), + confirmPasswordLabel: t('bluiCommon:FORMS.CONFIRM_PASSWORD'), + passwordNotMatchError: t('bluiCommon:FORMS.PASS_MATCH_ERROR'), + passwordRequirements: PasswordProps?.passwordRequirements ?? passwordRequirements, + passwordRef, + confirmRef, + ...PasswordProps, + initialNewPasswordValue: passwordInput, + initialConfirmPasswordValue: confirmInput, + onPasswordChange: (passwordData: { password: string; confirm: string }): void => { + updateFields(passwordData); + PasswordProps?.onPasswordChange?.(passwordData); + }, + onSubmit: (): void => { + if (areValidMatchingPasswords(passwordProps.passwordRequirements)) { + void onNext(); + WorkflowCardActionsProps?.onNext?.(); + PasswordProps?.onSubmit?.(); + } + }, + }; + + const areValidMatchingPasswords = useCallback((passwordRequirements: PasswordRequirement[]): boolean => { + console.log(passwordRequirements?.length > 0, '%%%%%%%%%%%%%%%%%%%return ') + if(passwordRequirements?.length > 0) { + for (let i = 0; i < passwordRequirements.length; i++) { if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; - } - return confirmInput === passwordInput; + }} else { + console.log('valid', confirmInput === passwordInput) + return confirmInput === passwordInput;} }, [passwordRequirements, passwordInput, confirmInput]); - const { - WorkflowCardBaseProps, - WorkflowCardHeaderProps, - WorkflowCardInstructionProps, - WorkflowCardActionsProps, - PasswordProps, - } = props; + const workflowCardBaseProps = { loading: isLoading, @@ -109,10 +141,12 @@ export const CreatePasswordScreen: React.FC = (props) ...WorkflowCardInstructionProps, }; + console.log(`passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords()`, passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(passwordProps.passwordRequirements)); const workflowCardActionsProps = { showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), - canGoNext: passwordInput !== '' && confirmInput !== '' && passwordInput === confirmInput, + canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(passwordProps.passwordRequirements), + // canGoNext: passwordInput !== '' && confirmInput !== '' && passwordInput === confirmInput, showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, @@ -129,28 +163,7 @@ export const CreatePasswordScreen: React.FC = (props) }, }; - const passwordProps = { - initialNewPasswordValue: passwordInput, - initialConfirmPasswordValue: confirmInput, - newPasswordLabel: t('bluiCommon:FORMS.PASSWORD'), - confirmPasswordLabel: t('bluiCommon:FORMS.CONFIRM_PASSWORD'), - passwordNotMatchError: t('bluiCommon:FORMS.PASS_MATCH_ERROR'), - passwordRequirements: passwordRequirements, - passwordRef, - confirmRef, - ...PasswordProps, - onPasswordChange: (passwordData: { password: string; confirm: string }): void => { - updateFields(passwordData); - PasswordProps?.onPasswordChange?.(passwordData); - }, - onSubmit: (): void => { - if (areValidMatchingPasswords()) { - void onNext(); - WorkflowCardActionsProps?.onNext?.(); - PasswordProps?.onSubmit?.(); - } - }, - }; + return ( Date: Wed, 20 Sep 2023 15:26:24 +0530 Subject: [PATCH 2/5] Fix Default error for SetPassword Component --- .../example/src/navigation/AppRouter.tsx | 48 ++++++++------- .../components/SetPassword/SetPassword.tsx | 60 +++++++++--------- .../CreatePasswordScreen.tsx | 61 +++++++++---------- 3 files changed, 84 insertions(+), 85 deletions(-) diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx index d07d41eb..78d67355 100644 --- a/login-workflow/example/src/navigation/AppRouter.tsx +++ b/login-workflow/example/src/navigation/AppRouter.tsx @@ -10,6 +10,7 @@ import { RegistrationWorkflow, EulaScreen, CreatePasswordScreen, + CreateAccountScreen, } from '@brightlayer-ui/react-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { useNavigate } from 'react-router'; @@ -118,30 +119,33 @@ export const AppRouter: React.FC = () => { } > - - - { console.log('passwordData', passwordData); } + + + { + console.log('passwordData', passwordData); + }, - , - onSubmit() { console.log('submit') } + onSubmit() { + console.log('submit'); + }, - , - initialNewPasswordValue: 'Test@12', - initialConfirmPasswordValue: 'Test@123', - passwordNotMatchError: 'not matched', - passwordRequirements: [], - } - } - /> - } /> + initialNewPasswordValue: 'Test@12', + initialConfirmPasswordValue: 'Test@123', + passwordNotMatchError: 'not matched', + passwordRequirements: [], + }} + /> + + + } + /> } /> diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index 822cc9c8..5c6b1f74 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -5,24 +5,24 @@ import { PasswordTextField } from '../PasswordTextField'; import { PasswordRequirements } from '../PasswordRequirements'; /** -* Component that renders a change password form with a new password and confirm password inputs. -* It includes callbacks so you can respond to changes in the inputs. -* -* @param onPasswordChange called when the new password or confirm new password fields value changes -* @param initialNewPasswordValue initial value for the new password field -* @param initialConfirmPasswordValue initial value for the confirm password field -* @param passwordRequirements requirements to set password -* @param newPasswordLabel label for the new password field (default = 'Password') -* @param confirmPasswordLabel label for the confirm password field (default = 'Confirm') -* @param passwordRef ref to forward to the password input. -* @param confirmRef ref to forward to the confirm password input. -* @param passwordNotMatchError text for showing message when passwords do not match. -* @param onSubmit function to call when the form is submitted -* @param passwordTextFieldProps props to pass to the password field. -* @param confirmPasswordTextFieldProps props to pass to the confirm password field. -* -* @category Component -*/ + * Component that renders a change password form with a new password and confirm password inputs. + * It includes callbacks so you can respond to changes in the inputs. + * + * @param onPasswordChange called when the new password or confirm new password fields value changes + * @param initialNewPasswordValue initial value for the new password field + * @param initialConfirmPasswordValue initial value for the confirm password field + * @param passwordRequirements requirements to set password + * @param newPasswordLabel label for the new password field (default = 'Password') + * @param confirmPasswordLabel label for the confirm password field (default = 'Confirm') + * @param passwordRef ref to forward to the password input. + * @param confirmRef ref to forward to the confirm password input. + * @param passwordNotMatchError text for showing message when passwords do not match. + * @param onSubmit function to call when the form is submitted + * @param passwordTextFieldProps props to pass to the password field. + * @param confirmPasswordTextFieldProps props to pass to the confirm password field. + * + * @category Component + */ export const SetPassword: React.FC> = (props) => { const { @@ -42,13 +42,12 @@ export const SetPassword: React.FC> = } = props; // Local State - console.log(initialNewPasswordValue, 'initialNewPasswordValue'); - console.log(initialConfirmPasswordValue, 'initialConfirmPasswordValue'); const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue); const [confirmInput, setConfirmInput] = useState(initialConfirmPasswordValue); - console.log('initialNewPasswordValue === initialConfirmPasswordValue', initialNewPasswordValue === initialConfirmPasswordValue) - // const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState(initialNewPasswordValue === initialConfirmPasswordValue); - // const [shouldValidatePassword, setShouldValidatePassword] = useState(initialNewPasswordValue === initialConfirmPasswordValue); + const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState( + initialConfirmPasswordValue ? true : false + ); + const [shouldValidatePassword, setShouldValidatePassword] = useState(initialNewPasswordValue ? true : false); const onPassChange = useCallback( (newPassword: any) => { @@ -66,11 +65,10 @@ export const SetPassword: React.FC> = [setConfirmInput, onPasswordChange, passwordInput] ); - const hasConfirmPasswordError = useCallback((): boolean => { - console.log('confirm error' && confirmInput.length !== 0 && confirmInput !== passwordInput ) - return confirmInput.length !== 0 && confirmInput !== passwordInput; - }, [confirmInput, passwordInput]); - + const hasConfirmPasswordError = useCallback( + (): boolean => shouldValidateConfirmPassword && confirmInput.length !== 0 && confirmInput !== passwordInput, + [shouldValidateConfirmPassword, confirmInput, passwordInput] + ); const isValidPassword = useCallback((): boolean => { for (let i = 0; i < passwordRequirements.length; i++) { @@ -89,7 +87,7 @@ export const SetPassword: React.FC> = inputRef={passwordRef} label={newPasswordLabel} value={passwordInput} - error={!isValidPassword()} + error={shouldValidatePassword && !isValidPassword()} sx={{ mt: { md: 4, sm: 3 }, }} @@ -107,7 +105,7 @@ export const SetPassword: React.FC> = onBlur={(e): void => { // eslint-disable-next-line no-unused-expressions passwordTextFieldProps?.onBlur && passwordTextFieldProps.onBlur(e); - // setShouldValidatePassword(true); + setShouldValidatePassword(true); }} /> {passwordRequirements && passwordRequirements.length > 0 && ( @@ -146,7 +144,7 @@ export const SetPassword: React.FC> = onBlur={(e): void => { // eslint-disable-next-line no-unused-expressions confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e); - // setShouldValidateConfirmPassword(true); + setShouldValidateConfirmPassword(true); }} /> diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 27bb359e..a8a25053 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -5,21 +5,20 @@ import { defaultPasswordRequirements } from '../../constants'; import { CreatePasswordScreenProps } from './types'; import { useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; -import { PasswordRequirement } from '../../components/SetPassword/types'; /** -* Component renders a screen with account details information for support with the application. -* Contact information is pulled from the context passed into the workflow. -* -* @param errorDisplayConfig configuration for customizing how errors are displayed -* @param PasswordProps props passed from SetPassword component -* @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component -* @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component -* @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component -* @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component -* -* @category Component -*/ + * Component renders a screen with account details information for support with the application. + * Contact information is pulled from the context passed into the workflow. + * + * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param PasswordProps props passed from SetPassword component + * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component + * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component + * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component + * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * + * @category Component + */ export const CreatePasswordScreen: React.FC = (props) => { const { t } = useLanguageLocale(); @@ -45,8 +44,12 @@ export const CreatePasswordScreen: React.FC = (props) const passwordRef = useRef(null); const confirmRef = useRef(null); - const [passwordInput, setPasswordInput] = useState(password !=='' ? password : (PasswordProps?.initialNewPasswordValue ?? '')); - const [confirmInput, setConfirmInput] = useState(confirmPassword !=='' ? confirmPassword : (PasswordProps?.initialConfirmPasswordValue ?? '')); + const [passwordInput, setPasswordInput] = useState( + password !== '' ? password : PasswordProps?.initialNewPasswordValue ?? '' + ); + const [confirmInput, setConfirmInput] = useState( + confirmPassword !== '' ? confirmPassword : PasswordProps?.initialConfirmPasswordValue ?? '' + ); const [isLoading, setIsLoading] = useState(false); const passwordRequirements = defaultPasswordRequirements(t); const { triggerError, errorManagerConfig } = useErrorManager(); @@ -89,7 +92,15 @@ export const CreatePasswordScreen: React.FC = (props) [setPasswordInput, setConfirmInput] ); - + const areValidMatchingPasswords = useCallback((): boolean => { + if (PasswordProps?.passwordRequirements?.length === 0) { + return confirmInput === passwordInput; + } + for (let i = 0; i < passwordRequirements.length; i++) { + if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; + } + + }, [PasswordProps.passwordRequirements.length, passwordRequirements, passwordInput, confirmInput]); const passwordProps = { newPasswordLabel: t('bluiCommon:FORMS.PASSWORD'), @@ -106,7 +117,7 @@ export const CreatePasswordScreen: React.FC = (props) PasswordProps?.onPasswordChange?.(passwordData); }, onSubmit: (): void => { - if (areValidMatchingPasswords(passwordProps.passwordRequirements)) { + if (areValidMatchingPasswords()) { void onNext(); WorkflowCardActionsProps?.onNext?.(); PasswordProps?.onSubmit?.(); @@ -114,16 +125,6 @@ export const CreatePasswordScreen: React.FC = (props) }, }; - const areValidMatchingPasswords = useCallback((passwordRequirements: PasswordRequirement[]): boolean => { - console.log(passwordRequirements?.length > 0, '%%%%%%%%%%%%%%%%%%%return ') - if(passwordRequirements?.length > 0) { - for (let i = 0; i < passwordRequirements.length; i++) { - if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; - }} else { - console.log('valid', confirmInput === passwordInput) - return confirmInput === passwordInput;} - }, [passwordRequirements, passwordInput, confirmInput]); - const workflowCardBaseProps = { @@ -141,12 +142,10 @@ export const CreatePasswordScreen: React.FC = (props) ...WorkflowCardInstructionProps, }; - console.log(`passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords()`, passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(passwordProps.passwordRequirements)); const workflowCardActionsProps = { showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), - canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(passwordProps.passwordRequirements), - // canGoNext: passwordInput !== '' && confirmInput !== '' && passwordInput === confirmInput, + canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(), showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, @@ -163,8 +162,6 @@ export const CreatePasswordScreen: React.FC = (props) }, }; - - return ( Date: Wed, 20 Sep 2023 15:59:30 +0530 Subject: [PATCH 3/5] Fix prettier --- login-workflow/example/src/navigation/AppRouter.tsx | 2 +- .../CreatePasswordScreen/CreatePasswordScreen.tsx | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx index 78d67355..c5c1a3c1 100644 --- a/login-workflow/example/src/navigation/AppRouter.tsx +++ b/login-workflow/example/src/navigation/AppRouter.tsx @@ -142,7 +142,7 @@ export const AppRouter: React.FC = () => { passwordRequirements: [], }} /> - + } /> diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index a8a25053..2a791d9e 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -95,11 +95,10 @@ export const CreatePasswordScreen: React.FC = (props) const areValidMatchingPasswords = useCallback((): boolean => { if (PasswordProps?.passwordRequirements?.length === 0) { return confirmInput === passwordInput; - } - for (let i = 0; i < passwordRequirements.length; i++) { - if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; - } - + } + for (let i = 0; i < passwordRequirements.length; i++) { + if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; + } }, [PasswordProps.passwordRequirements.length, passwordRequirements, passwordInput, confirmInput]); const passwordProps = { @@ -125,8 +124,6 @@ export const CreatePasswordScreen: React.FC = (props) }, }; - - const workflowCardBaseProps = { loading: isLoading, ...WorkflowCardBaseProps, From e4efb86fd10e101152c46667b54c4b670d9d70bc Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Thu, 21 Sep 2023 15:44:42 +0530 Subject: [PATCH 4/5] Fix test case --- .../src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 2a791d9e..27cfc54e 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -99,7 +99,7 @@ export const CreatePasswordScreen: React.FC = (props) for (let i = 0; i < passwordRequirements.length; i++) { if (!new RegExp(passwordRequirements[i].regex).test(passwordInput)) return false; } - }, [PasswordProps.passwordRequirements.length, passwordRequirements, passwordInput, confirmInput]); + }, [PasswordProps?.passwordRequirements?.length, passwordRequirements, passwordInput, confirmInput]); const passwordProps = { newPasswordLabel: t('bluiCommon:FORMS.PASSWORD'), From 358db7c7d658ab5b4229d2387dc3e5ed8a2145c3 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Thu, 21 Sep 2023 21:47:16 +0530 Subject: [PATCH 5/5] Revert test code and update js docs --- .../example/src/navigation/AppRouter.tsx | 31 +------------------ .../CreatePasswordScreen.tsx | 3 +- .../CreatePasswordScreenBase.tsx | 3 +- 3 files changed, 3 insertions(+), 34 deletions(-) diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx index c5c1a3c1..3d384b4b 100644 --- a/login-workflow/example/src/navigation/AppRouter.tsx +++ b/login-workflow/example/src/navigation/AppRouter.tsx @@ -8,9 +8,6 @@ import { RegistrationContextProvider, ResetPasswordScreen, RegistrationWorkflow, - EulaScreen, - CreatePasswordScreen, - CreateAccountScreen, } from '@brightlayer-ui/react-auth-workflow'; import { useApp } from '../contexts/AppContextProvider'; import { useNavigate } from 'react-router'; @@ -119,33 +116,7 @@ export const AppRouter: React.FC = () => { } > - - - { - console.log('passwordData', passwordData); - }, - - onSubmit() { - console.log('submit'); - }, - - initialNewPasswordValue: 'Test@12', - initialConfirmPasswordValue: 'Test@123', - passwordNotMatchError: 'not matched', - passwordRequirements: [], - }} - /> - - - } - /> + } /> } /> diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 27cfc54e..27c7990c 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -7,8 +7,7 @@ import { useRegistrationContext, useRegistrationWorkflowContext } from '../../co import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; /** - * Component renders a screen with account details information for support with the application. - * Contact information is pulled from the context passed into the workflow. + * The component renders a screen with the password and confirm password field for creating a new password. * * @param errorDisplayConfig configuration for customizing how errors are displayed * @param PasswordProps props passed from SetPassword component diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx index 6ddfea19..6e3c9916 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx @@ -11,8 +11,7 @@ import { SetPassword } from '../../components/SetPassword'; import ErrorManager from '../../components/Error/ErrorManager'; /** - * Component renders a screen with account details information for support with the application. - * Contact information is pulled from the context passed into the workflow. + * The component renders a screen with the password and confirm password field for creating a new password. * * @param errorDisplayConfig configuration for customizing how errors are displayed * @param PasswordProps props passed from SetPassword component