Merge pull request #667 from etn-ccis/bug/6323-656-fix-change-passwor…

…d-dialog-onclose Fixed change passsword dialog onclose
etn-ccis · Nov 22, 2024 · c1cdcf1 · c1cdcf1
2 parents 7beaa4d + 10807bf
commit c1cdcf1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/login-workflow/CHANGELOG.md b/login-workflow/CHANGELOG.md
@@ -5,6 +5,13 @@ 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).
 
+## v5.0.1 (Unreleased)
+
+### Fixed 
+
+-   Issue with ChangePasswordDialog `errorDisplayConfig` ([#656](https://github.com/etn-ccis/blui-react-workflows/issues/656)).
+-   Issue with `errorDisplayConfig` in screens unable to display the custom error ([#664](https://github.com/etn-ccis/blui-react-workflows/issues/664)).
+
 ## v5.0.0 (September 11, 2024)
 
 ### Added
@@ -17,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed 
 
 -  Reload EULA should not be tied to checkbox status ([#549](https://github.com/etn-ccis/blui-react-workflows/issues/549)).
--  Updated password validation callback function ([#560]https://github.com/etn-ccis/blui-react-workflows/issues/560).
+-  Updated password validation callback function ([#560](https://github.com/etn-ccis/blui-react-workflows/issues/560)).
 
 ### Changed
 

diff --git a/login-workflow/example/src/index.tsx b/login-workflow/example/src/index.tsx
@@ -13,6 +13,20 @@ import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 const root = createRoot(container || document.createDocumentFragment());
 
+// TODO: Remove this after the issues with @types/react goes away
+
+// https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/68444
+/* eslint-disable */
+declare global {
+    namespace React {
+        interface DOMAttributes<T> {
+            placeholder?: string | undefined;
+            onPointerEnterCapture?: React.PointerEventHandler<T> | undefined;
+            onPointerLeaveCapture?: any;
+        }
+    }
+}
+
 root.render(
     // Enable Strict Mode for more error checking
     <React.StrictMode>

diff --git a/login-workflow/package.json b/login-workflow/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-auth-workflow",
-    "version": "5.0.0",
+    "version": "5.0.1-alpha.0",
     "author": "Brightlayer UI <[email protected]> (https://github.com/brightlayer-ui)",
     "license": "BSD-3-Clause",
     "description": "Re-usable workflow components for Authentication and Registration within Eaton applications.",

diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx
@@ -45,15 +45,21 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
     const { actions, navigate, routeConfig } = useAuthContext();
 
     const { triggerError, errorManagerConfig } = useErrorManager();
+    const [hasVerifyCodeError, setHasVerifyCodeError] = useState(false);
+
+    const handleErrorClose = useCallback(() => {
+        if (hasVerifyCodeError) {
+            navigate(routeConfig.LOGIN as string);
+        }
+        props.errorDisplayConfig?.onClose?.();
+        errorManagerConfig.onClose?.();
+    }, [hasVerifyCodeError, navigate, routeConfig.LOGIN, props.errorDisplayConfig, errorManagerConfig]);
+
     const errorDisplayConfig = {
         ...errorManagerConfig,
         ...props.errorDisplayConfig,
-        onClose: (): void => {
-            if (props.errorDisplayConfig && props.errorDisplayConfig.onClose) props.errorDisplayConfig.onClose();
-            if (errorManagerConfig.onClose) errorManagerConfig?.onClose();
-        },
+        onClose: handleErrorClose,
     };
-    const [hasVerifyCodeError, setHasVerifyCodeError] = useState(false);
 
     const passwordReqs = PasswordProps?.passwordRequirements ?? defaultPasswordRequirements(t);
 
@@ -169,16 +175,7 @@ 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,
-            }}
+            errorDisplayConfig={errorDisplayConfig}
         />
     );
 };