Merge pull request #620 from etn-ccis/bug/5969-Unable-to-display-cust…

…om-error-thrown-from-the-changePassword-action Unable to display custom error thrown from the changePassword action
etn-ccis · Aug 9, 2024 · 491a282 · 491a282
2 parents b01d186 + d3726a4
commit 491a282
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 36 deletions.
diff --git a/login-workflow/CHANGELOG.md b/login-workflow/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v4.0.4 (Unreleased)
+
+### Added
+
+-   Error Manager for ChangePasswordDialog ([#612](https://github.com/etn-ccis/blui-react-workflows/issues/612))
+
 ## v4.0.3 (May 9, 2024)
 
 ### Fixed

diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx
@@ -5,6 +5,7 @@ import { ChangePasswordDialogBase } from './ChangePasswordDialogBase';
 import { ChangePasswordDialogProps } from './types';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import { useTranslation } from 'react-i18next';
+import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
 
 /**
  * Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs.
@@ -43,7 +44,18 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
     const [showErrorDialog, setShowErrorDialog] = useState(false);
     const [isLoading, setIsLoading] = useState(loading);
     const [showSuccessScreen, setShowSuccessScreen] = useState(false);
-    const { actions } = useAuthContext();
+    const { actions, navigate, routeConfig } = useAuthContext();
+
+    const { triggerError, errorManagerConfig } = useErrorManager();
+    const errorDisplayConfig = {
+        ...errorManagerConfig,
+        ...props.errorDisplayConfig,
+        onClose: (): void => {
+            if (props.errorDisplayConfig && props.errorDisplayConfig.onClose) props.errorDisplayConfig.onClose();
+            if (errorManagerConfig.onClose) errorManagerConfig?.onClose();
+        },
+    };
+    const [hasVerifyCodeError, setHasVerifyCodeError] = useState(false);
 
     const passwordReqs = PasswordProps?.passwordRequirements ?? defaultPasswordRequirements(t);
 
@@ -77,8 +89,10 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
                     onFinish?.();
                 }
                 setShowSuccessScreen(true);
-            } catch {
+            } catch (_error) {
+                setHasVerifyCodeError(true);
                 setShowErrorDialog(true);
+                triggerError(_error as Error);
             } finally {
                 setIsLoading(false);
             }
@@ -89,9 +103,10 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
         passwordInput,
         actions,
         setIsLoading,
-        setShowErrorDialog,
         onFinish,
         props.showSuccessScreen,
+        triggerError,
+        setShowErrorDialog,
     ]);
 
     const passwordProps = {
@@ -168,6 +183,16 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
                 },
             }}
             showSuccessScreen={showSuccessScreen}
+            errorDisplayConfig={{
+                ...errorDisplayConfig,
+                onClose: hasVerifyCodeError
+                    ? (): void => {
+                          navigate(routeConfig.LOGIN as string);
+                          // eslint-disable-next-line no-unused-expressions
+                          errorDisplayConfig.onClose;
+                      }
+                    : errorDisplayConfig.onClose,
+            }}
         />
     );
 };
diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx
@@ -19,6 +19,7 @@ import { Spinner } from '../../components';
 import { SuccessScreenBase, SuccessScreenProps } from '../../screens';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { ChangePasswordDialogClassKey, getChangePasswordDialogUtilityClass } from './utilityClasses';
+import ErrorManager from '../Error/ErrorManager';
 
 /**
  * Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs.
@@ -66,6 +67,7 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
         showSuccessScreen,
         slots,
         slotProps,
+        errorDisplayConfig,
     } = props;
     const defaultClasses = useUtilityClasses(props);
     const theme = useTheme();
@@ -140,40 +142,42 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
                         className={defaultClasses.content}
                         data-testid={defaultClasses.content}
                     >
-                        <Typography
-                            sx={{ px: { xs: 1, sm: 0 } }}
-                            className={defaultClasses.description}
-                            data-testid={defaultClasses.description}
-                        >
-                            {dialogDescription}
-                        </Typography>
-                        <Divider
-                            sx={{ mt: 5, mb: 4, mx: { md: -3, xs: -2 } }}
-                            className={defaultClasses.divider}
-                            data-testid={defaultClasses.divider}
-                        />
-                        <SetPassword {...PasswordProps}>
-                            <PasswordTextField
-                                sx={{
-                                    mb: { xs: 3, md: 4 },
-                                }}
-                                id="current-password"
-                                label={currentPasswordLabel}
-                                value={currentPassword}
-                                {...currentPasswordTextFieldProps}
-                                onChange={(e): void => {
-                                    // eslint-disable-next-line no-unused-expressions
-                                    currentPasswordTextFieldProps?.onChange &&
-                                        currentPasswordTextFieldProps.onChange(e);
-                                    handleChange(e);
-                                }}
-                                onKeyUp={(e): void => {
-                                    if (e.key === 'Enter' && PasswordProps?.passwordRef?.current) {
-                                        PasswordProps?.passwordRef.current.focus();
-                                    }
-                                }}
+                        <ErrorManager {...errorDisplayConfig}>
+                            <Typography
+                                sx={{ px: { xs: 1, sm: 0 } }}
+                                className={defaultClasses.description}
+                                data-testid={defaultClasses.description}
+                            >
+                                {dialogDescription}
+                            </Typography>
+                            <Divider
+                                sx={{ mt: 5, mb: 4, mx: { md: -3, xs: -2 } }}
+                                className={defaultClasses.divider}
+                                data-testid={defaultClasses.divider}
                             />
-                        </SetPassword>
+                            <SetPassword {...PasswordProps}>
+                                <PasswordTextField
+                                    sx={{
+                                        mb: { xs: 3, md: 4 },
+                                    }}
+                                    id="current-password"
+                                    label={currentPasswordLabel}
+                                    value={currentPassword}
+                                    {...currentPasswordTextFieldProps}
+                                    onChange={(e): void => {
+                                        // eslint-disable-next-line no-unused-expressions
+                                        currentPasswordTextFieldProps?.onChange &&
+                                            currentPasswordTextFieldProps.onChange(e);
+                                        handleChange(e);
+                                    }}
+                                    onKeyUp={(e): void => {
+                                        if (e.key === 'Enter' && PasswordProps?.passwordRef?.current) {
+                                            PasswordProps?.passwordRef.current.focus();
+                                        }
+                                    }}
+                                />
+                            </SetPassword>
+                        </ErrorManager>
                     </DialogContent>
                     <Divider />
                     <DialogActions

diff --git a/login-workflow/src/components/ChangePasswordDialog/types.ts b/login-workflow/src/components/ChangePasswordDialog/types.ts
@@ -2,6 +2,7 @@ import { DialogProps, TextFieldProps } from '@mui/material';
 import { SuccessScreenProps } from '../../screens';
 import { BasicDialogProps } from '../Dialog';
 import { SetPasswordProps } from '../SetPassword';
+import { ErrorManagerProps } from '../Error/types';
 
 /**
  * Props of ChangePasswordDialogSlots
@@ -106,4 +107,9 @@ export type ChangePasswordDialogProps = DialogProps & { PasswordProps?: SetPassw
      * Applied to slot from SuccessScreen
      */
     slotProps?: ChangePasswordDialogSlotsProps;
+
+    /**
+     * The configuration for customizing how errors are displayed
+     */
+    errorDisplayConfig?: ErrorManagerProps;
 };