@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
55 lines (54 loc) • 3.54 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { WorkflowCard } from '../../components/WorkflowCard/index.js';
import { WorkflowCardActions } from '../../components/WorkflowCard/WorkflowCardActions.js';
import { WorkflowCardBody } from '../../components/WorkflowCard/WorkflowCardBody.js';
import { WorkflowCardHeader } from '../../components/WorkflowCard/WorkflowCardHeader.js';
import { WorkflowCardInstructions } from '../../components/WorkflowCard/WorkflowCardInstructions.js';
import TextField from '@mui/material/TextField';
import ErrorManager from '../../components/Error/ErrorManager.js';
/**
* Component that renders a screen for the user to enter their email address to start the
* account creation process.
*
* @param {CreateAccountScreenProps} props - props of CreateAccountScreen base component
*
* @category Component
*/
export const CreateAccountScreenBase = (props) => {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
emailValidator = (email) => true, emailLabel, initialValue, emailTextFieldProps, inputRef, errorDisplayConfig, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const [emailInput, setEmailInput] = React.useState(initialValue ? initialValue : '');
const [isEmailValid, setIsEmailValid] = React.useState(emailValidator(initialValue ?? '') ?? false);
const [emailError, setEmailError] = React.useState('');
const [shouldValidateEmail, setShouldValidateEmail] = React.useState(false);
const handleEmailInputChange = useCallback((email) => {
setEmailInput(email);
const emailValidatorResponse = emailValidator(email);
setIsEmailValid(typeof emailValidatorResponse === 'boolean' ? emailValidatorResponse : false);
setEmailError(typeof emailValidatorResponse === 'string' ? emailValidatorResponse : '');
}, [emailValidator]);
useEffect(() => {
if (emailInput.length > 0) {
setShouldValidateEmail(true);
handleEmailInputChange(emailInput);
}
}, []);
return (React.createElement(WorkflowCard, { ...cardBaseProps, ...otherProps },
React.createElement(WorkflowCardHeader, { ...headerProps }),
React.createElement(WorkflowCardInstructions, { ...instructionsProps }),
React.createElement(WorkflowCardBody, null,
React.createElement(ErrorManager, { ...errorDisplayConfig },
React.createElement(TextField, { ref: inputRef, type: 'email', label: emailLabel, fullWidth: true, value: emailInput, variant: "filled", error: shouldValidateEmail && !isEmailValid, helperText: shouldValidateEmail && emailError, ...emailTextFieldProps, onChange: (e) => {
emailTextFieldProps?.onChange?.(e);
handleEmailInputChange(e.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' &&
((emailInput.length > 0 && isEmailValid) || actionsProps.canGoNext))
actionsProps?.onNext?.();
}, onBlur: (e) => {
emailTextFieldProps?.onBlur?.(e);
setShouldValidateEmail(true);
} }))),
React.createElement(WorkflowCardActions, { ...actionsProps, canGoNext: (emailInput.length > 0 && isEmailValid && actionsProps.canGoNext) })));
};