Skip to content

Commit

Permalink
Update dates and version number
Browse files Browse the repository at this point in the history
  • Loading branch information
huayunh committed Oct 3, 2023
1 parent d9f9ef8 commit 8afffc2
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 32 deletions.
5 changes: 3 additions & 2 deletions login-workflow/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +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).

## v5.0.0 (October 3, 2023)
## v4.0.0 (October 4, 2023)

### Added

- Reusable screen components.
- Support for custom react auth workflow injection.
- Support for router customizability.
- Learn more about migrating from v4 => v5 your existing application by reading our [Migrating Guide](https://github.com/etn-ccis/blui-react-workflows/blob/master/login-workflow/README.md#migrating-from-v4--v5).

Learn more about migrating from v3 => v4 your existing application by reading our [Migrating Guide](https://github.com/etn-ccis/blui-react-workflows/blob/master/login-workflow/README.md#migrating-from-v3--v4).

### Changed

Expand Down
2 changes: 1 addition & 1 deletion login-workflow/LICENSES.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"licenseUrl": "https://github.com/facebook/create-react-app/raw/master/LICENSE",
"parents": "example"
},
"[email protected].2": {
"[email protected].3": {
"licenses": "MIT",
"repository": "https://github.com/i18next/react-i18next",
"licenseUrl": "https://github.com/i18next/react-i18next/raw/master/LICENSE",
Expand Down
14 changes: 9 additions & 5 deletions login-workflow/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
The React Auth Workflow package provides a consistent UI implementation of authentication-related capabilities for use in Eaton web applications built with React.

The package is intended to provide a standard, out-of-the-box experience for capabilities such as:

- Login
- Forgot / Reset Password
- Change Password
Expand All @@ -16,7 +17,6 @@ This package is flexible, allowing you to use the Login and Registration flows i

These workflows are back-end agnostic, meaning you can use them with any back-end API you wish. You simply need to provide an implementation for several key functions (actions) that are called at various points within the workflows based on user interaction.


![Login](https://raw.githubusercontent.com/etn-ccis/blui-react-workflows/master/login-workflow/media/login.png)
![Password](https://raw.githubusercontent.com/etn-ccis/blui-react-workflows/master/login-workflow/media/password.png)

Expand All @@ -31,6 +31,7 @@ yarn add @brightlayer-ui/react-auth-workflow
```

### Peer Dependencies

This package also has a number of peer dependency requirements that you will need to install in your project. To install the latest version of all of these peer dependencies, run the following command in your project root:

```
Expand All @@ -44,6 +45,7 @@ yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material @brigh
To use the package, read our [Integration](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/integration.md) instructions. Even if you are starting from scratch, it may be useful for you to refer to the [Example](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/example) project while getting started.

In short, you will need to:

- Add routes for each of the Login Workflow screens you wish to include
- Define a mechanism for tracking the authenticated state of the current user
- Add a registration route for the registration workflow component
Expand All @@ -63,18 +65,20 @@ In short, you will need to:
- [Components & APIs](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/components/README.md)
- [Screens](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/screens/README.md)

# Migrating from v4 => v5
We have listened to your feedback and version 5 of this library is a significant rewrite that aims to address many requests for greater flexibility and customization of the workflows.
# Migrating from v3 => v4

We have listened to your feedback and version 4 of this library is a significant rewrite that aims to address many requests for greater flexibility and customization of the workflows.

Some notable changes include:

- Router independence — you now have full control over your routing library and its configuration
- Allowing you to manage the authentication status / mechanism (separating UI from business logic)
- Separation of Login and Registration workflows so they can be used independently
- Allow for re-ordering or adding/removing screens from workflows (utility components available to help you match our styling in custom screens)
- Exporting screens individually so you can build your own custom flows
- Simpler approach to translations (separating our internal translations from your application-level translations)
- Greater customization of screens through props (and moving customization properties to the screens they affect instead of handling all customizations through a monolithic wrapper component)
- Improved error management mechanism (customizable)
- Improved error management mechanism (customizable)

Learn more about upgrading your existing application by reading our [Migrating Guide](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/migration-guide-4-5.md)

Expand Down Expand Up @@ -119,4 +123,4 @@ yarn generate:licenses

## Browser Support

Brightlayer UI Login Workflow will work with any modern browser. For details refer to our [Browser Support](https://brightlayer-ui.github.io/development/frameworks-web/react#browser-support) documentation.
Brightlayer UI Login Workflow will work with any modern browser. For details refer to our [Browser Support](https://brightlayer-ui.github.io/development/frameworks-web/react#browser-support) documentation.
37 changes: 14 additions & 23 deletions login-workflow/docs/migration-guide-3-4.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,52 @@
# Migration Guide: v4.x => v5.x
# Migration Guide: v3.x => v4.x

## Update Dependencies

First, update your @brightlayer-ui/react-auth-workflow dependency to the latest version.

```shell
npm install --save @brightlayer-ui/react-auth-workflow@^5.0.0
npm install --save @brightlayer-ui/react-auth-workflow@^4.0.0
// or
yarn upgrade @brightlayer-ui/react-auth-workflow@^5.0.0
yarn upgrade @brightlayer-ui/react-auth-workflow@^4.0.0
```

## Managing Auth State

In order to be more flexible / customizable, the workflow no longer manages the authentication status of the user internally. You will need to establish your own mechanism (such as using a ContextProvider or Redux) to track whether or not a user is authenticated to your application. For reference, you can look at how we set up the [AppContext](https://github.com/etn-ccis/blui-react-workflows/blob/master/login-workflow/example/src/contexts/AppContextProvider.tsx) in the example project.


## Managing Routing

In order to be more flexible / customizable, the workflow no longer manages routing. The `AuthNavigationContainer` has been removed and will need to be replaced by your own routing solution (we recommend React Router). Please follow our [Routing Guide](./routing.md) for detailed information on setup.


## Managing Workflow Providers

We previously provided a `AuthUIContextProvider` component that was used to configure / wrap both the Authentication workflow and the Registration workflow. In version 5, we have split the management of the workflows so that they can be used independently. You will need to implement the [`AuthContextProvider`](authentication-workflow.md) and [`RegistrationContextProvider`](./registration-workflow.md) instead.
We previously provided a `AuthUIContextProvider` component that was used to configure / wrap both the Authentication workflow and the Registration workflow. In version 4, we have split the management of the workflows so that they can be used independently. You will need to implement the [`AuthContextProvider`](authentication-workflow.md) and [`RegistrationContextProvider`](./registration-workflow.md) instead.

## Managing Translations / Internationalization

You no longer need to merge your apps translation data into the workflow — they an exist independently for the sake of simplifying your setup. If you aren't already, you will need to set up [react-i18next](https://react.i18next.com/) to manage your application side translations. Refer to our [Language Support](./language-support.md) guide for more information.


## Updated Actions

### AuthUIActions

The `SecurityContextActions` no longer exist in the newest version and so they will not be available to your action definitions (i.e., `onUserAuthenticated` and `onUserNotAuthenticated` are no longer available). You will need to pass your own self-managed auth state/functions and use those instead (refer to above).


## RegistrationUIActions

1) Update type name `AccountDetailInformation` to `AccountDetails`.
1. Update type name `AccountDetailInformation` to `AccountDetails`.

```tsx
// before
// before
import { RegistrationUIActions, AccountDetailInformation } from '@brightlayer-ui/react-auth-workflow';
// after
import { RegistrationUIActions, AccountDetails } from '@brightlayer-ui/react-auth-workflow';
```

2) LoadEULA renamed to loadEula
2. LoadEULA renamed to loadEula

```tsx
// before
// before
loadEULA: async (language: string): Promise<string> => {
...
return SAMPLE_EULA;
Expand All @@ -62,7 +59,7 @@ loadEula: async (language: string): Promise<string> => {
},
```

3) Additional data available in completeRegistration
3. Additional data available in completeRegistration

The `userData` parameter will now pass all data collected from the registration workflow, including custom data.

Expand Down Expand Up @@ -91,19 +88,17 @@ completeRegistration: async (
},
```

4) New actions available
4. New actions available

To give greater flexibility / granularity in the workflow, we have added a few more actions in registrationUIActions such as `acceptEula`, `requestRegistrationCode`, `createPassword`, and `setAccountDetails`. Refer to the [Registration Workflow](./registration-workflow.md) Guide for information about these new actions.


## New Setup

Your new app architecture will look something like this once you have made all of the necessary updates:


```tsx
// Your application instance of i18n
<I18nextProvider i18n={i18nAppInstance} defaultNS={'app'}>
<I18nextProvider i18n={i18nAppInstance} defaultNS={'app'}>
{/* Your custom context provider for managing auth state, etc. */}
<AppContext.Provider
value={{
Expand All @@ -123,12 +118,8 @@ Your new app architecture will look something like this once you have made all o
>
{/* Your implementation of a routing solution */}
<BrowserRouter basename={'/'}>
<AuthContextProvider>
{/* Auth Routes */}
</AuthContextProvider>
<RegistrationContextProvider>
{/* Registration Routes */}
</RegistrationContextProvider>
<AuthContextProvider>{/* Auth Routes */}</AuthContextProvider>
<RegistrationContextProvider>{/* Registration Routes */}</RegistrationContextProvider>
</BrowserRouter>
</AppContext.Provider>
</I18nextProvider>
Expand Down
2 changes: 1 addition & 1 deletion login-workflow/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@brightlayer-ui/react-auth-workflow",
"version": "5.0.0",
"version": "4.0.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.",
Expand Down

0 comments on commit 8afffc2

Please sign in to comment.