Skip to content

Commit

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

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

{ password: string; confirm: string }

): void => { console.log('passwordData', passwordData); }
<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') }
onSubmit() {
console.log('submit');
},

,
initialNewPasswordValue: 'Test@12',
initialConfirmPasswordValue: 'Test@123',
passwordNotMatchError: 'not matched',
passwordRequirements: [],
}
}
/>
</RegistrationWorkflow>} />
initialNewPasswordValue: 'Test@12',
initialConfirmPasswordValue: 'Test@123',
passwordNotMatchError: 'not matched',
passwordRequirements: [],
}}
/>
<CreateAccountScreen/>
</RegistrationWorkflow>
}
/>
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
Expand Down
60 changes: 29 additions & 31 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,13 +42,12 @@ 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);
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) => {
Expand All @@ -66,11 +65,10 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
[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++) {
Expand All @@ -89,7 +87,7 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
inputRef={passwordRef}
label={newPasswordLabel}
value={passwordInput}
error={!isValidPassword()}
error={shouldValidatePassword && !isValidPassword()}
sx={{
mt: { md: 4, sm: 3 },
}}
Expand All @@ -107,7 +105,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 @@ -146,7 +144,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
61 changes: 29 additions & 32 deletions login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<CreatePasswordScreenProps> = (props) => {
const { t } = useLanguageLocale();
Expand All @@ -45,8 +44,12 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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();
Expand Down Expand Up @@ -89,7 +92,15 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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'),
Expand All @@ -106,24 +117,14 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
PasswordProps?.onPasswordChange?.(passwordData);
},
onSubmit: (): void => {
if (areValidMatchingPasswords(passwordProps.passwordRequirements)) {
if (areValidMatchingPasswords()) {
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;
}} else {
console.log('valid', confirmInput === passwordInput)
return confirmInput === passwordInput;}
}, [passwordRequirements, passwordInput, confirmInput]);



const workflowCardBaseProps = {
Expand All @@ -141,12 +142,10 @@ 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 !== '' && areValidMatchingPasswords(passwordProps.passwordRequirements),
// canGoNext: passwordInput !== '' && confirmInput !== '' && passwordInput === confirmInput,
canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(),
showPrevious: true,
previousLabel: t('bluiCommon:ACTIONS.BACK'),
canGoPrevious: true,
Expand All @@ -163,8 +162,6 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
},
};



return (
<CreatePasswordScreenBase
WorkflowCardActionsProps={workflowCardActionsProps}
Expand Down

0 comments on commit fb534e4

Please sign in to comment.