diff --git a/login-workflow/CHANGELOG.md b/login-workflow/CHANGELOG.md index e94a25ab..5172d069 100644 --- a/login-workflow/CHANGELOG.md +++ b/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 (December 4, 2023) + +### 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 diff --git a/login-workflow/docs/components/error-manager.md b/login-workflow/docs/components/error-manager.md index 8e0dbf18..5d1f4e97 100644 --- a/login-workflow/docs/components/error-manager.md +++ b/login-workflow/docs/components/error-manager.md @@ -22,6 +22,7 @@ import { ErrorManager } from '@brightlayer-ui/react-auth-workflow'; | Prop Name | Type | Description | Default | |---|---|---|---| | error | `string` | Error text to display. If string is empty, the error will not be shown. | | +| title | `string` | Title text to display for error dialog and message box. If string is empty, the title will not be shown. | | | mode | `'dialog' \| 'message-box' \| 'none'` | Determines whether to display a dialog, a message box, or neither. | `'dialog'` | | onClose | `() => void` | Function to call when the close/dismiss button is clicked. | | | dialogConfig | `{title?: string, dismissLabel?: string}` | Configuration options for the dialog. See [DialogConfig Props](#dialogconfigprops) | | diff --git a/login-workflow/example/src/actions/AuthUIActions.tsx b/login-workflow/example/src/actions/AuthUIActions.tsx index bb8d9dcd..f55036d9 100644 --- a/login-workflow/example/src/actions/AuthUIActions.tsx +++ b/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); diff --git a/login-workflow/example/yarn.lock b/login-workflow/example/yarn.lock index 56d36f2d..d9930ab0 100644 --- a/login-workflow/example/yarn.lock +++ b/login-workflow/example/yarn.lock @@ -36,6 +36,14 @@ dependencies: "@babel/highlight" "^7.18.6" +"@babel/code-frame@^7.22.13": + version "7.22.13" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" + integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== + dependencies: + "@babel/highlight" "^7.22.13" + chalk "^2.4.2" + "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.5": version "7.21.9" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.9.tgz#10a2e7fda4e51742c907938ac3b7229426515514" @@ -81,6 +89,16 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" +"@babel/generator@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" + integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== + dependencies: + "@babel/types" "^7.23.0" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb" @@ -147,6 +165,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba" integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ== +"@babel/helper-environment-visitor@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167" + integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA== + "@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4" @@ -155,6 +178,14 @@ "@babel/template" "^7.20.7" "@babel/types" "^7.21.0" +"@babel/helper-function-name@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759" + integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw== + dependencies: + "@babel/template" "^7.22.15" + "@babel/types" "^7.23.0" + "@babel/helper-hoist-variables@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" @@ -162,6 +193,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-hoist-variables@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb" + integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-member-expression-to-functions@^7.21.5": version "7.21.5" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz#3b1a009af932e586af77c1030fba9ee0bde396c0" @@ -245,16 +283,33 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-split-export-declaration@^7.22.6": + version "7.22.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" + integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-string-parser@^7.21.5": version "7.21.5" resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd" integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w== +"@babel/helper-string-parser@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" + integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== + "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1": version "7.19.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== +"@babel/helper-validator-identifier@^7.22.20": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" + integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== + "@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180" @@ -288,11 +343,25 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.5", "@babel/parser@^7.21.8", "@babel/parser@^7.21.9": +"@babel/highlight@^7.22.13": + version "7.22.20" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54" + integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg== + dependencies: + "@babel/helper-validator-identifier" "^7.22.20" + chalk "^2.4.2" + js-tokens "^4.0.0" + +"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.8", "@babel/parser@^7.21.9": version "7.21.9" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.9.tgz#ab18ea3b85b4bc33ba98a8d4c2032c557d23cf14" integrity sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g== +"@babel/parser@^7.22.15", "@babel/parser@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" + integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2" @@ -1054,19 +1123,28 @@ "@babel/parser" "^7.21.9" "@babel/types" "^7.21.5" -"@babel/traverse@^7.20.5", "@babel/traverse@^7.21.5", "@babel/traverse@^7.7.2": - version "7.21.5" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133" - integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw== +"@babel/template@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" + integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w== dependencies: - "@babel/code-frame" "^7.21.4" - "@babel/generator" "^7.21.5" - "@babel/helper-environment-visitor" "^7.21.5" - "@babel/helper-function-name" "^7.21.0" - "@babel/helper-hoist-variables" "^7.18.6" - "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.21.5" - "@babel/types" "^7.21.5" + "@babel/code-frame" "^7.22.13" + "@babel/parser" "^7.22.15" + "@babel/types" "^7.22.15" + +"@babel/traverse@^7.20.5", "@babel/traverse@^7.21.5", "@babel/traverse@^7.7.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8" + integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.0" + "@babel/types" "^7.23.0" debug "^4.1.0" globals "^11.1.0" @@ -1079,6 +1157,15 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" +"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" + integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== + dependencies: + "@babel/helper-string-parser" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -3588,7 +3675,7 @@ case-sensitive-paths-webpack-plugin@^2.4.0: resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw== -chalk@^2.0.0, chalk@^2.4.1: +chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== diff --git a/login-workflow/package.json b/login-workflow/package.json index 2d4d2d31..8f1753dc 100644 --- a/login-workflow/package.json +++ b/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 (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/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx index 1f4f6648..33a1640f 100644 --- a/login-workflow/src/components/Error/ErrorManager.tsx +++ b/login-workflow/src/components/Error/ErrorManager.tsx @@ -12,6 +12,11 @@ export type ErrorManagerProps = { */ mode?: 'dialog' | 'message-box' | 'none'; + /** + * Title to display in message box and dialog + */ + title?: string; + /** * The function to call when the close/dismiss button is clicked * @returns void @@ -29,10 +34,11 @@ export type ErrorManagerProps = { * @param {string} dialogConfig.dismissLabel - The label on the dismiss button. */ dialogConfig?: { - title?: string; dismissLabel?: string; + title?: string; }; messageBoxConfig?: { + title?: string; dismissible?: boolean; position?: 'top' | 'bottom'; fontColor?: string; @@ -66,6 +72,7 @@ const ErrorManager: React.FC = (props): JSX.Element => { const { children, mode = 'dialog', + title, error = '', onClose = (): void => {}, dialogConfig, @@ -78,13 +85,13 @@ const ErrorManager: React.FC = (props): JSX.Element => { (): JSX.Element => ( 0} - title={dialogConfig?.title ?? t('bluiCommon:MESSAGES.ERROR')} - body={error} + title={dialogConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')} + body={t(error)} onClose={onClose} dismissButtonText={dialogConfig?.dismissLabel} /> ), - [dialogConfig, error, onClose, t] + [dialogConfig, title, error, onClose, t] ); const ErrorMessageBoxWithProps = useCallback((): JSX.Element => { @@ -92,7 +99,8 @@ const ErrorManager: React.FC = (props): JSX.Element => { return ( = (props): JSX.Element => { onClose={onClose} /> ); - }, [error, messageBoxConfig, onClose]); + }, [error, title, t, messageBoxConfig, onClose]); return mode === 'dialog' && error.length > 0 ? ( <> diff --git a/login-workflow/src/components/Error/ErrorMessageBox.tsx b/login-workflow/src/components/Error/ErrorMessageBox.tsx index e168271b..01b51be0 100644 --- a/login-workflow/src/components/Error/ErrorMessageBox.tsx +++ b/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 ( { }} /> )} - {errorMessage} + + {title} + {errorMessage} + ); }; diff --git a/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx b/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx index 517e285c..23500bff 100644 --- a/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx +++ b/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()); diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index b8cb479f..49470ca9 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/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> = 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> = return ( > = onLogin={ (async (username: string, password: string, rememberMe: boolean): Promise => { 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 } diff --git a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx index 72973d5e..0d63f3dd 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx @@ -111,6 +111,7 @@ export const LoginScreenBase: React.FC projectImage, header, footer, + ...otherProps } = props; const theme = useTheme(); @@ -189,7 +190,7 @@ export const LoginScreenBase: React.FC }; return ( - + {header}