@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
118 lines (117 loc) • 7.91 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, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useAuthContext, useErrorManager } from '../../contexts';
import { ForgotPasswordScreenBase } from './ForgotPasswordScreenBase';
import { Linking, StyleSheet, View } from 'react-native';
import { Text } from 'react-native-paper';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
const makeStyles = (theme) => StyleSheet.create({
boldText: {
fontWeight: 'bold',
},
textStyles: {
color: theme.colors.primary,
},
});
/**
* Component renders a screen with forgot password for support with the application.
*
* @param {ForgotPasswordScreenProps} props - props of Forgot Password Screen
*
* @category Component
*/
export const ForgotPasswordScreen = (props) => {
const { t } = useTranslation();
const { actions, navigate, routeConfig } = useAuthContext();
const { triggerError, errorManagerConfig } = useErrorManager();
const theme = useExtendedTheme();
const styles = makeStyles(theme);
const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const { emailLabel = t('bluiCommon:LABELS.EMAIL'), contactPhone = '1-800-123-4567', initialEmailValue, description, responseTime = t('bluiAuth:FORGOT_PASSWORD.RESPONSE_TIME'), emailValidator = (email) => new RegExp(EMAIL_REGEX).test(email) ? true : t('bluiCommon:MESSAGES.EMAIL_ENTRY_ERROR'), WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, showSuccessScreen: enableSuccessScreen = true, SuccessScreen, SuccessScreenProps, emailTextInputProps, } = props;
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 [emailInput, setEmailInput] = useState(initialEmailValue !== null && initialEmailValue !== void 0 ? initialEmailValue : '');
const [isLoading, setIsLoading] = useState(false);
const [showSuccessScreen, setShowSuccessScreen] = useState(false);
const Bold = ({ children }) => (React.createElement(Text, { style: styles.boldText }, children));
const Link = ({ children }) => (React.createElement(Text, { style: styles.textStyles, onPress: () => Linking.openURL(`tel:${contactPhone !== null && contactPhone !== void 0 ? contactPhone : ''}`) }, children));
const handleOnNext = useCallback((email) => __awaiter(void 0, void 0, void 0, function* () {
try {
setIsLoading(true);
yield actions.forgotPassword(email);
if (props.showSuccessScreen === false) {
navigate(routeConfig.LOGIN);
}
else {
setShowSuccessScreen(true);
}
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}), [actions, triggerError]);
const clearEmailInput = () => {
setEmailInput('');
};
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiAuth:HEADER.FORGOT_PASSWORD'), onIconPress: () => {
navigate(-1);
clearEmailInput();
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: description ? (React.createElement(View, null,
" ",
description(responseTime),
" ")) : (React.createElement(Text, { variant: "bodyLarge" },
React.createElement(Trans, { i18nKey: 'bluiAuth:FORGOT_PASSWORD.INSTRUCTIONS', values: { phone: contactPhone, time: responseTime }, components: { boldTag: React.createElement(Bold, null, responseTime), tel: React.createElement(Link, null, contactPhone) } }))) }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, showPrevious: true, nextLabel: t('bluiCommon:ACTIONS.SUBMIT'), previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoNext: true, canGoPrevious: true, totalSteps: 0 }, WorkflowCardActionsProps), { onNext: () => {
var _a;
void handleOnNext(emailInput);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
}, onPrevious: () => {
var _a;
navigate(routeConfig.LOGIN);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onPrevious) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
clearEmailInput();
} });
const emailInputProps = Object.assign(Object.assign({}, emailTextInputProps), { onChangeText: (email) => {
// eslint-disable-next-line
(emailTextInputProps === null || emailTextInputProps === void 0 ? void 0 : emailTextInputProps.onChangeText) && (emailTextInputProps === null || emailTextInputProps === void 0 ? void 0 : emailTextInputProps.onChangeText(email));
setEmailInput(email);
} });
return (React.createElement(ForgotPasswordScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, emailLabel: emailLabel, initialEmailValue: emailInput, emailValidator: emailValidator, emailTextInputProps: emailInputProps, showSuccessScreen: enableSuccessScreen && showSuccessScreen, SuccessScreen: SuccessScreen, SuccessScreenProps: Object.assign({ EmptyStateProps: {
icon: { name: 'check-circle' },
title: t('bluiCommon:MESSAGES.EMAIL_SENT'),
description: (React.createElement(Text, { variant: "bodyLarge" },
React.createElement(Trans, { i18nKey: 'bluiAuth:FORGOT_PASSWORD.LINK_SENT', values: { email: emailInput }, components: { boldTag: React.createElement(Bold, null, emailInput) } }))),
}, WorkflowCardHeaderProps: {
title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
}, WorkflowCardActionsProps: {
showNext: true,
nextLabel: t('bluiCommon:ACTIONS.DONE'),
canGoNext: true,
fullWidthButton: true,
onNext: () => {
clearEmailInput();
navigate(routeConfig.LOGIN);
setShowSuccessScreen(false);
},
} }, SuccessScreenProps), errorDisplayConfig: errorDisplayConfig }));
};