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 (