Update release derms auth branch with dev

login-workflow/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.1 (Unreleased)
+
+### Fixed
+
+-   Translations not working while throwing error from actions ([#513](https://github.com/etn-ccis/blui-react-workflows/issues/513)).
+-   Error in the dialog / message box does not translate ([#510](https://github.com/etn-ccis/blui-react-workflows/issues/510)).
+-   Title missing in the messageBoxConfig of ErrorManager ([#507](https://github.com/etn-ccis/blui-react-workflows/issues/507)).
+-   Added loader to the login action ([#511](https://github.com/etn-ccis/blui-react-workflows/issues/511)).
+
 ## v4.0.0 (October 4, 2023)
 
 ### Added

login-workflow/example/src/actions/AuthUIActions.tsx

@@ -90,7 +90,7 @@ export const ProjectAuthUIActions: AuthUIActionsWithApp = (appHelper) => ({
 
         if (isRandomFailure()) {
             // reject(new Error('LOGIN.GENERIC_ERROR'));
-            throw new Error('LOGIN.INVALID_CREDENTIALS');
+            throw new Error('bluiAuth:LOGIN.INVALID_CREDENTIALS');
         }
 
         LocalStorage.saveAuthCredentials(email, email);

login-workflow/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-auth-workflow",
-    "version": "4.0.0",
+    "version": "4.0.1",
     "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.",

login-workflow/src/components/Error/ErrorManager.tsx

@@ -33,6 +33,7 @@ export type ErrorManagerProps = {
         dismissLabel?: string;
     };
     messageBoxConfig?: {
+        title?: string;
         dismissible?: boolean;
         position?: 'top' | 'bottom';
         fontColor?: string;
@@ -79,7 +80,7 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
             <BasicDialog
                 open={error.length > 0}
                 title={dialogConfig?.title ?? t('bluiCommon:MESSAGES.ERROR')}
-                body={error}
+                body={t(error)}
                 onClose={onClose}
                 dismissButtonText={dialogConfig?.dismissLabel}
             />
@@ -92,7 +93,8 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
 
         return (
             <ErrorMessageBox
-                errorMessage={error}
+                title={dialogConfig?.title ?? t('bluiCommon:MESSAGES.ERROR')}
+                errorMessage={t(error)}
                 dismissible={dismissible}
                 sx={sx}
                 backgroundColor={backgroundColor}

login-workflow/src/components/Error/ErrorMessageBox.tsx

@@ -8,6 +8,10 @@ export type ErrorMessageBoxProps = {
     /**
      * The text to show in the title
      */
+    title: string;
+    /**
+     * The text to show in the message
+     */
     errorMessage: string;
 
     /**
@@ -41,7 +45,8 @@ export type ErrorMessageBoxProps = {
 /**
  * Component that renders a basic message box with an error message and a configurable dismiss button.
  *
- * @param errorMessage text to show in the title
+ * @param text to show as the title
+ * @param errorMessage text to show in the message
  * @param backgroundColor the background color of the message box
  * @param dismissible whether the message box can be dismissed
  * @param fontColor the font color of the text inside the message box
@@ -51,7 +56,7 @@ export type ErrorMessageBoxProps = {
  * @category Component
  */
 const ErrorMessageBox = (props: ErrorMessageBoxProps): JSX.Element => {
-    const { errorMessage, backgroundColor, dismissible = true, fontColor, onClose = (): void => {}, sx } = props;
+    const { title, errorMessage, backgroundColor, dismissible = true, fontColor, onClose = (): void => {}, sx } = props;
 
     return (
         <Box
@@ -81,7 +86,10 @@ const ErrorMessageBox = (props: ErrorMessageBoxProps): JSX.Element => {
                     }}
                 />
             )}
-            <Typography variant="body2">{errorMessage}</Typography>
+            <Box>
+                <Typography>{title}</Typography>
+                <Typography variant="body2">{errorMessage}</Typography>
+            </Box>
         </Box>
     );
 };

login-workflow/src/contexts/ErrorContext/useErrorManager.tsx

@@ -24,7 +24,6 @@ export const useErrorManager = (): {
         }
         return {
             ...errorConfig,
-            dialogConfig: { title: 'Error' },
             error: err.message,
             onClose: (): void => {
                 setError(new Error());

login-workflow/src/screens/LoginScreen/LoginScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { LoginScreenProps } from './types';
 import { LoginScreenBase } from './LoginScreenBase';
 import { useAuthContext } from '../../contexts';
@@ -48,6 +48,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
     const auth = useAuthContext();
     const { actions, navigate, routeConfig, rememberMeDetails } = auth;
     const { triggerError, errorManagerConfig } = useErrorManager();
+    const [isLoading, setIsLoading] = useState(false);
     const errorDisplayConfig = {
         ...errorManagerConfig,
         ...props.errorDisplayConfig,
@@ -105,6 +106,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
 
     return (
         <LoginScreenBase
+            loading={isLoading}
             usernameLabel={usernameLabel}
             usernameTextFieldProps={usernameTextFieldProps}
             usernameValidator={usernameValidator}
@@ -120,10 +122,13 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
             onLogin={
                 (async (username: string, password: string, rememberMe: boolean): Promise<void> => {
                     try {
+                        setIsLoading(true);
                         await actions.logIn(username, password, rememberMe);
                         await props.onLogin?.(username, password, rememberMe);
                     } catch (_error) {
                         triggerError(_error as Error);
+                    } finally {
+                        setIsLoading(false);
                     }
                 }) as any
             }

login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx

@@ -111,6 +111,7 @@ export const LoginScreenBase: React.FC<React.PropsWithChildren<LoginScreenProps>
         projectImage,
         header,
         footer,
+        ...otherProps
     } = props;
 
     const theme = useTheme();
@@ -189,7 +190,7 @@ export const LoginScreenBase: React.FC<React.PropsWithChildren<LoginScreenProps>
     };
 
     return (
-        <WorkflowCard className={defaultClasses.root} data-testid={defaultClasses.root}>
+        <WorkflowCard className={defaultClasses.root} data-testid={defaultClasses.root} {...otherProps}>
             <WorkflowCardBody sx={{ py: { xs: 4, sm: 4, md: 4 }, px: { xs: 4, sm: 8, md: 8 } }}>
                 {header}
                 <Box