Skip to content

Commit 91722b4

Browse files
formanforman
committed
Fixed auth config from env
1 parent 7ef786a commit 91722b4

File tree

2 files changed

+128
-97
lines changed

2 files changed

+128
-97
lines changed

‎src/components/UserControl.tsx

+79-78
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
*/
2424

2525
import * as React from 'react';
26-
import Transition from 'react-transition-group/Transition';
2726
import { useAuth } from "react-oidc-context";
2827
import { Theme } from '@mui/material';
2928
import { WithStyles } from '@mui/styles';
3029
import createStyles from '@mui/styles/createStyles';
3130
import withStyles from '@mui/styles/withStyles';
31+
import { deepOrange } from '@mui/material/colors';
3232
import Avatar from '@mui/material/Avatar';
3333
import Button from '@mui/material/Button';
3434
import CircularProgress from '@mui/material/CircularProgress';
@@ -40,45 +40,44 @@ import IconButton from '@mui/material/IconButton';
4040
import Menu from '@mui/material/Menu';
4141
import MenuItem from '@mui/material/MenuItem';
4242
import PersonIcon from '@mui/icons-material/Person';
43-
import i18n from '../i18n';
4443

44+
import i18n from '../i18n';
4545
import { WithLocale } from '../util/lang';
4646
import { Config } from '../config';
4747
import UserProfile from '../components/UserProfile';
48-
import { deepOrange } from '@mui/material/colors';
4948

5049

5150
const styles = (theme: Theme) => createStyles(
52-
{
53-
imageAvatar: {
54-
width: 32,
55-
height: 32,
56-
color: '#fff',
57-
backgroundColor: deepOrange[300],
58-
},
59-
letterAvatar: {
60-
width: 32,
61-
height: 32,
62-
color: '#fff',
63-
backgroundColor: deepOrange[300],
64-
},
65-
signInWrapper: {
66-
margin: theme.spacing(1),
67-
position: 'relative',
68-
},
69-
signInProgress: {
70-
color: deepOrange[300],
71-
position: 'absolute',
72-
top: '50%',
73-
left: '50%',
74-
zIndex: 1,
75-
marginTop: -12,
76-
marginLeft: -12,
77-
},
78-
iconButton: {
79-
padding: 0,
80-
}
51+
{
52+
imageAvatar: {
53+
width: 32,
54+
height: 32,
55+
color: '#fff',
56+
backgroundColor: deepOrange[300],
57+
},
58+
letterAvatar: {
59+
width: 32,
60+
height: 32,
61+
color: '#fff',
62+
backgroundColor: deepOrange[300],
63+
},
64+
signInWrapper: {
65+
margin: theme.spacing(1),
66+
position: 'relative',
67+
},
68+
signInProgress: {
69+
color: deepOrange[300],
70+
position: 'absolute',
71+
top: '50%',
72+
left: '50%',
73+
zIndex: 1,
74+
marginTop: -12,
75+
marginLeft: -12,
76+
},
77+
iconButton: {
78+
padding: 0,
8179
}
80+
}
8281
);
8382

8483
interface UserControlProps extends WithStyles<typeof styles>, WithLocale {
@@ -95,7 +94,9 @@ const UserControlContent: React.FC<UserControlProps> = ({classes, updateAccessTo
9594
}
9695

9796
React.useEffect(() => {
98-
console.log("User changed:", auth.user);
97+
if (process.env.NODE_ENV === 'development') {
98+
console.log("User changed:", auth.user);
99+
}
99100
if (auth.user && auth.user.access_token) {
100101
updateAccessToken(auth.user.access_token);
101102
} else {
@@ -166,57 +167,57 @@ const UserControlContent: React.FC<UserControlProps> = ({classes, updateAccessTo
166167
avatar = <Avatar className={classes.letterAvatar}>{avatarContent}</Avatar>;
167168
}
168169
return (
169-
<React.Fragment>
170-
<IconButton
171-
onClick={handleUserMenuOpen}
172-
aria-controls="user-menu"
173-
aria-haspopup="true"
174-
size="small"
175-
className={classes.iconButton}
176-
>
177-
{avatar}
178-
</IconButton>
179-
<Menu
180-
id="user-menu"
181-
anchorEl={userMenuAnchorEl}
182-
keepMounted
183-
open={Boolean(userMenuAnchorEl)}
184-
onClose={handleUserMenuClose}
185-
>
186-
<MenuItem onClick={handleUserProfileMenuItemClicked}>{i18n.get('Profile')}</MenuItem>
187-
<MenuItem onClick={handleSignOutMenuItemClicked}>{i18n.get('Log out')}</MenuItem>
188-
</Menu>
189-
<Dialog
190-
open={profileDialogOpen}
191-
keepMounted
192-
onClose={handleUserProfileDialogClose}
193-
aria-labelledby="alert-dialog-slide-title"
194-
aria-describedby="alert-dialog-slide-description"
195-
>
196-
<DialogTitle id="alert-dialog-slide-title">{i18n.get('User Profile')}</DialogTitle>
197-
<DialogContent>
198-
<UserProfile userInfo={auth.user.profile}/>
199-
</DialogContent>
200-
<DialogActions>
201-
<Button onClick={handleUserProfileDialogClose} color="primary">
202-
OK
203-
</Button>
204-
</DialogActions>
205-
</Dialog>
206-
</React.Fragment>
170+
<React.Fragment>
171+
<IconButton
172+
onClick={handleUserMenuOpen}
173+
aria-controls="user-menu"
174+
aria-haspopup="true"
175+
size="small"
176+
className={classes.iconButton}
177+
>
178+
{avatar}
179+
</IconButton>
180+
<Menu
181+
id="user-menu"
182+
anchorEl={userMenuAnchorEl}
183+
keepMounted
184+
open={Boolean(userMenuAnchorEl)}
185+
onClose={handleUserMenuClose}
186+
>
187+
<MenuItem onClick={handleUserProfileMenuItemClicked}>{i18n.get('Profile')}</MenuItem>
188+
<MenuItem onClick={handleSignOutMenuItemClicked}>{i18n.get('Log out')}</MenuItem>
189+
</Menu>
190+
<Dialog
191+
open={profileDialogOpen}
192+
keepMounted
193+
onClose={handleUserProfileDialogClose}
194+
aria-labelledby="alert-dialog-slide-title"
195+
aria-describedby="alert-dialog-slide-description"
196+
>
197+
<DialogTitle id="alert-dialog-slide-title">{i18n.get('User Profile')}</DialogTitle>
198+
<DialogContent>
199+
<UserProfile userInfo={auth.user.profile}/>
200+
</DialogContent>
201+
<DialogActions>
202+
<Button onClick={handleUserProfileDialogClose} color="primary">
203+
OK
204+
</Button>
205+
</DialogActions>
206+
</Dialog>
207+
</React.Fragment>
207208
);
208209
} else {
209210
let userButton = (
210-
<IconButton onClick={auth.isLoading ? undefined : handleSignInButtonClicked} size="small">
211-
<PersonIcon/>
212-
</IconButton>
211+
<IconButton onClick={auth.isLoading ? undefined : handleSignInButtonClicked} size="small">
212+
<PersonIcon/>
213+
</IconButton>
213214
);
214215
if (auth.isLoading) {
215216
userButton = (
216-
<div className={classes.signInWrapper}>
217-
{userButton}
218-
<CircularProgress size={24} className={classes.signInProgress}/>
219-
</div>
217+
<div className={classes.signInWrapper}>
218+
{userButton}
219+
<CircularProgress size={24} className={classes.signInProgress}/>
220+
</div>
220221
);
221222
}
222223
return userButton;

‎src/config.ts

+49-19
Original file line numberDiff line numberDiff line change
@@ -76,18 +76,8 @@ export class Config {
7676
}
7777

7878
const name = rawConfig.name || 'default';
79-
let authClient = rawConfig.authClient && {...rawConfig.authClient};
80-
let authClientFromEnv = Config.getAuthClientFromEnv();
81-
if (authClient) {
82-
authClient = {...authClient, ...authClientFromEnv};
83-
} else if (authClientFromEnv.authority && authClientFromEnv.client_id) {
84-
authClient = authClientFromEnv;
85-
}
86-
const server = {...rawDefaultConfig.server, ...rawConfig.server} as ApiServerConfig;
87-
let serverFromEnv = Config.getApiServerFromEnv();
88-
server.id = appParams.get('serverId') || serverFromEnv.id || server.id;
89-
server.name = appParams.get('serverName') || serverFromEnv.name || server.name;
90-
server.url = appParams.get('serverUrl') || serverFromEnv.url || server.url;
79+
const authClient = this.getAuthConfig(rawConfig);
80+
const server = this.getServerConfig(rawConfig);
9181
const compact = parseInt(appParams.get('compact') || '0') !== 0;
9282
const branding = parseBranding(
9383
{
@@ -111,6 +101,50 @@ export class Config {
111101
return Config._instance;
112102
}
113103

104+
private static getAuthConfig(rawConfig: any) {
105+
let authClient = rawConfig.authClient && {...rawConfig.authClient};
106+
let authClientFromEnv = Config.getAuthClientFromEnv();
107+
if (!authClient && authClientFromEnv.authority && authClientFromEnv.clientId) {
108+
authClient = {
109+
authority: authClientFromEnv.authority,
110+
client_id: authClientFromEnv.clientId
111+
};
112+
}
113+
if (authClient) {
114+
if (authClientFromEnv.authority) {
115+
authClient = {
116+
...authClient,
117+
authority: authClientFromEnv.authority
118+
};
119+
}
120+
if (authClientFromEnv.clientId) {
121+
authClient = {
122+
...authClient,
123+
client_id: authClientFromEnv.clientId
124+
};
125+
}
126+
if (authClientFromEnv.audience) {
127+
authClient = {
128+
...authClient,
129+
extraQueryParams: {
130+
...authClient.extraQueryParams,
131+
audience: authClientFromEnv.audience
132+
}
133+
};
134+
}
135+
}
136+
return authClient;
137+
}
138+
139+
private static getServerConfig(rawConfig: any) {
140+
const server = {...rawDefaultConfig.server, ...rawConfig.server} as ApiServerConfig;
141+
let serverFromEnv = Config.getApiServerFromEnv();
142+
server.id = appParams.get('serverId') || serverFromEnv.id || server.id;
143+
server.name = appParams.get('serverName') || serverFromEnv.name || server.name;
144+
server.url = appParams.get('serverUrl') || serverFromEnv.url || server.url;
145+
return server;
146+
}
147+
114148
private static async loadRawConfig(configPath: string) {
115149
let rawConfig = null;
116150
let rawConfigError = null;
@@ -170,15 +204,11 @@ export class Config {
170204
}
171205
}
172206

173-
private static getAuthClientFromEnv(): Partial<AuthClientConfig> {
207+
private static getAuthClientFromEnv() {
174208
const authority = process.env.REACT_APP_OAUTH2_AUTHORITY;
175-
const client_id = process.env.REACT_APP_OAUTH2_CLIENT_ID;
209+
const clientId = process.env.REACT_APP_OAUTH2_CLIENT_ID;
176210
const audience = process.env.REACT_APP_OAUTH2_AUDIENCE;
177-
let authClient: Partial<AuthClientConfig> = {authority, client_id};
178-
if (audience) {
179-
authClient = {...authClient, extraQueryParams: {audience}};
180-
}
181-
return authClient;
211+
return {authority, clientId, audience};
182212
}
183213

184214
private static getApiServerFromEnv(): Partial<ApiServerConfig> {

0 commit comments

Comments
 (0)