@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
135 lines (134 loc) • 8.58 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 { useTranslation } from 'react-i18next';
import { defaultPasswordRequirements } from '../../constants';
import { useAuthContext, useErrorManager } from '../../contexts';
import { ChangePasswordScreenBase } from './ChangePasswordScreenBase';
export const ChangePasswordScreen = (props) => {
var _a;
const { t } = useTranslation();
const passwordRef = useRef(null);
const confirmRef = useRef(null);
const { currentPasswordLabel = t('bluiCommon:LABELS.CURRENT_PASSWORD'), PasswordProps, WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, currentPasswordTextInputProps, onFinish, slots = {}, slotProps = {}, } = props;
const [currentInput, setCurrentInput] = useState('');
const [passwordInput, setPasswordInput] = useState('');
const [confirmInput, setConfirmInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [showSuccessScreen, setShowSuccessScreen] = useState(false);
const { actions, navigate } = useAuthContext();
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 passwordRequirements = defaultPasswordRequirements(t);
const updateFields = useCallback((fields) => {
setPasswordInput(fields.password);
setConfirmInput(fields.confirm);
}, [setPasswordInput, setConfirmInput]);
const areValidMatchingPasswords = useCallback(() => {
var _a;
if (((_a = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.passwordRequirements) === null || _a === void 0 ? void 0 : _a.length) === 0) {
return confirmInput === passwordInput;
}
for (const req of passwordRequirements) {
if (!new RegExp(req.regex).test(passwordInput))
return false;
}
return confirmInput === passwordInput;
}, [(_a = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.passwordRequirements) === null || _a === void 0 ? void 0 : _a.length, passwordRequirements, passwordInput, confirmInput]);
const checkPasswords = currentInput !== '' && passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords();
const changePasswordSubmit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
if (checkPasswords) {
try {
setIsLoading(true);
yield actions.changePassword(currentInput, passwordInput);
if (props.showSuccessScreen === false) {
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
}
else {
setShowSuccessScreen(true);
}
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}
}), [
checkPasswords,
currentInput,
passwordInput,
actions,
setIsLoading,
onFinish,
props.showSuccessScreen,
triggerError,
]);
const clearScreenData = () => {
setCurrentInput('');
setConfirmInput('');
setPasswordInput('');
};
const passwordProps = Object.assign(Object.assign({ newPasswordLabel: t('bluiAuth:CHANGE_PASSWORD.NEW_PASSWORD'), confirmPasswordLabel: t('bluiAuth:CHANGE_PASSWORD.CONFIRM_NEW_PASSWORD'), passwordRef,
confirmRef, initialNewPasswordValue: passwordInput, initialConfirmPasswordValue: confirmInput, passwordRequirements, passwordNotMatchError: t('bluiCommon:FORMS.PASS_MATCH_ERROR') }, PasswordProps), { 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: () => __awaiter(void 0, void 0, void 0, function* () {
var _b;
yield changePasswordSubmit();
(_b = PasswordProps === null || PasswordProps === void 0 ? void 0 : PasswordProps.onSubmit) === null || _b === void 0 ? void 0 : _b.call(PasswordProps);
}) });
const onNext = () => __awaiter(void 0, void 0, void 0, function* () {
yield changePasswordSubmit();
});
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiAuth:CHANGE_PASSWORD.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({ showPrevious: false, fullWidthButton: true, showNext: true, nextLabel: t('bluiCommon:ACTIONS.SUBMIT'), canGoNext: passwordInput !== '' && confirmInput !== '' && areValidMatchingPasswords() }, 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);
} });
return (React.createElement(ChangePasswordScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, currentPasswordLabel: currentPasswordLabel, currentPasswordChange: (currentPwd) => {
var _a;
setCurrentInput(currentPwd);
(_a = props === null || props === void 0 ? void 0 : props.currentPasswordChange) === null || _a === void 0 ? void 0 : _a.call(props, currentPwd);
}, enableButton: checkPasswords, PasswordProps: passwordProps, currentPasswordTextInputProps: Object.assign(Object.assign({}, currentPasswordTextInputProps), { value: currentInput }), slots: slots, slotProps: {
SuccessScreen: Object.assign({ EmptyStateProps: {
icon: { family: 'material', name: 'check-circle' },
title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
}, onDismiss: () => {
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
}, WorkflowCardActionsProps: {
showPrevious: false,
fullWidthButton: true,
showNext: true,
nextLabel: t('bluiCommon:ACTIONS.DONE'),
onNext: () => {
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
setShowSuccessScreen(false);
clearScreenData();
},
} }, slotProps.SuccessScreen),
}, showSuccessScreen: showSuccessScreen, errorDisplayConfig: errorDisplayConfig }));
};