Skip to content

Commit 615af38

Browse files
capyqcapyq
authored
rework : split AuthenticationRouter into atomic component (#542)
 Signed-off-by: capyq <[email protected]>
1 parent 6457801 commit 615af38

File tree

11 files changed

+188
-103
lines changed

11 files changed

+188
-103
lines changed

‎src/components/authentication/AuthenticationRouter.tsx‎

Lines changed: 13 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,15 @@
55
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
66
*/
77

8-
import { Dispatch, useCallback } from 'react';
9-
import { Location, Navigate, NavigateFunction, Route, Routes } from 'react-router-dom';
10-
import { Alert, AlertTitle, Grid } from '@mui/material';
11-
import { FormattedMessage } from 'react-intl';
12-
import { UserManager } from 'oidc-client';
8+
import { useCallback } from 'react';
9+
import { Navigate, Route, Routes } from 'react-router-dom';
10+
import { Grid } from '@mui/material';
11+
import { AuthenticationRouterProps } from './authenticationType';
12+
import AuthenticationRouterErrorDisplay from './AuthenticationRouterErrorDisplay';
13+
import { handleSigninCallback, handleSilentRenewCallback, login } from './utils/authService';
1314
import SignInCallbackHandler from './SignInCallbackHandler';
14-
import { handleSigninCallback, handleSilentRenewCallback, login, logout } from './utils/authService';
1515
import SilentRenewCallbackHandler from './SilentRenewCallbackHandler';
1616
import Login from './Login';
17-
import Logout from './Logout';
18-
19-
import { AuthenticationActions } from '../../redux/actions/authActions';
20-
21-
export type AuthenticationRouterErrorState = {
22-
userName?: string;
23-
userValidationError?: { error: Error };
24-
logoutError?: { error: Error };
25-
unauthorizedUserInfo?: string;
26-
};
27-
28-
export type UserManagerState = {
29-
instance: UserManager | null;
30-
error: string | null;
31-
};
32-
33-
export interface AuthenticationRouterProps {
34-
userManager: UserManagerState;
35-
signInCallbackError: Error | null;
36-
authenticationRouterError: AuthenticationRouterErrorState | null;
37-
showAuthenticationRouterLogin: boolean;
38-
dispatch: Dispatch<AuthenticationActions>;
39-
navigate: NavigateFunction;
40-
location: Location;
41-
}
4217

4318
function AuthenticationRouter({
4419
userManager,
@@ -50,12 +25,12 @@ function AuthenticationRouter({
5025
location,
5126
}: Readonly<AuthenticationRouterProps>) {
5227
const handleSigninCallbackClosure = useCallback(() => {
53-
if (userManager.instance != null) {
28+
if (userManager.instance) {
5429
handleSigninCallback(dispatch, navigate, userManager.instance);
5530
}
5631
}, [dispatch, navigate, userManager.instance]);
5732
const handleSilentRenewCallbackClosure = useCallback(() => {
58-
if (userManager.instance != null) {
33+
if (userManager.instance) {
5934
handleSilentRenewCallback(userManager.instance);
6035
}
6136
}, [userManager.instance]);
@@ -103,57 +78,11 @@ function AuthenticationRouter({
10378
</Routes>
10479

10580
{authenticationRouterError !== null && (
106-
<>
107-
<Grid item>
108-
<Logout
109-
disabled={userManager.instance === null}
110-
onLogoutClick={() => logout(dispatch, userManager.instance)}
111-
/>
112-
</Grid>
113-
<Grid item xs={4}>
114-
{authenticationRouterError.logoutError != null && (
115-
<Alert severity="error">
116-
<AlertTitle>
117-
<FormattedMessage id="login/errorInLogout" />
118-
</AlertTitle>
119-
<FormattedMessage
120-
id="login/errorInLogoutMessage"
121-
values={{
122-
userName: authenticationRouterError.userName,
123-
}}
124-
/>
125-
<p>{authenticationRouterError.logoutError.error.message}</p>
126-
</Alert>
127-
)}
128-
{authenticationRouterError?.userValidationError != null && (
129-
<Alert severity="error">
130-
<AlertTitle>
131-
<FormattedMessage id="login/errorInUserValidation" />
132-
</AlertTitle>
133-
<FormattedMessage
134-
id="login/errorInUserValidationMessage"
135-
values={{
136-
userName: authenticationRouterError.userName,
137-
}}
138-
/>
139-
<p>{authenticationRouterError.userValidationError.error.message}</p>
140-
</Alert>
141-
)}
142-
{authenticationRouterError?.unauthorizedUserInfo != null && (
143-
<Alert severity="info">
144-
<AlertTitle>
145-
<FormattedMessage id="login/unauthorizedAccess" />
146-
</AlertTitle>
147-
<FormattedMessage
148-
id="login/unauthorizedAccessMessage"
149-
values={{
150-
userName: authenticationRouterError.userName,
151-
}}
152-
/>
153-
</Alert>
154-
)}
155-
</Grid>
156-
</>
81+
<AuthenticationRouterErrorDisplay
82+
dispatch={dispatch}
83+
instance={userManager.instance}
84+
errorState={authenticationRouterError}
85+
/>
15786
)}
15887
</Grid>
15988
);

‎src/components/authentication/AuthenticationRouterErrorDisplay.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { Grid } from '@mui/material';
9+
import { AuthenticationRouterErrorState, AuthenticationRouterProps, UserManagerState } from './authenticationType';
10+
import Logout from './Logout';
11+
import { logout } from './utils';
12+
import { ErrorInLogoutAlert, ErrorInUserValidationAlert, UnauthorizedAccessAlert } from './alert';
13+
14+
type AuthenticationRouterErrorDisplayProps = {
15+
errorState: AuthenticationRouterErrorState;
16+
instance: UserManagerState['instance'];
17+
dispatch: AuthenticationRouterProps['dispatch'];
18+
};
19+
20+
function AuthenticationRouterErrorDisplay({ errorState, instance, dispatch }: AuthenticationRouterErrorDisplayProps) {
21+
return (
22+
<>
23+
<Grid item>
24+
<Logout disabled={instance === null} onLogoutClick={() => logout(dispatch, instance)} />
25+
</Grid>
26+
<Grid item xs={4}>
27+
{errorState.logoutError && (
28+
<ErrorInLogoutAlert userName={errorState.userName} message={errorState.logoutError.error.message} />
29+
)}
30+
{errorState.userValidationError && (
31+
<ErrorInUserValidationAlert
32+
userName={errorState.userName}
33+
message={errorState.userValidationError.error.message}
34+
/>
35+
)}
36+
{errorState.unauthorizedUserInfo && <UnauthorizedAccessAlert userName={errorState.userName} />}
37+
</Grid>
38+
</>
39+
);
40+
}
41+
export default AuthenticationRouterErrorDisplay;

‎src/components/authentication/alert/ErrorInLogoutAlert.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { Alert, AlertTitle } from '@mui/material';
9+
import { FormattedMessage } from 'react-intl';
10+
11+
type ErrorInLogoutAlertProps = {
12+
userName?: string;
13+
message: string;
14+
};
15+
export function ErrorInLogoutAlert({ userName, message }: ErrorInLogoutAlertProps) {
16+
return (
17+
<Alert severity="error">
18+
<AlertTitle>
19+
<FormattedMessage id="login/errorInLogout" />
20+
</AlertTitle>
21+
<FormattedMessage id="login/errorInLogoutMessage" values={{ userName }} />
22+
<p>{message}</p>
23+
</Alert>
24+
);
25+
}
26+
27+
export default ErrorInLogoutAlert;

‎src/components/authentication/alert/ErrorInUserValidationAlert.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { Alert, AlertTitle } from '@mui/material';
9+
import { FormattedMessage } from 'react-intl';
10+
11+
type ErrorInUserValidationAlertProps = {
12+
userName?: string;
13+
message: string;
14+
};
15+
export function ErrorInUserValidationAlert({ userName, message }: ErrorInUserValidationAlertProps) {
16+
return (
17+
<Alert severity="error">
18+
<AlertTitle>
19+
<FormattedMessage id="login/errorInUserValidation" />
20+
</AlertTitle>
21+
<FormattedMessage id="login/errorInUserValidationMessage" values={{ userName }} />
22+
<p>{message}</p>
23+
</Alert>
24+
);
25+
}
26+
export default ErrorInUserValidationAlert;

‎src/components/authentication/alert/UnauthorizedAccessAlert.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { Alert, AlertTitle } from '@mui/material';
9+
import { FormattedMessage } from 'react-intl';
10+
11+
type UnauthorizedAccessAlertProps = { userName?: string };
12+
export function UnauthorizedAccessAlert({ userName }: UnauthorizedAccessAlertProps) {
13+
return (
14+
<Alert severity="info">
15+
<AlertTitle>
16+
<FormattedMessage id="login/unauthorizedAccess" />
17+
</AlertTitle>
18+
<FormattedMessage id="login/unauthorizedAccessMessage" values={{ userName }} />
19+
</Alert>
20+
);
21+
}
22+
export default UnauthorizedAccessAlert;

‎src/components/authentication/alert/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
export * from './ErrorInLogoutAlert';
8+
export * from './ErrorInUserValidationAlert';
9+
export * from './UnauthorizedAccessAlert';

‎src/components/authentication/authenticationType.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { UserManager } from 'oidc-client';
9+
import { Dispatch } from 'react';
10+
import { NavigateFunction, Location } from 'react-router-dom';
11+
import { AuthenticationActions } from '../../redux/actions/authActions';
12+
13+
export type AuthenticationRouterErrorState = {
14+
userName?: string;
15+
userValidationError?: { error: Error };
16+
logoutError?: { error: Error };
17+
unauthorizedUserInfo?: string;
18+
};
19+
20+
export type UserManagerState = {
21+
instance: UserManager | null;
22+
error: string | null;
23+
};
24+
25+
export interface AuthenticationRouterProps {
26+
userManager: UserManagerState;
27+
signInCallbackError: Error | null;
28+
authenticationRouterError: AuthenticationRouterErrorState | null;
29+
showAuthenticationRouterLogin: boolean;
30+
dispatch: Dispatch<AuthenticationActions>;
31+
navigate: NavigateFunction;
32+
location: Location;
33+
}

‎src/components/authentication/index.ts‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,11 @@
55
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
66
*/
77
export { default as AuthenticationRouter } from './AuthenticationRouter';
8-
9-
export type {
10-
AuthenticationRouterErrorState,
11-
AuthenticationRouterProps,
12-
UserManagerState,
13-
} from './AuthenticationRouter';
14-
8+
export { default as AuthenticationRouterErrorDisplay } from './AuthenticationRouterErrorDisplay';
159
export { default as Login } from './Login';
16-
10+
export { default as Logout } from './Logout';
1711
export { default as SignInCallbackHandler } from './SignInCallbackHandler';
18-
1912
export { default as SilentRenewCallbackHandler } from './SilentRenewCallbackHandler';
20-
21-
export {
22-
initializeAuthenticationDev,
23-
initializeAuthenticationProd,
24-
logout,
25-
dispatchUser,
26-
getPreLoginPath,
27-
} from './utils/authService';
13+
export * from './alert';
14+
export * from './authenticationType';
15+
export * from './utils';

‎src/components/authentication/utils/authService.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Dispatch } from 'react';
88
import { Location, NavigateFunction } from 'react-router-dom';
99
import { jwtDecode } from 'jwt-decode';
1010
import { Log, User, UserManager } from 'oidc-client';
11-
import UserManagerMock from './userManagerMock';
11+
import { UserManagerMock } from './userManagerMock';
1212
import {
1313
AuthenticationActions,
1414
resetAuthenticationRouterError,

‎src/components/authentication/utils/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
export * from './authService';
8+
export * from './userManagerMock';

0 commit comments

Comments
 (0)