diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index fa696cfe..5c6b1f74 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -44,8 +44,10 @@ export const SetPassword: React.FC> = // Local State const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue); const [confirmInput, setConfirmInput] = useState(initialConfirmPasswordValue); - const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState(false); - const [shouldValidatePassword, setShouldValidatePassword] = useState(false); + const [shouldValidateConfirmPassword, setShouldValidateConfirmPassword] = useState( + initialConfirmPasswordValue ? true : false + ); + const [shouldValidatePassword, setShouldValidatePassword] = useState(initialNewPasswordValue ? true : false); const onPassChange = useCallback( (newPassword: any) => { diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 203dbad0..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 @@ -33,10 +32,23 @@ 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(); @@ -80,19 +92,36 @@ 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; } - return confirmInput === passwordInput; - }, [passwordRequirements, passwordInput, confirmInput]); + }, [PasswordProps?.passwordRequirements?.length, passwordRequirements, passwordInput, confirmInput]); - const { - WorkflowCardBaseProps, - WorkflowCardHeaderProps, - WorkflowCardInstructionProps, - WorkflowCardActionsProps, - PasswordProps, - } = props; + 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()) { + void onNext(); + WorkflowCardActionsProps?.onNext?.(); + PasswordProps?.onSubmit?.(); + } + }, + }; const workflowCardBaseProps = { loading: isLoading, @@ -112,7 +141,7 @@ export const CreatePasswordScreen: React.FC = (props) const workflowCardActionsProps = { showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), - canGoNext: passwordInput !== '' && confirmInput !== '' && passwordInput === confirmInput, + canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(), showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, @@ -129,29 +158,6 @@ 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 (