From 615af38b8c763ca3c90028e7125e5a35cf504fc4 Mon Sep 17 00:00:00 2001 From: capyq <60133108+capyq@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:55:16 +0200 Subject: [PATCH] rework : split AuthenticationRouter into atomic component (#542) Signed-off-by: capyq --- .../authentication/AuthenticationRouter.tsx | 97 +++---------------- .../AuthenticationRouterErrorDisplay.tsx | 41 ++++++++ .../alert/ErrorInLogoutAlert.tsx | 27 ++++++ .../alert/ErrorInUserValidationAlert.tsx | 26 +++++ .../alert/UnauthorizedAccessAlert.tsx | 22 +++++ src/components/authentication/alert/index.ts | 9 ++ .../authentication/authenticationType.ts | 33 +++++++ src/components/authentication/index.ts | 22 +---- .../authentication/utils/authService.ts | 2 +- src/components/authentication/utils/index.ts | 8 ++ .../authentication/utils/userManagerMock.ts | 4 +- 11 files changed, 188 insertions(+), 103 deletions(-) create mode 100644 src/components/authentication/AuthenticationRouterErrorDisplay.tsx create mode 100644 src/components/authentication/alert/ErrorInLogoutAlert.tsx create mode 100644 src/components/authentication/alert/ErrorInUserValidationAlert.tsx create mode 100644 src/components/authentication/alert/UnauthorizedAccessAlert.tsx create mode 100644 src/components/authentication/alert/index.ts create mode 100644 src/components/authentication/authenticationType.ts create mode 100644 src/components/authentication/utils/index.ts diff --git a/src/components/authentication/AuthenticationRouter.tsx b/src/components/authentication/AuthenticationRouter.tsx index 772a4125..e1fe9d82 100644 --- a/src/components/authentication/AuthenticationRouter.tsx +++ b/src/components/authentication/AuthenticationRouter.tsx @@ -5,40 +5,15 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Dispatch, useCallback } from 'react'; -import { Location, Navigate, NavigateFunction, Route, Routes } from 'react-router-dom'; -import { Alert, AlertTitle, Grid } from '@mui/material'; -import { FormattedMessage } from 'react-intl'; -import { UserManager } from 'oidc-client'; +import { useCallback } from 'react'; +import { Navigate, Route, Routes } from 'react-router-dom'; +import { Grid } from '@mui/material'; +import { AuthenticationRouterProps } from './authenticationType'; +import AuthenticationRouterErrorDisplay from './AuthenticationRouterErrorDisplay'; +import { handleSigninCallback, handleSilentRenewCallback, login } from './utils/authService'; import SignInCallbackHandler from './SignInCallbackHandler'; -import { handleSigninCallback, handleSilentRenewCallback, login, logout } from './utils/authService'; import SilentRenewCallbackHandler from './SilentRenewCallbackHandler'; import Login from './Login'; -import Logout from './Logout'; - -import { AuthenticationActions } from '../../redux/actions/authActions'; - -export type AuthenticationRouterErrorState = { - userName?: string; - userValidationError?: { error: Error }; - logoutError?: { error: Error }; - unauthorizedUserInfo?: string; -}; - -export type UserManagerState = { - instance: UserManager | null; - error: string | null; -}; - -export interface AuthenticationRouterProps { - userManager: UserManagerState; - signInCallbackError: Error | null; - authenticationRouterError: AuthenticationRouterErrorState | null; - showAuthenticationRouterLogin: boolean; - dispatch: Dispatch; - navigate: NavigateFunction; - location: Location; -} function AuthenticationRouter({ userManager, @@ -50,12 +25,12 @@ function AuthenticationRouter({ location, }: Readonly) { const handleSigninCallbackClosure = useCallback(() => { - if (userManager.instance != null) { + if (userManager.instance) { handleSigninCallback(dispatch, navigate, userManager.instance); } }, [dispatch, navigate, userManager.instance]); const handleSilentRenewCallbackClosure = useCallback(() => { - if (userManager.instance != null) { + if (userManager.instance) { handleSilentRenewCallback(userManager.instance); } }, [userManager.instance]); @@ -103,57 +78,11 @@ function AuthenticationRouter({ {authenticationRouterError !== null && ( - <> - - logout(dispatch, userManager.instance)} - /> - - - {authenticationRouterError.logoutError != null && ( - - - - - -

{authenticationRouterError.logoutError.error.message}

- - )} - {authenticationRouterError?.userValidationError != null && ( - - - - - -

{authenticationRouterError.userValidationError.error.message}

- - )} - {authenticationRouterError?.unauthorizedUserInfo != null && ( - - - - - - - )} - - + )} ); diff --git a/src/components/authentication/AuthenticationRouterErrorDisplay.tsx b/src/components/authentication/AuthenticationRouterErrorDisplay.tsx new file mode 100644 index 00000000..8a9fdc10 --- /dev/null +++ b/src/components/authentication/AuthenticationRouterErrorDisplay.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { Grid } from '@mui/material'; +import { AuthenticationRouterErrorState, AuthenticationRouterProps, UserManagerState } from './authenticationType'; +import Logout from './Logout'; +import { logout } from './utils'; +import { ErrorInLogoutAlert, ErrorInUserValidationAlert, UnauthorizedAccessAlert } from './alert'; + +type AuthenticationRouterErrorDisplayProps = { + errorState: AuthenticationRouterErrorState; + instance: UserManagerState['instance']; + dispatch: AuthenticationRouterProps['dispatch']; +}; + +function AuthenticationRouterErrorDisplay({ errorState, instance, dispatch }: AuthenticationRouterErrorDisplayProps) { + return ( + <> + + logout(dispatch, instance)} /> + + + {errorState.logoutError && ( + + )} + {errorState.userValidationError && ( + + )} + {errorState.unauthorizedUserInfo && } + + + ); +} +export default AuthenticationRouterErrorDisplay; diff --git a/src/components/authentication/alert/ErrorInLogoutAlert.tsx b/src/components/authentication/alert/ErrorInLogoutAlert.tsx new file mode 100644 index 00000000..11a9cd48 --- /dev/null +++ b/src/components/authentication/alert/ErrorInLogoutAlert.tsx @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { Alert, AlertTitle } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; + +type ErrorInLogoutAlertProps = { + userName?: string; + message: string; +}; +export function ErrorInLogoutAlert({ userName, message }: ErrorInLogoutAlertProps) { + return ( + + + + + +

{message}

+ + ); +} + +export default ErrorInLogoutAlert; diff --git a/src/components/authentication/alert/ErrorInUserValidationAlert.tsx b/src/components/authentication/alert/ErrorInUserValidationAlert.tsx new file mode 100644 index 00000000..2d9cf2d5 --- /dev/null +++ b/src/components/authentication/alert/ErrorInUserValidationAlert.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { Alert, AlertTitle } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; + +type ErrorInUserValidationAlertProps = { + userName?: string; + message: string; +}; +export function ErrorInUserValidationAlert({ userName, message }: ErrorInUserValidationAlertProps) { + return ( + + + + + +

{message}

+ + ); +} +export default ErrorInUserValidationAlert; diff --git a/src/components/authentication/alert/UnauthorizedAccessAlert.tsx b/src/components/authentication/alert/UnauthorizedAccessAlert.tsx new file mode 100644 index 00000000..e2dbbfa8 --- /dev/null +++ b/src/components/authentication/alert/UnauthorizedAccessAlert.tsx @@ -0,0 +1,22 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { Alert, AlertTitle } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; + +type UnauthorizedAccessAlertProps = { userName?: string }; +export function UnauthorizedAccessAlert({ userName }: UnauthorizedAccessAlertProps) { + return ( + + + + + + + ); +} +export default UnauthorizedAccessAlert; diff --git a/src/components/authentication/alert/index.ts b/src/components/authentication/alert/index.ts new file mode 100644 index 00000000..3c93fdab --- /dev/null +++ b/src/components/authentication/alert/index.ts @@ -0,0 +1,9 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ +export * from './ErrorInLogoutAlert'; +export * from './ErrorInUserValidationAlert'; +export * from './UnauthorizedAccessAlert'; diff --git a/src/components/authentication/authenticationType.ts b/src/components/authentication/authenticationType.ts new file mode 100644 index 00000000..5b88fe8d --- /dev/null +++ b/src/components/authentication/authenticationType.ts @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { UserManager } from 'oidc-client'; +import { Dispatch } from 'react'; +import { NavigateFunction, Location } from 'react-router-dom'; +import { AuthenticationActions } from '../../redux/actions/authActions'; + +export type AuthenticationRouterErrorState = { + userName?: string; + userValidationError?: { error: Error }; + logoutError?: { error: Error }; + unauthorizedUserInfo?: string; +}; + +export type UserManagerState = { + instance: UserManager | null; + error: string | null; +}; + +export interface AuthenticationRouterProps { + userManager: UserManagerState; + signInCallbackError: Error | null; + authenticationRouterError: AuthenticationRouterErrorState | null; + showAuthenticationRouterLogin: boolean; + dispatch: Dispatch; + navigate: NavigateFunction; + location: Location; +} diff --git a/src/components/authentication/index.ts b/src/components/authentication/index.ts index 1661f129..34f68de1 100644 --- a/src/components/authentication/index.ts +++ b/src/components/authentication/index.ts @@ -5,23 +5,11 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ export { default as AuthenticationRouter } from './AuthenticationRouter'; - -export type { - AuthenticationRouterErrorState, - AuthenticationRouterProps, - UserManagerState, -} from './AuthenticationRouter'; - +export { default as AuthenticationRouterErrorDisplay } from './AuthenticationRouterErrorDisplay'; export { default as Login } from './Login'; - +export { default as Logout } from './Logout'; export { default as SignInCallbackHandler } from './SignInCallbackHandler'; - export { default as SilentRenewCallbackHandler } from './SilentRenewCallbackHandler'; - -export { - initializeAuthenticationDev, - initializeAuthenticationProd, - logout, - dispatchUser, - getPreLoginPath, -} from './utils/authService'; +export * from './alert'; +export * from './authenticationType'; +export * from './utils'; diff --git a/src/components/authentication/utils/authService.ts b/src/components/authentication/utils/authService.ts index d86aafac..77f97b1e 100644 --- a/src/components/authentication/utils/authService.ts +++ b/src/components/authentication/utils/authService.ts @@ -8,7 +8,7 @@ import { Dispatch } from 'react'; import { Location, NavigateFunction } from 'react-router-dom'; import { jwtDecode } from 'jwt-decode'; import { Log, User, UserManager } from 'oidc-client'; -import UserManagerMock from './userManagerMock'; +import { UserManagerMock } from './userManagerMock'; import { AuthenticationActions, resetAuthenticationRouterError, diff --git a/src/components/authentication/utils/index.ts b/src/components/authentication/utils/index.ts new file mode 100644 index 00000000..788fbba1 --- /dev/null +++ b/src/components/authentication/utils/index.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ +export * from './authService'; +export * from './userManagerMock'; diff --git a/src/components/authentication/utils/userManagerMock.ts b/src/components/authentication/utils/userManagerMock.ts index f6f4875a..3ff604af 100644 --- a/src/components/authentication/utils/userManagerMock.ts +++ b/src/components/authentication/utils/userManagerMock.ts @@ -66,7 +66,7 @@ class Events implements UserManagerEvents { removeAccessTokenExpired() {} } -export default class UserManagerMock implements UserManager { +export class UserManagerMock implements UserManager { settings; events; @@ -238,3 +238,5 @@ export default class UserManagerMock implements UserManager { return Promise.resolve({} as SignoutResponse); } } + +export default UserManagerMock;