@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
54 lines (53 loc) • 3.77 kB
JavaScript
/* eslint-disable @typescript-eslint/naming-convention */
import React, { useCallback, useState } from 'react';
import TextField from '@mui/material/TextField';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, WorkflowCardInstructions, } from '../../components/index.js';
import { SuccessScreenBase } from '../SuccessScreen/index.js';
import ErrorManager from '../../components/Error/ErrorManager.js';
/**
* Component renders a screen with forgot password for support with the application.
*
* @param {ForgotPasswordScreenProps} props - props of ForgotPasswordScreen base component
*
* @category Component
*/
export const ForgotPasswordScreenBase = (props) => {
const [emailInput, setEmailInput] = useState(props.initialEmailValue ?? '');
const { emailLabel, initialEmailValue = '',
// eslint-disable-next-line @typescript-eslint/no-unused-vars
emailValidator = (email) => true, slots, slotProps = {}, showSuccessScreen, errorDisplayConfig, emailTextFieldProps, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const validateEmail = () => typeof emailValidator(initialEmailValue) !== 'string';
const [isEmailValid, setIsEmailValid] = useState(validateEmail);
const [emailError, setEmailError] = useState(!validateEmail() ? emailValidator(initialEmailValue) : '');
const [shouldValidateEmail, setShouldValidateEmail] = useState(initialEmailValue !== '' || validateEmail);
const handleEmailInputChange = useCallback((email) => {
setEmailInput(email);
const emailValidatorResponse = emailValidator(email);
setIsEmailValid(typeof emailValidatorResponse === 'boolean' ? emailValidatorResponse : false);
setEmailError(typeof emailValidatorResponse === 'string' ? emailValidatorResponse : '');
}, [emailValidator]);
const handleOnNext = () => {
const { onNext } = actionsProps;
if (onNext) {
onNext({ email: emailInput });
}
};
const getSuccessScreen = (_props, SuccessScreen) => (SuccessScreen ? SuccessScreen(_props) : React.createElement(SuccessScreenBase, { ..._props }));
return (React.createElement(React.Fragment, null, showSuccessScreen ? (getSuccessScreen(slotProps?.SuccessScreen || {}, slots?.SuccessScreen)) : (React.createElement(WorkflowCard, { ...cardBaseProps, ...otherProps },
React.createElement(WorkflowCardHeader, { ...headerProps }),
React.createElement(WorkflowCardInstructions, { ...instructionsProps }),
React.createElement(WorkflowCardBody, null,
React.createElement(ErrorManager, { ...errorDisplayConfig },
React.createElement(TextField, { id: "email", label: emailLabel, fullWidth: true, value: emailInput, variant: "filled", error: shouldValidateEmail && !isEmailValid, helperText: shouldValidateEmail && emailError, ...emailTextFieldProps, onBlur: (e) => {
emailTextFieldProps?.onBlur?.(e);
setShouldValidateEmail(true);
}, onChange: (evt) => {
emailTextFieldProps?.onChange?.(evt);
handleEmailInputChange(evt.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' &&
((emailInput.length > 0 && isEmailValid) || actionsProps.canGoNext))
handleOnNext();
} }))),
React.createElement(WorkflowCardActions, { ...actionsProps, canGoNext: emailInput.length > 0 && isEmailValid && actionsProps.canGoNext, onNext: handleOnNext })))));
};