@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
96 lines (95 loc) • 6.16 kB
JavaScript
/* eslint-disable @typescript-eslint/naming-convention */
import React, { useEffect, useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, Typography, useMediaQuery, useTheme, unstable_composeClasses as composeClasses, } from '@mui/material';
import { SetPassword } from '../SetPassword/index.js';
import { PasswordTextField } from '../PasswordTextField/index.js';
import { Spinner } from '../../components/index.js';
import { SuccessScreenBase } from '../../screens/index.js';
import { getChangePasswordDialogUtilityClass } from './utilityClasses.js';
import ErrorManager from '../Error/ErrorManager.js';
/**
* Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs.
* It includes callbacks so you can respond to changes in the inputs.
*
* @param {ChangePasswordDialogProps} props - props of changePassword dailog base component
*
* @category Component
*/
const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;
const slots = {
root: ['root'],
spinner: ['spinner'],
title: ['title'],
content: ['content'],
description: ['description'],
divider: ['divider'],
previousLabelButton: ['previousLabelButton'],
nextLabelButton: ['nextLabelButton'],
buttonAction: ['buttonAction'],
};
return composeClasses(slots, getChangePasswordDialogUtilityClass, classes);
};
export const ChangePasswordDialogBase = (props) => {
const { open, dialogTitle, dialogDescription, currentPasswordLabel, previousLabel, nextLabel, sx, enableButton, currentPasswordChange, onSubmit, onPrevious, PasswordProps, loading, currentPasswordTextFieldProps, showSuccessScreen, slots, slotProps, errorDisplayConfig, } = props;
const defaultClasses = useUtilityClasses(props);
const theme = useTheme();
const matchesMD = useMediaQuery(theme.breakpoints.down('md'));
const matchesSM = useMediaQuery(theme.breakpoints.down('sm'));
const [currentPassword, setCurrentPassword] = useState('');
const [buttonState, setButtonState] = useState(true);
const handleChange = (event) => {
const { value } = event.target;
setCurrentPassword(value);
currentPasswordChange?.(value);
};
useEffect(() => {
setButtonState(!enableButton);
}, [enableButton]);
const getSuccessScreen = (_props, SuccessScreen) => SuccessScreen ? (SuccessScreen(_props)) : (React.createElement(SuccessScreenBase, { WorkflowCardBaseProps: {
sx: {
height: matchesMD ? (matchesSM ? '100vh' : '62vh') : '70vh',
},
}, ..._props }));
return (React.createElement(Dialog, { sx: sx, fullScreen: matchesSM, open: open, maxWidth: 'xs', className: defaultClasses.root, "data-testid": defaultClasses.root },
React.createElement(Spinner, { "data-testid": "blui-spinner", visible: loading, className: defaultClasses.spinner }),
showSuccessScreen ? (getSuccessScreen(slotProps?.SuccessScreen || {}, slots?.SuccessScreen)) : (React.createElement(React.Fragment, null,
React.createElement(DialogTitle, { sx: {
pt: { md: 4, sm: 2 },
px: { md: 3, sm: 2 },
pb: 0,
}, className: defaultClasses.title, "data-testid": defaultClasses.title }, dialogTitle),
React.createElement(DialogContent, { sx: {
flex: '1 1 auto',
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
pt: 2,
pb: { xs: 2, md: 3 },
px: { xs: 2, md: 3 },
}, className: defaultClasses.content, "data-testid": defaultClasses.content },
React.createElement(ErrorManager, { ...errorDisplayConfig },
React.createElement(Typography, { sx: { px: { xs: 1, sm: 0 } }, className: defaultClasses.description, "data-testid": defaultClasses.description }, dialogDescription),
React.createElement(Divider, { sx: { mt: 5, mb: 4, mx: { md: -3, xs: -2 } }, className: defaultClasses.divider, "data-testid": defaultClasses.divider }),
React.createElement(SetPassword, { ...PasswordProps },
React.createElement(PasswordTextField, { sx: {
mb: { xs: 3, md: 4 },
}, id: "current-password", label: currentPasswordLabel, value: currentPassword, ...currentPasswordTextFieldProps, onChange: (e) => {
currentPasswordTextFieldProps?.onChange?.(e);
handleChange(e);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && PasswordProps?.passwordRef?.current) {
PasswordProps?.passwordRef.current.focus();
}
} })))),
React.createElement(Divider, null),
React.createElement(DialogActions, { sx: {
justifyContent: 'flex-end',
p: { xs: 2, md: 3 },
}, className: defaultClasses.buttonAction, "data-testid": defaultClasses.buttonAction },
React.createElement(Grid, { container: true, direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: '100%' } },
React.createElement(Button, { variant: "outlined", color: "primary", sx: { width: 100 }, onClick: onPrevious, className: defaultClasses.previousLabelButton, "data-testid": defaultClasses.previousLabelButton }, previousLabel),
React.createElement(Button, { variant: "contained", disableElevation: true, sx: { width: 100 }, disabled: buttonState, color: "primary", onClick: () => {
void onSubmit?.();
}, className: defaultClasses.nextLabelButton, "data-testid": defaultClasses.nextLabelButton }, nextLabel)))))));
};