@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
80 lines (79 loc) • 5.01 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { ErrorManager, WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, } from '../../components';
import { HelperText, TextInput } from 'react-native-paper';
import { SuccessScreenBase } from '../SuccessScreen';
/**
* Component renders a screen with forgot password for support with the application.
*
* @param {ForgotPasswordScreenProps} props - props of Forgot Password Screen
*
* @category Component
*/
export const ForgotPasswordScreenBase = (props) => {
var _a, _b, _c, _d;
const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const { emailLabel, initialEmailValue, emailValidator = (email) => new RegExp(EMAIL_REGEX).test(email) ? true : 'Please enter a valid email', SuccessScreen, SuccessScreenProps: successScreenProps, showSuccessScreen, errorDisplayConfig, emailTextInputProps, } = props;
const [emailInput, setEmailInput] = useState(initialEmailValue !== null && initialEmailValue !== void 0 ? initialEmailValue : '');
const cardBaseProps = (_a = props.WorkflowCardBaseProps) !== null && _a !== void 0 ? _a : {};
const headerProps = (_b = props.WorkflowCardHeaderProps) !== null && _b !== void 0 ? _b : {};
const cardBodyProps = (_c = props.WorkflowCardBodyProps) !== null && _c !== void 0 ? _c : {};
const actionsProps = (_d = props.WorkflowCardActionsProps) !== null && _d !== void 0 ? _d : {};
const validateEmail = () => typeof emailValidator(emailInput) !== 'string';
const [isEmailValid, setIsEmailValid] = useState(validateEmail);
const [emailError, setEmailError] = useState(!validateEmail() ? emailValidator(emailInput) : '');
const [shouldValidateEmail, setShouldValidateEmail] = useState(emailInput !== '' && validateEmail);
const handleEmailInputChange = useCallback((email) => {
setEmailInput(email);
const emailValidatorResponse = emailValidator(email);
setIsEmailValid(typeof emailValidatorResponse === 'boolean' ? emailValidatorResponse : false);
setEmailError(typeof emailValidatorResponse === 'string' ? emailValidatorResponse : '');
}, [emailValidator]);
const getSuccessScreen = (_props, _successScreen) => (_successScreen ? _successScreen(_props) : React.createElement(SuccessScreenBase, Object.assign({}, _props)));
const clearScreenData = () => {
setEmailInput('');
setEmailError('');
setIsEmailValid(true);
};
const handleOnNext = () => {
const { onNext } = actionsProps;
if (onNext) {
onNext({ email: emailInput });
}
clearScreenData();
};
const handleOnBack = () => {
const { onPrevious } = actionsProps;
if (onPrevious) {
onPrevious();
}
clearScreenData();
};
const handleCloseIconPress = () => {
const { onIconPress } = headerProps;
if (onIconPress) {
onIconPress();
}
clearScreenData();
};
return (React.createElement(React.Fragment, null, showSuccessScreen ? (getSuccessScreen(successScreenProps !== null && successScreenProps !== void 0 ? successScreenProps : {}, SuccessScreen)) : (React.createElement(WorkflowCard, Object.assign({}, cardBaseProps),
React.createElement(WorkflowCardHeader, Object.assign({}, headerProps, { onIconPress: handleCloseIconPress })),
React.createElement(WorkflowCardBody, Object.assign({}, cardBodyProps),
React.createElement(ErrorManager, Object.assign({}, errorDisplayConfig),
React.createElement(TextInput, Object.assign({ label: emailLabel, value: emailInput, mode: "flat", error: shouldValidateEmail && !isEmailValid, autoCapitalize: "none", testID: "blui-forgot-password-textinput" }, emailTextInputProps, { onBlur: (e) => {
if (emailTextInputProps === null || emailTextInputProps === void 0 ? void 0 : emailTextInputProps.onBlur) {
emailTextInputProps.onBlur(e);
}
setShouldValidateEmail(true);
}, onChangeText: (email) => {
if (emailTextInputProps === null || emailTextInputProps === void 0 ? void 0 : emailTextInputProps.onChangeText) {
emailTextInputProps.onChangeText(email);
}
handleEmailInputChange(email);
}, onSubmitEditing: () => {
if (emailInput.length > 0 && isEmailValid && actionsProps.canGoNext) {
handleOnNext();
}
} })),
React.createElement(HelperText, { type: "error", visible: shouldValidateEmail }, emailError))),
React.createElement(WorkflowCardActions, Object.assign({}, actionsProps, { canGoNext: emailInput.length > 0 && isEmailValid && actionsProps.canGoNext, onNext: handleOnNext, onPrevious: handleOnBack }))))));
};