@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
114 lines (113 loc) • 8.06 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useCallback, useRef, useState } from 'react';
import { CreatePasswordScreenBase } from './CreatePasswordScreenBase';
import { defaultPasswordRequirements, timeOutDelay } from '../../constants';
import { useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts';
import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
import { useTranslation } from 'react-i18next';
/**
* The component renders a screen with the password and confirm password field for creating a new password.
*
* @param {CreatePasswordScreenProps} props - Props of Create Password Screen
*
* @category Component
*/
export const CreatePasswordScreen = (props) => {
var _a, _b, _c;
const { t } = useTranslation();
const { actions, navigate } = useRegistrationContext();
const regWorkflow = useRegistrationWorkflowContext();
const { nextScreen, previousScreen, screenData: { CreatePassword: { password, confirmPassword }, }, currentScreen, totalScreens, resetScreenData, } = regWorkflow;
const { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, PasswordProps, } = props;
const passwordRef = useRef(null);
const confirmRef = useRef(null);
const [passwordInput, setPasswordInput] = useState(password !== '' ? password : ((_a = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.initialNewPasswordValue) !== null && _a !== void 0 ? _a : ''));
const [confirmInput, setConfirmInput] = useState(confirmPassword !== '' ? confirmPassword : ((_b = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.initialConfirmPasswordValue) !== null && _b !== void 0 ? _b : ''));
const [isLoading, setIsLoading] = useState(false);
const passwordReqs = (_c = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.passwordRequirements) !== null && _c !== void 0 ? _c : defaultPasswordRequirements(t);
const { triggerError, errorManagerConfig } = useErrorManager();
const errorDisplayConfig = Object.assign(Object.assign(Object.assign({}, errorManagerConfig), props.errorDisplayConfig), { onClose: () => {
var _a;
if ((_a = props.errorDisplayConfig) === null || _a === void 0 ? void 0 : _a.onClose)
props.errorDisplayConfig.onClose();
if (errorManagerConfig.onClose)
errorManagerConfig === null || errorManagerConfig === void 0 ? void 0 : errorManagerConfig.onClose();
} });
const onNext = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _d;
try {
setIsLoading(true);
yield ((_d = actions === null || actions === void 0 ? void 0 : actions.createPassword) === null || _d === void 0 ? void 0 : _d.call(actions, passwordInput));
void nextScreen({
screenId: 'CreatePassword',
values: { password: passwordInput, confirmPassword: confirmInput },
});
}
catch (_error) {
triggerError(_error);
}
finally {
setTimeout(() => {
setIsLoading(false);
}, timeOutDelay);
}
}), [actions, passwordInput, nextScreen, confirmInput, triggerError]);
const onPrevious = useCallback(() => {
previousScreen({
screenId: 'CreatePassword',
values: { password: passwordInput, confirmPassword: confirmInput },
});
}, [confirmInput, passwordInput, previousScreen]);
const updateFields = useCallback((fields) => {
setPasswordInput(fields.password);
setConfirmInput(fields.confirm);
}, [setPasswordInput, setConfirmInput]);
const areValidMatchingPasswords = useCallback(() => {
if ((passwordReqs === null || passwordReqs === void 0 ? void 0 : passwordReqs.length) === 0) {
return confirmInput === passwordInput;
}
for (const req of passwordReqs) {
if (!new RegExp(req.regex).test(passwordInput))
return false;
}
return confirmInput === passwordInput;
}, [passwordReqs, passwordInput, confirmInput]);
const passwordProps = Object.assign(Object.assign({ newPasswordLabel: t('bluiCommon:FORMS.PASSWORD'), confirmPasswordLabel: t('bluiCommon:FORMS.CONFIRM_PASSWORD'), passwordNotMatchError: t('bluiCommon:FORMS.PASS_MATCH_ERROR'), passwordRequirements: passwordReqs, passwordRef,
confirmRef }, PasswordProps), { initialNewPasswordValue: passwordInput, initialConfirmPasswordValue: confirmInput, onPasswordChange: (passwordData) => {
var _a;
updateFields(passwordData);
(_a = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.onPasswordChange) === null || _a === void 0 ? void 0 : _a.call(PasswordProps, passwordData);
}, onSubmit: () => {
var _a, _b;
if (areValidMatchingPasswords()) {
void onNext();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
(_b = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.onSubmit) === null || _b === void 0 ? void 0 : _b.call(PasswordProps);
}
} });
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.PASSWORD'), onIconPress: () => {
navigate(-1);
resetScreenData();
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: t('bluiRegistration:REGISTRATION.INSTRUCTIONS.PASSWORD_INFO') }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(), showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, currentStep: currentScreen, totalSteps: totalScreens }, WorkflowCardActionsProps), { onNext: () => {
var _a;
void onNext();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
}, onPrevious: () => {
var _a;
void onPrevious();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onPrevious) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
return (React.createElement(CreatePasswordScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, PasswordProps: passwordProps, errorDisplayConfig: errorDisplayConfig }));
};