Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/bl UI 4704 create password prop #479

Merged
merged 6 commits into from
Sep 22, 2023
Merged

Fix/bl UI 4704 create password prop #479

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90780cd
Fix CreatePasswordScreen prop
ektaghag-eaton Sep 20, 2023
fb534e4
Fix Default error for SetPassword Component
ektaghag-eaton Sep 20, 2023
70fa50b
Fix prettier
ektaghag-eaton Sep 20, 2023
e4efb86
Fix test case
ektaghag-eaton Sep 21, 2023
d17179c
Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflow…
ektaghag-eaton Sep 21, 2023
358db7c
Revert test code and update js docs
ektaghag-eaton Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion login-workflow/example/src/navigation/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {
RegistrationContextProvider,
ResetPasswordScreen,
RegistrationWorkflow,
EulaScreen,
CreatePasswordScreen,
CreateAccountScreen,
} from '@brightlayer-ui/react-auth-workflow';
import { useApp } from '../contexts/AppContextProvider';
import { useNavigate } from 'react-router';
Expand Down Expand Up @@ -116,7 +119,33 @@ 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: [],
}}
/>
<CreateAccountScreen />
</RegistrationWorkflow>
}
/>
<Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
</Route>
</Routes>
Expand Down
6 changes: 4 additions & 2 deletions login-workflow/src/components/SetPassword/SetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
// 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) => {
Expand Down
77 changes: 42 additions & 35 deletions login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,23 @@ 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 @@ -80,19 +93,36 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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,
Expand All @@ -112,7 +142,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (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,
Expand All @@ -129,29 +159,6 @@ 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
WorkflowCardActionsProps={workflowCardActionsProps}
Expand Down
Loading