added config error page, fixed browser error display

app/src/components/ConfigDocumentation.tsx

@@ -18,7 +18,7 @@ import Button from '@material-ui/core/Button';
 
 import { configDocs } from '../config';
 
-const styles = (theme: any) =>
+const styles = () =>
 	({
 		table : {
 			minWidth : 700
@@ -29,9 +29,6 @@ const styles = (theme: any) =>
 		cell : {
 			maxWidth : '25vw',
 			overflow : 'auto'
-		},
-		list : {
-			backgroundColor : theme.palette.background.paper
 		}
 	});
 

app/src/components/ConfigError.tsx

@@ -0,0 +1,75 @@
+import React from 'react'; // eslint-disable-line no-use-before-define
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import Grid from '@material-ui/core/Grid';
+import ErrorIcon from '@material-ui/icons/Error';
+import Button from '@material-ui/core/Button';
+
+const styles = () =>
+	({
+		error : {
+			color : 'red'
+		}
+	});
+
+const ConfigError = ({
+	classes,
+	configError
+}: {
+	classes : any;
+	configError : string;
+}) =>
+{
+	return (
+		<Dialog
+			open
+			scroll={'body'}
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			<DialogTitle id='form-dialog-title'>
+				<ErrorIcon className={classes.errorAvatar} color='error'/>
+				<FormattedMessage
+					id='configError.title'
+					defaultMessage='Configuration error'
+				/>
+			</DialogTitle>
+			<DialogContent dividers>
+				<FormattedMessage
+					id='configError.bodyText'
+					defaultMessage='The Edumeet configuration contains errors:'
+				/>
+				<Grid container spacing={2} alignItems='center'>
+					<Grid item>
+						<p className={classes.error}>{configError}</p>
+					</Grid>
+					<Button size='small' onClick={(e) =>
+					{
+						e.preventDefault();
+						window.location.href = '/config';
+					}}
+					>
+						<FormattedMessage
+							id='configError.link'
+							defaultMessage='See the configuration documentation'
+						/>
+					</Button>
+				</Grid>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+ConfigError.propTypes =
+{
+	classes     : PropTypes.object.isRequired,
+	configError : PropTypes.string.isRequired
+};
+
+export default withStyles(styles)(ConfigError);

app/src/config.ts

@@ -548,12 +548,22 @@ function formatDocs(docs: any, property: string | null, schema: any)
 	return docs;
 }
 
-const configDocs = formatDocs({}, null, configSchema.getSchema());
+let config: any = {};
+let configError = '';
 
 // Perform validation
-configSchema.validate({ allowed: 'strict' });
+try
+{
+	configSchema.validate({ allowed: 'strict' });
+	config = configSchema.getProperties();
+}
+catch (error: any)
+{
+	configError = error.message;
+}
 
-const config = configSchema.getProperties();
+// format docs
+const configDocs = formatDocs({}, null, configSchema.getSchema());
 
 // eslint-disable-next-line
 console.log('Using config:', config, configDocs);
@@ -564,5 +574,6 @@ console.log('Using config:', config, configDocs);
 export {
 	configSchema,
 	config,
+	configError,
 	configDocs
 };

app/src/index.js

@@ -17,6 +17,7 @@ import deviceInfo from './deviceInfo';
 import * as meActions from './actions/meActions';
 import UnsupportedBrowser from './components/UnsupportedBrowser';
 import ConfigDocumentation from './components/ConfigDocumentation';
+import ConfigError from './components/ConfigError';
 import JoinDialog from './components/JoinDialog';
 import LoginDialog from './components/AccessControl/LoginDialog';
 import LoadingView from './components/Loader/LoadingView';
@@ -30,13 +31,14 @@ import { detectDevice } from 'mediasoup-client';
 
 import './index.css';
 
-import { config } from './config';
+import { config, configError } from './config';
 
 const App = LazyPreload(() => import(/* webpackChunkName: "app" */ './components/App'));
 
 // const cache = createIntlCache();
 
-const supportedBrowsers={
+const supportedBrowsers =
+{
 	'windows' : {
 		'internet explorer' : '>12',
 		'microsoft edge'    : '>18'
@@ -144,14 +146,48 @@ function run()
 	if (unsupportedBrowser || webrtcUnavailable)
 	{
 		render(
-			<MuiThemeProvider theme={theme}>
-				<IntlProvider value={intl}>
-					<UnsupportedBrowser
-						webrtcUnavailable={webrtcUnavailable}
-						platform={device.platform}
-					/>
-				</IntlProvider>
-			</MuiThemeProvider>,
+			<Provider store={store}>
+				<MuiThemeProvider theme={theme}>
+					<IntlProvider value={intl}>
+						<UnsupportedBrowser
+							webrtcUnavailable={webrtcUnavailable}
+							platform={device.platform}
+						/>
+					</IntlProvider>
+				</MuiThemeProvider>
+			</Provider>,
+			document.getElementById('edumeet')
+		);
+
+		return;
+	}
+
+	if (basePath === '/config')
+	{
+		render(
+			<Provider store={store}>
+				<MuiThemeProvider theme={theme}>
+					<IntlProvider value={intl}>
+						<ConfigDocumentation />
+					</IntlProvider>
+				</MuiThemeProvider>
+			</Provider>,
+			document.getElementById('edumeet')
+		);
+
+		return;
+	}
+
+	if (configError)
+	{
+		render(
+			<Provider store={store}>
+				<MuiThemeProvider theme={theme}>
+					<IntlProvider value={intl}>
+						<ConfigError configError={configError} />
+					</IntlProvider>
+				</MuiThemeProvider>
+			</Provider>,
 			document.getElementById('edumeet')
 		);
 
@@ -193,13 +229,6 @@ function run()
 											<Switch>
 												<Route exact path='/' component={JoinDialog} />
 												<Route exact path='/login_dialog' component={LoginDialog} />
-												<Route exact path='/config-doc'
-													render={(props) => (
-														<ConfigDocumentation
-															platform={device.platform} {...props}
-														/>
-													)}
-												/>
 												<Route path='/:id' component={App} />
 											</Switch>
 										</React.Fragment>

compose/config/edumeet-app-config.js

@@ -2,5 +2,5 @@
 var config =
 {
 	developmentPort : 8443,
-	productionPort  : 3443,
+	productionPort  : 3443
 };