fix mgmt-admin login for tentants.

edumeet · Nov 12, 2024 · 4ff3448 · 4ff3448
1 parent 55f2cd2
commit 4ff3448
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 51 deletions.
diff --git a/src/components/settingsdialog/managementsettings/ManagementAdminLoginSettings.tsx b/src/components/settingsdialog/managementsettings/ManagementAdminLoginSettings.tsx
@@ -6,6 +6,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import { adminLogin } from '../../../store/actions/permissionsActions';
 import { useAppDispatch } from '../../../store/hooks';
+import LoginButton from '../../controlbuttons/LoginButton';
 
 export default function SignIn() {
 
@@ -29,7 +30,7 @@ export default function SignIn() {
 
 	return (
 		<>
-			<Container component="main" maxWidth="xs">
+			<Container component="main">
 				<CssBaseline />
 				<Box
 					sx={{
@@ -40,7 +41,11 @@ export default function SignIn() {
 					}}
 				>
 					<img src='/images/logo.edumeet.svg' />
-
+					<hr/>
+					<Box>
+						<LoginButton />
+					</Box>
+					<hr/>
 					<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
 						<TextField
 							margin="normal"

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,7 +16,6 @@ import { setLocale } from './store/actions/localeActions';
 import { CssBaseline } from '@mui/material';
 import { Logger } from './utils/Logger';
 import { SnackbarProvider } from 'notistack';
-import StyledBackground from './components/StyledBackground';
 import Management from './views/management/Management';
 
 const ErrorBoundary = lazy(() => import('./views/errorboundary/ErrorBoundary'));
@@ -47,9 +46,7 @@ const router = createBrowserRouter(
 			<Route path='/' element={<Suspense><LandingPage /></Suspense>} errorElement={<Suspense><ErrorBoundary /></Suspense>} />
 			<Route path='/mgmt-admin' element={<Suspense>
 				<SnackbarProvider>
-					<StyledBackground>
-						<Management />
-					</StyledBackground>
+					<Management />
 				</SnackbarProvider>
 			</Suspense>} errorElement={<Suspense><ErrorBoundary /></Suspense>} />
 

diff --git a/src/store/actions/mgmtActions.tsx b/src/store/actions/mgmtActions.tsx
@@ -0,0 +1,38 @@
+import { AppThunk } from '../store';
+import { permissionsActions } from '../slices/permissionsSlice';
+import { Logger } from '../../utils/Logger';
+
+const logger = new Logger('listenerActions');
+
+let messageListener: (event: MessageEvent) => void;
+
+export const startMGMTListeners = (): AppThunk<Promise<void>> => async (
+	dispatch,
+	getState,
+	{ signalingService, managementService }
+): Promise<void> => {
+	logger.debug('startListeners()');
+
+	messageListener = async ({ data }: MessageEvent) => {
+		if (data.type === 'edumeet-login') {
+			const { data: token } = data;
+
+			await (await managementService).authentication.setAccessToken(token);
+
+			dispatch(permissionsActions.setToken(token));
+			dispatch(permissionsActions.setLoggedIn(true));
+
+			if (getState().signaling.state === 'connected')
+				await signalingService.sendRequest('updateToken', { token }).catch((e) => logger.error('updateToken request failed [error: %o]', e));
+		}
+	};
+
+	window.addEventListener('message', messageListener);
+};
+
+export const stopMGMTListeners = (): AppThunk<Promise<void>> => async (
+
+): Promise<void> => {
+	logger.debug('stopListeners()');
+	window.removeEventListener('message', messageListener);
+};
diff --git a/src/views/management/Management.tsx b/src/views/management/Management.tsx
@@ -29,18 +29,22 @@ import PeopleOutlineIcon from '@mui/icons-material/PeopleOutline';
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
 import { getUserData } from '../../store/actions/managementActions';
-import { useAppDispatch } from '../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import PermissionTable from '../../components/managementservice/permisssion/Permission';
 import InfoIcon from '@mui/icons-material/Info';
 import TenantAdminTable from '../../components/managementservice/tenants/TenantAdmin';
 import TenantOwnerTable from '../../components/managementservice/tenants/TenantOwner';
+import { checkJWT, logout } from '../../store/actions/permissionsActions';
+import SignIn from '../../components/settingsdialog/managementsettings/ManagementAdminLoginSettings';
+import { startMGMTListeners, stopMGMTListeners } from '../../store/actions/mgmtActions';
 
 /* import InboxIcon from '@mui/icons-material/MoveToInbox'; */
 /* import MailIcon from '@mui/icons-material/Mail'; */
 
 const drawerWidth = 300;
 
 export default function ManagementUI(/* props: Props */) {
+
 	const dispatch = useAppDispatch();
 
 	const [ mobileOpen, setMobileOpen ] = React.useState(false);
@@ -51,45 +55,63 @@ export default function ManagementUI(/* props: Props */) {
 
 	const [ selectedComponent, setSelectedComponent ] = useState('');
 	const [ username, setUsername ] = useState('');
+	let loggedIn = useAppSelector((state) => state.permissions.loggedIn);
 
 	useEffect(() => {
+		dispatch(startMGMTListeners());
+
+		dispatch(checkJWT()).then(() => {
+			loggedIn = useAppSelector((state) => state.permissions.loggedIn);
+		});
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		dispatch(getUserData()).then((tdata: any) => {
 			if (tdata) {
 				setUsername(tdata.user.email);				
 			}
 		});
-
+
+		return () => {
+			dispatch(stopMGMTListeners());
+		};
 	}, []);
 
 	// Function to render the selected component in the placeholder
 	const renderComponent = () => {
-		switch (selectedComponent) {
-			case 'tenant':
-				return <>
-					<TenantTable />
-					<TenantFQDNTable />
-					<TenantOAuthTable />
-					<TenantOwnerTable />
-					<TenantAdminTable />
-				</>;
-			case 'tenant-fqdn':
-				return <TenantFQDNTable />;
-			case 'tenant-oauth':
-				return <TenantOAuthTable />;
-			case 'room':
-				return <RoomTable />;
-			case 'user':
-				return <UserTable />;
-			case 'group':
-				return <GroupTable />;
-			case 'role':
-				return <RoleTable />;
-			case 'permission':
-				return <PermissionTable />;
-			default:
-				return <div style={{ padding: '18px' }}>Select an item to load a component</div>;
+
+		if (loggedIn) {
+			switch (selectedComponent) {
+				case 'login':
+					return <div style={{ minWidth: '400px' }}>
+						<SignIn />
+					</div>;
+				case 'tenant':
+					return <>
+						<TenantTable />
+						<TenantFQDNTable />
+						<TenantOAuthTable />
+						<TenantOwnerTable />
+						<TenantAdminTable />
+					</>;
+				case 'tenant-fqdn':
+					return <TenantFQDNTable />;
+				case 'tenant-oauth':
+					return <TenantOAuthTable />;
+				case 'room':
+					return <RoomTable />;
+				case 'user':
+					return <UserTable />;
+				case 'group':
+					return <GroupTable />;
+				case 'role':
+					return <RoleTable />;
+				case 'permission':
+					return <PermissionTable />;
+				default:
+					return <Box sx={{ minWidth: '400px' }}>Select an item to load a component </Box>;
+			}
+		} else {
+			return <SignIn />;
 		}
 	};
 
@@ -102,18 +124,22 @@ export default function ManagementUI(/* props: Props */) {
 					<img src='/images/logo.edumeet.svg' />
 				</ListItem>
 
-				<ListItem key={'{username}'} disablePadding >
-
+				<ListItem key={'{username}'} disablePadding onClick={
+					() => { if (!loggedIn) { setSelectedComponent('login'); } }
+				}>
 					<ListItemButton>
 						<ListItemIcon>
 							<PersonOutlineIcon/>
 						</ListItemIcon>
-						<ListItemText primary={`${username}`} />
+						<ListItemText primary={username} />
 					</ListItemButton>
 				</ListItem>
 				<ListItem key={'Logout'} disablePadding onClick={
 					async () => {
-						window.location.reload();
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						dispatch(logout()).then(() => {
+							window.location.reload();	
+						});
 					}
 				}>
 					<ListItemButton>
@@ -190,18 +216,6 @@ export default function ManagementUI(/* props: Props */) {
 				</ListItem>
 			</List>
 			<Divider />
-			{/* <List>
-				{[ 'General', 'Logs', 'About us' ].map((text, index) => (
-					<ListItem key={text} disablePadding>
-						<ListItemButton>
-							<ListItemIcon>
-								{index % 2 === 0 ? <InfoIcon /> : <MailIcon />}
-							</ListItemIcon>
-							<ListItemText primary={text} />
-						</ListItemButton>
-					</ListItem>
-				))}
-			</List> */}
 		</div >
 	);
 
@@ -212,6 +226,7 @@ export default function ManagementUI(/* props: Props */) {
 				<CssBaseline />
 				<AppBar
 					position="fixed"
+					style={{ backgroundColor: '#9C298C' }}
 					sx={{
 						width: { sm: `calc(100% - ${drawerWidth}px)` },
 						ml: { sm: `${drawerWidth}px` },
@@ -266,10 +281,11 @@ export default function ManagementUI(/* props: Props */) {
 				</Box>
 				<Box
 					component="main"
-					sx={{ flexGrow: 1, p: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+
+					sx={{ flexGrow: 1, p: 1, width: { xs: 'calc(100%)', sm: 'calc(100%)' } }}
 				>
 					<Toolbar />
-					<div style={{ background: 'white', padding: '2px' }}>
+					<div style={{ background: 'white', padding: '2px', maxWidth: '100%', minWidth: '300px' }}>
 						{renderComponent()}
 					</div>