Skip to content

Commit

Permalink
Fix CreatePasswordScreen prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@ektaghag-eaton
ektaghag-eaton committed Sep 20, 2023
1 parent d75c08c commit 90780cd
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 76 deletions.
27 changes: 26 additions & 1 deletion login-workflow/example/src/navigation/AppRouter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -116,7 +118,30 @@ export const AppRouter: React.FC = () => {
</RegistrationContextProvider>
}
>
<Route path={'/self-registration'} element={<RegistrationWorkflow />} />
<Route path={'/self-registration'} element={<RegistrationWorkflow>
<EulaScreen />
<CreatePasswordScreen
PasswordProps={

{
newPasswordLabel: 'NewPassword', confirmPasswordLabel: 'ConfirmPassword', onPasswordChange: (passwordData:

{ password: string; confirm: string }

): void => { console.log('passwordData', passwordData); }

,
onSubmit() { console.log('submit') }

,
initialNewPasswordValue: 'Test@12',
initialConfirmPasswordValue: 'Test@123',
passwordNotMatchError: 'not matched',
passwordRequirements: [],
}
}
/>
</RegistrationWorkflow>} />
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
Expand Down
58 changes: 31 additions & 27 deletions login-workflow/src/components/SetPassword/SetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<React.PropsWithChildren<SetPasswordProps>> = (props) => {
const {
Expand All @@ -42,10 +42,13 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
} = 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) => {
Expand All @@ -63,10 +66,11 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
[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++) {
Expand All @@ -85,7 +89,7 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
inputRef={passwordRef}
label={newPasswordLabel}
value={passwordInput}
error={shouldValidatePassword && !isValidPassword()}
error={!isValidPassword()}
sx={{
mt: { md: 4, sm: 3 },
}}
Expand All @@ -103,7 +107,7 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
onBlur={(e): void => {
// eslint-disable-next-line no-unused-expressions
passwordTextFieldProps?.onBlur && passwordTextFieldProps.onBlur(e);
setShouldValidatePassword(true);
// setShouldValidatePassword(true);
}}
/>
{passwordRequirements && passwordRequirements.length > 0 && (
Expand Down Expand Up @@ -142,7 +146,7 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
onBlur={(e): void => {
// eslint-disable-next-line no-unused-expressions
confirmPasswordTextFieldProps?.onBlur && confirmPasswordTextFieldProps.onBlur(e);
setShouldValidateConfirmPassword(true);
// setShouldValidateConfirmPassword(true);
}}
/>
</>
Expand Down
109 changes: 61 additions & 48 deletions login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<CreatePasswordScreenProps> = (props) => {
const { t } = useLanguageLocale();
Expand All @@ -33,10 +34,19 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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();
Expand Down Expand Up @@ -79,20 +89,42 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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,
Expand All @@ -109,10 +141,12 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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,
Expand All @@ -129,28 +163,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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 (
<CreatePasswordScreenBase
Expand Down

0 comments on commit 90780cd

Please sign in to comment.