rework : split AuthenticationRouter into atomic component (#542)

Signed-off-by: capyq <[email protected]>

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<AuthenticationActions>;
-    navigate: NavigateFunction;
-    location: Location;
-}
 
 function AuthenticationRouter({
     userManager,
@@ -50,12 +25,12 @@ function AuthenticationRouter({
     location,
 }: Readonly<AuthenticationRouterProps>) {
     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({
             </Routes>
 
             {authenticationRouterError !== null && (
-                <>
-                    <Grid item>
-                        <Logout
-                            disabled={userManager.instance === null}
-                            onLogoutClick={() => logout(dispatch, userManager.instance)}
-                        />
-                    </Grid>
-                    <Grid item xs={4}>
-                        {authenticationRouterError.logoutError != null && (
-                            <Alert severity="error">
-                                <AlertTitle>
-                                    <FormattedMessage id="login/errorInLogout" />
-                                </AlertTitle>
-                                <FormattedMessage
-                                    id="login/errorInLogoutMessage"
-                                    values={{
-                                        userName: authenticationRouterError.userName,
-                                    }}
-                                />
-                                <p>{authenticationRouterError.logoutError.error.message}</p>
-                            </Alert>
-                        )}
-                        {authenticationRouterError?.userValidationError != null && (
-                            <Alert severity="error">
-                                <AlertTitle>
-                                    <FormattedMessage id="login/errorInUserValidation" />
-                                </AlertTitle>
-                                <FormattedMessage
-                                    id="login/errorInUserValidationMessage"
-                                    values={{
-                                        userName: authenticationRouterError.userName,
-                                    }}
-                                />
-                                <p>{authenticationRouterError.userValidationError.error.message}</p>
-                            </Alert>
-                        )}
-                        {authenticationRouterError?.unauthorizedUserInfo != null && (
-                            <Alert severity="info">
-                                <AlertTitle>
-                                    <FormattedMessage id="login/unauthorizedAccess" />
-                                </AlertTitle>
-                                <FormattedMessage
-                                    id="login/unauthorizedAccessMessage"
-                                    values={{
-                                        userName: authenticationRouterError.userName,
-                                    }}
-                                />
-                            </Alert>
-                        )}
-                    </Grid>
-                </>
+                <AuthenticationRouterErrorDisplay
+                    dispatch={dispatch}
+                    instance={userManager.instance}
+                    errorState={authenticationRouterError}
+                />
             )}
         </Grid>
     );

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 (
+        <>
+            <Grid item>
+                <Logout disabled={instance === null} onLogoutClick={() => logout(dispatch, instance)} />
+            </Grid>
+            <Grid item xs={4}>
+                {errorState.logoutError && (
+                    <ErrorInLogoutAlert userName={errorState.userName} message={errorState.logoutError.error.message} />
+                )}
+                {errorState.userValidationError && (
+                    <ErrorInUserValidationAlert
+                        userName={errorState.userName}
+                        message={errorState.userValidationError.error.message}
+                    />
+                )}
+                {errorState.unauthorizedUserInfo && <UnauthorizedAccessAlert userName={errorState.userName} />}
+            </Grid>
+        </>
+    );
+}
+export default AuthenticationRouterErrorDisplay;

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 (
+        <Alert severity="error">
+            <AlertTitle>
+                <FormattedMessage id="login/errorInLogout" />
+            </AlertTitle>
+            <FormattedMessage id="login/errorInLogoutMessage" values={{ userName }} />
+            <p>{message}</p>
+        </Alert>
+    );
+}
+
+export default ErrorInLogoutAlert;

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 (
+        <Alert severity="error">
+            <AlertTitle>
+                <FormattedMessage id="login/errorInUserValidation" />
+            </AlertTitle>
+            <FormattedMessage id="login/errorInUserValidationMessage" values={{ userName }} />
+            <p>{message}</p>
+        </Alert>
+    );
+}
+export default ErrorInUserValidationAlert;

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 (
+        <Alert severity="info">
+            <AlertTitle>
+                <FormattedMessage id="login/unauthorizedAccess" />
+            </AlertTitle>
+            <FormattedMessage id="login/unauthorizedAccessMessage" values={{ userName }} />
+        </Alert>
+    );
+}
+export default UnauthorizedAccessAlert;

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';

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<AuthenticationActions>;
+    navigate: NavigateFunction;
+    location: Location;
+}

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';

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,

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';

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;