@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
150 lines (149 loc) • 9.37 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, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAuthContext, useErrorManager } from '../../contexts';
import { defaultPasswordRequirements } from '../../constants';
import { ResetPasswordScreenBase } from './ResetPasswordScreenBase';
/**
* Component that renders a ResetPassword screen that allows a user to reset their password and shows a success message upon a successful password reset.
*
* @param {ResetPasswordScreenProps} props - props of ResetPasswordScreen
*
* @category Component
*/
export const ResetPasswordScreen = (props) => {
var _a, _b, _c;
const { t } = useTranslation();
const passwordRef = useRef(null);
const confirmRef = useRef(null);
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 { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, PasswordProps, SuccessScreen, SuccessScreenProps, accountParams, } = props;
const [passwordInput, setPasswordInput] = useState((_a = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.initialNewPasswordValue) !== null && _a !== void 0 ? _a : '');
const [confirmInput, setConfirmInput] = useState((_b = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.initialConfirmPasswordValue) !== null && _b !== void 0 ? _b : '');
const [hasVerifyCodeError, setHasVerifyCodeError] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [showSuccessScreen, setShowSuccessScreen] = useState(false);
const { actions, navigate, routeConfig } = useAuthContext();
const passwordReqs = (_c = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.passwordRequirements) !== null && _c !== void 0 ? _c : defaultPasswordRequirements(t);
// eslint-disable-next-line
const code = accountParams === null || accountParams === void 0 ? void 0 : accountParams.code;
const email = accountParams === null || accountParams === void 0 ? void 0 : accountParams.email;
const verifyResetCode = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
try {
setIsLoading(true);
yield actions.verifyResetCode(code, email);
}
catch (_error) {
setHasVerifyCodeError(true);
triggerError(_error);
}
finally {
setIsLoading(false);
}
}), []);
const handleOnNext = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
try {
setIsLoading(true);
yield actions.setPassword(code, passwordInput, email);
if (props.showSuccessScreen === false) {
navigate(routeConfig.LOGIN);
}
else {
setShowSuccessScreen(true);
}
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}), [actions, code, passwordInput, email, triggerError, props.showSuccessScreen, navigate, routeConfig]);
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 updateFields = useCallback((fields) => {
setPasswordInput(fields.password);
setConfirmInput(fields.confirm);
}, [setPasswordInput, setConfirmInput]);
useEffect(() => {
void verifyResetCode();
}, []);
const clearScreenData = () => {
setPasswordInput('');
setConfirmInput('');
};
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiCommon:FORMS.RESET_PASSWORD'), onIconPress: () => {
clearScreenData();
navigate(-1);
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: t('bluiAuth:CHANGE_PASSWORD.PASSWORD_INFO') }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, showPrevious: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords(), totalSteps: 0 }, WorkflowCardActionsProps), { onNext: () => {
var _a;
void handleOnNext();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
}, onPrevious: () => {
var _a;
clearScreenData();
navigate(routeConfig.LOGIN);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onPrevious) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
const passwordProps = Object.assign(Object.assign({ newPasswordLabel: t('bluiAuth:CHANGE_PASSWORD.NEW_PASSWORD'), confirmPasswordLabel: t('bluiAuth:CHANGE_PASSWORD.CONFIRM_NEW_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 handleOnNext();
(_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);
}
} });
return (React.createElement(ResetPasswordScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, PasswordProps: passwordProps, showSuccessScreen: showSuccessScreen, SuccessScreen: SuccessScreen, SuccessScreenProps: Object.assign({ EmptyStateProps: {
icon: { name: 'check-circle' },
title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
}, WorkflowCardActionsProps: {
showPrevious: false,
fullWidthButton: true,
showNext: true,
nextLabel: t('bluiCommon:ACTIONS.DONE'),
onNext: () => {
navigate(-1);
setShowSuccessScreen(false);
clearScreenData();
},
} }, SuccessScreenProps), errorDisplayConfig: Object.assign(Object.assign({}, errorDisplayConfig), { onClose: hasVerifyCodeError
? () => {
var _a;
navigate(routeConfig.LOGIN);
(_a = errorDisplayConfig.onClose) === null || _a === void 0 ? void 0 : _a.call(errorDisplayConfig);
}
: errorDisplayConfig.onClose }) }));
};