@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
75 lines (74 loc) • 4.71 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-expressions */
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 Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import ErrorManager from '../../components/Error/ErrorManager.js';
/**
* Component that renders a screen that prompts a user to enter the confirmation code
* that was sent to the email address that they used to register.
*
* @param {VerifyCodeScreenProps} props - props of VerifyCodeScreen base component
*
* @category Component
*/
export const VerifyCodeScreenBase = (props) => {
const { codeValidator, onResend, resendInstructions, resendLabel, verifyCodeInputLabel, initialValue, errorDisplayConfig, verifyCodeTextFieldProps, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const [verifyCode, setVerifyCode] = React.useState(initialValue ?? '');
const [shouldValidateCode, setShouldValidateCode] = React.useState(false);
const [isCodeValid, setIsCodeValid] = React.useState(codeValidator ? codeValidator(initialValue ?? '') : false);
const [codeError, setCodeError] = React.useState('');
const handleVerifyCodeInputChange = useCallback((code) => {
setVerifyCode(code);
if (codeValidator) {
const validatorResponse = codeValidator(code);
setIsCodeValid(typeof validatorResponse === 'boolean' ? validatorResponse : false);
setCodeError(typeof validatorResponse === 'string' ? validatorResponse : '');
}
}, [codeValidator]);
useEffect(() => {
if (verifyCode.length > 0) {
setShouldValidateCode(true);
handleVerifyCodeInputChange(verifyCode);
}
}, []);
const handleOnNext = () => {
const { onNext } = actionsProps;
if (onNext)
onNext({ code: verifyCode });
};
const handleOnPrevious = () => {
const { onPrevious } = actionsProps;
if (onPrevious)
onPrevious({ code: verifyCode });
};
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, { label: verifyCodeInputLabel, fullWidth: true, value: verifyCode, variant: "filled", error: shouldValidateCode && !isCodeValid, helperText: shouldValidateCode && codeError, ...verifyCodeTextFieldProps, onBlur: (e) => {
// eslint-disable-next-line no-unused-expressions
verifyCodeTextFieldProps?.onBlur && verifyCodeTextFieldProps.onBlur(e);
setShouldValidateCode(true);
}, onChange: (evt) => {
// eslint-disable-next-line no-unused-expressions
verifyCodeTextFieldProps?.onChange && verifyCodeTextFieldProps.onChange(evt);
handleVerifyCodeInputChange(evt.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && ((verifyCode.length > 0 && isCodeValid) || actionsProps.canGoNext))
handleOnNext();
} }),
React.createElement(Box, { sx: { mt: 2 } },
React.createElement(Typography, null,
resendInstructions,
React.createElement(Typography, { sx: { fontSize: 'inherit', textTransform: 'initial', '&:hover': { cursor: 'pointer' } }, onClick: () => onResend?.(), color: "primary", variant: 'button' },
' ',
React.createElement("u", null, resendLabel)))))),
React.createElement(WorkflowCardActions, { ...actionsProps, canGoNext: (verifyCode.length > 0 && isCodeValid && actionsProps.canGoNext), onNext: handleOnNext, onPrevious: handleOnPrevious })));
};